# Recipes Best-practice compositions built from Web Awesome primitives. Each recipe names its **STEP 0 branch** (full-page → ``; in-page → utilities only), its **design intent**, and its **rationale** (the established web-design convention it follows). Copy, then re-theme with tokens. All recipes assume a theme/palette is set on `` (see [theming.md](theming.md)) and, for full-page recipes, the `html, body` reset from [layouts-page.md](layouts-page.md). These snippets keep a few one-off values inline (a `max-width`, a `--min-column-size`) so each is self-contained. In a real page, lift anything reused into a ` ``` --- ## Marketing landing page (full-page, ``) **Intent:** a public landing page with a top nav, a hero, a feature grid, and a footer. **Rationale:** a single clear value proposition with one primary call-to-action above the fold converts better than competing actions; supporting detail follows below. **Nav:** this uses the sanctioned "header on desktop, drawer on mobile" recipe — links live in the `header` for wide screens and are mirrored in `slot="navigation"` for the mobile drawer `` provides. Each copy is hidden in the opposite view via `wa-page[view='…']`. This is the _only_ place nav is duplicated on purpose; never copy nav between slots otherwise. (For a simpler page, drop the header copy and the two hide-rules and keep just `slot="navigation"` — you'll get a small desktop sidebar plus the mobile drawer.) ```html
``` --- ## Login / auth card (in-page, utilities only) **Intent:** a centered sign-in card. **Rationale:** auth is a focused, single-task moment, so center a narrow card, minimize fields, one primary action. Don't use ``; this is one element on a page. ```html ``` --- ## Settings section (in-page, utilities only) **Intent:** a settings panel with grouped, labeled rows. **Rationale:** group related settings, label each row, and keep the control aligned to the right of its description, for a scannable, conventional settings layout. ```html ``` --- ## Dashboard card grid (in-page, utilities only) **Intent:** a grid of stat/summary cards. **Rationale:** equal-weight summary tiles in a responsive grid let users scan key numbers; the grid reflows by available width with no breakpoints. ```html ``` --- ## Want more? These are starting points, not a component-by-component catalog. For richer, ready-made building blocks (and the eight Pro themes, extra palettes, and the Theme Builder), see [Web Awesome Pro](https://webawesome.com/purchase). For exact component APIs, use the companion `webawesome` skill.