PhiaUi.Components.Bento (phia_ui v0.1.17)

Bento grid components for PhiaUI — 4 components for Apple-style modular grid layouts with varying cell spans.

Components

bento_grid/1 — CSS grid container (3, 4, or 6 columns)
bento_item/1 — grid cell with col/row span and variant styles
bento_header/1 — structured header with icon, title, subtitle slots
bento_badge/1 — positioned badge overlay for bento items

Summary

Functions

bento_badge(assigns)

Positioned badge overlay for bento items. Must be inside a relative parent.

bento_grid(assigns)

Apple-style bento grid container.

bento_header(assigns)

Structured bento cell header with icon, title, and subtitle slots.

bento_item(assigns)

Bento grid cell with configurable column/row span and visual variants.

Functions

bento_badge(assigns)

Positioned badge overlay for bento items. Must be inside a relative parent.

Examples

<div class="relative">
  <.bento_badge position="top-right" variant="primary">New</.bento_badge>
</div>

Attributes

position (:string) - Defaults to "top-right". Must be one of "top-left", "top-right", "bottom-left", or "bottom-right".
variant (:atom) - Defaults to :default. Must be one of :default, :primary, :success, :warning, or :destructive.
class (:string) - Defaults to nil.
Global attributes are accepted.

Slots

inner_block (required)

bento_grid(assigns)

Apple-style bento grid container.

Examples

<.bento_grid cols="3" gap="md">
  <.bento_item span_col="2">Wide item</.bento_item>
  <.bento_item>Narrow item</.bento_item>
</.bento_grid>

Attributes

cols (:string) - Defaults to "3". Must be one of "3", "4", or "6".
gap (:string) - Defaults to "md". Must be one of "sm", "md", or "lg".
class (:string) - Defaults to nil.
Global attributes are accepted.

Slots

inner_block (required)

bento_header(assigns)

Structured bento cell header with icon, title, and subtitle slots.

Examples

<.bento_header>
  <:icon><.icon name="hero-star" class="size-5" /></:icon>
  <:title>Feature Name</:title>
  <:subtitle>Short description</:subtitle>
</.bento_header>

Attributes

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

Slots

inner_block
icon
title
subtitle

bento_item(assigns)

Bento grid cell with configurable column/row span and visual variants.

Examples

<.bento_item span_col="2" span_row="2" variant="glass">
  <:header>
    <.bento_header>
      <:title>Big Feature</:title>
    </.bento_header>
  </:header>
  Content
</.bento_item>

Attributes

span_col (:string) - Defaults to "1". Must be one of "1", "2", or "3".
span_row (:string) - Defaults to "1". Must be one of "1", or "2".
variant (:atom) - Defaults to :default. Must be one of :default, :glass, :gradient, :outlined, or :dark.
class (:string) - Defaults to nil.
Global attributes are accepted.

Slots

inner_block (required)
header