# Marketing Template
> Part of mCSS (mcss.dev). Rendered page: https://mcss.dev/docs/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](/templates/marketing)**, and use the switcher in its bottom corner to flip the whole page between the default look and the [wireframe theme](/docs/themes): 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](/components/banner), [Header](/components/header) (sticky, with mobile menu), [Hero](/components/hero) (full variant on a gradient), [Section](/components/section) with a [FeatureGrid](/components/featuregrid), a filled Section of [Testimonials](/components/testimonial) on the grid, a [Pricing](/components/pricing) row, an [FAQ](/components/faq) with exclusive-open items, the closing-CTA Section recipe, and a [Footer](/components/footer).
## Using it
Copy [`marketing.astro`][srcTemplate] 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](/docs/start), 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 `` pins the cascade-layer order before any stylesheet loads. Only needed when a theme is loaded as a separate `` (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][srcTemplate]) |
| Astro components | `Banner`, `Header`, `Hero`, `Section`, `FeatureGrid`, `FeatureItem`, `Testimonial`, `Avatar` (used by Testimonial), `PricingCard`, `Faq`, `FaqItem`, `Footer` ([source][srcComponents]) |
| Framework CSS | The framework entry `mcss.css` covers every component style used ([source][srcFramework]) |
| Theme (optional) | `theme.wireframe.css`, only if you keep the switcher ([source][srcWireframe]) |
| Icons | `menu`, `x`, `check`, `circle-check`, `moon-star`, `external-link`, `rotate-ccw`, `mail`, `heart` ([source][srcIcons]) |
| Scripts | `src/scripts/utilities.js` (the Header's scroll throttle) ([source][srcScripts]) |
[srcTemplate]: https://github.com/minimaldesign/mCSS/blob/main/src/pages/templates/marketing.astro
[srcComponents]: https://github.com/minimaldesign/mCSS/tree/main/src/components
[srcFramework]: https://github.com/minimaldesign/mCSS/tree/main/src/styles/framework
[srcWireframe]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/theme.wireframe.css
[srcIcons]: https://github.com/minimaldesign/mCSS/tree/main/src/assets/icons
[srcScripts]: https://github.com/minimaldesign/mCSS/blob/main/src/scripts/utilities.js
## 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](/components/section)).
- **The pricing row** is three [PricingCards](/components/pricing) on the plain [grid](/docs/global#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 ``, no JavaScript.