Layout Utilities

Layout Utilities layout utilities link

Full documentation: https://webawesome.com/docs/utilities

Stack stack link

CSS Utilities Stack

A stack arranges its children in a vertical column with an equal gap between each item, so you don’t have to add top or bottom margins to every element you put into it. It’s the go-to layout for forms, paragraphs of text, card bodies, and anywhere you want consistent vertical rhythm.

By default, items stretch to fill the stack’s width. Pair wa-stack with a wa-gap-* class to control the spacing and a wa-align-items-* class to change how children line up horizontally.

<div class="wa-stack">
  <div></div>
  <div></div>
  <div></div>
</div>

Examples examples link

Stacks are well suited for forms, text, and ensuring consistent spacing between elements in the document flow.

<div class="wa-stack">
  <wa-input label="Email">
    <wa-icon slot="start" name="envelope" variant="regular"></wa-icon>
  </wa-input>
  <wa-input label="Password" type="password">
    <wa-icon slot="start" name="lock"></wa-icon>
  </wa-input>
  <wa-checkbox>Remember me on this device</wa-checkbox>
  <wa-button appearance="filled">Log In</wa-button>
</div>

<div class="wa-stack wa-gap-2xl">
  <h3>Aragorn's Squash</h3>
  <p>
    Altogether unleash weasel mainly well-protected hiding Farthing excuse. Falling pits oil em Hasufel levels weight
    rides vagabonds? Gamgee hard-won thunder merrier forests treasury. Past birthday lasts lowly there'd woe Woodland pa
    sun's slaying most handling.
  </p>
  <p>
    Even the smallest person can change the course of the future. They tempted completely other caves cloven wisest
    draught scrumptious cook Undómiel friends. Dory crunchy huge sleepless. Unmade took nerves liquor defeated Arathorn.
  </p>
</div>

Align Items align items link

By default, items stretch to fill the inline size of the wa-stack container. You can add any of the following wa-align-items-* classes to an element with wa-stack to specify how items are aligned in the inline direction:

wa-align-items-start
wa-align-items-end
wa-align-items-center
wa-align-items-stretch
wa-align-items-baseline

<div class="wa-grid">
  <div class="wa-stack wa-align-items-start">
    <div style="min-inline-size: 4rem;"></div>
    <div style="min-inline-size: 8rem;"></div>
    <div style="min-inline-size: 6rem;"></div>
  </div>
  <div class="wa-stack wa-align-items-center">
    <div style="min-inline-size: 4rem;"></div>
    <div style="min-inline-size: 8rem;"></div>
    <div style="min-inline-size: 6rem;"></div>
  </div>
  <div class="wa-stack wa-align-items-end">
    <div style="min-inline-size: 4rem;"></div>
    <div style="min-inline-size: 8rem;"></div>
    <div style="min-inline-size: 6rem;"></div>
  </div>
</div>

Gap gap link

By default, the gap between stack items uses --wa-space-m from your theme. You can add any of the following wa-gap-* classes to an element with wa-stack to specify the gap between items:

wa-gap-0
wa-gap-3xs
wa-gap-2xs
wa-gap-xs
wa-gap-s
wa-gap-m
wa-gap-l
wa-gap-xl
wa-gap-2xl
wa-gap-3xl
wa-gap-4xl
wa-gap-5xl

<div class="wa-grid">
  <div class="wa-stack wa-gap-2xs">
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div class="wa-stack wa-gap-2xl">
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

Cluster cluster link

CSS Utilities Cluster

A cluster arranges its children inline with even spacing and wraps them onto a new line whenever the container runs out of room. Reach for it whenever you have a horizontal group of items of varying widths, like tag lists, button rows, inline metadata, or breadcrumb-style trails, and want the layout to stay tidy on every screen size without writing any media queries.

By default, cluster children are centered vertically. Pair wa-cluster with a wa-gap-* class to change the spacing and a wa-align-items-* class to change how items align on the cross axis.

<div class="wa-cluster">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

