Catalog Layouts

<.aside>

ConnieUI.Layouts

Location agreement

Location agreement

Sent to 3 signers on 7 September.

HEEx 
<div class="w-3xl">
  <ConnieUI.Layouts.aside gap="lg">
    <:aside>
      <div class="w-48">
        <ConnieUI.Cards.card>
          <ConnieUI.Cards.document_thumb title="Location agreement" />
        </ConnieUI.Cards.card>
      </div>
    </:aside>
    <:main>
      <ConnieUI.Typography.heading level="h2">Location agreement</ConnieUI.Typography.heading>
      <ConnieUI.Typography.muted>Sent to 3 signers on 7 September.</ConnieUI.Typography.muted>
    </:main>
  </ConnieUI.Layouts.aside>
</div>

Variant matrix

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

Controls

:string

Docs

Horizontal layout with a fixed-size aside and a main area that fills remaining space. Both slots stretch to the same height. The aside keeps its intrinsic size while the main area grows to fill available width. ## Examples <ConnieUI.Layouts.aside> <:aside> <img src="/preview.png" class="h-[174px]" /> </:aside> <:main> <div>Content that fills remaining space</div> </:main> </ConnieUI.Layouts.aside>
Attribute Type Default Description
gap :string "md"
xs | sm | md | lg | xl
Slot Slot attributes Description
:aside *
:main *