Layout

A bare div/span/pre that exists purely to hold a class: no visual style of its own, and the only component with no paperize attr at all, since there's no skin to strip.

          tag="pre", whitespace preserved.
        

<.pp_box class="rounded-lg bg-pp-surface-variant p-4">A div (default).</.pp_box>
<.pp_box tag="span" class="rounded bg-pp-surface-variant px-2 py-1">A span.</.pp_box>
<.pp_box tag="pre" class="rounded-lg bg-pp-surface-variant p-4">A pre, whitespace preserved.</.pp_box>

A centered, width-constrained content wrapper. This very page's content sits inside one (max_width=lg); here it is again, nested, at two other widths.

<.pp_container max_width="sm">
  Narrower content.
</.pp_container>

<.pp_container :for={width <- ~w(sm md lg xl 2xl full)} max_width={width} class="mb-2">
  {width}
</.pp_container>

A one-dimensional flex layout: row or column, with consistent spacing between children. No divider slot to auto-interleave (a stateless component only gets one opaque inner_block); add a Divider yourself where you want one. The bordered canvas around every demo on this site is a pp_stack.

<.pp_stack direction="row" spacing={:sm}>
  <.pp_button>Save</.pp_button>
  <.pp_button variant="outlined">Cancel</.pp_button>
</.pp_stack>

<.pp_stack direction="column" spacing={:sm}>
  <.pp_button>Save</.pp_button>
  <.pp_button variant="outlined">Cancel</.pp_button>
</.pp_stack>

A 12-column CSS grid container, paired with GridItem for each column-spanning child. GridItem's md attribute overrides its span at the md: breakpoint and up, the only responsive breakpoint supported, since every value has to be a literal Tailwind class.

<.pp_grid>
  <.pp_grid_item span={12} md={4}>Sidebar</.pp_grid_item>
  <.pp_grid_item span={12} md={8}>Content</.pp_grid_item>
</.pp_grid>

A thin separator line, most often used between sections of a List.

<.pp_divider />
<.pp_divider inset />