<!-- We'll vary the div sizes to show the flow of cluster elements -->
<style>
  .wa-cluster div:empty:nth-child(3n) {
    min-inline-size: 6rem;
  }
  .wa-cluster div:empty:nth-child(3n + 2) {
    min-inline-size: 8rem;
  }
</style>

Examples examples 1 link

Clusters are great for inline lists and aligning items of varying sizes.

<div class="wa-cluster">
  <wa-icon name="web-awesome"></wa-icon>
  <a href="#">Components</a>
  <a href="#">Layout</a>
  <a href="#">Patterns</a>
  <a href="#">Theming</a>
</div>

<div class="wa-stack">
  <h3 class="wa-heading-2xl">Withywindle Pub and Eatery</h3>
  <div class="wa-cluster wa-gap-xs">
    <wa-rating value="4.6" read-only></wa-rating>
    <strong>4.6</strong>
    <span>(419 reviews)</span>
  </div>
  <div class="wa-cluster wa-gap-xs">
    <div class="wa-cluster wa-gap-3xs">
      <wa-icon name="dollar" style="color: var(--wa-color-green-60);"></wa-icon>
      <wa-icon name="dollar" style="color: var(--wa-color-green-60);"></wa-icon>
      <wa-icon name="dollar" style="color: var(--wa-color-green-60);"></wa-icon>
    </div>
    <span class="wa-caption-s">&bull;</span>
    <wa-tag size="s">Comfort Food</wa-tag>
    <wa-tag size="s">Gastropub</wa-tag>
    <wa-tag size="s">Cocktail Bar</wa-tag>
    <wa-tag size="s">Vegetarian</wa-tag>
    <wa-tag size="s">Gluten Free</wa-tag>
  </div>
</div>

Align Items align items 1 link

By default, items are centered in the block direction of the wa-cluster container. You can add any of the following wa-align-items-* classes to an element with wa-cluster to specify how items are aligned in the block direction:

wa-align-items-start
wa-align-items-end
wa-align-items-center
wa-align-items-stretch
wa-align-items-baseline

<div class="wa-stack">
  <div class="wa-cluster wa-align-items-start" style="min-height: 8rem;">
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div class="wa-cluster wa-align-items-end" style="min-height: 8rem;">
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div class="wa-cluster wa-align-items-center" style="min-height: 8rem;">
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div class="wa-cluster wa-align-items-stretch" style="min-height: 8rem;">
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

Gap gap 1 link

By default, the gap between cluster items uses --wa-space-m from your theme. You can add any of the following wa-gap-* classes to an element with wa-cluster to specify the gap between items:

wa-gap-0
wa-gap-3xs
wa-gap-2xs
wa-gap-xs
wa-gap-s
wa-gap-m
wa-gap-l
wa-gap-xl
wa-gap-2xl
wa-gap-3xl
wa-gap-4xl
wa-gap-5xl

<div class="wa-stack">
  <div class="wa-cluster wa-gap-2xs">
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div class="wa-cluster wa-gap-2xl">
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

Grid grid link

CSS Utilities Grid

A grid places its children in evenly-sized columns that shrink, grow, and reflow as the container resizes, without any breakpoints to manage. Drop any number of items into wa-grid and the utility figures out how many fit on each row based on the container’s width and the minimum column size you’ve asked for. It’s the quickest way to build card galleries, product listings, dashboards, and any content that should adapt from one column on a phone to several on a desktop.

Set --min-column-size to change the threshold at which items start to wrap, pair wa-grid with a wa-gap-* class to adjust the spacing between cells, or add wa-span-grid to an individual item to make it span every column.

<div class="wa-grid">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

Examples examples 2 link

Grids work especially well for card lists and content designed for browsing.

