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.

Playground

Why mCSS

Everything is a section

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

Section content goes here.

Variation

Variant

Layout

Content

Copied!
<section class="section wrap">
<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>
<p class="text-center">Section content goes here.</p>
</section>

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