Catalog Layouts

<.narrow>

ConnieUI.Layouts

HEEx 
<div class="w-2xl rounded-xl ring-1 ring-secondary ring-inset p-4">
  <ConnieUI.Layouts.narrow width="xs">
    <ConnieUI.Progress.step_dots current={2} total={3} />
  </ConnieUI.Layouts.narrow>
</div>

Variant matrix

Every combination of one or two attributes, side by side.

Controls

:string

Set by the example

class

Docs

Horizontally centered container with a max-width constraint. Content takes full width up to the specified max-width, then centers via auto margins. ## Examples <ConnieUI.Layouts.narrow> <ConnieUI.Progress.step_dots current={2} total={3} /> </ConnieUI.Layouts.narrow> <ConnieUI.Layouts.narrow width="xs"> <p>Narrow centered content</p> </ConnieUI.Layouts.narrow>
Attribute Type Default Description
width :string "2xs"
3xs | 2xs | xs | sm | md | lg | xl | 2xl | 3xl | 4xl | 5xl | 6xl | 7xl
class :any nil
Slot Slot attributes Description
inner_block *