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 whole page sits on the base .layout scaffold: <body class="layout"> wrapping a .layout_content main, which gives the header / content / footer app shell with a sticky footer. Inside that shell, from top to bottom:

Using it

Copy marketing.astro into your own src/pages/ (as index.astro, most likely) and definitely swap the copy, links, and pricing for your own. 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 just for the demo. Delete it.
  • 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 and layout 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)

Useful recipes

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.