Natura11y's card component contains and groups contextual, actionable content.
The Card Component
The example below provides a rudimentary card component.
It provides the card's outer border.
It holds the card's small title.
It provides the card header's bottom border.
It holds the card's main message. Cards can have multiple
It selector holds the card's actionable buttons and links.
It provides the card footer's top border.
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 is an East Asian and Southeast Asian tree species classified in the Armeniaca section of the genus Prunus subgenus Prunus.
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, the meadow crane's-bill or meadow geranium, is a species of flowering plant in the family Geraniaceae, native to Europe and Asia.