Inline empty state
A small, single-row notice for inside a card or panel — when the larger b-empty-state would overpower the surface. Under 80 px tall by design.
Default
Icon · message · optional CTA. Drop it inside a card body.
Comments
No comments yet. Be the first to add a note on this receipt.
Message only
When the absence is informational and the operator has nothing to do.
Recent activity
No activity in the last 24 hours.
Parts
| Property | Value | Notes |
|---|---|---|
| height | ≤ 80 px | Sits inside any card without dominating. |
| padding | 16 | Light — the parent card already supplies framing. |
| background | --surface-muted | Reads as a quiet stand-in for content. |
| icon | 24 px | Sized down from the 44 px on .empty-state. |
| message | body-sm | Bold the first phrase; rest is helper text. |
| CTA | btn-sm | Optional. Right-aligned in the row. |
Do & don't
Do
Use it inside cards — comment threads, attachment lists, mini-activity feeds.
Don't
Use it for whole-page empty states. Reach for b-empty-state there.
Do
Lead with what's missing, not the action — "No comments yet" beats "Add a comment".
Don't
Stack two inline empties side-by-side. If a card has multiple empty regions, the whole card is empty — use the larger block.
Accessibility
- Don't role this element. It's prose; the surrounding card's heading already tells the operator what the region is.
- If the CTA opens a dialog, ensure the trigger labels the destination ("Add comment" not "Open").
- Icons are decorative — give the
.icaria-hidden="true".
Code
<!-- Inline empty inside a card --> <div class="p-empty-inline"> <span class="ic" data-icon="chat" aria-hidden="true"></span> <div class="msg"><strong>No comments yet.</strong> Be the first to add a note.</div> <button class="btn btn-secondary btn-sm cta">Add comment</button> </div>
Related
For full-page empty states, see Empty state. For loading placeholders, see Skeleton.