Cards

Cards are a convenient means of displaying content composed of different types of objects. They’re also well-suited for presenting similar objects whose size or supported actions can vary considerably, like photos with captions of variable length.

Card Examples

Basic Card

Cards are very good at conveying small bits of information, and cards are convenient because they require little markup to use effectively.

Learn more

html

<div class="card">
  <div class="text">
    <h3>Basic Card</h3>
    <p>Cards are very good at conveying small bits of information, and cards are convenient because they require little markup to use effectively.</p>
    <p class="icon"><a href="#!">Learn more<span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M16.172 11l-5.364-5.364 1.414-1.414L20 12l-7.778 7.778-1.414-1.414L16.172 13H4v-2z"/></svg></span></a></p>
  </div>
</div>

Example of image used in card layout — Bratislava by David Cohen

Picture Card

Cards are very good at conveying small bits of information, and cards are convenient because they require little markup to use effectively.

Learn more

html

<div class="card">
  <figure>
    <img src="../../assets/images/bratislava-2x.jpg" srcset="../../assets/images/bratislava-1x.jpg 1x, ../../assets/images/bratislava-2x.jpg 2x" alt="Example of image used in card layout">
    <figcaption><cite><a href="https://www.stockio.com/free-photo/bratislava-2" target="_blank">Bratislava</a> by David Cohen</cite></figcaption>
  </figure>
  <div class="text">
    <h3>Picture Card</h3>
    <p>Cards are very good at conveying small bits of information, and cards are convenient because they require little markup to use effectively.</p>
    <p class="icon"><a href="#!">Learn more<span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M16.172 11l-5.364-5.364 1.414-1.414L20 12l-7.778 7.778-1.414-1.414L16.172 13H4v-2z"/></svg></span></a></p>
  </div>
</div>

Note that on smaller screens, each card’s height is determined by its content. On screens wider than 48rem, however, card height is determined by the tallest card in the row (making all cards in the row the same height). This makes it easier to discover content on each type of device.