Border Accent Card
A card with a colored accent line along one edge that draws the eye. Use it to group related text and labels while signaling category or status.
A card with a colored accent line along one edge that draws the eye. Use it to group related text and labels while signaling category or status.
Search blocks by description or jump to a page.
Border Accent Card is a single card with a narrow vertical bar pinned to its left edge in the primary color. Inside, a header carries a title and a short description, a content area holds one or two sentences of body text, and a footer row presents two buttons aligned to opposite ends.
All four sections are independent. You can rewrite the title, description, and body copy without affecting anything else, and you can swap, relabel, or remove either button to match your action flow.
Reach for this block when you need to call out one task or record inside a busier view. On a product analytics SaaS the accent bar works well to mark a setup step, a workspace invite, or a configuration action that competes for attention alongside charts and stat tiles. It outperforms a plain card when the category or priority of the item needs a quick visual signal without adding a badge or label.
A natural flow around it on a Components page:
Before
After
The block gives you a compact, focused frame to drop a single action into any layout:
Tip: keep the body copy to two or three short sentences so the card stays compact and the footer buttons stay close to the description.