Card • Natura11y
Jump to main contentJump to website footer
Macro photo of pink flower

Photo by David Clode

Card

Introduction

The Natura11y card component organizes and displays content that users can interact with.

The Card Component

Here's an example of a basic 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-md">
                <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 class is required. The .border utility class is optional. It provides the card's outer border.

3-5

The .card__head selector is optional. It holds the card's small title. The .border-bottom utility class is optional. 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 elements.

16-29

The .card__foot selector is optional. It holds the card's actionable buttons and links. The .border-top utility class is optional. It provides the card footer's top border.

Including Media

To include an image or video within a card, add the .card__media child selector to the card component. This selector is optional.

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">

            <div class="card__media">
                <img src="https://via.placeholder.com/800x400" alt="Placeholder" />
            </div>
        
            <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>
                        <button class="button button--outline">
                            <span class="button__text">
                                Visit Wikipedia
                            </span>
                        </button>
                    </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.

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.

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.

Horizontal Card

The horizontal card modifier (.card--horizontal) provides a layout where an image is placed next to contextual content, creating a side-by-side card. This design is intended to offer simple flexibility, especially in scenarios where the image is mostly vertical (portrait orientation).

Tropical flowers

Stellaria graminea

Stellaria graminea is a species of flowering plant in the family Caryophyllaceae.


        <div class="card card--horizontal 👈 border font-size-md">

            <div className="card__media">
                <img src="https://via.placeholder.com/200x300" alt="Placeholder" />
            </div>

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

            <div class="card__body">
                <h2 class="h5">Stellaria graminea</h2>
                <p>Stellaria graminea is a species of flowering plant in the family Caryophyllaceae known by these common names:</p>
            </div>

            <div class="card__foot border-top font-size-sm 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" href="#1">
                            Visit Wikipedia
                        </a>
                    </li>
                </ul>
            </div>
            
        </div>
Figure 3

Flexibility of the Horizontal Card Component

The horizontal card component automatically adjusts its layout based on the presence of different child elements, such as headers, footers, and body content. This behavior allows the card to be versatile in various use cases:

With Header and Footer

When both a header and a footer are present, the card gracefully accommodates these elements by adjusting the space allocated for the image and the content, ensuring a balanced and cohesive appearance.

Tropical flowers

Stellaria graminea

Stellaria graminea is a species of flowering plant in the family Caryophyllaceae.

With Only a Header

If the card only includes a header and body content, the layout still maintains a clear separation between the image and text, while providing ample space for the content to be the focal point.

Tropical flowers

Stellaria graminea

Stellaria graminea is a species of flowering plant in the family Caryophyllaceae.

Visit Wikipedia

Without Header or Footer

Even in its most minimal configuration, with just the image and body content, the horizontal card remains aesthetically pleasing and functional.

Stellaria graminea

Stellaria graminea is a species of flowering plant in the family Caryophyllaceae.

Visit Wikipedia