Skip to main content

Back to all patterns

Record Card

ID: record_card Category: surface Required slots: body

Live example

Pattern Demo: Record Card

Member #1042 · Individual

Active profile with current term through Dec 31.

Overview

Card surface representing a record or summary object.

Read more

Card surface representing a record or summary object.

Tags: card, record, surface

When to use / When not to use

When to use

  • This pattern appears frequently in the surface category and has reusable slot anatomy.

When not to use

  • Avoid this pattern when a simpler native element can meet the same user goal with less cognitive load.

Accessibility notes

  • Keyboard keys: .
  • ARIA attributes: .
  • Visible focus required: Yes.

Implementation 

<x-ui.record-card title="Pattern Demo: Record Card">
  <p class="dig-meta">Member #1042 · Individual</p>
  <p>Active profile with current term through Dec 31.</p>
</x-ui.record-card>
Clickable Row with Actions