component :: Section

The .section component is the workhorse wrapper marketing pages are made of: a full-width band with vertical rhythm, an optional eyebrow/title/lede header, and background variants.

Why mCSS

Everything is a section

Stack a few of these and you have a landing page.

Section content goes here.

File	Description	Source
`component.section.css`	All section styles	Github
`Section.astro`	The Astro component	Github
`--section-*` block in default theme	Theme tokens (see table below)	Github

Depends on .wrap (global.wrap.css), part of the mCSS core: children align to the same content column as the rest of the page, and the wide preset lets grids escape the reading column.

HTML

<section class="section wrap section-filled">
  <header class="section_header">
    <p class="section_eyebrow">Why mCSS</p>
    <h2 class="section_title">Everything is a section</h2>
    <p class="section_lede">Stack a few of these and you have a landing page.</p>
  </header>
  <!-- content: paragraphs, grids, cards… -->
</section>

Available modifiers

Class	Description
`.section`	Default. Transparent background, `--section-spacing` vertical padding.
`.section` + `.section-filled`	Subtle filled band.
`.section` + `.section-primary`	Primary-colored band; text and links switch to the inverted colors.
`.section` + `.section-wide`	Widens the content column to `--section-wide-width`.

Elements

Class	Description
`.section_header`	Centered eyebrow/title/lede block.
`.section_eyebrow`	Small uppercase kicker.
`.section_title`	The `h2`.
`.section_lede`	Intro paragraph.
`.section_actions`	Centered, wrapping button row (see the closing-CTA recipe below).

Custom properties

The following custom properties are available in the default theme:

Property	Description
`--section-spacing`	Vertical padding of the band.
`--section-header-spacing`	Space between the header and content.
`--section-wide-width`	Content column width of the wide preset.
`--section-eyebrow-color`	Eyebrow text color.
`--section-lede-color`	Lede text color.
`--section-filled-background-color`	Background of the filled variant.
`--section-primary-background-color`	Background of the primary variant.
`--section-primary-text-color`	Text color on the primary variant.
`--section-primary-link-color`	Link color on the primary variant.
`--section-primary-link-color-hover`	Link hover color on the primary variant.
`--section-primary-eyebrow-color`	Eyebrow color on the primary variant.
`--section-primary-lede-color`	Lede color on the primary variant.

Astro component

Prop	Type	Default	Description
`eyebrow`	`string`	`undefined`	Small uppercase kicker above the title.
`title`	`string`	`undefined`	The section’s `h2`.
`lede`	`string`	`undefined`	Intro paragraph under the title.
`variant`	`string`	`undefined`	`filled`, `primary`.
`width`	`string`	`undefined`	`wide`.
`class`	`string`	`undefined`	Additional CSS classes, useful for helper classes.

Any other attribute is passed through to the root <section> element (handy for id anchors). The default slot is the section content.

Examples

Pricing

Primary band

Text and links flip to the inverted palette.

---
import Section from "../components/Section.astro";
---
<Section eyebrow="Pricing" title="Primary band" variant="primary">
  <p>Text and <a href="/docs">links</a> flip to the inverted palette.</p>
</Section>

Wide section

<Section title="Wide section" width="wide" variant="filled">
  <div class="grid" col="3">…</div>
</Section>

The closing CTA every marketing page ends on is not a separate component; it is a Section with a .section_actions row:

Ready to own your CSS?

Copy the framework, edit the tokens, ship the site.

Get started

<Section title="Ready to own your CSS?" lede="Copy the framework, edit the tokens, ship the site." variant="primary">
  <div class="section_actions">
    <a class="bt bt-lg bt-outline-white" href="/docs/start">Get started</a>
  </div>
</Section>