Layout
<kern-card>Surface for one block of related content. Border, no shadow; no cards inside cards.
Examples Properties Slots CSS parts
Examples
Card with header and footer
heading titles the card; meta sits next to the heading and actions holds small buttons on the right. Form buttons go into the footer slot.
Gen2
Snapshot
Shelly Plus 1PM
192.168.1.21 1.4.4
Cancel
Save
<kern-card heading="Device" style="max-width:420px">
<kern-badge slot="meta">Gen2</kern-badge>
<kern-button slot="actions" size="sm" variant="ghost">Snapshot</kern-button>
<kern-kv>
<kern-kv-item label="Model">Shelly Plus 1PM</kern-kv-item>
<kern-kv-item label="IP"><kern-copy>192.168.1.21</kern-copy></kern-kv-item>
<kern-kv-item label="Firmware" mono>1.4.4</kern-kv-item>
</kern-kv>
<kern-button slot="footer" variant="ghost">Cancel</kern-button>
<kern-button slot="footer" variant="primary">Save</kern-button>
</kern-card>
Flush body and heading level
flush removes the body padding so lists and tables reach the edge. heading-level sets the heading element (2–4) to fit the document outline.
<kern-card heading="Events" heading-level="3" flush style="max-width:420px">
<kern-list flush size="sm" label="Events">
<kern-list-item heading="Bad Lüftung" description="Snapshot saved">
<kern-status slot="start" tone="ok"></kern-status>
</kern-list-item>
<kern-list-item heading="Rollladen Süd" description="Not reachable since yesterday">
<kern-status slot="start" tone="warn"></kern-status>
</kern-list-item>
</kern-list>
</kern-card>
Loading state
While data loads, fill the card with kern-skeleton placeholders and mark it with aria-busy="true".
<kern-card heading="Loading …" aria-busy="true" style="max-width:320px">
<div style="display:flex;gap:12px;align-items:center">
<kern-skeleton variant="circle" size="28px"></kern-skeleton>
<kern-skeleton lines="2"></kern-skeleton>
</div>
<kern-skeleton variant="block" height="40px" style="margin-top:12px"></kern-skeleton>
</kern-card>
Header on narrow cards
The header wraps when space runs out: heading and meta stay on the first line, the actions move below and stay right-aligned. Long headings break instead of pushing the buttons out of the card. Drag the corner of the frame to try it.
Finished with errors
Log
Retry failed
10 updated, 2 failed.
<div style="resize:horizontal;overflow:hidden;width:300px;min-width:240px;max-width:100%">
<kern-card heading="Firmware update on 12 devices">
<kern-status slot="meta" tone="warn">Finished with errors</kern-status>
<kern-button slot="actions" size="sm" variant="ghost">Log</kern-button>
<kern-button slot="actions" size="sm">Retry failed</kern-button>
<p style="margin:0">10 updated, 2 failed.</p>
</kern-card>
</div>
Properties
flushreflects default false
boolean
Body without padding (tables, lists up to the edge).
heading
string | undefined
headingLevelattribute heading-level · default 2
2 | 3 | 4
Heading level for the document outline.
Slots
actions
Small buttons on the right of the header
footer
Form actions, right-aligned
meta
Next to the heading (badge, subtitle)