Vesyl UI

Card

A container for grouping related content with optional header, footer, and sections.

Basic

Card title
A short description of the card content.

This is the main content area of the card.

Variants

Default
Standard card background.
Subtle
Muted background for secondary content.

Sizes

Default size
Standard padding and gap between sections.

Content area.

Compact size
Each section manages its own padding. No gap between sections.

Content area.

With card action

Notifications
Manage your notification preferences.

Choose which notifications you’d like to receive.