PUI.Container (pui v1.0.0-beta.9)

Copy Markdown

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

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

Summary

Functions

card(assigns)
card_action(assigns)
card_content(assigns)
card_description(assigns)
card_footer(assigns)
card_header(assigns)
card_title(assigns)
header(assigns)

Renders a header with title.

icon(assigns)

ported from core components Renders a Heroicon.

Functions

card(assigns)

Attributes

  • class (:string) - Defaults to "".
  • Global attributes are accepted.

Slots

  • inner_block

card_action(assigns)

Slots

  • inner_block

card_content(assigns)

Slots

  • inner_block

card_description(assigns)

Attributes

  • class (:string) - Defaults to "".

Slots

  • inner_block

card_footer(assigns)

Attributes

  • class (:string) - Defaults to "".

Slots

  • inner_block

card_header(assigns)

Slots

  • inner_block

card_title(assigns)

Attributes

  • class (:string) - Defaults to "".

Slots

  • inner_block

header(assigns)

Renders a header with title.

Slots

  • inner_block (required)
  • subtitle
  • actions

icon(assigns)

ported from core components Renders a Heroicon.

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.