Commentary

Cards provide flexible and extensible content containers. Contained in a card are four types of containers for a) titles, b) image area, c) body and d) footer for, typically, buttons or links. These interior containers are optional and their order can be sorted based your needs. These can be ordered any way you like.

  • card > header contains a title and optional sub-title text.
  • card > figure is typically a figure HTML tag that holds an img HTML tag. The img tag can use any of the aspect ratio controls to adjust image size and fit;
  • card > div is a basic container that contains HTML elements, Goldilocks-CSS elements or components;
  • card > footer is a flexbox controlled container that would typically contain call-to-action elements.

Usage

Classes:
.card Defines main container for breadcrumb, typically nav HTML tag is used at top level.
.card > header Optional header setup. Is the main header block of the card.
.card > header > hx Is the title of the card inside the header HTML tag. Any h2, h3, h4, h5, h6 HTML tags are used here.
.card > header > p Is the subtitle of the card inside the header HTML tag associated with the title.
.card > figure Optional image holder.
.card > div Optional main body for textual information.
.card > footer Optional footer area for calls to action.
Dependencies:
File: card.css
Variables: --border-main, --radius-comp, --mar-vert, --shadow, --size-5, --text-comp, --text-darker, --text-light, --weight-bold, --weight-semibold

Examples

Basic Card no Image

Component Name

Sub-title for component

Card body child > Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris. @goldilocks. 


                <article class="card">
                    <header>
                        <h4>Component Name</h4>
                        <p>Sub-title for component</p>
                    </header>

                    <div>
                        <p>Card body child >
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                            Phasellus nec iaculis mauris.
                            <a href="#">@goldilocks</a>.
                        </p>

                        <time datetime="2022-05-15T19:00">May 15, 2022</time>
                    </div>

                    <footer>
                        <button class="is-primary has-hover">Save</button>
                        <button class="is-danger-outlined has-hover">Delete</button>
                    </footer>
                </article>

Card with Image

Row of houses

Component Name

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris. @goldilocks. 


                <article class="card">
                    <header>
                        <h4>Component Name</h4>
                    </header>

                    <figure>
                        <img class="has-aspect-3x1" src="https://zaphodbb-pm.github.io/goldilocks-css/img/demo/gl-main1.png" alt="Row of houses">
                    </figure>

                    <div>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                            Phasellus nec iaculis mauris.
                            <a href="#">@goldilocks</a>.
                        </p>

                        <time datetime="2022-05-15T19:00">May 15, 2022</time>
                    </div>

                    <footer>
                        <button class="is-primary has-hover">Save</button>
                        <button class="is-danger-outlined has-hover">Delete</button>
                    </footer>
                </article>

Card with end Image and no Footer

Component Name

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris. @goldilocks.

Row of houses 

                <article class="card">
                    <header>
                        <h4>Component Name</h4>
                    </header>

                    <div>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                            Phasellus nec iaculis mauris.
                            <a href="#">@goldilocks</a>.
                        </p>
                    </div>

                    <figure>
                        <img class="has-aspect-3x1" src="https://zaphodbb-pm.github.io/goldilocks-css/img/demo/gl-main1.png" alt="Row of houses">
                    </figure>
                </article>

Card with Comment Style Media in Body, no Image or Footer

Component Name

Sub-title for component

Male avatar

John Smith

@johnsmith

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris. @goldilocks. 


                <article class="card">
                    <header>
                        <h4>Component Name</h4>
                        <p>Sub-title for component</p>
                    </header>

                    <div>
                        <div class="comments space-element-vert">
                            <figure class="has-width-4rem">
                                <img src="https://zaphodbb-pm.github.io/goldilocks-css/img/demo/gl-man1.png" alt="Male avatar">
                            </figure>

                            <div>
                                <p class="text is-size-5">John Smith</p>
                                <p class="subtext is-size-6">@johnsmith</p>
                            </div>
                        </div>

                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                            Phasellus nec iaculis mauris.
                            <a href="#">@goldilocks</a>.
                        </p>
                    </div>
                </article>