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>

Selectable¶

Cards wrapping a radio or checkbox become selectable automatically.

Local model llama.cpp

API endpoint OpenAI-compatible

<label class="card">
  <input type="radio" name="backend" value="local" checked />
  <div>
    <strong>Local model</strong>
    <small>llama.cpp</small>
  </div>
</label>

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>