Renders an accent-bar grid for visual data cards.

Examples

<.accent_grid>
  <.accent_grid_item label="Revenue" value="$12,430" color="1" />
  <.accent_grid_item label="Orders" value="847" color="2" />
</.accent_grid>

Attributes

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

Slots

• inner_block (required)

Renders a single accent grid item.

Attributes

• label (:string) (required)
• value (:string) (required)
• color (:string) - Accent color 1-9. Defaults to nil. Must be one of nil, "1", "2", "3", "4", "5", "6", "7", "8", or "9".
• variant (:string) - Semantic color variant. Defaults to nil. Must be one of nil, "primary", "success", "warning", "danger", or "info".
• class (:string) - Defaults to nil.

Renders banded rows (alternating background) for data display.

Examples

<.banded>
  <.banded_row label="Server" value="prod-api-01" />
  <.banded_row label="IP" value="10.0.12.45" />
</.banded>

Attributes

• is_narrow (:boolean) - Narrow label band (8rem). Defaults to false.
• is_wide (:boolean) - Wide label band (20rem). Defaults to false.
• is_truncate (:boolean) - Truncate long values. Defaults to false.
• is_middle (:boolean) - Vertically center labels. Defaults to false.
• is_label_end (:boolean) - Right-align labels. Defaults to false.
• is_label_center (:boolean) - Center-align labels. Defaults to false.
• is_value_end (:boolean) - Right-align values. Defaults to false.
• is_value_center (:boolean) - Center-align values. Defaults to false.
• class (:string) - Defaults to nil.
• Global attributes are accepted.

Slots

• inner_block (required)

Renders a single banded row.

Attributes

• label (:string) (required)
• value (:string) - Defaults to nil.
• class (:string) - Defaults to nil.

Slots

• inner_block - Rich value content (alternative to value attr).

Renders a label cell in a desc_table.

Attributes

• class (:string) - Defaults to nil.

Slots

• inner_block (required)

Renders an Ant Design-style descriptions table.

Examples

<.desc_table>
  <.desc_label>Company</.desc_label>
  <.desc_value>Acme Corp</.desc_value>
  <.desc_label>Email</.desc_label>
  <.desc_value>info@acme.com</.desc_value>
</.desc_table>

<.desc_table cols="2" is_fixed is_truncate>
  ...
</.desc_table>

Attributes

• cols (:string) - 2-column layout. Defaults to nil. Must be one of nil, or "2".
• is_fixed (:boolean) - Fixed label width. Defaults to false.
• is_truncate (:boolean) - Truncate long values. Defaults to false.
• is_middle (:boolean) - Vertically center cells. Defaults to false.
• is_label_end (:boolean) - Right-align labels. Defaults to false.
• is_label_center (:boolean) - Center-align labels. Defaults to false.
• is_value_end (:boolean) - Right-align values. Defaults to false.
• is_value_center (:boolean) - Center-align values. Defaults to false.
• label_width (:string) - Custom label width CSS value. Defaults to nil.
• class (:string) - Defaults to nil.
• Global attributes are accepted.

Slots

• inner_block (required)

Renders a value cell in a desc_table.

Attributes

• is_full (:boolean) - Span full width. Defaults to false.
• class (:string) - Defaults to nil.

Slots

• inner_block (required)

Renders a single dot-leader item.

Attributes

• label (:string) (required)
• value (:string) (required)
• is_total (:boolean) - Bold total line. Defaults to false.
• class (:string) - Defaults to nil.

Renders a dot-leaders container (restaurant menu / invoice style).

Examples

<.dot_leaders>
  <.dot_leader label="Subtotal" value="$1,200.00" />
  <.dot_leader label="Tax" value="$96.00" />
  <.dot_leader label="Total" value="$1,296.00" is_total />
</.dot_leaders>

Attributes

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

Slots

• inner_block (required)

Renders a single field display (label + value).

Examples

<.field label="Name">John Doe</.field>
<.field label="Status" is_full><.badge variant="success">Active</.badge></.field>

Attributes

• label (:string) (required)
• is_full (:boolean) - Span all columns in a grid layout. Defaults to false.
• is_copy_btn (:boolean) - Always-visible copy button. Defaults to false.
• is_copy_click (:boolean) - Click value to copy. Defaults to false.
• is_copy_hover (:boolean) - Copy icon on hover only. Defaults to false.
• value_variant (:string) - Color variant for the value (used in chips layout). Defaults to nil. Must be one of nil, "success", "warning", "danger", or "info".
• copy_value (:string) - Value to copy to clipboard. Defaults to nil.
• class (:string) - Defaults to nil.
• Global attributes are accepted.

Slots

• inner_block (required)

Renders a field group with a title.

Examples

<.field_group title="Personal">
  <.fields>
    <.field label="Name">John</.field>
  </.fields>
</.field_group>

Attributes

• title (:string) (required)
• class (:string) - Defaults to nil.
• Global attributes are accepted.

Slots

• inner_block (required)

Renders a container for field components with layout modifiers.

Examples

<.fields>
  <.field label="Name">John</.field>
</.fields>

<.fields cols="2" is_horizontal>
  <.field label="Company">Acme</.field>
  <.field label="Phone">+420 234 567</.field>
</.fields>

<.fields is_striped is_filled color="1">
  <.field label="Status">Active</.field>
</.fields>

Attributes

• cols (:string) - Grid columns. Defaults to nil. Must be one of nil, "2", "3", or "4".
• is_horizontal (:boolean) - Label and value side by side. Defaults to false.
• is_table (:boolean) - Table-style layout. Defaults to false.
• is_bordered (:boolean) - Bordered rows. Defaults to false.
• is_striped (:boolean) - Alternating row backgrounds. Defaults to false.
• is_compact (:boolean) - Reduced spacing. Defaults to false.
• is_inline (:boolean) - Inline display. Defaults to false.
• is_row (:boolean) - Horizontal row layout. Defaults to false.
• is_relaxed (:boolean) - Extra spacing. Defaults to false.
• is_filled (:boolean) - Filled background. Defaults to false.
• is_linear (:boolean) - Linear minimal layout. Defaults to false.
• is_chips (:boolean) - Chip/tag layout. Defaults to false.
• is_no_border (:boolean) - Remove border. Defaults to false.
• color (:string) - Color variant 1-9. Defaults to nil. Must be one of nil, "1", "2", "3", "4", "5", "6", "7", "8", or "9".
• class (:string) - Defaults to nil.
• Global attributes are accepted.

Slots

• inner_block (required)

Renders a property card with header and label-value rows.

Examples

<.prop_card header="Order Details">
  <.prop_card_row label="Order ID" value="#ORD-001" />
  <.prop_card_row label="Status"><.badge variant="success">Delivered</.badge></.prop_card_row>
  <.prop_card_row label="Total" is_bold>$1,249.00</.prop_card_row>
</.prop_card>

Attributes

• header (:string) - Card header text. Defaults to nil.
• class (:string) - Defaults to nil.
• Global attributes are accepted.

Slots

• inner_block (required)

Renders a row inside a prop_card.

Attributes

• label (:string) (required)
• value (:string) - Defaults to nil.
• is_bold (:boolean) - Bold value text. Defaults to false.
• class (:string) - Defaults to nil.

Slots

• inner_block - Rich value content.