DhCard

Contained surface with an icon / text / badge row by default; stacked switches to the media-card anatomy (header, full-width image, text, actions). An optional href renders the card as a link.

Open in Figma

Default card

A horizontal row of three slots: a square icon box, text content taking the remaining width, and a content-sized badge. Slots carry no background colors — the card only lays them out.

Interview 42

Recorded yesterday, 34 minutes.

New

<DhCard>
  {#snippet icon()}<DhIcon name="mic" />{/snippet}
  <h3 class="headline">Interview 42</h3>
  <p class="supporting">Recorded yesterday, 34 minutes.</p>
  {#snippet badge()}<DhTag type="success" text="New" />{/snippet}
</DhCard>

Text only

Text content is the default slot — with nothing else specified, the text column renders alone.

Field kit

Two recorders, one spare battery, cables checked.

<DhCard>
  <h3 class="headline">Field kit</h3>
  <p class="supporting">Two recorders, one spare battery, cables checked.</p>
</DhCard>

Clickable card

With href the card renders as a single link and gains hover/focus state layers plus the standard focus ring. Keep interactive children out of a linked card — nested interactive elements are invalid HTML.

Interview 42

Recorded yesterday, 34 minutes.

<DhCard href="/interviews/42" ariaLabel="Open interview 42">
  {#snippet icon()}<DhIcon name="mic" />{/snippet}
  <h3 class="headline">Interview 42</h3>
  <p class="supporting">Recorded yesterday, 34 minutes.</p>
</DhCard>

Stacked — Media & text

stacked switches to the vertical anatomy: a header, a full-width image at its natural height, text content, and action buttons bottom-right.

Witness interview

Follow-up session covering the timeline between 14:00 and 16:30.

<DhCard stacked>
  {#snippet header()}
    <p class="title">Anna Berg</p>
    <p class="subhead">Case 2024-118</p>
  {/snippet}
  {#snippet media()}
    <img src={mediaPlaceholder} alt="Interview room preview" />
  {/snippet}
  <h3 class="headline">Witness interview</h3>
  <p class="supporting">
    Follow-up session covering the timeline between 14:00 and 16:30.
  </p>
  {#snippet actions()}
    <DhButton variant="secondary">Share</DhButton>
    <DhButton variant="primary">Open</DhButton>
  {/snippet}
</DhCard>