Across UI Kit v2.0

Across Card

The primary container for content. Flexible, theme-aware, and composable.

A standard card consists of a header, body, and footer. The body is the only required element.

This is the card body. It contains the main content of the card. It has standard padding and typography settings.

HTML

<div class="across-card">
  <div class="across-card__header">
    <div class="across-card__icon">...</div>
    <h3 class="across-card__title">Title</h3>
    <span class="across-card__badge">Badge</span>
  </div>
  <div class="across-card__body">
    <!-- Content -->
  </div>
  <div class="across-card__footer">
    <span class="across-card__meta">Meta</span>
    <button class="across-btn">Action</button>
  </div>
</div>

Cards come in three visual styles: Elevated (default), Outlined, and Flat.

Default style. White background (in light mode) with a subtle shadow.

Default

Transparent background with a border. Good for secondary content.

.card--outlined

Transparent background, no border. Used for grouping without containment.

.card--flat

HTML

<div class="across-card">...</div>
<div class="across-card card--outlined">...</div>
<div class="across-card card--flat">...</div>

Cards can be made interactive with hover effects, useful for navigation or selection.

Hover over me to see the elevation change and border highlight.

HTML

<a href="#" class="across-card card--interactive">
  ...
</a>

Across Card

Anatomy

Card Title

Variants

Elevated

Outlined

Flat

Interactive

Clickable Card