Structure
Blocks live inside .nds-section-body. A block is spacing only: full width plus a bottom margin, dropped on the last one. It is not a container and it groups nothing, so put the class straight on a block component such as a stepper, tab set, or table, or on a wrapper holding flow content. An optional .nds-block-title heading sits at the top. Two groups need two blocks, or the gap between them never appears.
Standard
Group related paragraphs, lists, or tables under a shared heading. Blocks stack vertically inside the section body with consistent spacing.
Block Title
First paragraph of content inside the block. Paragraphs, lists, and media get their spacing from the surrounding .nds-section-body, which a block sits inside.
Second paragraph to demonstrate spacing between content elements.
Another Block
- List items work inside blocks
- With automatic padding and spacing
Blocks without a title work too. The title is optional.
<section class="nds-content-section nds-demo-section">
<div class="nds-section-body">
<div class="nds-block">
<h3 class="nds-block-title">Block Title</h3>
<p>First paragraph of content inside the block.</p>
<p>Second paragraph to demonstrate spacing.</p>
</div>
<div class="nds-block">
<h3 class="nds-block-title">Another Block</h3>
<ul>
<li>List items work inside blocks</li>
<li>With automatic padding and spacing</li>
</ul>
</div>
<div class="nds-block">
<p>Blocks without a title work too. The title is optional.</p>
</div>
</div>
</section>
Built-in Features
Paragraphs, images, and video nested inside a block pick up primary paragraph color, pretty wrapping, and responsive media caps automatically.
Add .nds-block-title when the block needs a heading. Every title token is overridable through CSS custom properties.
Blocks carry a default bottom margin that collapses on the last child, so stacks of blocks inside a section body breathe without extra classes.
Drop blocks inside any section body — default, color-themed, horizontal, or full-width. Positioning and spacing stay consistent across layouts.
A block is not a CSS container on its own. Add .nds-cq to it when a nested grid must size against the block width instead of the viewport. It stays opt-in because a container also traps position: fixed descendants such as modals and dropmenus.
Usage Guidelines
Best Practices
- Use blocks to subdivide content inside a single section instead of starting a new section — they share the same visual container but group related paragraphs under their own heading
- Prefer one section per topic, with multiple blocks inside when the topic has distinct sub-groups (best practices, modifier tables, API references, etc.)
- Keep block titles short and descriptive. They render at
--typo-text-xl-FSby default, sitting below the section title in visual hierarchy - Do not wrap cards, grids, or other full components in a block. Place them directly under
.nds-section-bodyso the block-title hierarchy stays reserved for flow content - Do not nest blocks. If a sub-group needs its own heading level, consider whether it belongs in a new section instead
- Skip the title on a single-block section where the section title already carries the heading — the wrapper is still useful for the automatic flow styling
CSS Custom Properties
| Property | Default | Description |
|---|---|---|
--block-title-FS | var(--typo-text-xl-FS) | Block title font size |
--block-title-LH | var(--typo-text-xl-LH) | Block title line height |
--block-title-FW | 600 | Block title font weight |
--block-title-MB | var(--spacing-lg) | Spacing below the title (when exposed via the shared token) |
--block-title-color | var(--text-display) | Block title color |