<div class="wa-grid">
  <div class="wa-stack wa-gap-s">
    <div class="wa-frame wa-border-radius-l">
      <img src="https://images.unsplash.com/photo-1520763185298-1b434c919102?q=20" alt="" />
    </div>
    <h3 class="wa-heading-m">Tulip</h3>
    <em>Tulipa gesneriana</em>
  </div>
  <div class="wa-stack wa-gap-s">
    <div class="wa-frame wa-border-radius-l">
      <img src="https://images.unsplash.com/photo-1591767134492-338e62f7b5a2?q=20" alt="" />
    </div>
    <h3 class="wa-heading-m">Peony</h3>
    <em>Paeonia officinalis</em>
  </div>
  <div class="wa-stack wa-gap-s">
    <div class="wa-frame wa-border-radius-l">
      <img src="https://images.unsplash.com/photo-1590872000386-4348c6393115?q=20" alt="" />
    </div>
    <h3 class="wa-heading-m">Poppy</h3>
    <em>Papaver rhoeas</em>
  </div>
  <div class="wa-stack wa-gap-s">
    <div class="wa-frame wa-border-radius-l">
      <img src="https://images.unsplash.com/photo-1516723338795-324c7c33f700?q=20" alt="" />
    </div>
    <h3 class="wa-heading-m">Sunflower</h3>
    <em>Helianthus annuus</em>
  </div>
  <div class="wa-stack wa-gap-s">
    <div class="wa-frame wa-border-radius-l">
      <img src="https://images.unsplash.com/photo-1563601841845-74a0a8ab7c8a?q=20" alt="" />
    </div>
    <h3 class="wa-heading-m">Daisy</h3>
    <em>Bellis perennis</em>
  </div>
</div>

<div class="wa-grid" style="--min-column-size: 30ch;">
  <wa-card>
    <div class="wa-flank">
      <wa-avatar shape="rounded">
        <wa-icon slot="icon" name="globe"></wa-icon>
      </wa-avatar>
      <div class="wa-stack wa-gap-3xs">
        <span class="wa-caption-xs">Population (Zion)</span>
        <span class="wa-cluster wa-gap-xs">
          <span class="wa-heading-2xl">251,999</span>
          <wa-badge variant="danger">-3%&nbsp;<wa-icon name="arrow-trend-down"></wa-icon></wa-badge>
        </span>
      </div>
    </div>
  </wa-card>
  <wa-card>
    <div class="wa-flank">
      <wa-avatar shape="rounded">
        <wa-icon slot="icon" name="microchip"></wa-icon>
      </wa-avatar>
      <div class="wa-stack wa-gap-3xs">
        <span class="wa-caption-xs">Minds Freed</span>
        <span class="wa-cluster wa-gap-xs">
          <span class="wa-heading-2xl">0.36%</span>
          <wa-badge variant="success">+0.03%&nbsp;<wa-icon name="arrow-trend-up"></wa-icon></wa-badge>
        </span>
      </div>
    </div>
  </wa-card>
  <wa-card>
    <div class="wa-flank">
      <wa-avatar shape="rounded">
        <wa-icon slot="icon" name="robot"></wa-icon>
      </wa-avatar>
      <div class="wa-stack wa-gap-3xs">
        <span class="wa-caption-xs">Agents Discovered</span>
        <span class="wa-cluster wa-gap-xs">
          <span class="wa-heading-2xl">3</span>
          <wa-badge variant="neutral">±0%&nbsp;<wa-icon name="minus"></wa-icon></wa-badge>
        </span>
      </div>
    </div>
  </wa-card>
  <wa-card>
    <div class="wa-flank">
      <wa-avatar shape="rounded">
        <wa-icon slot="icon" name="spaghetti-monster-flying"></wa-icon>
      </wa-avatar>
      <div class="wa-stack wa-gap-3xs">
        <span class="wa-caption-xs">Sentinels Controlled</span>
        <span class="wa-cluster wa-gap-xs">
          <span class="wa-heading-2xl">208</span>
          <wa-badge variant="success">+1%&nbsp;<wa-icon name="arrow-trend-up"></wa-icon></wa-badge>
        </span>
      </div>
    </div>
  </wa-card>
</div>

<style>
  wa-badge > wa-icon {
    color: color-mix(in oklab, currentColor, transparent 40%);
  }
</style>

Sizing sizing link

