Footer | NDS - Vanilla National Design System

Footer Structure

The footer sits at the bottom of every page and is split into two regions: a flex-wrap multi-column content area, and a bottom bar that stacks general links above the copyright and policy links below it, alongside partner logos.

Component Tree


footer.nds-footer.nds-content-wrapper
├── nav.nds-footer-content
│   ├── div.nds-footer-column (link column)
│   │   ├── h3.nds-footer-heading
│   │   └── ul.nds-footer-list
│   │       └── li > a.nds-link.nds-footer-link
│   └── div.nds-footer-column.nds-footer-icons (merged icons column)
│       ├── div.nds-footer-icon-group (social)
│       │   ├── h3.nds-footer-heading
│       │   └── div.nds-footer-icon-row
│       │       └── a.nds-btn.nds-secondary-outline.nds-icon-only
│       └── div.nds-footer-icon-group (mobile apps)
│           ├── h3.nds-footer-heading
│           └── div.nds-footer-icon-row
│               └── a.nds-btn.nds-secondary-outline.nds-xl.nds-icon-only
│
├── hr.nds-divider.nds-lg
│
└── div.nds-footer-bottom
    ├── div.nds-footer-meta
    │   ├── div.nds-footer-links (top row — underlined generic links)
    │   └── div.nds-footer-legal (legal block)
    │       ├── div.nds-footer-copyright (copyright text)
    │       └── div.nds-footer-policy (policy/terms links — no underline)
    └── div.nds-footer-logos
        └── a > img (partner/government logos)

Content Columns

The footer content area uses a flex-wrap layout. Each column has a heading and a list of links. On desktop columns display side by side; on tablet they drop to two per row; on mobile they stack to one per row.

Link Column


<footer class="nds-footer nds-content-wrapper" role="contentinfo" aria-label="Site Footer">
  <nav class="nds-footer-content" aria-label="Footer navigation">
    <!-- Link column -->
    <div class="nds-footer-column">
      <h3 class="nds-footer-heading">Services</h3>
      <ul class="nds-footer-list">
        <li><a class="nds-link nds-footer-link" href="/services/individuals"><span class="nds-label">Individuals</span></a></li>
        <li><a class="nds-link nds-footer-link" href="/services/businesses"><span class="nds-label">Businesses</span></a></li>
        <li><a class="nds-link nds-footer-link" href="/services/government"><span class="nds-label">Government Entities</span></a></li>
        <li><a class="nds-link nds-footer-link" href="/open-data"><span class="nds-label">Open Data</span></a></li>
      </ul>
    </div>

    <!-- Contact column with leading icons -->
    <div class="nds-footer-column">
      <h3 class="nds-footer-heading">Contact Us</h3>
      <ul class="nds-footer-list">
        <li><a class="nds-link nds-footer-link" href="#"><i class="nds-icon nds-hgi-location-01" aria-hidden="true"></i><span class="nds-label">Riyadh, King Fahd Road</span></a></li>
        <li><a class="nds-link nds-footer-link" href="tel:920000000"><i class="nds-icon nds-hgi-headphones" aria-hidden="true"></i><span class="nds-label">920 000 000</span></a></li>
        <li><a class="nds-link nds-footer-link" href="mailto:info@example.gov.sa"><i class="nds-icon nds-hgi-mail-01" aria-hidden="true"></i><span class="nds-label">info@example.gov.sa</span></a></li>
      </ul>
    </div>
  </nav>
</footer>

Social and App Links

Social and mobile-app icon groups share a single merged column (nds-footer-icons) so the two clusters sit side-by-side and wrap together. Social icons use outline icon buttons; app store links use the larger nds-xl variant with inline SVG brand marks.

Social Icons Column

Mobile App Column

Footer Bottom Bar

A horizontal bar below the divider. The meta block stacks two regions: .nds-footer-links (top, underlined generic links), and .nds-footer-legal (the legal block, holding .nds-footer-copyright above .nds-footer-policy). Partner logos sit on the opposite side. On mobile the layout stacks vertically and centers.

Bottom Bar

Built-in Features

Multi-Column Layout

Content columns flow across 4 columns on desktop, 2 on tablet, and stack to 1 on mobile with no extra configuration.

Merged Icons Column

Social-media and mobile-app groups share one column (nds-footer-icons) with flex-wrap content, so the two clusters sit side-by-side at wider widths and stack as space narrows. The column spans the full row on mobile. Social icons use outline icon buttons; app store links use the larger nds-xl variant with inline SVG brand marks.

Logo Bar

A flexible logo strip in the bottom bar. Add nds-oncolor to individual images to invert them to white on dark backgrounds.

Responsive Stacking

The bottom bar switches from horizontal (links left, logos right) to centered vertical stacking on mobile.

Light and Green Variants

Default light neutral background adapts to dark mode automatically. Add nds-green for a dark green footer with white text and on-color button tokens.

Usage Guidelines

Best Practices

Use the footer on every page to provide consistent secondary navigation, legal links, and contact information
Use the footer alongside the Header and Side Menu to complete the UI shell. The header handles primary navigation, the side menu handles section navigation, and the footer handles secondary and legal content
Keep footer columns to 6 or fewer. More columns crowd the layout on tablet where it drops to 2 columns
Put the most important links (home, about, main sections) in the first column. Contact and social columns work best at the end
Do not duplicate primary navigation links in the footer. The footer is for secondary access: legal pages, contact info, social profiles, and sitemap
Add leading icons to contact links (location, email, phone) to make them scannable. Use icon classes from the HGI Stroke Rounded set
Always include at minimum: privacy policy, terms and conditions, and accessibility links in the bottom bar for government compliance
Use target="_blank" on external links and social media to keep users on the site
App store links use inline SVG for the Apple, Google Play, and Huawei logos rather than icon fonts, since these are brand marks not available in the icon set
The default footer uses a light neutral background that adapts to dark mode automatically. Add nds-green to .nds-footer for the dark green variant with white text
Add nds-oncolor to individual logo <img> elements that should invert to white on dark backgrounds (dark mode and green variant). Logos without the class keep their original colors in all modes

Modifier Classes

Class	Applied To	Description
`nds-green`	`.nds-footer`	Dark green background with white text, inverted logos, and on-color button/link tokens
`nds-oncolor`	Logo `<img>` elements	Inverts the image to white on dark backgrounds (dark mode and green variant)
`nds-footer-icons`	`.nds-footer-column`	Marks a column as the merged social + mobile-app container. Lays out `.nds-footer-icon-group` children with flex-wrap.
`nds-icon-only`	Social and app link buttons	Renders buttons as square icon-only buttons without labels
`nds-xl`	App store buttons	Larger button size for the mobile app store SVG icons

CSS Custom Properties

Property	Default	Description
`--background-footer`	Theme token	Background color for the `nds-green` variant. Resolves to dark green in light mode and a semi-transparent green in dark mode.
`--divider-color`	Theme token	Color of the heading underline and the legal-link separators. Inherits from the global divider token; the `nds-green` variant overrides it locally to `--alpha-white-10`.