# `LineaUI.Components.Card`
[🔗](https://github.com/devaction-labs/linea_ui/blob/v0.1.1/lib/linea_ui/components/card.ex#L1)

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">`).

# `card`

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`

---

*Consult [api-reference.md](api-reference.md) for complete listing*