Side Info | NDS - Vanilla National Design System

Structure

The side info wraps the page body in a flex row. The main article sits in .nds-info-content and the companion column in .nds-sideinfo. On mobile the row collapses to a column.

Component Tree


section.nds-content-section nds-demo-section.nds-sideinfo-section
└── div.nds-section-body
    ├── div.nds-info-content
    │   └── article (main content)
    └── aside.nds-sideinfo.nds-sticky.nds-card
        └── (companion content: definition list, TOC, stepper, etc.)

Standard

A sticky sideinfo that tracks with the article. Toggle nds-sticky to see the difference between pinned and in-flow behavior.

Article Heading

This is an example of the article column next to a side info card. In production the article fills the remaining width while the sideinfo stays at its configured width.

Reduce the viewport below 960px to see the columns stack.

Sizes

Three preset widths. Default is large (400px). Choose small for compact rails like in-page navigation, medium for moderate content, or large for cards with several definition rows.

The sideinfo width updates instantly when you switch the size. The main article fills whatever remains.

Reverse

Add nds-reverse to flip the column to the inline-start side (left in LTR, right in RTL). The article body fills the rest.

With reverse enabled, the sideinfo takes the start side of the row and the article fills the end. Useful when the sideinfo hosts navigation (e.g., a table of contents) that readers expect on the left.

Built-in Features

Auto-initialization

Activates on any .nds-sideinfo on the page. Positioning, sticky, and resize hooks attach automatically.

Hero-Aside Alignment

When the hero opts in with nds-aside, the column lifts into the hero's reserved slot so the card visually starts next to the page title.

Smart Sticky Fallback

Sticky positioning drops automatically when the card is taller than the viewport and restores when it fits, so readers never get trapped on unreachable content.

Size Variants

Three preset widths (small, medium, large) cover everything from compact navigation rails to content-rich service cards.

Responsive Stack

Below the tablet breakpoint the row collapses to a column and the sideinfo spans the full width. Pair with nds-top to place it above the article on small screens.

Programmatic Control

Create a single instance or reinitialize all sideinfos after injecting new markup through the NDS.Sideinfo API.

Usage Guidelines

Live Examples

Content Template: article with a TOC in the sideinfo column
Service Page Template: government service with hero-aside alignment and a definition-list card
Form Template: multi-step form with a sideinfo stepper on desktop, radial on mobile
Contact Us Template: contact form with an emergency-contacts sideinfo card

Best Practices

Use a sideinfo for supporting context that should stay visible while the reader scrolls the article: service metadata, progress, table of contents, or quick actions
Use the hero-aside (hero_style: "nds-aside") when the card represents the whole page's context (service details, contact card) so it visually anchors to the page title. Omit nds-aside when the sideinfo belongs to the article body (a TOC, inline help)
Do not use a sideinfo to hold unrelated ads or cross-promotional content. The column is a continuation of the article's context, not a marketing slot. Prefer a card grid below the main content instead
Do not use it for primary site navigation. That's the Side Menu's job
Pick nds-sm or nds-md when the column hosts a link list (TOC). Reserve nds-lg (default) for cards with several definition rows or an embedded stepper
Add nds-sticky for long articles where readers benefit from always-available context. Skip it for short pages where the initial view already shows everything
Add nds-top alongside nds-sticky when the content should move above the article on mobile (progress trackers, step indicators)
Pair the sideinfo with nds-card plus nds-stroke or nds-shadow to separate it visually from the article. Borderless cards work only against contrasting section backgrounds
Keep the column's content scannable. Use a definition list for paired labels and values, or a stepper for progress. Avoid long paragraphs inside the column

Modifier Classes

Class	Description
`nds-sm`	Compact 200px width for navigation rails and link lists
`nds-md`	Medium 300px width for moderate content
`nds-lg`	Large 400px width for rich cards (default)
`nds-sticky`	Pin the column to the nav's lower edge as the page scrolls. Auto-disables when the card is taller than the viewport
`nds-top`	On mobile, place the sideinfo above the main content when the columns stack
`nds-reverse`	Flip the column to the inline-start side of the flex row

CSS Custom Properties

Property	Default	Description
`--nds-sideinfo-width`	`400px`	Column width. Preset by the size modifiers; override for a custom width
`--nds-sideinfo-top-offset`	`0px`	Extra space above the card. Adds to the sticky `top` threshold and, on hero-aside pages, folds into the pull-up so the card shifts down by the same amount before and after sticking
`--nds-sideinfo-top`	computed	Set by the JS to align the card with the hero section-head when `nds-aside` is on the hero. Not intended for manual override

JavaScript API

The NDS.Sideinfo API handles positioning and sticky fallback. Auto-init runs on DOMContentLoaded; call NDS.Sideinfo.reinit() after injecting new sideinfo markup.


// ── Initialize all sideinfo columns on the page ─────
// Runs automatically once. Call reinit after DOM changes.
NDS.Sideinfo.init();
NDS.Sideinfo.reinit();

// ── Create a single instance ────────────────────────
// Returns the NDSSideInfo instance
const aside = document.querySelector('.nds-sideinfo');
const instance = NDS.Sideinfo.create(aside);

// ── Manually tear down and re-wire ──────────────────
instance.destroy();         // Remove listeners, clear CSS variable
instance.updatePosition();  // Recompute the hero-alignment offset
instance.updateStickyState();// Re-check whether sticky fits the viewport