+```
+
+## Align Items
+
+By default, items are centered in the block direction of the `wa-cluster` container. You can add any of the following [`wa-align-items-*`](/docs/style-utilities/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`
+
+```html {.example}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+## Gap
+
+By default, the gap between cluster items uses `--wa-space-m` from your theme. You can add any of the following [`wa-gap-*`](/docs/style-utilities/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`
+
+```html {.example}
+
+
+
+
+
+
+
+
+
+
+
+
+```
\ No newline at end of file
diff --git a/docs/docs/layout/flank.md b/docs/docs/layout/flank.md
new file mode 100644
index 000000000..58f11b680
--- /dev/null
+++ b/docs/docs/layout/flank.md
@@ -0,0 +1,174 @@
+---
+title: Flank
+description: Browse the library of customizable, framework-friendly web components included in Web Awesome.
+layout: page-outline
+---
+
+
+
+Use the `wa-flank` class to position two items side-by-side, with one item positioned alongside, or _flanking_, content that stretches to fill the available space. When space is limited, the items wrap.
+
+```html {.example}
+
+
+
+
+```
+
+## Examples
+
+Flanks work especially well for asides, inputs with adjacent buttons, and rich description lists.
+
+```html {.example}
+
+
+
+
+ Search
+
+```
+
+```html {.example}
+
+
+
+
+ Gandalf
+
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.
+
+
+
+
+
+ Boromir
+
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.
+
+
+
+
+
+ Galadriel
+
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.
+
+
+
+```
+
+## Position
+
+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.
+
+```html {.example}
+
+
+
+
+
+
+
+
+
+
+```
+
+## Sizing
+
+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.
+
+```html {.example}
+
+
+
+
+
+
+
+
+
+
+```
+
+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.
+
+```html {.example}
+
+
+
+
+
+
+
+
+
+
+```
+
+## Align Items
+
+By default, items are centered in the block direction of the `wa-flank` container. You can add any of the following [`wa-align-items-*`](/docs/style-utilities/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`
+
+```html {.example}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+## Gap
+
+By default, the gap between flank items uses `--wa-space-m` from your theme. You can add any of the following [`wa-gap-*`](/docs/style-utilities/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`
+
+```html {.example}
+
+
+
+
+
+
+
+
+
+
+```
\ No newline at end of file
diff --git a/docs/docs/layout/frame.md b/docs/docs/layout/frame.md
new file mode 100644
index 000000000..e0ad41318
--- /dev/null
+++ b/docs/docs/layout/frame.md
@@ -0,0 +1,156 @@
+---
+title: Frame
+description: Browse the library of customizable, framework-friendly web components included in Web Awesome.
+layout: page-outline
+---
+
+
+
+Use the `wa-frame` class to create a responsive container with consistent proportions to enclose content.
+
+```html {.example}
+
+
+
+```
+
+## Examples
+
+Frames are well-suited for images and image placeholders.
+
+```html {.example}
+
+
+
+
+
+
+
The Lord of the Rings: The Fellowship of the Ring
+ J.R.R. Tolkien
+
+
+ Options
+
+
+```
+
+```html {.example}
+
+
+
+
+
+
+
White-socks
+ Kitten • Male
+
+ Adopt this pet
+
+ Favorite
+
+
+
+
+
+
+
+ Photo coming soon
+
+
+
+
Bumpkin
+ Adult • Male
+
+ Adopt this pet
+
+ Favorite
+
+
+
+
+
+
+
+
+
Swish-tail
+ Kitten • Female
+
+ Adopt this pet
+
+ Favorite
+
+
+
+
+
+
+
+
+
Sharp-ears
+ Adult • Female
+
+ Adopt this pet
+
+ Favorite
+
+
+
+
+```
+
+## Aspect Ratio
+
+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.
+
+```html {.example}
+
+
+
+
+
+
+
+
+
+
+
+```
+
+## Border Radius
+
+Frames have a square border radius by default. You can add any of the following [`wa-border-radius-*`](/docs/style-utilities/border-radius) classes to an element with `wa-frame` to specify the border radius:
+- `wa-border-radius-xs`
+- `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.
+
+```html {.example}
+
+
+
+
+
+
+
+
+
+
+
+```
\ No newline at end of file
diff --git a/docs/docs/layout/grid.md b/docs/docs/layout/grid.md
new file mode 100644
index 000000000..19c0bc545
--- /dev/null
+++ b/docs/docs/layout/grid.md
@@ -0,0 +1,218 @@
+---
+title: Grid
+description: Browse the library of customizable, framework-friendly web components included in Web Awesome.
+layout: page-outline
+---
+
+
+
+Use the `wa-grid` class to arrange elements into rows and columns that automatically adapt to the available space.
+
+```html {.example}
+
+
+
+
+
+
+
+
+```
+
+## Examples
+
+Grids work especially well for card lists and content designed for browsing.
+
+```html {.example}
+
+
+
+
+
+
Tulip
+ Tulipa gesneriana
+
+
+
+
+
+
Peony
+ Paeonia officinalis
+
+
+
+
+
+
Poppy
+ Papaver rhoeas
+
+
+
+
+
+
Sunflower
+ Helianthus annuus
+
+
+
+
+
+
Daisy
+ Bellis perennis
+
+
+```
+
+```html {.example}
+
+
+
+
+
+
+
+ Population (Zion)
+
+ 251,999
+ -3%
+
+
+
+
+
+
+
+
+
+
+ Minds Freed
+
+ 0.36%
+ +0.03%
+
+
+
+
+
+
+
+
+
+
+ Agents Discovered
+
+ 3
+ ±0%
+
+
+
+
+
+
+
+
+
+
+ Sentinels Controlled
+
+ 208
+ +1%
+
+
+
+
+
+
+
+```
+
+## Sizing
+
+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.
+
+```html {.example}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+## Gap
+
+By default, the gap between grid items uses `--wa-space-m` from your theme. You can add any of the following [`wa-gap-*`](/docs/style-utilities/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`
+
+```html {.example}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+## Span Grid
+
+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.
+
+```html {.example}
+
+
+
+
+
+
+
+```
\ No newline at end of file
diff --git a/docs/docs/layout/index.md b/docs/docs/layout/index.md
new file mode 100644
index 000000000..40d553254
--- /dev/null
+++ b/docs/docs/layout/index.md
@@ -0,0 +1,83 @@
+---
+title: Layout
+description: Browse Web Awesome's components and utilities for creating responsive web layouts.
+layout: page-outline
+---
+
+
+
+
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.
\ No newline at end of file
diff --git a/docs/docs/layout/split.md b/docs/docs/layout/split.md
new file mode 100644
index 000000000..1333823df
--- /dev/null
+++ b/docs/docs/layout/split.md
@@ -0,0 +1,159 @@
+---
+title: Split
+description: Browse the library of customizable, framework-friendly web components included in Web Awesome.
+layout: page-outline
+---
+
+
+
+Use the `wa-split` class to distribute two or more items evenly across available space, either in a row or a column.
+
+```html {.example}
+
+
+
+
+```
+
+## Examples
+
+Splits are especially helpful for navigation, header, and footer layouts.
+
+```html {.example}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```html {.example}
+
+
+
+
+ Sign Up
+ Log In
+
+
+
+
+
+
+
+```
+
+## Direction
+
+Items can be split across a row or a column by appending `:row` or `:column` to the `wa-split` class.
+
+```html {.example}
+
+
+
+
+
+
+
+
+
+
+```
+
+## Align Items
+
+By default, items are centered on the cross axis of the `wa-split` container. You can add any of the following [`wa-align-items-*`](/docs/style-utilities/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`.
+
+```html {.example}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+## Gap
+
+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-*`](/docs/style-utilities/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`
+
+```html {.example}
+
+
+
+
+
+
+
+
+
+
+```
\ No newline at end of file
diff --git a/docs/docs/layout/stack.md b/docs/docs/layout/stack.md
new file mode 100644
index 000000000..d3f91a5ed
--- /dev/null
+++ b/docs/docs/layout/stack.md
@@ -0,0 +1,113 @@
+---
+title: Stack
+description: Browse the library of customizable, framework-friendly web components included in Web Awesome.
+layout: page-outline
+---
+
+
+
+Use `wa-stack` to arrange elements in the block direction with even spacing.
+
+```html {.example}
+
+
+
+
+
+```
+
+## Examples
+
+Stacks are well suited for forms, text, and ensuring consistent spacing between elements in the document flow.
+
+```html {.example}
+
+
+
+
+
+
+
+ Remember me on this device
+ Log In
+
+```
+
+```html {.example}
+
+
Aragorn's Squash
+
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.
+
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.
+
+```
+
+## Align Items
+
+By default, items stretch to fill the inline size of the `wa-stack` container. You can add any of the following [`wa-align-items-*`](/docs/style-utilities/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`
+
+```html {.example}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+## Gap
+
+By default, the gap between stack items uses `--wa-space-m` from your theme. You can add any of the following [`wa-gap-*`](/docs/style-utilities/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`
+
+```html {.example}
+
+
+
+
+
+
+
+
+
+
+
+
+```
\ No newline at end of file
diff --git a/docs/docs/style-utilities/align-items.md b/docs/docs/style-utilities/align-items.md
new file mode 100644
index 000000000..fe1896a28
--- /dev/null
+++ b/docs/docs/style-utilities/align-items.md
@@ -0,0 +1,34 @@
+---
+title: Align Items
+description: Align items utility classes set the gap property of flex and grid containers, like other Web Awesome layout utilities.
+layout: page-outline
+---
+
+
+
+Web Awesome includes classes to set the `align-items` property of flex and grid containers. They can be used alongside other Web Awesome layout utilities, like [cluster](/docs/layout/cluster) and [stack](/docs/layout/stack), to align children in container on the container's cross axis.
+
+| Class Name | `align-items` Value | Preview |
+| ------------------- | ------------------- | ---------------------------------------------------------------------------------------------------------------------------------- |
+| `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` |
|
+
+## What's a Cross Axis?
+
+The cross axis runs perpendicular to a flex 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.
\ No newline at end of file
diff --git a/docs/docs/style-utilities/border-radius.md b/docs/docs/style-utilities/border-radius.md
new file mode 100644
index 000000000..129ea64bf
--- /dev/null
+++ b/docs/docs/style-utilities/border-radius.md
@@ -0,0 +1,27 @@
+---
+title: Border Radius
+description: Border radius utility classes set an element's border radius property.
+layout: page-outline
+---
+
+
+
+Web Awesome includes classes to set an element's `border-radius` property. They can be used alongside Web Awesome layout utilities, like [frame](/docs/layout/frame), to round all corners of an element.
+
+Each class corresponds to one of the [`--wa-border-radius-*`](/docs/theming/borders/#radius) properties in your theme.
+
+| Class Name | `border-radius` Value | Preview |
+| ------------------------- | --------------------------- | --------------------------------------------------------------------------------------- |
+| `wa-border-radius-xs` | `--wa-border-radius-xs` | |
+| `wa-border-radius-s` | `--wa-border-radius-s` | |
+| `wa-border-radius-m` | `--wa-border-radius-m` | |
+| `wa-border-radius-l` | `--wa-border-radius-l` | |
+| `wa-border-radius-pill` | `--wa-border-radius-pill` | |
+| `wa-border-radius-circle` | `--wa-border-radius-circle` | |
+| `wa-border-radius-square` | `--wa-border-radius-square` | |
+
diff --git a/docs/docs/style-utilities/gap.md b/docs/docs/style-utilities/gap.md
new file mode 100644
index 000000000..f8974ea0c
--- /dev/null
+++ b/docs/docs/style-utilities/gap.md
@@ -0,0 +1,32 @@
+---
+title: Gap
+description: Gap utility classes set the gap property of flex and grid containers, like other Web Awesome layout utilities.
+layout: page-outline
+---
+
+
+
+Web Awesome includes classes to set the `gap` property of flex and grid containers. They can be used alongside other Web Awesome layout utilities, like [cluster](/docs/layout/cluster) and [stack](/docs/layout/stack), to change the space between items.
+
+Besides `wa-gap-0`, which sets `gap` to zero, each class corresponds to one of the [`--wa-space-*`](/docs/theming/space) properties in your theme.
+
+| Class Name | `gap` Value | Preview |
+| ------------ | ---------------- | ----------------------------------------------------------------------------------------------------------- |
+| `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` |
|
+
diff --git a/docs/docs/style-utilities/text.md b/docs/docs/style-utilities/text.md
new file mode 100644
index 000000000..8f405410b
--- /dev/null
+++ b/docs/docs/style-utilities/text.md
@@ -0,0 +1,62 @@
+---
+title: Text
+description: Text utility classes combine custom properties from your Web Awesome theme to conveniently style text content.
+layout: page-outline
+---
+
+Web Awesome includes classes to set multiple text properties at once to style body text, headings, and captions.
+
+## Body
+
+Use body classes to style the main content of your pages. Each `wa-body-*` class specifies the following properties:
+- `font-family: var(--wa-font-family-body);`
+- `font-weight: var(--wa-font-weight-body);`
+- `line-height: var(--wa-line-height-normal);`
+
+Additionally, each class specifies a `font-size` that corresponds to a [`--wa-font-size-*`](/docs/theming/typography/#font-size) property from your theme.
+
+| Class Name | `font-size` Value | Preview |
+| ------------------ | -------------------- | ------------------------------------------------------------------------- |
+| `wa-body-xs` | `--wa-font-size-xs` |
Sphinx of black quartz, judge my vow.
|
+| `wa-body-s` | `--wa-font-size-s` |
Sphinx of black quartz, judge my vow.
|
+| `wa-body-m` | `--wa-font-size-m` |
Sphinx of black quartz, judge my vow.
|
+| `wa-body-l` | `--wa-font-size-l` |
Sphinx of black quartz, judge my vow.
|
+| `wa-body-xl` | `--wa-font-size-xl` |
Sphinx of black quartz, judge my vow.
|
+
+## Headings
+
+Use heading classes to style section titles and headings in your content. Each `wa-heading-*` class specifies the following properties:
+- `font-family: var(--wa-font-family-heading);`
+- `font-weight: var(--wa-font-weight-heading);`
+- `line-height: var(--wa-line-height-condensed);`
+- `text-wrap: balance;`
+
+Additionally, each class specifies a `font-size` using a [`--wa-font-size-*`](/docs/theming/typography/#font-size) property from your theme. Heading classes are one font size larger than the corresponding `wa-body-*` class.
+
+| Class Name | `font-size` Value | Preview |
+| ---------------- | -------------------- | ----------------------------------------------------- |
+| `wa-heading-xs` | `--wa-font-size-s` |
Five Boxing Wizards
|
+| `wa-heading-s` | `--wa-font-size-m` |
Five Boxing Wizards
|
+| `wa-heading-m` | `--wa-font-size-l` |
Five Boxing Wizards
|
+| `wa-heading-l` | `--wa-font-size-xl` |
Five Boxing Wizards
|
+| `wa-heading-xl` | `--wa-font-size-2xl` |
Five Boxing Wizards
|
+| `wa-heading-2xl` | `--wa-font-size-3xl` |
Five Boxing Wizards
|
+| `wa-heading-3xl` | `--wa-font-size-4xl` |
Five Boxing Wizards
|
+
+## Captions
+
+Use caption classes to style descriptions or auxiliary text in your content. Each `wa-caption-*` class specifies the following properties:
+- `color: var(--wa-color-text-quiet);`
+- `font-family: var(--wa-font-family-body);`
+- `font-weight: var(--wa-font-weight-body);`
+- `line-height: var(--wa-line-height-condensed);`
+
+Additionally, each class specifies a `font-size` using a [`--wa-font-size-*`](/docs/theming/typography/#font-size) property from your theme. Caption classes are one font size smaller than the corresponding `wa-body-*` class.
+
+| Class Name | `font-size` Value | Preview |
+| ---------------- | -------------------- | ------------------------------------------------------------------------------ |
+| `wa-caption-xs` | `--wa-font-size-2xs` |
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+