# Section

> Part of mCSS (mcss.dev). Rendered page: https://mcss.dev/components/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.

<Section eyebrow="Why mCSS" title="Everything is a section" lede="Stack a few of these and you have a landing page." variant="filled">
  <p class="text-center">Section content goes here.</p>
</Section>

<div class="docs_oversizedTable">

| File                                 | Description                    | Source      |
| ------------------------------------ | ------------------------------ | ----------- |
| `component.section.css`              | All section styles             | [Github][1] |
| `Section.astro`                      | The Astro component            | [Github][2] |
| `--section-*` block in `settings.ui.css` | Interface tokens (see table below) | [Github][3] |

</div>

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

[1]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/component.section.css
[2]: https://github.com/minimaldesign/mCSS/blob/main/src/components/Section.astro
[3]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/settings.ui.css

## Playground

<Playground
  client:visible
  template={`<section class="{classes}">
  <header class="section_header wrap wrap-md">
    <p class="section_eyebrow">{eyebrow}</p>
    <h2 class="section_title">{title}</h2>
    <p class="section_lede">{lede}</p>
  </header>
  <div class="section_content wrap wrap-lg">
    <p class="text-center">Section content goes here.</p>
  </div>
</section>`}
  baseClasses="section"
  controls={[
    { heading: "Variation", items: [
      { type: "select", name: "variant", label: "Variant", default: "", options: [
        { label: "Default", value: "" },
        { label: "Filled", value: "section-filled" },
        { label: "Primary", value: "section-primary" },
      ]},
    ]},
    { heading: "Content", items: [
      { type: "text", name: "eyebrow", label: "Eyebrow", default: "Why mCSS" },
      { type: "text", name: "title", label: "Title", default: "Everything is a section" },
      { type: "text", name: "lede", label: "Lede", default: "Stack a few of these and you have a landing page." },
    ]},
  ]}
/>

## HTML

```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](/docs/global#wrap) (`.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

<div class="docs_oversizedTable">

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

</div>

### Elements

<div class="docs_oversizedTable">

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

</div>

### Custom properties

The following custom properties are available in [`settings.ui.css`](/docs/tokens#interface-tokens):

<div class="docs_oversizedTable">

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

</div>

## Astro component

<div class="docs_oversizedTable">

| 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](/docs/helpers). |

</div>

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

## Examples

<ul class="docs_examples">
  <li>
    <Section eyebrow="Pricing" title="Primary band" variant="primary">
      <p class="text-center">Text and <a href="#">links</a> flip to the inverted palette.</p>
    </Section>

    ```astro
    ---
    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>
    ```

  </li>
  <li>
    By default the content column is wider (`wrap-lg`) than the header (`wrap-md`); set `contentWrap="md"` to keep long-form content at reading width:

    <Section title="Narrow section" contentWrap="md" variant="filled">
      <div class="grid" col="3">
        <div class="docs_box">1</div>
        <div class="docs_box">2</div>
        <div class="docs_box">3</div>
      </div>
    </Section>

    ```astro
    <Section title="Narrow section" contentWrap="md" variant="filled">
      <div class="grid" col="3">…</div>
    </Section>
    ```

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

    <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="#">Get started</a>
      </div>
    </Section>

    ```astro
    <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>
    ```

  </li>
</ul>