Cards

2.0.2

Versatile content containers for everything from simple boxes to complex content dashboards.

Installation

Full Bundle (via UNPKG)

<link rel="stylesheet" href="https://unpkg.com/axis-twelve@2.0.2/dist/axis-twelve.min.css">

Module Only (via UNPKG)

<link rel="stylesheet" href="https://unpkg.com/axis-twelve@2.0.2/dist/modules/axis-cards.min.css">

Class Reference

.ax-cardBase

Base card container.

.ax-card__headerElement

Top section of the card.

.ax-card__bodyElement

Main content area.

.ax-card__footerElement

Bottom section for metadata or actions.

.ax-card__titleElement

Styled title for use within __body.

.ax-card__textElement

Styled text for use within __body.

.ax-card__imageElement

Full-width image that adheres to card rounding.

.ax-card--shadowModifier

Adds a subtle box-shadow for depth.

Live Examples

Interactive Profile Card

A complex card layout with a shadow modifier, image placeholder, and footer actions.

Preview: Interactive Profile Card

Jane Doe

Lead Designer

Specializing in minimal UI design and atomic CSS architectures.

Source Code

html

<div class="ax-card ax-card--shadow" style="max-width: 320px;">
  <div class="ax-p-6">
    <div class="ax-flex ax-items-center ax-gap-4 ax-mb-4">
      <div class="ax-w-16 ax-h-16 ax-rounded-full ax-bg-gray-200"></div>
      <div>
        <h3 class="ax-card__title">Jane Doe</h3>
        <p class="ax-card__text ax-text-sm">Lead Designer</p>
      </div>
    </div>
    <p class="ax-card__text">Specializing in minimal UI design and atomic CSS architectures.</p>
  </div>
  <div class="ax-card__footer ax-flex ax-justify-end ax-gap-2">
    <button class="ax-btn ax-btn--sm">Message</button>
    <button class="ax-btn ax-btn--primary ax-btn--sm">Follow</button>
  </div>
</div>

Product Showcase

Example of a card used for product listings with an image top section.

Preview: Product Showcase

Product Image

Premium Headphones

Noise-cancelling with 40-hour battery life.

$299

Source Code

html

<div class="ax-card" style="max-width: 300px;">
  <div class="ax-h-40 ax-bg-gray-100 ax-flex ax-items-center ax-justify-center ax-text-gray-400">
    Product Image
  </div>
  <div class="ax-p-4">
    <h3 class="ax-card__title">Premium Headphones</h3>
    <p class="ax-card__text">Noise-cancelling with 40-hour battery life.</p>
    <div class="ax-flex ax-justify-between ax-items-center ax-mt-4">
      <span class="ax-text-xl ax-font-bold">$299</span>
      <button class="ax-btn ax-btn--primary ax-btn--sm">Add</button>
    </div>
  </div>
</div>

Module Evolution

Version	Type	Description
v2.0.1	Internal	Refactored internal pacing and layout to use logical properties.

← Previous

Forms

Tables