Blocks

Card

A container that groups related content and actions with a bordered, elevated surface.

Usage

Account

Manage your account settings.

Card content goes here.

sui.card do
  sui.card_header do
    sui.card_title "Account"
    sui.card_description "Manage your account settings."
  end
  sui.card_content do
    tag.p "Card content goes here.", class: "text-sm text-muted-foreground"
  end
  sui.card_footer do
    sui.button "Save changes"
  end
end

With action

Notifications

Choose what you want to be notified about.

Notification preferences appear here.

sui.card do
  sui.card_header do
    sui.card_title "Notifications"
    sui.card_description "Choose what you want to be notified about."
    sui.card_action do
      sui.button "Settings", variant: :outline, size: :sm
    end
  end
  sui.card_content do
    tag.p "Notification preferences appear here.", class: "text-sm text-muted-foreground"
  end
end

Full form card

Create project

Deploy your new project in one click.

Name

Framework

sui.card do
  sui.card_header do
    sui.card_title "Create project"
    sui.card_description "Deploy your new project in one click."
    sui.card_action { sui.button "×", variant: :ghost, size: :icon }
  end
  sui.card_content do
    tag.div(class: "space-y-4") do
      tag.div(class: "space-y-2") do
        sui.label("Name", for_id: "project-name") +
        sui.input(id: "project-name", placeholder: "My awesome project")
      end +
      tag.div(class: "space-y-2") do
        sui.label("Framework", for_id: "framework") +
        sui.input(id: "framework", placeholder: "e.g. Rails, Next.js")
      end
    end
  end
  sui.card_footer(class: "gap-2") do
    sui.button("Cancel", variant: :outline) +
    sui.button("Deploy")
  end
end

API

method	args	description
card	`**opts, &block`	Root card container (`div`). Accepts any HTML attribute.
card_header	`**opts, &block`	Header grid; activates two-column layout when a `card_action` is present.
card_title	`name = nil, **opts, &block`	Semibold title text. Pass a string or a block.
card_description	`name = nil, **opts, &block`	Muted description text below the title.
card_action	`**opts, &block`	Slot that pins content to the top-right of the header.
card_content	`**opts, &block`	Main body area with horizontal padding.
card_footer	`**opts, &block`	Flex row at the bottom, typically used for action buttons.