By default, grid items will wrap when the grid’s column size is less than 20ch, but you can set a custom minimum column size using the --min-column-size property.

<div class="wa-stack">
  <div class="wa-grid" style="--min-column-size: 200px;">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div class="wa-grid" style="--min-column-size: 6rem;">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

Gap gap 2 link

By default, the gap between grid items uses --wa-space-m from your theme. You can add any of the following wa-gap-* classes to an element with wa-grid to specify the gap between items:

wa-gap-0
wa-gap-3xs
wa-gap-2xs
wa-gap-xs
wa-gap-s
wa-gap-m
wa-gap-l
wa-gap-xl
wa-gap-2xl
wa-gap-3xl

<div class="wa-stack">
  <div class="wa-grid wa-gap-2xs">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div class="wa-grid wa-gap-2xl">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

Span Grid span grid link

You can add wa-span-grid to any grid item to allow it to span all grid columns. With this, the grid item occupies its own grid row.

<div class="wa-grid">
  <div></div>
  <div></div>
  <div class="wa-span-grid"></div>
  <div></div>
  <div></div>
</div>

Split split link

CSS Utilities Split

A split pushes its children to opposite ends of the container, filling the space between them. It’s what you want whenever you need a logo on one side and navigation on the other, a section heading paired with an action button, or a list item whose label and value sit at opposite ends of the row. Any number of children work: the first one hugs the start, the last one hugs the end, and anything in between is evenly distributed.

By default a split runs horizontally; append :column to stack items vertically instead. When the container gets too narrow for everything to fit on one row, the items wrap automatically.

<div class="wa-split">
  <div></div>
  <div></div>
</div>

Examples examples 3 link

Splits are especially helpful for navigation, header, and footer layouts.

<div class="wa-flank">
  <div class="wa-split:column">
    <div class="wa-stack">
      <wa-button appearance="plain">
        <wa-icon name="house" label="Home"></wa-icon>
      </wa-button>
      <wa-button appearance="plain">
        <wa-icon name="calendar" label="Calendar"></wa-icon>
      </wa-button>
      <wa-button appearance="plain">
        <wa-icon name="envelope" label="Mail"></wa-icon>
      </wa-button>
    </div>
    <div class="wa-stack">
      <wa-divider></wa-divider>
      <wa-button appearance="plain">
        <wa-icon name="right-from-bracket" label="Sign Out"></wa-icon>
      </wa-button>
    </div>
  </div>
  <div class="placeholder"></div>
</div>

<style>
  .placeholder {
    min-block-size: 300px;
    background-color: var(--wa-color-neutral-fill-quiet);
    border: dashed var(--wa-border-width-s) var(--wa-color-neutral-border-normal);
    border-radius: var(--wa-border-radius-l);
  }
</style>

<div class="wa-stack">
  <div class="wa-split">
    <wa-icon name="web-awesome" label="Web Awesome" class="wa-font-size-xl"></wa-icon>
    <div class="wa-cluster">
      <wa-button appearance="filled">Sign Up</wa-button>
      <wa-button appearance="outlined">Log In</wa-button>
    </div>
  </div>
  <div class="placeholder"></div>
</div>

<style>
  .placeholder {
    min-block-size: 300px;
    background-color: var(--wa-color-neutral-fill-quiet);
    border: dashed var(--wa-border-width-s) var(--wa-color-neutral-border-normal);
    border-radius: var(--wa-border-radius-l);
  }
</style>

Direction direction link

Items can be split across a row or a column by appending :row or :column to the wa-split class.

<div class="wa-flank wa-align-items-start" style="block-size: 16rem;">
  <div class="wa-split:column">
    <div></div>
    <div></div>
  </div>
  <div class="wa-split:row">
    <div></div>
    <div></div>
  </div>
</div>

Align Items align items 2 link

By default, items are centered on the cross axis of the wa-split container. You can add any of the following wa-align-items-* classes to an element with wa-split to specify how items are aligned:

wa-align-items-start
wa-align-items-end
wa-align-items-center
wa-align-items-stretch
wa-align-items-baseline

