# `PUI.Container`

Container components for organizing content with consistent styling.

## Card

Basic card container:

    <.card>
      Card content goes here
    </.card>

## Card with Header

    <.card>
      <.card_header>
        <.card_title>Card Title</.card_title>
        <.card_description>Card description</.card_description>
      </.card_header>
    </.card>

## Full Card Example

    <.card>
      <.card_header>
        <.card_title>Profile</.card_title>
        <.card_description>Manage your account settings</.card_description>
        <.card_action>
          <.button size="sm">Edit</.button>
        </.card_action>
      </.card_header>

      <.card_content>
        <p>Your profile information goes here.</p>
      </.card_content>

      <.card_footer>
        <.button variant="outline">Cancel</.button>
        <.button>Save Changes</.button>
      </.card_footer>
    </.card>

## Custom Styling

    <.card class="bg-blue-50 border-blue-200">
      Card with custom colors
    </.card>

## Icon

Render Heroicons:

    <.icon name="hero-check-circle" />
    <.icon name="hero-x-mark" class="w-5 h-5" />

## Components

| Component | Description |
|-----------|-------------|
| `card/1` | Main card container |
| `card_header/1` | Card header section |
| `card_title/1` | Card title text |
| `card_description/1` | Card subtitle/description |
| `card_action/1` | Action buttons in header (right-aligned) |
| `card_content/1` | Main content area |
| `card_footer/1` | Footer section |
| `header/1` | Page header component |
| `icon/1` | Heroicon component |

# `card`

## Attributes

* `class` (`:string`) - Defaults to `""`.
* Global attributes are accepted.
## Slots

* `inner_block`

# `card_action`

## Slots

* `inner_block`

# `card_content`

## Slots

* `inner_block`

# `card_description`

## Attributes

* `class` (`:string`) - Defaults to `""`.
## Slots

* `inner_block`

# `card_footer`

## Attributes

* `class` (`:string`) - Defaults to `""`.
## Slots

* `inner_block`

# `card_header`

## Slots

* `inner_block`

# `card_title`

## Attributes

* `class` (`:string`) - Defaults to `""`.
## Slots

* `inner_block`

# `header`

Renders a header with title.

## Slots

* `inner_block` (required)
* `subtitle`
* `actions`

# `icon`

ported from core components
Renders a [Heroicon](https://heroicons.com).

Heroicons come in three styles – outline, solid, and mini.
By default, the outline style is used, but solid and mini may
be applied by using the `-solid` and `-mini` suffix.

You can customize the size and colors of the icons by setting
width, height, and background color classes.

Icons are extracted from the `deps/heroicons` directory and bundled within
your compiled app.css by the plugin in `assets/vendor/heroicons.js`.

## Examples

    <.icon name="hero-x-mark" />
    <.icon name="hero-arrow-path" class="ml-1 size-3 motion-safe:animate-spin" />

## Attributes

* `name` (`:string`) (required)
* `class` (`:string`) - Defaults to `"size-4"`.
* Global attributes are accepted.

---

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