Cards, Panels, Pills, Chips, Dropdowns, Sidebar

Cards

Card Title

Basic card with header, body, and footer sections, built from panel tokens.

Another Card

Cards adapt to different content and use the same shadow/radius tokens as panels.

Simple Card

A card without header or footer, just body content.

Learn More

Panels

My Panel

Critical information requiring immediate attention.

Pills

Active Default Color 1 Success Info Warning Danger

Rounded, interactive tags for filters, categories, or lightweight navigation.

Chips

Basic Chip
User John Doe
Color 1 Chip
User Jane Smith
With Icon

Compact elements for tags or avatars. Note: the close (×) button removes the chip from the DOM — that's a delete action, not a state toggle, so it still needs a small JS listener; everything else on this page is JS-free.

Dropdowns (No JS)

  • Section 1
  • Section 2

Each item's label targets the same checkbox as the toggle, so selecting an item closes the menu — same pattern the accordion uses to reset state without JS. Trade-off: it won't close on an outside click, matching the accordion's existing behavior.

Menu Items

Menu with Icons and Badges

The same .menu / .menu-item classes power both this standalone list and the dropdown menus above — one shared component instead of two parallel ones.

Combined Example

User Profile
User
Tags
Developer Active Premium
Skills
HTML
CSS
JavaScript

Last login: July 16, 2026 at 10:30 AM

Tables

Firstname Lastname Email
John Doe [email protected]
Kim Doe [email protected]
Dan Doe [email protected]
Firstname Lastname Email
John Doe [email protected]
Kim Doe [email protected]
Dan Doe [email protected]

Form