Concorde documentation · same URL (interactive) · llms.txt

Concorde UI component — Card. Cards group related content on a padded surface with radius, theme type colors, and elevation. Default shadow is lg. Compose sonic-card-header / sonic-card-main / sonic-card-footer, or place any marku Doc ID: core/components/ui/card/card. Keywords: Concorde, supersoniks, core/components/ui/card/card, card, Card, UI component, sonic-card, web component, type, shadow, lg, sonic-card-header, sonic-card-main, sonic-card-footer, base, default, light. URL: https://concorde.supersoniks.org/core/components/ui/card.

Card

Cards group related content on a padded surface with radius, theme type colors, and elevation. Default shadow is lg. Compose sonic-card-header / sonic-card-main / sonic-card-footer, or place any markup in the default slot.

Basic example

<sonic-card class="max-w-sm">
      <p class="m-0">CN 001 · CDG → JFK · On time.</p>
    </sonic-card>

Type

Default type is base. default and light share the same surface tokens.

<div class="flex flex-wrap gap-3">
      <sonic-card type="base" class="min-w-[8rem]">Base</sonic-card>
      <sonic-card type="light" class="min-w-[8rem]">Light</sonic-card>
      <sonic-card type="default" class="min-w-[8rem]">Default</sonic-card>
      <sonic-card type="primary" class="min-w-[8rem]">Primary</sonic-card>
      <sonic-card type="info" class="min-w-[8rem]">Info</sonic-card>
      <sonic-card type="success" class="min-w-[8rem]">Success</sonic-card>
      <sonic-card type="warning" class="min-w-[8rem]">Warning</sonic-card>
      <sonic-card type="danger" class="min-w-[8rem]">Danger</sonic-card>
      <sonic-card type="neutral" class="min-w-[8rem]">Neutral</sonic-card>
      <sonic-card type="invert" class="min-w-[8rem]">Invert</sonic-card>
    </div>

Shadow

Set shadow to control elevation. Default is lg.

<div class="grid gap-4 sm:grid-cols-2 max-w-2xl">
      <sonic-card shadow="none" class="min-h-[5rem] flex items-center justify-center">None</sonic-card>
      <sonic-card shadow="sm" class="min-h-[5rem] flex items-center justify-center">Small</sonic-card>
      <sonic-card shadow="md" class="min-h-[5rem] flex items-center justify-center">Medium</sonic-card>
      <sonic-card shadow="lg" class="min-h-[5rem] flex items-center justify-center">Large</sonic-card>
    </div>

Quick titles with label and description, or full control through the default slot. slot="suffix" aligns badges or actions on the right; suffix content does not shrink when the title wraps.

label and description accept HTML (rendered as markup). Prefer plain text when possible; use sonic-card-header-description or the default slot for structured content.

<div class="grid gap-4 max-w-xl">
      <sonic-card>
        <sonic-card-header
          label="Account settings"
          description="Manage your profile and preferences."
        ></sonic-card-header>
        <p class="m-0 text-sm opacity-80">Body content goes in the card slot or in <code>sonic-card-main</code>.</p>
      </sonic-card>

      <sonic-card type="neutral">
        <sonic-card-header label="Notifications">
          <sonic-card-header-description>
            Choose what we email you about.
          </sonic-card-header-description>
          <sonic-badge slot="suffix" type="warning" size="xs">3 new</sonic-badge>
        </sonic-card-header>
      </sonic-card>

      <sonic-card>
        <sonic-card-header label="Team workspace" description="Shared with 12 members">
          <sonic-button
            slot="suffix"
            shape="circle"
            variant="outline"
            size="sm"
            type="default"
            icon
            data-aria-label="Workspace settings"
          >
            <sonic-icon library="iconoir" name="settings"></sonic-icon>
          </sonic-button>
        </sonic-card-header>
      </sonic-card>

      <sonic-card type="primary">
        <sonic-card-header>
          <div>Custom header</div>
          <sonic-card-header-description>
            Use the header slot when attributes are not enough.
          </sonic-card-header-description>
          <sonic-button slot="suffix" shape="circle" variant="ghost" size="sm" type="primary" icon>
            <sonic-icon library="iconoir" name="nav-arrow-right"></sonic-icon>
          </sonic-button>
        </sonic-card-header>
      </sonic-card>
    </div>

Main

Optional wrapper for the primary content area (typography, media, forms).

<sonic-card class="max-w-xl">
      <sonic-card-header label="Release notes" description="Version 2.4"></sonic-card-header>
      <sonic-card-main>
        <p class="mt-0">
          Improved performance on large lists and fixed an issue with keyboard navigation in menus.
        </p>
        <sonic-divider></sonic-divider>
        <p class="mb-0 text-sm opacity-80">See the changelog for details.</p>
      </sonic-card-main>
    </sonic-card>

Optional footer for actions, metadata, or secondary text.

<sonic-card class="max-w-xl">
      <sonic-card-header label="Confirm deletion"></sonic-card-header>
      <sonic-card-main>
        <p class="m-0">This project and all of its data will be removed permanently.</p>
      </sonic-card-main>
      <sonic-card-footer>
        <sonic-divider></sonic-divider>
        <div class="flex flex-wrap gap-2 justify-end">
          <sonic-button variant="ghost" size="sm">Cancel</sonic-button>
          <sonic-button type="danger" size="sm">Delete</sonic-button>
        </div>
      </sonic-card-footer>
    </sonic-card>

Full example

Header, media, body, and footer together.

<sonic-card class="max-w-md">
      <sonic-card-header label="Featured route" description="CDG → JFK">
        <sonic-icon slot="suffix" library="iconoir" name="airplane" aria-hidden="true"></sonic-icon>
      </sonic-card-header>
      <sonic-card-main>
        <sonic-image
          rounded
          ratio="16/9"
          src="/img/concorde/plane_04.jpg"
          alt="Concorde on the apron under a blue sky"
        ></sonic-image>
        <p class="mb-0">
          Nonstop at Mach 2.04, with flexible dates.
        </p>
      </sonic-card-main>
      <sonic-card-footer>
        <div class="flex items-center justify-between gap-3 flex-wrap">
          <span class="text-sm font-semibold">Cabin class: Business</span>
          <sonic-button type="primary" size="sm">Book</sonic-button>
        </div>
      </sonic-card-footer>
    </sonic-card>

API reference

sonic-card

Attribute Values Description
type base (default) · light · invert · default · primary · warning · danger · success · info · neutral Semantic background and text (default and light share the same surface)
shadow none · sm · md · lg (default lg) Elevation on the card surface
Slot Description
(default) Free-form content (header, main, footer, or direct markup)

sonic-card-header

Attribute Values Description
label HTML Title (rendered as markup)
description HTML Subtitle below the title
Slot Description
(default) Custom title / description when attributes are not enough
suffix Actions or badges aligned on the right (does not shrink)

sonic-card-header-description

Slot Description
(default) Subtitle text; styled below the title when slotted in sonic-card-header

sonic-card-main · sonic-card-footer

Slot Description
(default) Primary content (main) or actions / metadata (footer)