SutraUI.Card (Sutra UI v0.2.0)

View Source

Displays a card with header, content, and footer.

Cards are versatile containers for grouping related content and actions.

Examples

<.card>
  <:header>
    <h2>Card Title</h2>
    <p>Card Description</p>
  </:header>
  <:content>
    <p>Card Content</p>
  </:content>
  <:footer>
    <p>Card Footer</p>
  </:footer>
</.card>

Accessibility

  • Uses semantic <header>, <section>, and <footer> elements
  • Consider adding appropriate headings (h2, h3) in the header slot

Summary

Functions

card(assigns)

Renders a card component with optional header, content, and footer.

Functions

card(assigns)

Renders a card component with optional header, content, and footer.

Examples

<.card>
  <:header>
    <h2>Login to your account</h2>
    <p>Enter your details below</p>
  </:header>
  <:content>
    <form>...</form>
  </:content>
  <:footer class="flex gap-2">
    <button class="btn">Login</button>
  </:footer>
</.card>

# With image in content
<.card>
  <:content class="px-0">
    <img alt="Example" src="/images/example.jpg" />
  </:content>
</.card>

Attributes

  • class (:string) - Additional CSS classes (string or list). Defaults to nil.
  • Global attributes are accepted. Additional HTML attributes. Supports all globals plus: ["id"].

Slots

  • header - Optional header slot with title and description. Accepts attributes:
    • class (:string) - Additional CSS classes for the header.
  • content (required) - The main content of the card. Accepts attributes:
    • class (:string) - Additional CSS classes for the content.
  • footer - Optional footer slot. Accepts attributes:
    • class (:string) - Additional CSS classes for the footer.