Cards¶

Default style¶

Compact format, suitable for grids.

Feature title

Brief description of this feature or capability.

Another feature

More details about this capability.

<div class="card">
  <h4 data-icon="bolt">Feature title</h4>
  <p>Description text.</p>
</div>

With image¶

Default cards can include an image at the top:

With image

The image bleeds to the card edges.

Another example

Simple grid with two cards side-by-side.

<div class="card">
  <img src="screenshot.png" alt="Feature screenshot" />
  <h4 data-icon="image">Feature title</h4>
  <p>Description text.</p>
</div>

Large style¶

Add .large for prominent cards showing key features:

Card title

Brief description of this key feature or value proposition.

<div class="card large" data-icon="mic">
  <h3>Card title</h3>
  <p>Description text.</p>
</div>