Catalog Layouts

<.responsive>

ConnieUI.Layouts

Shown below the sm breakpoint
HEEx 
<div class="w-xl">
  <ConnieUI.Layouts.responsive>
    <:mobile>
      <ConnieUI.Cards.slideout_card>Shown below the sm breakpoint</ConnieUI.Cards.slideout_card>
    </:mobile>
    <:desktop>
      <ConnieUI.Cards.slideout_card>Shown from the sm breakpoint up</ConnieUI.Cards.slideout_card>
    </:desktop>
  </ConnieUI.Layouts.responsive>
</div>

Controls

This component has no attributes the panel can set.

Docs

Responsive wrapper that shows different content on mobile vs desktop. The `mobile` slot is visible on viewports below `sm` breakpoint. The `desktop` slot is visible on `sm` breakpoint and larger. ## Examples <ConnieUI.Layouts.responsive> <:mobile> <ConnieUI.Layouts.grid cols={2} rows={2}> ... </ConnieUI.Layouts.grid> </:mobile> <:desktop> <ConnieUI.Layouts.columns> ... </ConnieUI.Layouts.columns> </:desktop> </ConnieUI.Layouts.responsive>
Slot Slot attributes Description
:mobile *
:desktop *