Skip to content

Docs :: Components

Components in a mCSS project come in two kinds:

  • Built-in components: a library of ready-made components built on top of mCSS. Like the rest of the framework, you copy the pieces you want into your project and own the code. It ships separately (mcss.components.css), so skip it entirely if you don’t need it.
  • Your own components: mCSS is designed for building your own, one component.*.css file per block, in your own CSS folder. The class syntax and component conventions from Getting Started are all you need.

The two kinds mix freely: this very site’s pages are built from library components, site components, and the occasional page override.

Marketing template

A complete marketing one-pager built with mCSS and its built-in Astro components: no site CSS, no custom components, no JavaScript beyond what the components ship with.

Open the live template, and use the switcher in its bottom corner to swap between the default theme and the wireframe theme.

The page uses the base layout scaffold and the following components, from top to bottom:

Using it

Copy marketing.astro into your own src/pages/ (as index.astro, most likely) and definitely swap the copy ;) Everything it needs is listed below. If you copied the whole framework and component library per Getting started, you should be good to go.

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

  • The theme switcher at the bottom (marked with a comment) is just for the demo.
  • The inline @layer statement at the top of <head> sets the cascade-layer order before any stylesheet loads. It’s needed when a theme is loaded as a separate <link>, which we do here to power the theme switcher.
What Files
The page src/pages/templates/marketing.astro (source)
Astro components Banner, Header, Hero, Section, Tiles, FeatureItem, Testimonial, Avatar (used by Testimonial), PricingCard, Faq, FaqItem, Footer (source)
mCSS The framework entries mcss.css, mcss.components.css, and theme.default.css cover every style used (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 are useful to know:

  • 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.