Section | NDS - Vanilla National Design System

Section Hierarchy

The section component uses responsive padding for content constraining and a flex wrapper for grouping head, action, image, and content.

Section Structure


section.nds-content-section.nds-demo-section          (responsive padding for content constraining)
├── div.nds-section-wrapper          (Flex row + responsive breakpoints)
│   ├── div.nds-section-image        (optional)
│   ├── div.nds-section-head         (flex:1, title + desc + meta)
│   │   ├── div.nds-section-action   (optional float, must be first child)
│   │   │                            Modifiers: .nds-minimal (icon-only on mobile) | .nds-wrap (allow wrap)
│   │   ├── h2.nds-section-title
│   │   ├── div.nds-section-meta
│   │   └── p.nds-section-description
│   ├── div.nds-section-action       (optional, auto width. Add .nds-nowrap to keep inline on mobile)
│   └── div.nds-section-body      (full row below)
│       └── div.nds-block    (optional content grouping)
│           ├── h3.nds-block-title   (optional)
│           └── p, ul, ol, img...    (direct content)
└── div.nds-section-body.nds-max-width  (outside wrapper for breakout)

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.

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.

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.

View All

News cards or content goes here.

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.

View All

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.

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.

Share

Section Title

Float action in the head, standard action outside for secondary controls.

View All Download

Section content area.

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.

Action

Resize the browser to mobile width. The action stays beside the head.

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.

Contact

Profile details and content goes here.

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.

Related Services

Explore other government digital services that may be relevant to you.

View All

Identity Verification

Verify your national identity and obtain digital certificates for government transactions

Details Get Started

Passport Renewal

Renew your passport online with expedited processing and home delivery options

Details Get Started

Birth Certificate Request

Request official birth certificates and family documentation online

Details Get Started

Marriage Contract Registration

Register marriage contracts and obtain official marriage certificates

Details Get Started

Driver's License Services

Apply for, renew, or update your driving license information

Details Get Started

Vehicle Registration

Register new vehicles, transfer ownership, or renew your vehicle registration

Details Get Started


<section class="nds-content-section nds-demo-section">
    <div class="nds-section-wrapper">
        <div class="nds-section-head">
            <h2 class="nds-section-title">Related Services</h2>
            <p class="nds-section-description">Explore other government digital services that may be relevant to you.</p>
        </div>
        <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 nds-max-width">
        <div class="nds-swiper" slides-max="3" slides-mid="2" slides-min="1" peek="40" hidden>
            <div class="nds-swiper-wrapper">
                <div class="nds-swiper-slide">
                    <div class="nds-card nds-stroke">
                        <div class="nds-card-header">
                            <div class="nds-card-featured-icon">
                                <span class="nds-featured-icon nds-circle nds-xl">
                                    <i class="hgi hgi-stroke hgi-user-id-verification"></i>
                                </span>
                            </div>
                        </div>
                        <div class="nds-card-content">
                            <div class="nds-card-text">
                                <h3 class="nds-card-title nds-truncate">Identity Verification</h3>
                                <span class="nds-card-description nds-truncate">Verify your national identity and obtain digital certificates.</span>
                            </div>
                        </div>
                        <div class="nds-card-actions">
                            <a href="#" class="nds-btn nds-secondary-outline nds-lg"><span class="nds-label">Details</span></a>
                            <a href="#" class="nds-btn nds-primary nds-lg nds-trail-icon"><span class="nds-label">Get Started</span></a>
                        </div>
                    </div>
                </div>
                <!-- more slides... -->
            </div>
            <div class="nds-swiper-navigation">
                <div class="nds-swiper-buttons">
                    <button class="nds-btn nds-primary nds-icon-only nds-circle nds-md nds-prev" type="button" aria-label="Previous slide"></button>
                    <button class="nds-btn nds-primary nds-icon-only nds-circle nds-md nds-next" type="button" aria-label="Next slide"></button>
                </div>
                <div class="nds-swiper-pagination"></div>
            </div>
        </div>
    </div>
</section>

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).

Side by Side

Head and content are displayed in a horizontal grid on desktop screens.

View All

Built-in Features

Progressive Tiers

Start with a minimal title and body, then layer in wrappers, actions, images, and full-width breakouts as the layout demands.

Color Themes

Apply primary, neutral, brand, gradient, or ghost backgrounds with a single class. Text colors adapt automatically to maintain contrast.

Horizontal Layout

Switch to a side-by-side grid with nds-horizontal for sections where the head and content sit next to each other on desktop.

Float and Dual Actions

Place actions beside the title as a float, outside the head as a standard row, or both at once for primary and secondary controls.

Full-Width Breakout

Content marked with nds-max-width breaks out of the content padding to span the full available width, ideal for carousels and media.

Fluid Typography

Title and description sizes scale smoothly between mobile and desktop using clamp-based tokens, with every value overridable through CSS custom properties.

Container Query Anchor

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-section inside another nds-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-nowrap to 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-primary and nds-gradient-green for hero-level emphasis, and nds-brand or nds-ghost for subtle visual separation between adjacent sections

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-green`	Diagonal gradient background, 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

Section Layout - National Design System

Section Hierarchy

Tier 1: Minimal (No Wrapper)

Section Title

Tier 2: Standard (With Wrapper)

Section Title

Tier 3: With Action

Latest News

Float Action

Section Title

Dual Action

Section Title

Action Wrapping: nds-nowrap

Section Title

Tier 4: With Image

Faculty Profile

Tier 5: Max-Width Breakout

Related Services

Identity Verification

Passport Renewal

Birth Certificate Request

Marriage Contract Registration

Driver's License Services

Vehicle Registration

Tier 6: Horizontal Layout

Side by Side

Built-in Features

Usage Guidelines

Best Practices

Modifier Classes

CSS Custom Properties

Cookies