Cards

Basic Card

This is a standard card with header and content area. Cards use --lgBorderRadius and subtle box shadow.

With Footer

Card content with an action footer at the bottom.

Colored Header

Card with colored header using the accent surface color variant.

Grid System

Responsive grid with --gridGap spacing

1/4
2/4
3/4
4/4
1/3
2/3
3/3
1/2
2/2

Accordion

General Settings

General settings and configuration options for your application.

Email Configuration

Configure your email provider settings for notifications and authentication.

Security

Manage authentication rules, rate limiting, and access control settings.

Empty States

No records found

Create your first record or adjust your search filters to see results here.

Sections

Section Title
This is a section description or hint text providing context.

Section content goes here.

Another Section

Multiple sections are separated by a border line.