Card

.card makes elements look like a card.

Applicable Elements

• a
• button
• Any other container element

Basic Usage

Elements are interactive when they are <a> or <button> elements.

<a class="card" href="">
  <p class="chip">&lt;a&gt;</p>
  <p class="my-title">Anchor Card</p>
  <p class="my-body">This card is an HTML anchor element. It is useful for listing thumbnails, for example.</p>
</a>

<button class="card">
  <p class="chip">&lt;button&gt;</p>
  <p class="my-title">Button Card</p>
  <p class="my-body">This card is an HTML button element. You may not need this often, but it works.</p>
</button>

<div class="card">
  <p class="chip">&lt;div&gt;</p>
  <p class="my-title">Neutral Card</p>
  <p class="my-body">This card is an HTML div element. You can also use
    <code>nav</code>, <code>section</code>, and other container elements.</p>
</div>

Customization

.card does not impose any restrictions on its content. Use any HTML and CSS you need.

Hello! This is a button card with a large thumbnail.

<button class="card" style="padding:0; width:min-content;">
  <img src="/sashimi.jpg" width="320" />
  <p style="padding:12px; margin:0;">Hello This is a button card with a large thumbnail.</p>
</button>