Default (64rem max-inline-size)

This block-layout is the default width — comfortable for most article and documentation pages.

Narrow (40rem)

For long-form reading. The measure stays around 65 characters per line, which is the comfortable upper bound for sustained reading.

Wide (80rem)

For dashboards and grids that need horizontal real estate.

Full (no cap)

Fills the entire container.

On raised surface

Same measure, raised background.


  
/*
 * Block-layout — section
 *
 * Single-column container with constrained measure. Per the answered
 * design question (container queries-first): no global @media; the
 * layout primitive sets a max-inline-size that the author picks via
 * data-size. Surrounding context (a centered Section, a sidebar
 * region) constrains naturally.
 *
 *   <section class="block-layout">
 *     <h1>Article title</h1>
 *     <p>…</p>
 *   </section>
 *
 *   <section class="block-layout" data-size="narrow">…</section>
 *   <section class="block-layout" data-size="wide">…</section>
 */

@layer malevich.components {
  .block-layout {
    inline-size: 100%;
    max-inline-size: var(--block-layout-measure);
    margin-inline: auto;

    padding-block: var(--space-inset-section-m);
    padding-inline: var(--space-inset-section-m);

    display: flex;
    flex-direction: column;
    gap: var(--space-gap-elements-m);

    box-sizing: border-box;
  }

  .block-layout[data-size="narrow"] {
    max-inline-size: var(--block-layout-measure-narrow);
  }

  .block-layout[data-size="wide"] {
    max-inline-size: var(--block-layout-measure-wide);
  }

  .block-layout[data-size="full"] {
    max-inline-size: none;
  }

  /* Surface variants */
  .block-layout.-on-raised {
    background-color: var(--color-surface-raised);
  }
  .block-layout.-on-canvas {
    background-color: var(--color-surface-canvas);
  }
}


  
This component is pure CSS — no JavaScript required.

  
# Block-Layout — AGENTS.md

> Auto-generated from `block-layout.docs.md` + the modifier applicability matrix.
> Edit those source files; this file regenerates on build.

## Identity

- **Component:** `block-layout`
- **Layer:** sections
- **Status:** stable
- **Last updated:** 2026-05-19

## Summary

- Article body, documentation page content.

## Variants

| Variant | Class / data | Use for                                |
|---------|--------------|----------------------------------------|
| Default | `.block-layout` | 64rem max-inline-size               |
| Narrow  | `data-size="narrow"` | 40rem (~ article body)         |
| Wide    | `data-size="wide"` | 80rem                            |
| Full    | `data-size="full"` | No measure cap                   |
| On raised | `.-on-raised` | Raised surface background          |
| On canvas | `.-on-canvas` | Canvas surface background          |

## Modifier applicability

Per ADR-0007. Modifiers attach via `data-{category}="value"` attributes.

| Category | Accepts |
|---|---|
| `background` | `solid` |
| `surface` | `flat` |
| `effect` | — |
| `shader` | — |
| `rhythm` | `compact`, `regular`, `spacious` |
| `motion` | any value |
| `behavior` | — |

## Anatomy

```html
<section class="block-layout">
  <h1>Article title</h1>
  <p>Body content...</p>
</section>

<section class="block-layout" data-size="narrow">
  <h1>Narrower measure</h1>
  <p>For long-form prose.</p>
</section>
```

## Tokens consumed

### From semantic tier
- `--space-inset-section-m` — padding
- `--space-gap-elements-m` — child gap

### Component-tier (generated)
- `--block-layout-measure` — default max-inline-size (64rem)
- `--block-layout-measure-narrow` — narrow size (40rem)
- `--block-layout-measure-wide` — wide size (80rem)

## Accessibility contract

`<section>` is the semantic landmark. No additional ARIA required.