Maui.Container (maui v1.0.0-alpha.9)

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

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)

Slots

inner_block

card_footer(assigns)

Slots

inner_block

card_header(assigns)

Slots

inner_block

card_title(assigns)

Slots

inner_block

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