webawesome/docs/docs/layout.md

title, description, layout

title	description	layout
Layout	Browse Web Awesome's components and utilities for creating responsive web layouts.	page-outline

<style> wa-page > main { max-width: 120ch; margin-inline: auto; } .index-grid wa-card::part(header) { background-color: var(--wa-color-neutral-fill-quiet); border-bottom: none; } wa-card .component-name { font-size: var(--wa-font-size-s); font-weight: var(--wa-font-weight-action); } </style>

Layout components and utility classes help you organize content that can adapt to any device or screen size. Browse the collection of responsive layout tools included in Web Awesome Pro.

Components

{% include "svgs/thumbnail-placeholder.njk" %}

Page

Utilities

{% include "svgs/layout/cluster.njk" %}

Cluster

{% include "svgs/layout/flank.njk" %}

Flank

{% include "svgs/layout/frame.njk" %}

Frame

{% include "svgs/layout/grid.njk" %}

Grid

{% include "svgs/layout/split.njk" %}

Split

{% include "svgs/layout/stack.njk" %}

Stack