These modifiers specify how items are aligned in the block direction for wa-split:row and in the inline direction for wa-split:column.

<div class="wa-stack">
  <div class="wa-split wa-align-items-start" style="height: 8rem;">
    <div></div>
    <div></div>
  </div>
  <div class="wa-split wa-align-items-end" style="height: 8rem;">
    <div></div>
    <div></div>
  </div>
  <div class="wa-split wa-align-items-center" style="height: 8rem;">
    <div></div>
    <div></div>
  </div>
  <div class="wa-split wa-align-items-stretch" style="height: 8rem;">
    <div></div>
    <div></div>
  </div>
</div>

Gap gap 3 link

A split’s gap determines how close items can be before they wrap. By default, the gap between split items uses --wa-space-m from your theme. You can add any of the following wa-gap-* classes to an element with wa-split to specify the gap between items:

wa-gap-0
wa-gap-3xs
wa-gap-2xs
wa-gap-xs
wa-gap-s
wa-gap-m
wa-gap-l
wa-gap-xl
wa-gap-2xl
wa-gap-3xl

<div class="wa-stack">
  <div class="wa-split wa-gap-3xs">
    <div></div>
    <div></div>
  </div>
  <div class="wa-split wa-gap-3xl">
    <div></div>
    <div></div>
  </div>
</div>

Flank flank link

CSS Utilities Flank

A flank pairs two items side by side, where one item (the “flank”) sits at its natural size while the other stretches to fill the remaining space. It’s the right fit for any “small thing next to a larger thing” pattern: an avatar next to a name and bio, an icon beside a paragraph of text, an input followed by a submit button, or a sidebar alongside page content.

By default the first child is the flank, but you can pick either end with wa-flank:start or wa-flank:end. When the main content gets too narrow, the two items wrap onto separate lines automatically.

<div class="wa-flank">
  <div></div>
  <div></div>
</div>

Examples examples 4 link

Flanks work especially well for asides, inputs with adjacent buttons, and rich description lists.

<div class="wa-flank:end wa-gap-xs">
  <wa-input>
    <wa-icon slot="start" name="magnifying-glass"></wa-icon>
  </wa-input>
  <wa-button appearance="filled">Search</wa-button>
</div>

<div class="wa-stack wa-gap-xl">
  <div class="wa-flank wa-align-items-start">
    <wa-avatar
      image="https://images.unsplash.com/photo-1553284966-19b8815c7817?q=20"
      label="Gandalf's avatar"
    ></wa-avatar>
    <div class="wa-stack wa-gap-3xs">
      <strong>Gandalf</strong>
      <p class="wa-body-s">
        All we have to decide is what to do with the time that is given to us. There are other forces at work in this
        world, Frodo, besides the will of evil.
      </p>
    </div>
  </div>
  <div class="wa-flank wa-align-items-start">
    <wa-avatar
      image="https://images.unsplash.com/photo-1542403764-c26462c4697e?q=20"
      label="Boromir's avatar"
    ></wa-avatar>
    <div class="wa-stack wa-gap-3xs">
      <strong>Boromir</strong>
      <p class="wa-body-s">
        One does not simply walk into Mordor. Its Black Gates are guarded by more than just Orcs. There is evil there
        that does not sleep, and the Great Eye is ever watchful.
      </p>
    </div>
  </div>
  <div class="wa-flank wa-align-items-start">
    <wa-avatar
      image="https://images.unsplash.com/photo-1518495973542-4542c06a5843?q=20"
      label="Galadriel's avatar"
    ></wa-avatar>
    <div class="wa-stack wa-gap-3xs">
      <strong>Galadriel</strong>
      <p class="wa-body-s">
        The world is changed. I feel it in the water. I feel it in the earth. I smell it in the air. Much that once was
        is lost, for none now live who remember it.
      </p>
    </div>
  </div>
</div>

Position position link

By default, the first item in the wa-flank container will flank the other content. You can specify whether the first or last item will flank the remaining content by appending :start or :end to the wa-flank class.

