Section Hierarchy
The section component uses responsive padding for content constraining and a flex wrapper for grouping head, action, image, and content.
Tier 1: Minimal (No Wrapper)
Simplest usage: title, description, and content as direct children of the section grid. No wrapper needed.
Section Title
Section description goes here. Used for simple sections with only a title and content.
Section content area.
<section class="nds-content-section nds-demo-section">
<h2 class="nds-section-title">Section Title</h2>
<p class="nds-section-description">Section description goes here. Used for simple sections with only a title and content.</p>
<div class="nds-section-body">
<p>Section content area.</p>
</div>
</section>
Tier 2: Standard (With Wrapper)
Wrapper groups head and content with consistent gap spacing. Used for most sections.
Section Title
Description text wrapped with content inside a section wrapper.
Section content area.
<section class="nds-content-section nds-demo-section">
<div class="nds-section-wrapper">
<div class="nds-section-head">
<h2 class="nds-section-title">Section Title</h2>
<p class="nds-section-description">Description text wrapped with content inside a section wrapper.</p>
</div>
<div class="nds-section-body">
<p>Section content area.</p>
</div>
</div>
</section>
Tier 3: With Action
Action buttons sit beside the head on desktop and drop to full-row below on tablet and smaller.
Latest News
Stay up to date with the latest updates and announcements.
News cards or content goes here.
<section class="nds-content-section nds-demo-section">
<div class="nds-section-wrapper">
<div class="nds-section-head">
<h2 class="nds-section-title">Latest News</h2>
<p class="nds-section-description">Stay up to date with the latest updates and announcements.</p>
</div>
<div class="nds-section-action">
<a href="#" class="nds-btn nds-primary">
<span class="nds-label">View All</span>
</a>
</div>
<div class="nds-section-body">
<p>News cards or content goes here.</p>
</div>
</div>
</section>
Float Action
Place the action as the first child inside the section head. It floats to the inline-end, letting the title and description text wrap around it. Not compatible with .nds-center or .nds-horizontal layouts. Add .nds-minimal to hide button labels on mobile (icon-only) or .nds-wrap to allow items to wrap.
Section Title
The action button floats to the inline-end corner while the title and description text wrap around it naturally. This creates a compact layout without the action taking its own flex row.
Section content area.
<section class="nds-content-section nds-demo-section">
<div class="nds-section-wrapper">
<div class="nds-section-head">
<div class="nds-section-action">
<a href="#" class="nds-btn nds-primary" aria-label="View All">
<i class="nds-icon nds-hgi-arrow-prev-01" aria-hidden="true"></i>
<span class="nds-label">View All</span>
</a>
</div>
<h2 class="nds-section-title">Section Title</h2>
<p class="nds-section-description">The action button floats to the inline-end corner while the title and description text wrap around it naturally. This creates a compact layout without the action taking its own flex row.</p>
</div>
<div class="nds-section-body">
<p>Section content area.</p>
</div>
</div>
</section>
Dual Action
A section can have both a float action inside the head and a standard action outside. The outside action automatically wraps to a full row when a float action is present.
<section class="nds-content-section nds-demo-section nds-ghost">
<div class="nds-section-wrapper">
<div class="nds-section-head">
<div class="nds-section-action">
<a href="#" class="nds-btn nds-subtle">
<i class="nds-icon nds-hgi-share-01" aria-hidden="true"></i>
<span class="nds-label">Share</span>
</a>
</div>
<h2 class="nds-section-title">Section Title</h2>
<p class="nds-section-description">Float action in the head, standard action outside for secondary controls.</p>
</div>
<div class="nds-section-action">
<a href="#" class="nds-btn nds-primary">
<span class="nds-label">View All</span>
</a>
<a href="#" class="nds-btn nds-secondary-outline">
<span class="nds-label">Download</span>
</a>
</div>
<div class="nds-section-body">
<p>Section content area.</p>
</div>
</div>
</section>
Action Wrapping: nds-nowrap
By default, the standard action wraps to a full row on mobile. Add .nds-nowrap to keep it inline.
Section Title
The action stays inline on all breakpoints.
Resize the browser to mobile width. The action stays beside the head.
<section class="nds-content-section nds-demo-section">
<div class="nds-section-wrapper">
<div class="nds-section-head">
<h2 class="nds-section-title">Section Title</h2>
<p class="nds-section-description">The action stays inline on all breakpoints.</p>
</div>
<div class="nds-section-action nds-nowrap">
<a href="#" class="nds-btn nds-primary nds-sm">
<span class="nds-label">Action</span>
</a>
</div>
<div class="nds-section-body">
<p>Resize the browser to mobile width. The action stays beside the head.</p>
</div>
</div>
</section>
Tier 4: With Image
Image, head, and action form a flex row. Content takes full row below.
Faculty Profile
Professor of Computer Science, College of Engineering.
Profile details and content goes here.
<section class="nds-content-section nds-demo-section">
<div class="nds-section-wrapper">
<div class="nds-section-image">
<div class="nds-avatar">
<i class="nds-icon nds-icon-avatar" aria-hidden="true"></i>
</div>
</div>
<div class="nds-section-head">
<h2 class="nds-section-title">Faculty Profile</h2>
<p class="nds-section-description">Professor of Computer Science, College of Engineering.</p>
</div>
<div class="nds-section-action">
<a href="#" class="nds-btn nds-primary">
<span class="nds-label">Contact</span>
</a>
</div>
<div class="nds-section-body">
<p>Profile details and content goes here.</p>
</div>
</div>
</section>
Tier 5: Max-Width Breakout
Content lives outside the wrapper and uses .nds-max-width to break out of the content padding into the full available width. Wrapper holds head + action only. This demo is live on the page itself — the swiper below escapes the content max-width to the viewport gutter edge (a nested demo card can't show this: the breakout resolves against its container, not the page).
Tier 6: Horizontal Layout
Add .nds-horizontal to a section to switch the wrapper from flex to a two-column grid layout on desktop (head start, content end).
<section class="nds-content-section nds-demo-section nds-horizontal">
<div class="nds-section-wrapper nds-grid" style="--max-track: 5fr 7fr; --mid-track: 1fr;">
<div class="nds-section-head">
<h2 class="nds-section-title">Side by Side</h2>
<p class="nds-section-description">Head and content are displayed in a horizontal grid on desktop screens.</p>
<div class="nds-section-action">
<a href="#" class="nds-btn nds-primary">
<span class="nds-label">View All</span>
</a>
</div>
</div>
<div class="nds-section-body">
<img src="https://placehold.co/600x400/e2e8f0/475569?text=Content+Image" alt="Placeholder image" style="border-radius: var(--radius-lg); width: 100%;">
</div>
</div>
</section>
Tier 7: Stacked Wrappers
Several titled blocks inside one section, sharing a single surface. Use it where a section has a visible surface of its own: card view, where each section paints as a card, and striped layouts, where sections alternate background.
Profile
The first block carries the heading that names the whole surface.
Section content area.
Experience
Each following block keeps its own head and body.
Section content area.
Publications
Spacing between blocks is handled for you, so no extra classes are needed.
Section content area.
Title Icon
A mark that sits beside the heading, for sections that carry an emblem or a category symbol. Put nds-section-icon inside the title and it takes the heading height, so it rescales with the title on every breakpoint. The title holds the mark on one row, so a long heading wraps its text and leaves the mark in place. Add nds-center to the section to center the head and stack the mark above the text.
Digital services
Services you can complete online, without a visit to a branch.
Section content area.
<section class="nds-content-section">
<div class="nds-section-wrapper">
<div class="nds-section-head">
<h2 class="nds-section-title">
<span class="nds-featured-icon nds-section-icon">
<i class="hgi hgi-stroke hgi-stars"></i>
</span>
Digital services
</h2>
<p class="nds-section-description">Services you can complete online, without a visit to a branch.</p>
</div>
<div class="nds-section-body">
<p>Section content area.</p>
</div>
</div>
</section>
Built-in Features
Start with a minimal title and body, then layer in wrappers, actions, images, and full-width breakouts as the layout demands.
Apply primary, neutral, brand, gradient, or ghost backgrounds with a single class. Text colors adapt automatically to maintain contrast.
Switch to a side-by-side grid with nds-horizontal for sections where the head and content sit next to each other on desktop.
Place actions beside the title as a float, outside the head as a standard row, or both at once for primary and secondary controls.
Content marked with nds-max-width breaks out of the content padding to span the full available width, ideal for carousels and media.
Title and description sizes scale smoothly between mobile and desktop using clamp-based tokens, with every value overridable through CSS custom properties.
Repeat the wrapper to put several titled blocks on one surface, spaced apart for you. In card view they share a single card instead of becoming separate cards, and in striped layouts they hold one stripe instead of alternating.
The wrapper establishes a named section CSS container. Nested grids and components respond to the actual column width, not just the viewport — correct sizing in sidebar layouts where the content column is narrower than the screen.
Usage Guidelines
Best Practices
- Use sections as the primary building block for all page content. Every distinct content area on a page should be wrapped in its own
nds-content-section - Use Tier 2 (with wrapper) as the default starting point. Only drop to Tier 1 for truly minimal sections that need no action or image
- Use full-width breakout for content that benefits from edge-to-edge display: carousels, Swiper components, wide image galleries, or full-bleed media
- Use horizontal layout for marketing-style sections where a text block and visual sit side by side, like feature highlights or call-to-action blocks
- Do not use sections for small inline UI elements. Use Cards for self-contained content items, or Accordion for collapsible groups
- Do not nest
nds-content-sectioninside anothernds-content-section. Use a block to subdivide content within a section, or stack severalnds-section-wrapperchildren when each part needs its own title and description - Use stacked wrappers when several titled blocks belong on one surface: a profile or record page in card view that should read as a single card, or related blocks in a striped layout that should hold one background instead of alternating. In a plain layout with no striping, separate sections already read as one flow, so stacking gains nothing
- Leave a stacked section as a plain block. It spaces its wrappers already, so adding
nds-flexand a--gapdoubles every break and leaks the gap into nested flex containers. To widen or tighten the breaks, set--section-wrapper-gapon the section - Remember that striping counts sections, not wrappers. Merging several sections into one flips the stripe parity of every section below it, so check the rest of the page after the change
- Choose float action when the action is secondary and the title area has room. Choose standard action when the action buttons are prominent and should have their own row on mobile
- Add
nds-nowrapto the action container only when the action is compact (a single small button) and should stay inline at all breakpoints - Use color themes sparingly. Reserve
nds-primaryandnds-gradient-primaryfor hero-level emphasis, andnds-brandornds-ghostfor subtle visual separation between adjacent sections
Content Spacing
- Flow content in a section body is spaced automatically. Paragraphs, lists, tables, and code blocks get a bottom margin, and list items get vertical padding: write plain
<p>,<ul>, and<ol>with no spacing classes - The rhythm is direction-aware. Arabic fills more of the line box than Latin at the same size, so RTL gets one step more padding between list items than LTR
- Nested lists indent one step per level and read as a tighter cluster under their parent item. Nested
<ol>markers cycle 1. → a. → i., while an<ol>inside a<ul>stays decimal because it starts a new count - Lists inside
nav,nds-scroll-more,nds-drawer, or ands-drawer-listitem opt out, because those components space their own items. Do not wrap a prose list in one of these containers or it loses the automatic spacing
Modifier Classes
| Class | Description |
|---|---|
nds-center | Centers all section content (head, action, body) in a column layout |
nds-horizontal | Switches the wrapper to a two-column grid on desktop (head start, content end) |
nds-primary | Deep primary background with on-color text |
nds-green | Deep primary background with on-color text (alias for nds-primary) |
nds-gradient-primary | Diagonal gradient background (deprecated alias: nds-gradient-green), direction-aware (flips for RTL/LTR) |
nds-neutral | Dark neutral background with on-color text |
nds-brand | Light brand background with inset shadow, adapts for dark mode |
nds-ghost | Removes all background, border, and shadow (transparent section) |
nds-block | Spacing only: full width plus a bottom margin, dropped on the last one. It is not a container and it groups nothing, so put it straight on a block-level component such as a stepper, tab set, or table. Wrap elements in one only when they really are a single group; two groups need two blocks, or the gap between them never appears |
nds-max-width | On nds-section-body: breaks out of content padding to span the full available width |
nds-full-width | On a section child: spans the full viewport width, regardless of the container. nds-max-width only cancels the wrapper padding, so it stops at its container edge. The two differ when the container is narrower than the screen, such as beside a side menu |
nds-full | On nds-section-title, nds-section-subtitle or nds-section-description: removes the 720px paragraph width cap so the text spans the section width |
nds-minimal | On float action: hides button labels on mobile (icon-only) |
nds-wrap | On float action: allows action to wrap below the title on mobile instead of floating |
nds-nowrap | On standard action: keeps action inline at all breakpoints instead of wrapping to full row |
nds-noBg | Removes section background, border, and shadow (alias for nds-ghost) |
CSS Custom Properties
| Property | Default | Description |
|---|---|---|
--section-bg | var(--background-default) | Section background color |
--section-shadow | none | Section box shadow |
--section-border | none | Section border |
--section-border-radius | 0 | Section border radius |
--section-title-color | var(--text-display) | Title text color |
--section-subtitle-color | var(--text-secondary-paragraph) | Subtitle text color |
--section-description-color | var(--text-default) | Description text color |
--section-text-color | inherit | General text color inside section |
--section-padding-block | var(--spacing-5xl) | Vertical padding shorthand (top and bottom) |
--section-padding-block-start | var(--section-padding-block) | Top padding override |
--section-padding-block-end | var(--section-padding-block) | Bottom padding override |
--section-margin-block-start | 0 | Top margin |
--section-margin-block-end | 0 | Bottom margin |
--section-col-gap | var(--spacing-xl) | Column gap between head and action in the wrapper |
--section-row-gap | var(--spacing-4xl) | Row gap between wrapper children |
--section-wrapper-gap | var(--spacing-6xl) | Space between stacked wrappers, when one wrapper directly follows another. Set it on the section |
--section-title-FS | var(--typo-display-clamp-md-FS) | Title font size |
--section-title-LH | var(--typo-display-clamp-md-LH) | Title line height |
--section-title-MB | var(--typo-display-clamp-md-MB) | Title bottom margin |
--section-subtitle-FS | var(--typo-text-clamp-lg-FS) | Subtitle font size |
--section-subtitle-LH | var(--typo-text-clamp-lg-LH) | Subtitle line height |
--section-subtitle-MB | var(--section-title-MB) | Subtitle bottom margin |
--section-description-FS | var(--typo-text-clamp-lg-FS) | Description font size |
--section-description-LH | var(--typo-text-clamp-lg-LH) | Description line height |
--section-description-MB | var(--spacing-2xl) | Description bottom margin |
--section-icon-size | var(--section-title-FS), 48px when centered | Height of .nds-section-icon when it sits inside the title. A centered title stacks the mark above the text, so it stops tracking the title size. Setting this knob overrides both |
--section-image-MB | var(--spacing-2xl) | Image bottom margin (outside wrapper) |
--block-title-FS | var(--typo-text-xl-FS) | Content block title font size |
--block-title-LH | var(--typo-text-xl-LH) | Content block title line height |
--block-title-FW | 600 | Content block title font weight |
--block-title-MB | var(--spacing-lg) | Content block title bottom margin |
--block-title-color | var(--text-display) | Content block title color |