Skip to main content
Pricing

Card

Free

A versatile container component for grouping related content with optional header, body, footer, and image sections. Cards create visual hierarchy by elevating content from the page surface. Use them for dashboards, product listings, profile summaries, and any grouped content block.

12 variants

Variant
Card title
A brief description of the card content goes here.

Variants

VariantDescriptionWhen to use
DefaultFlat card with a subtle border and no shadow. Sits flush with the surface.Use for standard content grouping where cards are densely packed — dashboards, settings panels.
Glass
Neo
With Image

Usage Guidelines

Do

Use a consistent card variant within the same layout grid.

Don't

Nest cards within cards — flatten the hierarchy instead.

Do

Include a clear content hierarchy — heading, supporting text, optional actions.

Don't

Mix elevated and outlined cards in the same grid.

Do

Use the interactive variant when the entire card links to a detail view.

Don't

Overload a card with too many actions — limit to 1–2 primary actions.

Do

Keep card content concise — cards are for scanning, not deep reading.

Don't

Code

HTML
<article class="lex-card lex-card--elevated">
  <img class="lex-card__image" src="/img/cover.jpg" alt="Project cover" />
  <div class="lex-card__header">
    <h3 class="lex-card__title">Project Aurora</h3>
    <p class="lex-card__subtitle">Design system overhaul</p>
  </div>
  <div class="lex-card__body">
    <p>A complete refresh of our component library with updated tokens, accessibility improvements, and new layout primitives.</p>
  </div>
  <div class="lex-card__footer">
    <button class="lex-button lex-button--primary lex-button--sm">View project</button>
    <button class="lex-button lex-button--tertiary lex-button--sm">Share</button>
  </div>
</article>
CSS Custom Properties
.lex-card {
  background: var(--lex-card-bg);
  border-radius: var(--lex-card-radius, var(--lex-radius-lg));
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.lex-card--elevated {
  box-shadow: var(--lex-card-shadow, var(--lex-shadow-md));
}

.lex-card--outlined {
  border: 1px solid var(--lex-card-border);
}

.lex-card--interactive {
  cursor: pointer;
  transition: box-shadow 200ms ease, transform 200ms ease;
}

.lex-card--interactive:hover {
  box-shadow: var(--lex-card-shadow-hover, var(--lex-shadow-lg));
  transform: translateY(-2px);
}

.lex-card__image {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.lex-card__header {
  padding: var(--lex-space-16) var(--lex-space-16) 0;
}

.lex-card__title {
  font-size: var(--lex-font-size-lg);
  font-weight: 600;
  color: var(--lex-text-default);
  margin: 0;
}

.lex-card__subtitle {
  font-size: var(--lex-font-size-sm);
  color: var(--lex-text-muted);
  margin: var(--lex-space-4) 0 0;
}

.lex-card__body {
  padding: var(--lex-space-12) var(--lex-space-16);
  color: var(--lex-text-default);
  font-size: var(--lex-font-size-sm);
  line-height: var(--lex-line-height-relaxed);
  flex: 1;
}

.lex-card__footer {
  padding: 0 var(--lex-space-16) var(--lex-space-16);
  display: flex;
  gap: var(--lex-space-8);
}
React
// Using Lexicon CSS classes with React
// Using Lexicon CSS classes with React

export function ProjectCard() {
  return (
    <Card variant="elevated">
      <CardImage src="/img/cover.jpg" alt="Project cover" />
      <CardHeader
        title="Project Aurora"
        subtitle="Design system overhaul"
      />
      <CardBody>
        A complete refresh of our component library with updated tokens,
        accessibility improvements, and new layout primitives.
      </CardBody>
      <CardFooter>
        <Button variant="primary" size="sm">View project</Button>
        <Button variant="tertiary" size="sm">Share</Button>
      </CardFooter>
    </Card>
  );
}

Design Tokens

TokenValue (dark)Value (light)CSS property
--lex-card-bg——bg
--lex-card-border——border
--lex-card-radius——radius
--lex-card-padding——padding
--lex-card-shadow——shadow

Accessibility

  • Use <article> element for cards that represent standalone content items.
  • Interactive cards should use the stretched link pattern — wrap the heading in an <a> with ::after pseudo-element covering the card.
  • Ensure card images have meaningful alt text or alt="" for decorative images.
  • Interactive cards need a visible focus ring on the stretched link.
  • Card content must maintain a logical heading hierarchy within the page.

Keyboard Interactions

TabMoves focus to the next interactive element within or after the card.
EnterActivates the card link when using the interactive variant with a stretched link.