Vanilla Breeze

← All tutorials · ~10 minutes · Layer focus: data-*

Tutorial: Landing Page

Build a complete marketing page with a hero, features grid, and footer. Every layout comes from data-* attributes on semantic HTML — we don't reach for a single web component.

Step 1 — Write the page in semantic HTML

Start with the simplest possible markup. Real HTML elements only; no classes, no attributes beyond what the platform already ships. This version works in a text-only browser.

The page functions already. Search engines can read it, screen readers can navigate it, and links work. Styling is the next layer, not a prerequisite.

Step 2 — Add data-layout attributes

The same elements, now with layout attributes that turn every semantic region into a flex/grid container. No wrapper divs, no utility classes.

Four layout primitives did all the work: cluster for horizontal rows, center for page-width constraint, grid for the responsive features list, and stack (implicit in the defaults) for vertical rhythm. Every attribute reads like the intent it expresses.

Step 3 — Swap in custom elements where they help

Data attributes handle layout. When the visual shape of an element matters — a card with a consistent surface and padding — upgrade to a custom element like <layout-card>. You still use semantic HTML inside.

<layout-card> is CSS-only. It adds the border, radius, and padding we'd otherwise write ourselves — no JavaScript, no hydration cost.

Step 4 — Web components? Not today.

A marketing page rarely needs JavaScript. Everything above — the layout, the spacing, the hover states on buttons and links — ships in the CSS bundle. Adding <tab-set> or <accordion-wc> just because they're available would add weight for no reader benefit.

If you want a scripted demo reel or an inline contact form, that's the Contact form tutorial. For a pure marketing page, you're done.

What you learned

↑