Card

General-purpose content card with optional media, header, body, footer, and action buttons — for pages and forms, not dashboard metrics panels.

HTML tag: c-ebf0e4d684ae8468296245742d195d309

When to use

• page or form content section
• card with media, header, and footer actions
• group related content (not dashboard metrics tiles)

Props

Prop	Type	Default	Description
title	string
subtitle	string
media_src	string
actions	array	“
appearance	string	soft
tone	string	neutral
size	string	md
header_icon	string
header_icon_aria	string
media_alt	string
body_content	string
bodycontent	string
show_divider	boolean
focus_primary_action_requested	boolean
density	string	comfortable
has_header_slot	boolean
interactive	boolean
selected	boolean
accent	string	none
footer_align	string	end
has_header_actions_slot	boolean
has_footer_slot	boolean	false
has_body_slot	boolean	false
body_overflow	string	scroll
body_line_clamp	number	3

Rules

• Use appearance/tone/size/density for surface styling (defaults: soft, neutral, md, comfortable).
• Provide .title/.subtitle or header slot; body via default slot, .body_content, or body slot.
• Footer actions: .actions array (renders buttons) or footer slot.
• Prefer slots (media, header, header-actions, footer) for rich layouts.

Methods

Signature	Description
focusPrimaryAction()

What to avoid

Do not use ab-card as a dashboard KPI/chart container (use ab-dashlet). Do not nest ab-card between ab-dashlet and ab-chart on dashboards. Do not duplicate ab-actions in both .actions and header-actions slot without intent.

Example

<c-ebf0e4d684ae8468296245742d195d309 .title=${'Profile'} .appearance=${'soft'} .tone=${'neutral'}>
  <p>Body content in default slot</p>
</c-ebf0e4d684ae8468296245742d195d309>