Skip to content

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 settings.ui.css Interface tokens (see table below) Github

Depends on .wrap (global.wrap.css), part of the mCSS core: the header and the content each compose .wrap with their own width preset, so a section pairs a reading-width header (.wrap-md) with a wider content column (.wrap-lg) by default.

Playground

Why mCSS

Everything is a section

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

Section content goes here.

Variation

Variant

Content

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

HTML

<section class="section section-filled">
  <header class="section_header wrap wrap-md">
    <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>
  <div class="section_content wrap wrap-lg">
    <!-- content: paragraphs, grids, cards… -->
  </div>
</section>

The header and content each compose .wrap with a width preset (.wrap-sm, .wrap-md, .wrap-lg), so they can use different column widths. wrap-md on the header and wrap-lg on the content is the standard pairing; use wrap-md on the content too when it is text meant for reading (an FAQ, for example).

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.

Elements

Class Description
.section_header Centered eyebrow/title/lede block; composes .wrap + a width preset.
.section_content Content column; composes .wrap + a width preset.
.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 settings.ui.css:

Property Description
--section-spacing Vertical padding of the band.
--section-header-spacing Space between the header and content.
--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.
headerWrap string md Header column width preset: sm, md, lg.
contentWrap string lg Content column width preset: sm, md, lg.
headerClass string undefined Extra classes mixed onto .section_header.
contentClass string undefined Extra classes mixed onto .section_content.
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