LineaUI.Components.Card (linea_ui v0.1.1)

Copy Markdown View Source

LineOne's cards: the white panel, bordered, filled with a theme color, glowing, gradient and gradient-outlined.

<.card>
  <:title>Simple Card</:title>
  Lorem ipsum dolor sit amet.
</.card>
<.card variant="bordered" shape="xl">…</.card>
<.card variant="flat">No shadow</.card>
<.card variant="solid" color="primary"><:title>Primary Card</:title>…</.card>
<.card variant="gradient" gradient="purple-indigo">…</.card>
<.card variant="gradient_outline" gradient="sky-blue">…</.card>

Without :title the content fills the card as is; padded={false} drops the default padding, for cards laid out by hand (<.card padded={false} class="px-4 pb-4 sm:px-5">).

Summary

Functions

card(assigns)

Renders a card, with an optional :title above the content.

Functions

card(assigns)

Renders a card, with an optional :title above the content.

<.card variant="glow" color="info">
  <:title>Revenue</:title>
  <p>$12,400 this month.</p>
</.card>

Attributes

  • variant (:string) - default is LineOne's white panel with a soft shadow; flat is the same panel without the shadow; solid and glow use color; gradient and gradient_outline use gradient. Defaults to "default". Must be one of "default", "flat", "bordered", "solid", "glow", "gradient", or "gradient_outline".
  • color (:string) - Defaults to "primary". Must be one of "primary", "secondary", "info", "success", "warning", or "error".
  • gradient (:string) - Defaults to "purple-indigo". Must be one of "purple-indigo", "fuchsia-pink", "amber-orange", "sky-blue", or "green-fuchsia".
  • shape (:string) - xl is rounded-2xl; on gradient_outline the outer edge and the inner panel follow it. Defaults to "rounded". Must be one of "rounded", or "xl".
  • padded (:boolean) - Defaults to true.
  • class (:any) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • title - The card's heading, followed by the content. Accepts attributes:
    • class (:any)
  • inner_block