Pages
Introduction Colors & Tokens Icons
UI
Button Link Badge Notification Badge Alert Card Spinner Avatar Divider Empty State
Interactive
Modal Side Modal Dropdown Tooltip Accordion Tabs Flash Toast
Forms
Form Select Toggle Checkbox & Radio Text Fields Date & Time Fields
Layout
Navbar Sidebar Table Pagination Breadcrumbs Selector List
Utilities
Local Time

Card

Wraps arbitrary content on a raised surface. Default is :bordered — intent variants tint the surface.

Bordered (default)

Cards wrap arbitrary content with themed surface and border tokens.

= app_theme_card do
  %p Cards wrap arbitrary content with themed surface and border tokens.

Intent variants

A primary card.

A secondary card.

A danger card.

A success card.

A warning card.

A info card.

.demo-stack
  - AppTheme::INTENTS.each do |intent|
    = app_theme_card(variant: intent) do
      %p= "A #{intent} card."