Brand Card
<brand-card> wraps Shoelace's <sl-card> with brand
variants (default, elevated, outlined,
filled) and an interactive mode. Visuals are driven by
semantic tokens so theme and brand switching are automatic.
Variants
Subtle surface with a hairline border. Good general-purpose card.
Lifted surface with a shadow instead of a border.
Transparent background, visible border. Works on any surface.
Bolder neutral surface, no border.
Interactive
Lifts on hover, shows a focus ring when tabbed to, uses pointer cursor.
Combines outlined look with hover lift.
With image
Image fills the top of the card via the image slot.
Combine an image with interactive hover for clickable media cards.
Orientation
Cards can stack vertically (default) or lay the image on the left in horizontal mode. Both are shown below with identical content for comparison.
Default orientation: image on top, header, body, and footer stacked below.
Image sits on the left and spans the full height of the stacked text on the right.
Clickable horizontal cards are good for list rows, search results, or article previews.
With header, body, footer
Update your profile, notification preferences, and security options.
Usage
import { BrandCard } from '@brandos/ui';
<brand-card variant="elevated" interactive>
<div slot="header">Title</div>
<p>Body content.</p>
<div slot="footer">Actions</div>
</brand-card>