Section

Page-level section wrapper. Reads three density tokens (--kc-section-py, --kc-section-gutter-x, --kc-section-max-w) so the same markup reflows under [data-density] overrides without selector churn.

When to use

Krysalicss has three surface tiers, each at a different scale of the page. Section sits at the top:

Tier	Component	Role	Padding
atomic	Box	Flat single-content surface — callouts, summary tiles.	`1.25rem`
composite	Card	Structured surface with `__header` / `__image` / `__content` / `__footer` subparts.	`1rem`
page-level	Section	Vertical band between regions of the page.	`7rem` (density-driven)

Reach for Section when you're segmenting a whole page into vertical bands — a Hero, a Features grid, a Pricing strip, a CTA panel. Each becomes one <section class="section">. The component handles the generous outer padding, the divider between adjacent sections, and the density toggle that re-tunes the rhythm globally.

A landing-page skeleton:

<section class="section">  <!-- Hero -->
  <div class="container">…</div>
</section>
<section class="section">  <!-- Features -->
  <div class="container">…</div>
</section>
<section class="section">  <!-- Pricing -->
  <div class="container">…</div>
</section>  <!-- :last-of-type → bottom border drops -->
<footer>…</footer>

Don't use Section for:

Sub-page surfaces inside a Card or Box (use plain <div> + the helpers — Section's 7rem padding will swamp the parent surface).
The page's narrow content column (that's Container — .container caps --kc-max-w and is meant to sit inside a Section).
Modal or popover bodies (Section assumes it lives directly under <body> / <main> for its border-stripping :last-of-type contract to hold).

Live

Default density

Live

Section

Default density

Padding follows --kc-section-py (7rem) and --kc-section-gutter-x (3rem).

HTML

<section class="section" style="border: 1px dashed var(--kc-doc-border);">
<div class="container">
  <p class="eyebrow">Section</p>
  <h2 class="t-h2">Default density</h2>
  <p>Padding follows <code>--kc-section-py</code> (7rem) and <code>--kc-section-gutter-x</code> (3rem).</p>
</div>
</section>

Minimal sass

@use '@adnap/krysalicss' with (
  $feature-list: ('base-reset', 'base-global', 'module-section', 'element-eyebrow', 'typography-fluid')
);

Playground

Compact density via data-density

Live

Section

Compact density

data-density="compact" swaps to 5rem / 2rem.

HTML

<div data-density="compact" style="border: 1px dashed var(--kc-doc-border);">
<section class="section">
  <div class="container">
    <p class="eyebrow">Section</p>
    <h2 class="t-h2">Compact density</h2>
    <p><code>data-density="compact"</code> swaps to 5rem / 2rem.</p>
  </div>
</section>
</div>

Minimal sass

@use '@adnap/krysalicss' with (
  $feature-list: ('base-reset', 'base-global', 'module-section', 'element-eyebrow', 'typography-fluid')
);

Playground

Markup

<section class="section">
  <div class="container">
    <p class="eyebrow">Services</p>
    <h2 class="t-h2">Notre approche</h2>
    <p class="t-lead">...</p>
  </div>
</section>

<section class="section">...</section>
<section class="section">...</section> <!-- :last-of-type: bottom border drops -->

Density variants

data-density can be set at any of three granularities — the nearest carrier wins thanks to CSS custom-property cascade:

Page-wide — <html data-density="compact"> (or on <body>). Every section on the page reflows.
Page-region — <main data-density="compact"> or any wrapper. Only sections inside the wrapper reflow.
Per-section — <section class="section" data-density="aere">. Just that one section reflows; siblings inherit from :root.

The default needs no attribute. Three values ship:

Density	`--kc-section-py`	`--kc-section-gutter-x`	Use case
Default	`7rem`	`3rem`	Marketing pages, generous breathing room.
`data-density="compact"`	`5rem`	`2rem`	Documentation, dense content lists.
`data-density="aere"`	`9rem`	`4rem`	Editorial / long-read layouts.

--kc-section-max-w (80rem) caps the inner content width regardless of density — it pairs with Container.

Auto-stripped trailing border

The plugin emits :last-of-type { border-bottom: 0; }. The final section in a page stack drops its rule so the page doesn't end on a hairline. Add a section explicitly without the class if you need to force a trailing border off elsewhere.

Variables

Variable	Default	Notes
`$selector`	`'.section'`	Class only. Use on `<section>` for semantics.
`$padding-y`	`7rem` (`7 * $global-gap`)	Default-density vertical padding. Drives `--kc-section-py`.
`$gutter-x`	`3rem` (`3 * $global-gap`)	Default-density horizontal padding. Drives `--kc-section-gutter-x`.
`$max-width`	`80rem`	Inner content-width cap. Drives `--kc-section-max-w`. Matches the `widescreen` breakpoint.
`$padding-y-compact`	`5rem` (`5 * $global-gap`)	Vertical padding under `[data-density="compact"]`.
`$gutter-x-compact`	`2rem` (`2 * $global-gap`)	Horizontal padding under `[data-density="compact"]`.
`$padding-y-aere`	`9rem` (`9 * $global-gap`)	Vertical padding under `[data-density="aere"]`.
`$gutter-x-aere`	`4rem` (`4 * $global-gap`)	Horizontal padding under `[data-density="aere"]`.
`$border-fallback`	`currentColor`	Fallback colour for the 1 px bottom hairline when `--kc-border-1` is undefined. Stripped on `:last-of-type`.

Override example

@use '@adnap/krysalicss/module/section' with (
  $selector: '.section',
  $padding-y: 6rem,
  $gutter-x: 2.5rem,
  $max-width: 75rem,
);

Tokens consumed

Token	Used for
`--kc-section-py`	Vertical padding. Driven by `[data-density]`.
`--kc-section-gutter-x`	Horizontal padding. Driven by `[data-density]`.
`--kc-section-max-w`	Inner content-width cap (80rem), consumed by the paired `.container`.
`--kc-border-1`	Bottom-border colour. Theme-switchable.