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>
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.
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 - 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 | Dark green background with on-color text |
nds-green | Dark green 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-max-width | On nds-section-body: breaks out of content padding to span the full available width |
nds-full | On 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-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-shape-size | var(--section-title-FS) | Size of decorative shape in the title |
--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 |