Introduction
Natura11y's card component contains and groups contextual, actionable content.
The Card Component
The example below provides a rudimentary card component.
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.
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.