Hero - National Design System

Full-width page banners for home page sliders and compact sub-page headers, providing a visually consistent entry point that adapts to every level of site hierarchy.

Sub Hero

The sub hero sits below the header on every content page and displays the page title and description. The flat variant removes the gradient background for pages where a neutral, image-free header is more appropriate.

Default

Service Portal

Access government services, track applications, and manage your digital identity in one place.

Flat

Service Portal

Access government services, track applications, and manage your digital identity in one place.

With Brief

Digital Identity

Your unified gateway to all government services

Manage your national ID, verify documents, and access personalized services from a single secure account linked to your identity.

With Background Image

Set the --hero_image CSS custom property to place a branded photograph behind the sub hero. A CSS mask fades the image from the start edge toward the content area — the background color shows through where the image fades out, so the fade adapts automatically to any theme or color token.

With Background Image

About the Authority

The Digital Government Authority leads digital transformation across Saudi government services and establishes national standards.

Sub Hero with Actions

The sub hero provides two action slots: a float action placed inline-end inside the heading area for contextual tools such as share or bookmark, and a standard action block below the description for primary calls-to-action.

With Actions
Help Center

Digital Services Portal

Browse and apply for government services from one centralized portal available around the clock.

Browse Services Learn More

Main Hero Slider

The main hero is a full-viewport-height banner used on home and hub pages. It wraps a Swiper carousel so multiple slides can rotate with pagination controls. Each slide has its own background image, overlay opacity, and content area.

Main Hero Slider

Built-in Features

Background Image Support

Set --hero_image on the sub hero to place a branded photograph behind the gradient with no additional markup.

CSS Mask Image Fade

A CSS mask fades the background image to transparent on the content side so the page background color shows through — no gradient color matching needed when the theme or background token changes.

Flat Variant

Add nds-flat to switch to a plain page background with no gradient, suited for utility and documentation pages.

Aside Layout Mode

Add nds-aside to narrow the hero content area to leave room for a Side Info panel sitting alongside on desktop.

Dual Action Slots

The sub hero has a float action slot inside the heading for contextual tools and a standard action slot below the description for primary calls-to-action.

Bidirectional Mask

The mask fade direction flips automatically between RTL (Arabic) and LTR (English), so the image always appears on the correct edge and text remains readable in both directions.

Usage Guidelines

Best Practices

  • Use the sub hero on every content page as the primary title area. Pair it with the Header for complete shell structure
  • Reserve the main hero slider for home pages and top-level hub pages. It occupies 60% of the viewport height and is inappropriate for deep content pages
  • Use nds-flat on pages where a gradient or brand-colored header would feel heavy, such as documentation pages, search results, and admin interfaces
  • Use nds-aside only when the page layout also includes a Side Info panel. Without the panel, the narrowed content area looks unbalanced
  • Keep sub hero descriptions to one or two sentences. The hero is an orientation area, not a content section
  • Add action buttons sparingly. One or two calls-to-action in the standard slot is enough. Overcrowding the hero with buttons competes with the page content below
  • For main hero slides, use the float action slot (such as a share button) for tools rather than navigation. Visitors who arrived on the page are past the "where to go" decision
  • Background images on the sub hero should have a clear subject on the start edge (right in RTL, left in LTR) — the mask keeps that edge fully opaque while fading toward the content area
  • Set fetchpriority="high" on the first main hero slide image. It is the Largest Contentful Paint element on home pages and skipping this degrades Core Web Vitals scores
  • Use data-src on second and later main hero slides to defer image loading until the slide is about to appear
  • Adjust --overlay per slide on the main hero to match each image's brightness. Dark images need lower values (0.4-0.5), bright outdoor images need higher values (0.6-0.8)

Modifier Classes

ClassApplied ToDescription
nds-sub .nds-hero-section Compact sub-page variant with gradient background, fit-content height, and reduced typography scale
nds-flat .nds-hero-section.nds-sub Removes the gradient and brand background, rendering the hero on the standard page background color
nds-aside .nds-hero-section.nds-sub Narrows the hero content area at desktop width to leave room for a Side Info panel alongside

CSS Custom Properties

PropertyDefaultDescription
--hero_image none Background image URL for the sub hero. Set as an inline style: style="--hero_image: url('...')". The CSS mask fades it automatically.
--hero-mask-angle 90deg RTL / 270deg LTR Direction of the mask gradient. Auto-set per text direction; override with a fixed angle for a top-to-bottom or diagonal fade.
--hero-mask-from 0% Start position of the fully opaque image edge. Increase to push the visible area inward from the start edge.
--hero-mask-to 70% Point at which the image fully fades out. Decrease for a sharper cut, increase to reveal more of the image behind the content area.
--overlay 0.20 Opacity of the dark overlay on the main hero image wrapper. Set on .nds-hero-image-wrapper via inline style. Range: 0 (transparent) to 1 (fully opaque).

Jekyll Front Matter

When using the page layout, the sub hero renders automatically from these front matter fields. No HTML required.

FieldDescription
hero_title Hero heading text. Defaults to title if omitted.
hero_description Hero description paragraph.
hero_brief Optional short bold lead line rendered between the title and description.
hero_style Modifier class added to the section element. Values: nds-flat, nds-aside.
hero_image Path to the background image for the sub hero. Resolves to the --hero_image CSS variable.
hero_image_pos CSS background-position value for the hero image. Default: 50% 50%.
hero_tags Array of tag badge objects shown in .nds-section-meta. Each item: label, style, icon, modifiers.
hero_actions Array of CTA button objects rendered in the standard action slot below the description. Each item: label, url, style, icon, target. Use "share" as a string item to render the share dropmenu.
hero_float_actions Array or object with class and items for the inline-end float action slot. Same item fields as hero_actions. Use class: nds-minimal to show icons only on mobile.
heroaction Name of a _data/hero/*.yml file to load tag and action configuration from. Defaults to heroaction.
hide_share_page Set to true to suppress the share dropmenu even when it is defined in the action data file.
Was this page useful?
60% of users said Yes from 2843 Feedbacks