@flx

Three-column bento: primary tile (two-thirds) with title, description, CTA and media, plus supporting image cards.

Auto-scroll carousel that pauses on item hover and reveals title.

A carousel of cards with a title and description.

A carousel of media with a title and description.

Two-column split with serif headline, supporting copy, optional CTA, and a media panel.

Two-column icon card grid with serif section header and subtle entrance motion.

A grid of media cards with a section header and item details below each image.

Two-column grid with serif header, media on top, copy, and optional CTA per column.

A focus grid with items that can be focused and dimmed.

List of items: select one to reveal its description and media.

Two-column card grid with a serif section header, copy above each image, and subtle entrance motion.

A centered text block with a title, description, and CTA.

A centered serif hero with a soft gradient wash, pill CTA, and a floating integration cloud.

A left-aligned serif hero with a media panel: an image backdrop with a floating dashboard mockup on top.

A centered hero with dual CTAs and an image that fades into the page below the copy.

A two-column editorial hero with a soft background wash and a layered collage of two overlapping images.

An editorial hero with a left tagline, right-aligned headline and copy, and a full-width image below.

A split product hero with dual CTA, a compact logo row, and the Spot 01 illustration.

An editorial hero with a full-width image above, a top-aligned tagline, and right-aligned headline and copy below.

A split hero with a bold headline, avatar social proof, and two image cards with invertible overlay text and CTAs.

A centered real-estate hero with a search bar, a masked architecture image that fades into the page, and a split closing statement.

A centered hero with a highlighted headline, dual CTAs, social proof, and a fanned collage of three overlapping images.

Logo carousel with auto-scroll, edge gradient and minimalist style.

Sticky media that changes as you scroll through text content.

Shared CTA component with link and button variant

A dynamic icon component with a name and size.

A single testimonial with quote, avatar, author name and role.

Only one section open at a time, type="single" collapsible. The default behavior.

type="multiple" keeps several sections open at once.

Leading icon beside each trigger label.

A titled question-and-answer list.

Each item is a bordered card with spacing between them.

Plus icon on each trigger that turns into a minus when open, instead of a chevron.

Rotating chevron placed before the label instead of after it.

Lists, links, and a button inside the panel body.

One trigger disabled while the others stay interactive.

An accordion rendered inside another panel body.

Borderless minimal rows with an active color on open.

Each trigger sits on a muted, rounded background.

Controlled value with expand-all / collapse-all buttons.

Grouped switch rows revealed inside each panel.

Two-line trigger pairing a title with helper text.

Image avatar with an initials fallback.

Missing image falls back to initials.

Generic user icon when there is no image or name.

Small, default, and large sizes side-by-side.

Tinted initials fallbacks using semantic tokens.

Presence dot in the corner showing online, away, or offline.

Verified check icon inside the AvatarBadge.

Avatar beside a name and email, forming a user row.

Overlapping AvatarGroup stack of members.

Overlapping group with a +N count for the remaining members.

Hover each avatar in the group to reveal its name.

Skeleton placeholder while the avatar loads.

Icon badge pinned to the top-right corner.

A single default badge.

All six variants side-by-side: default, secondary, destructive, outline, ghost, link.

Leading verified icon before the label.

A colored presence dot beside an outline label.

Tinted success, warning, error, and info states.