<div class="wa-stack">
  <div class="wa-flank:start">
    <div></div>
    <div></div>
  </div>
  <div class="wa-flank:end">
    <div></div>
    <div></div>
  </div>
</div>

Sizing sizing 1 link

The flank’s inline size is determined by the size of its content, but you can set a target size using the --flank-size property. When the flank wraps, it stretches to fill the inline size of the container.

<div class="wa-stack">
  <div class="wa-flank" style="--flank-size: 200px;">
    <div></div>
    <div></div>
  </div>
  <div class="wa-flank" style="--flank-size: 6rem;">
    <div></div>
    <div></div>
  </div>
</div>

The main content fills the remaining inline space of the container. By default, the items wrap when the main content is less than 50% of the container. You can change the minimum size of the main content with the --content-percentage property.

<div class="wa-stack">
  <div class="wa-flank" style="--content-percentage: 70%;">
    <div></div>
    <div></div>
  </div>
  <div class="wa-flank" style="--content-percentage: 85%;">
    <div></div>
    <div></div>
  </div>
</div>

Align Items align items 3 link

By default, items are centered in the block direction of the wa-flank container. You can add any of the following wa-align-items-* classes to an element with wa-flank to specify how items are aligned in the block direction:

wa-align-items-start
wa-align-items-end
wa-align-items-center
wa-align-items-stretch
wa-align-items-baseline

<div class="wa-stack">
  <div class="wa-flank wa-align-items-start" style="min-height: 8rem;">
    <div></div>
    <div></div>
  </div>
  <div class="wa-flank wa-align-items-end" style="min-height: 8rem;">
    <div></div>
    <div></div>
  </div>
  <div class="wa-flank wa-align-items-center" style="min-height: 8rem;">
    <div></div>
    <div></div>
  </div>
  <div class="wa-flank wa-align-items-stretch" style="min-height: 8rem;">
    <div></div>
    <div></div>
  </div>
</div>

Gap gap 4 link

By default, the gap between flank items uses --wa-space-m from your theme. You can add any of the following wa-gap-* classes to an element with wa-flank to specify the gap between items:

wa-gap-0
wa-gap-3xs
wa-gap-2xs
wa-gap-xs
wa-gap-s
wa-gap-m
wa-gap-l
wa-gap-xl
wa-gap-2xl
wa-gap-3xl

<div class="wa-stack">
  <div class="wa-flank wa-gap-2xs">
    <div></div>
    <div></div>
  </div>
  <div class="wa-flank wa-gap-2xl">
    <div></div>
    <div></div>
  </div>
</div>

Frame frame link

CSS Utilities Frame

A frame is a box that keeps a fixed shape no matter how big or small it gets. Wrap an image, video, map, or placeholder in wa-frame and it stays a square by default, or a landscape, portrait, or any custom aspect ratio you specify, even as the surrounding layout resizes. That means no more letterboxing, no more collapsed boxes waiting on a slow image to load, and no more cards that end up different heights.

Pair wa-frame with one of the wa-border-radius-* classes to round the corners without cropping the content inside.

<div class="wa-frame" style="max-inline-size: 20rem;">
  <div></div>
</div>

Examples examples 5 link

Frames are well-suited for images and image placeholders.

<div class="wa-flank" style="--flank-size: 8rem;">
  <div class="wa-frame wa-border-radius-m">
    <img src="https://images.unsplash.com/photo-1523593288094-3ccfb6b2c192?q=20" alt="" />
  </div>
  <div class="wa-flank:end" style="--content-percentage: 70%">
    <div class="wa-stack wa-gap-xs">
      <h3>The Lord of the Rings: The Fellowship of the Ring</h3>
      <span>J.R.R. Tolkien</span>
    </div>
    <wa-button id="options-menu" appearance="plain">
      <wa-icon name="ellipsis" label="Options"></wa-icon>
    </wa-button>
    <wa-tooltip for="options-menu">Options</wa-tooltip>
  </div>
</div>

