Card

Cards are versatile containers used to group related information in a flexible layout. They can include text, images, actions, and metadata, making them perfect for dashboards, previews, and listings.

Usage:

Content Organization – Group related information for clarity.
Modular Layouts – Easily arrange elements like headers, bodies, and footers.
Flexible Components – Cards can be used for lists, profiles, notifications, and more.

Default Card

A basic card consists of a container that holds content. This is the minimal structure required for a card.

Body - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<div class="card">
  <div class="card__body">...</div>
</div>

Card with Header & Footer

Cards can include headers for titles and footers for additional actions or metadata.

<div class="card">
  <div class="card__header">...</div>
  <div class="card__body">...</div>
  <div class="card__footer">...</div>
</div>

Card List

A list of cards is useful for displaying structured data, such as items in a collection.

Iron Man
After the demonstration of the new "Jericho" missile, the convoy is ambushed and Stark is critically wounded by a missile used by the attackers: one of his company's own.
The Incredible Hulk
At Culver University in Virginia, General Thaddeus "Thunderbolt" Ross meets with Dr. Bruce Banner, the colleague and boyfriend of his daughter Betty, regarding an experiment that Ross claims is meant to make humans immune to gamma radiation.
Iron Man 2
In Russia, the media covers Tony Stark's disclosure of his identity as Iron Man. Ivan Vanko, whose father, Anton Vanko, a former Stark Industries employee, has just died, sees this and begins building a miniature arc reactor similar to Stark's.
Thor
In 965 AD, Odin, king of Asgard, wages war against the Frost Giants of Jotunheim and their leader Laufey, to prevent them from conquering the Nine Realms, starting with Earth.
Captain America
In New York City, Steve Rogers is rejected for World War II military recruitment due to his various health and physical problems.
The Avengers
The Asgardian Loki encounters the Other, the leader of an extraterrestrial race known as the Chitauri.
Guardians of the Galaxy
In 1988, following his mother's death, a young Peter Quill is abducted from Earth by a group of alien thieves and smugglers called the Ravagers led by Yondu Udonta.

<ol class="cards">
  <li>
    <div class="card__header">...</div>
    <div class="card__body">...</div>
  </li>
</ol>