# 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 added to `.section_header`.                           |
| `contentClass` | `string` | `undefined` | Extra classes added to `.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>