<div class="wa-grid" style="--min-column-size: 25ch;">
  <wa-card>
    <div class="wa-frame:landscape" slot="media">
      <img src="https://images.unsplash.com/photo-1533743983669-94fa5c4338ec?q=20" alt="Grey and white tabby kitten" />
    </div>
    <div class="wa-stack wa-gap-xs">
      <h3 class="wa-heading-m">White-socks</h3>
      <span class="wa-body-s">Kitten &bull; Male</span>
      <div class="wa-flank:end wa-gap-xs">
        <wa-button size="s" appearance="filled" variant="brand">Adopt this pet</wa-button>
        <wa-button id="fav-whitesocks" appearance="plain" size="s">
          <wa-icon name="heart" variant="regular" label="Favorite"></wa-icon>
        </wa-button>
        <wa-tooltip for="fav-whitesocks">Favorite</wa-tooltip>
      </div>
    </div>
  </wa-card>
  <wa-card>
    <div class="wa-frame:landscape" slot="header">
      <div class="wa-stack wa-align-items-center wa-gap-xs wa-caption-s">
        <wa-icon name="paw"></wa-icon>
        <span>Photo coming soon</span>
      </div>
    </div>
    <div class="wa-stack wa-gap-xs">
      <h3 class="wa-heading-m">Bumpkin</h3>
      <span class="wa-body-s">Adult &bull; Male</span>
      <div class="wa-flank:end wa-gap-xs">
        <wa-button size="s" appearance="filled" variant="brand">Adopt this pet</wa-button>
        <wa-button id="fav-bumpkin" appearance="plain" size="s">
          <wa-icon name="heart" variant="regular" label="Favorite"></wa-icon>
        </wa-button>
        <wa-tooltip for="fav-bumpkin">Favorite</wa-tooltip>
      </div>
    </div>
  </wa-card>
  <wa-card>
    <div class="wa-frame:landscape" slot="media">
      <img src="https://images.unsplash.com/photo-1445499348736-29b6cdfc03b9?q=20" alt="Diluted calico kitten" />
    </div>
    <div class="wa-stack wa-gap-xs">
      <h3 class="wa-heading-m">Swish-tail</h3>
      <span class="wa-body-s">Kitten &bull; Female</span>
      <div class="wa-flank:end wa-gap-xs">
        <wa-button size="s" appearance="filled" variant="brand">Adopt this pet</wa-button>
        <wa-button id="fav-swishtail" appearance="plain" size="s">
          <wa-icon name="heart" variant="regular" label="Favorite"></wa-icon>
        </wa-button>
        <wa-tooltip for="fav-swishtail">Favorite</wa-tooltip>
      </div>
    </div>
  </wa-card>
  <wa-card>
    <div class="wa-frame:landscape" slot="media">
      <img src="https://images.unsplash.com/photo-1517451330947-7809dead78d5?q=20" alt="Short-haired tabby cat" />
    </div>
    <div class="wa-stack wa-gap-xs">
      <h3 class="wa-heading-m">Sharp-ears</h3>
      <span class="wa-body-s">Adult &bull; Female</span>
      <div class="wa-flank:end wa-gap-xs">
        <wa-button size="s" appearance="filled" variant="brand">Adopt this pet</wa-button>
        <wa-button id="fav-sharpears" appearance="plain" size="s">
          <wa-icon name="heart" variant="regular" label="Favorite"></wa-icon>
        </wa-button>
        <wa-tooltip for="fav-sharpears">Favorite</wa-tooltip>
      </div>
    </div>
  </wa-card>
</div>

Aspect Ratio aspect ratio link

Frames have a square aspect ratio by default. You can append :square (1 / 1), :landscape (16 / 9), or :portrait (9 / 16) to the wa-frame class in your markup to specify an aspect ratio for the frame. Alternatively, you can define the aspect-ratio property to set a custom proportion.

<div class="wa-grid">
  <div class="wa-frame:landscape">
    <div></div>
  </div>
  <div class="wa-frame:portrait">
    <div></div>
  </div>
  <div class="wa-frame" style="aspect-ratio: 4 / 3;">
    <div></div>
  </div>
