# 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 whole page sits on the base [`.layout` scaffold](/docs/global#layouts): `` wrapping a `.layout_content` main, which gives the header / content / footer app shell with a sticky footer. Inside that shell, from top to bottom:
- [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
- [Pricing](/components/pricing)
- [FAQ](/components/faq) with exclusive-open items
- Closing-CTA [Section](/components/section)
- [Footer](/components/footer).
## Using it
Copy [`marketing.astro`][srcTemplate] 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](/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 just for the demo. Delete it.
- 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 and layout 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
## 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](/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.