Card Group

A compact group of cards inside one bordered container. Items share the available width equally in one row. Use it for metrics, summaries, links, or other short content.

.card-group + .card-group-item — four items share the available width equally

Pending

128

Running

12

Failed

3

Finished

8,421

<div class="card-group">
  <div class="card-group-item">
    <p class="text-xs text-secondary-500">Pending</p>
    <p class="mt-1 text-xl font-semibold tabular-nums text-secondary-900">128</p>
  </div>
  <div class="card-group-item">
    <p class="text-xs text-secondary-500">Running</p>
    <p class="mt-1 text-xl font-semibold tabular-nums text-secondary-900">12</p>
  </div>
  <div class="card-group-item">
    <p class="text-xs text-secondary-500">Failed</p>
    <p class="mt-1 text-xl font-semibold tabular-nums text-secondary-900">3</p>
  </div>
  <div class="card-group-item">
    <p class="text-xs text-secondary-500">Finished</p>
    <p class="mt-1 text-xl font-semibold tabular-nums text-secondary-900">8,421</p>
  </div>
</div>

.card-group + .card-group-item — two items fill the container

Documentation

Browse setup and usage guides

Examples

Explore practical examples

 
<div class="card-group">
  <a href="#" class="card-group-item">
    <p class="text-sm font-semibold text-secondary-900">Documentation</p>
    <p class="mt-1 text-xs text-secondary-500">Browse setup and usage guides</p>
  </a>
  <a href="#" class="card-group-item">
    <p class="text-sm font-semibold text-secondary-900">Examples</p>
    <p class="mt-1 text-xs text-secondary-500">Explore practical examples</p>
  </a>
</div>