</div>

Border Radius border radius link

Frames have a square border radius by default. You can add any of the following wa-border-radius-* classes to an element with wa-frame to specify the border radius:

wa-border-radius-s
wa-border-radius-m
wa-border-radius-l
wa-border-radius-pill
wa-border-radius-circle
wa-border-radius-square

Alternatively, you can define the border-radius property to set custom rounding.

<div class="wa-grid">
  <div class="wa-frame wa-border-radius-l">
    <div></div>
  </div>
  <div class="wa-frame wa-border-radius-circle">
    <div></div>
  </div>
  <div class="wa-frame" style="border-radius: 50% 0%;">
    <div></div>
  </div>
</div>

Gap gap 5 link

CSS Utilities Gap

These utility classes set the space between items inside a flex or grid container. Pair them with a layout utility like cluster, stack, grid, or split to override that layout’s default spacing, or apply wa-gap-* to any display: flex or display: grid element of your own to get the same tokens without writing custom CSS.

Every class besides wa-gap-0 corresponds to one of the --wa-space-* tokens in your theme, so the spacing you pick stays in sync with the rest of your design system.

Gap Classes gap classes link

Class Name	gap Value
`wa-gap-0`	`0`
`wa-gap-3xs`	`–wa-space-3xs`
`wa-gap-2xs`	`–wa-space-2xs`
`wa-gap-xs`	`–wa-space-xs`
`wa-gap-s`	`–wa-space-s`
`wa-gap-m`	`–wa-space-m`
`wa-gap-l`	`–wa-space-l`
`wa-gap-xl`	`–wa-space-xl`
`wa-gap-2xl`	`–wa-space-2xl`
`wa-gap-3xl`	`–wa-space-3xl`
`wa-gap-4xl`	`–wa-space-4xl`
`wa-gap-5xl`	`–wa-space-5xl`

Align Items align items 4 link

CSS Utilities Align Items

These utility classes control how flex and grid items line up across the container’s cross axis, which is the axis perpendicular to the one its children flow along. Reach for them any time the default alignment of a cluster, stack, flank, split, or grid doesn’t match what you’re after: centering icons next to text, making all cards in a row share the same height, or pinning form labels to the top of each row.

Class Name	align-items Value
`wa-align-items-baseline`	`baseline`
`wa-align-items-center`	`center`
`wa-align-items-end`	`flex-end`
`wa-align-items-start`	`flex-start`
`wa-align-items-stretch`	`stretch`

Override with Align Self override with align self link

When you need a flex or grid item to deviate from the align-items property of its container, use the wa-align-self-* classes to set the item’s align-self property and individually change its alignment on the container’s cross axis.

Class Name	align-self Value
`wa-align-self-center`	`center`
`wa-align-self-baseline`	`baseline`
`wa-align-self-end`	`flex-end`
`wa-align-self-start`	`flex-start`
`wa-align-self-stretch`	`stretch`

What’s the Cross Axis? whats the cross axis link

The cross axis runs perpendicular to a container’s content direction. For containers where flex-direction is row and content flows in the inline direction, the cross axis runs in the block direction. For containers where flex-direction is column and content flows in the block direction, the cross axis runs in the inline direction.

Justify Content justify content link

CSS Utilities Justify Content

These utility classes control how space is distributed between items along a flex or grid container’s main axis, which is the axis its children flow along. Reach for them when you want to push items to one end of a cluster or stack, center a row of buttons, or spread a set of navigation links evenly across a header.

Class Name	justify-content Value
`wa-justify-content-start`	`flex-start`
`wa-justify-content-end`	`flex-end`
`wa-justify-content-center`	`center`
`wa-justify-content-space-around`	`space-around`
`wa-justify-content-space-between`	`space-between`
`wa-justify-content-space-evenly`	`space-evenly`

What’s the Main Axis? whats the main axis link

The main axis runs parallel to a container’s content direction. For grid containers and flex containers where flex-direction is row, the main axis runs in the inline direction. For containers where flex-direction is column, the main axis runs in the block direction.