Skip to content

Docs :: Marketing Template

A complete marketing one-pager built from nothing but the framework and the component library: no site CSS, no custom components, no JavaScript beyond what the components ship with. It is both a working template and the proof that the library composes into a real page.

Open the live template, and use the switcher in its bottom corner to flip the whole page between the default look and the wireframe theme: same markup, one stylesheet swapped.

The copy is in on the joke. The structure is the one every one-pager uses (hero, feature grid, testimonials, three pricing tiers, FAQ, closing CTA) and the words point at each convention as it arrives. Replace them with your own and the page stops winking.

From top to bottom it composes: Banner, Header (sticky, with mobile menu), Hero (full variant on a gradient), Section with a FeatureGrid, a filled Section of Testimonials on the grid, a Pricing row, an FAQ with exclusive-open items, the closing-CTA Section recipe, and a Footer.

Using it

Copy marketing.astro into your own src/pages/ (as index.astro, most likely) and swap the copy, links, and pricing for your own. The placeholder copy is a bit, so all of it goes. Everything it needs is listed below; if you copied the whole framework and component library per Getting started, you already have all of it.

Two blocks in the file exist for the docs demo and are safe to touch:

  • The theme switcher at the bottom (marked with a comment) is demo chrome. Delete it, or keep the pattern if you want visitors to flip themes at runtime: it toggles the theme stylesheet’s media attribute between not all and all. It avoids the disabled attribute because Chromium never loads a parser-created disabled stylesheet.
  • The inline @layer statement at the top of <head> pins the cascade-layer order before any stylesheet loads. Only needed when a theme is loaded as a separate <link> (layer priority is set by first occurrence, and the theme link may parse first). If you activate your theme with an @import in your entry CSS instead, you can drop it.
What Files
The page src/pages/templates/marketing.astro (source)
Astro components Banner, Header, Hero, Section, FeatureGrid, FeatureItem, Testimonial, Avatar (used by Testimonial), PricingCard, Faq, FaqItem, Footer (source)
Framework CSS The framework entry mcss.css covers every component style used (source)
Theme (optional) theme.wireframe.css, only if you keep the switcher (source)
Icons menu, x, check, circle-check, moon-star, external-link, rotate-ccw, mail, heart (source)
Scripts src/scripts/utilities.js (the Header’s scroll throttle) (source)

Recipes worth stealing

Even if you don’t use the whole page, three patterns in it transfer anywhere:

  • The closing CTA is not a component; it is a Section with variant="primary" and a .section_actions row (see the Section recipes).
  • The pricing row is three PricingCards on the plain grid (col="1" col-md="3"), with highlighted on the recommended tier.
  • Exclusive-open FAQ items share a name, so the browser closes one when another opens. Native <details>, no JavaScript.