SlopUI.Components.Card (SlopUI v0.1.0)

Copy Markdown View Source

Cards.

Summary

Functions

Renders a card with optional header and footer.

Functions

card(assigns)

Renders a card with optional header and footer.

<.card>
  <:header title="Billing" description="Manage your plan." />
  Body content
  <:footer divider justify="end">
    <.button>Save</.button>
  </:footer>
</.card>

The :header slot renders its inner block after the title block, which is where actions go. The :title and :description slot attrs keep the heading semantics correct without you writing them.

Attributes

  • variant (:string) - Defaults to "default". Must be one of "default", "outline", "elevated", or "sunken".
  • padding (:string) - Defaults to "md". Must be one of "none", "sm", "md", or "lg".
  • class (:any) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • header - Accepts attributes:
    • title (:string)
    • description (:string)
    • heading_level (:string) - h2 (default) through h6.
  • inner_block
  • footer - Accepts attributes:
    • divider (:boolean)
    • justify (:string) - start | end | between.