Introduction
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-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>
Line # | Details |
---|---|
1 | The parent The It provides the card's outer border. |
3-5 | The It holds the card's small title. The It provides the card header's bottom border. |
7-14 | The It holds the card's main message. Cards can have multiple |
16-29 | The It selector holds the card's actionable buttons and links. The It provides the card footer's top border. |
Including Images
Include an image within a card. Add the <img>
tag as a sibling of .card__body
. Images do not need a class.
![](/static/142c1dd6348e9b089a39be9ea87cf75e/c614a/card-example-01.jpg)
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>
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.
![](/static/9547369b28d5545e45c9dfd0bc672784/c614a/card-example-02.jpg)
Prunus mume
Prunus mume is an East Asian and Southeast Asian tree species classified in the Armeniaca section of the genus Prunus subgenus Prunus.
![](/static/1bf05c7fa0397a57ee2ae31efa1af0d9/c614a/card-example-03.jpg)
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.
![](/static/b8af0c2d858d9927596c023c2f445986/c614a/card-example-04.jpg)
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.