Component Card

Go back

Variants

Four layout variants cover the common catalog, hero, dense-list, and text-only cases.

Default

Preview on top, title and description stacked below. The baseline card for most component catalogs.

Hero

Featured

Larger preview surface, display-font title, and a persistent call-to-action row. Use sparingly for hero items.

Explore

Compact

Horizontal layout — tiny square preview on the left, text on the right.

Minimal

No preview surface. Text-only card with optional accent stripe — used as a fallback.

Preview Backgrounds

Five surface treatments for the preview area. Each card instance can pick a different one to create visual rhythm in a grid.

Plain

Flat bg-secondary — the quiet default.

Dotted

Radial dot grid — evokes graph paper or Figma canvases.

Grid

Linear line grid — technical, architectural feel.

Gradient

Soft brand radial wash — warms hero/featured items.

BRAND

Brand

Solid brand-primary tint — pair with BadgeDark for contrast.

Category Accents

A faint top-bar stripe signals the card's category. On hover, the stripe expands to full width and the border color follows the accent.

None

No category accent. Default border behavior.

Brand

Primary/brand accent — for flagship entries.

Success

Green accent — completed, passing, healthy states.

Warning

Amber accent — needs attention, in-progress, caution.

Error

Red accent — destructive, critical, blocked categories.

Badges

Optional label pinned to the top-left of the preview surface. Use BadgeDark when the background needs a dark-on-light chip for contrast.

NEW

New

Default brand-tinted badge.

BETA

Beta

Works with any preview background.

LIVE

Dark Badge

Use BadgeDark over bright or brand backgrounds.

P14

Pattern Code

Badges can also hold catalog identifiers.

Grid Density

Four opt-in grid wrappers control column width. Drop any set of cards into .component-card-grid (or a density modifier) — consumers don't have to hand-roll the CSS grid.

.component-card-grid280px min column width — the default.

.component-card-grid--dense224px min — more columns, tighter gap.

.component-card-grid--featured352px min — wider cards for hero grids.

.component-card-grid--compact320px min — paired with the compact variant.

Portable HTML Usage

The Blazor wrapper is thin — all styles live in Styles/components/component-card.css and compile into the standalone wwwroot/design-system.css. Any project that imports that file can use the markup below directly, no Blazor required.

<div class="component-card-grid">
  <a href="/buttons" class="component-card component-card--default component-card--accent-brand">
    <span class="component-card__badge">NEW</span>
    <div class="component-card__preview component-card__preview--dotted" inert aria-hidden="true">
      <button class="btn btn-sm btn-primary">Click me</button>
    </div>
    <div class="component-card__body">
      <div class="component-card__title-row">
        <h3 class="component-card__title">Button</h3>
      </div>
      <p class="component-card__desc">Primary, secondary, tertiary styles.</p>
    </div>
  </a>
</div>