Skip Navigation

Photo by Karl Anderson  on Unsplash

Cards

Natura11y's card component contains and groups contextual, actionable content.

The Card Component

The example below provides a rudimentary card component.

Tropical flowers

Gustavia superba

Gustavia superba is an understory tree that grows in Central and north-western South America. Common names include membrillo, sachamango and heaven lotus.

<div class="card border">

    <div class="card__head border-bottom">
        <p>Tropical flowers</p>
    </div>

    <div class="card__body">
        <h2 class="h4">
            Gustavia superba
        </h2>
        <p>
            Gustavia superba is an understory tree that grows in <a href="#1">Central</a> and north-western <a href="#1">South America</a>. Common names include membrillo, sachamango and heaven lotus.
        </p>
    </div>

    <div class="card__foot border-top font-size-sm">
        <ul class="nav nav--horizontal justify-content-between">
            <li>
                <a href="#1">
                    Secondary Action
                </a>
            </li>
            <li>
                <a class="button button--outline" href="#1">
                    Primary Action
                </a>
            </li>
        </ul>
    </div>

</div>
Figure 1
Line #Details
1

The parent .card selector is required.

The .border utility class not required.

It provides the card's outer border.

3-5

The .card__head selector is not required.

It holds the card's small title.

The .border-bottom utility class is not required.

It provides the card header's bottom border.

7-14

The .card__body selector is required.

It holds the card's main message. Cards can have multiple .card__body selectors.

16-29

The .card__foot selector is not required.

It selector holds the card's actionable buttons and links.

The .border-top utility class is not required.

It provides the card footer's top border.

Including Images

Include an image within a card. Add the <img> as a sibling of .card__body. Images do not need a class.

Stellaria graminea

Stellaria graminea is a species of flowering plant in the family Caryophyllaceae known by these common names:

  • common starwort
  • lesser stitchwort
  • grass-leaved stitchwort
  • grass-like starwort
<div class="card border">

    <img src="https://via.placeholder.com/800x400" alt="Placeholder" />

    <div class="card__body">
        <h2 class="h4">Stellaria graminea</h2>
        <p>
            Stellaria graminea is a species of flowering plant in the family Caryophyllaceae known by these common names:
        </p>
        <ul>
            <li>
                <em>common starwort</em>
            </li>
            <li>
                <em>lesser stitchwort</em>
            </li>
            <li>
                <em>grass-leaved stitchwort</em>
            </li>
            <li>
                <em>grass-like starwort</em>
            </li>
        </ul>
    </div>

    <div class="card__foot border-top font-size-md text-color-link">
        <ul class="nav nav--horizontal justify-content-between">
            <li>
                <a href="#1">
                    Search Images
                </a>
            </li>
            <li>
                <a class="button button--outline rounded-pill" href="#1">
                    Visit Wikipedia
                </a>
            </li>
        </ul>
    </div>

</div>
Figure 2

Cards Within Grids

It's common to display cards within a grid component. When doing so, the card footer aligns to the bottom. Consider the following example. Each card has a different character count, while their actionable footers remain aligned.

Prunus mume

Prunus mume is an East Asian and Southeast Asian tree species classified in the Armeniaca section of the genus Prunus subgenus Prunus.

Wikipedia

Eschscholzia californica

Eschscholzia californica, the California poppy, golden poppy, California sunlight or cup of gold, is a species of flowering plant in the family Papaveraceae, native to the United States and Mexico.

Wikipedia

Geranium pratense

Geranium pratense, the meadow crane's-bill or meadow geranium, is a species of flowering plant in the family Geraniaceae, native to Europe and Asia.

Wikipedia

Related CSS Variables

Further customize Cards by redefining any of their related CSS variables as shown below.

.card {
    --card-padding-x: var(--spacer-2);
    --card-padding-y: var(--spacer-2);
}