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
<section class="nds-hero-section nds-sub">
<nav class="nds-breadcrumb-nav" aria-label="Breadcrumb">
<ol class="nds-breadcrumb">
<li><a href="/">Home</a></li>
<li><a href="/parent">Parent Section</a></li>
<li aria-current="page">Current Page</li>
</ol>
</nav>
<div class="nds-section-wrapper">
<div class="nds-section-head">
<h1 class="nds-section-title">Service Portal</h1>
<p class="nds-section-description">Access government services, track applications, and manage your digital identity in one place.</p>
</div>
</div>
</section>
Flat
<section class="nds-hero-section nds-sub nds-flat">
<nav class="nds-breadcrumb-nav" aria-label="Breadcrumb">
<ol class="nds-breadcrumb">
<li><a href="/">Home</a></li>
<li><a href="/parent">Parent Section</a></li>
<li aria-current="page">Current Page</li>
</ol>
</nav>
<div class="nds-section-wrapper">
<div class="nds-section-head">
<div class="nds-section-action nds-minimal">
<div class="nds-share nds-dropmenu">
<button class="nds-btn nds-secondary-outline nds-dropmenu-trigger" aria-label="Share Page">
<i class="nds-icon nds-hgi-share-01" aria-hidden="true"></i>
<span class="nds-label">Share Page</span>
</button>
<div class="nds-dropmenu-menu" hidden>
<button class="nds-btn nds-subtle nds-dropmenu-item nds-share-x" type="button" aria-label="Share on X">
<i class="nds-icon nds-hgi-new-twitter" aria-hidden="true"></i>
<span class="nds-label">X</span>
</button>
<button class="nds-btn nds-subtle nds-dropmenu-item nds-share-linkedin" type="button" aria-label="Share on LinkedIn">
<i class="nds-icon nds-hgi-linkedin-02" aria-hidden="true"></i>
<span class="nds-label">LinkedIn</span>
</button>
<button class="nds-btn nds-subtle nds-dropmenu-item nds-share-whatsapp" type="button" aria-label="Share on WhatsApp">
<i class="nds-icon nds-hgi-whatsapp" aria-hidden="true"></i>
<span class="nds-label">WhatsApp</span>
</button>
<button class="nds-btn nds-subtle nds-dropmenu-item nds-share-copy" type="button" aria-label="Copy Link"
data-label="Link Copied!" data-message="Page link copied to clipboard" data-no-auto-close>
<i class="nds-icon nds-hgi-link-04" aria-hidden="true"></i>
<span class="nds-label">Copy Link</span>
</button>
</div>
</div>
</div>
<h1 class="nds-section-title">Service Portal</h1>
<p class="nds-section-description">Access government services, track applications, and manage your digital identity in one place.</p>
</div>
</div>
</section>
With Brief
<section class="nds-hero-section nds-sub">
<nav class="nds-breadcrumb-nav" aria-label="Breadcrumb">
<ol class="nds-breadcrumb">
<li><a href="/">Home</a></li>
<li><a href="/parent">Parent Section</a></li>
<li aria-current="page">Digital Identity</li>
</ol>
</nav>
<div class="nds-section-wrapper">
<div class="nds-section-head">
<h1 class="nds-section-title">Digital Identity</h1>
<p class="nds-section-brief">Your unified gateway to all government services</p>
<p class="nds-section-description">Manage your national ID, verify documents, and access personalized services from a single secure account linked to your identity.</p>
</div>
</div>
</section>
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
<section class="nds-hero-section nds-sub" style="--hero_image: url('assets/img/hero.webp')">
<nav class="nds-breadcrumb-nav" aria-label="Breadcrumb">
<ol class="nds-breadcrumb">
<li><a href="/">Home</a></li>
<li><a href="/parent">Parent Section</a></li>
<li aria-current="page">Current Page</li>
</ol>
</nav>
<div class="nds-section-wrapper">
<div class="nds-section-head">
<h1 class="nds-section-title">About the Authority</h1>
<p class="nds-section-description">The Digital Government Authority leads digital transformation across Saudi government services and establishes national standards.</p>
</div>
</div>
</section>
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
<section class="nds-hero-section nds-sub">
<nav class="nds-breadcrumb-nav" aria-label="Breadcrumb">
<ol class="nds-breadcrumb">
<li><a href="/">Home</a></li>
<li><a href="/services">Services</a></li>
<li aria-current="page">Digital Services Portal</li>
</ol>
</nav>
<div class="nds-section-wrapper">
<div class="nds-section-head">
<!-- Float action: appears inline-end inside the heading area -->
<div class="nds-section-action">
<a class="nds-btn nds-secondary-outline" href="/help">
<span class="nds-label">Help Center</span>
</a>
</div>
<h1 class="nds-section-title">Digital Services Portal</h1>
<p class="nds-section-description">Browse and apply for government services from one centralized portal available around the clock.</p>
</div>
<!-- Standard action: appears below the description -->
<div class="nds-section-action">
<a class="nds-btn nds-primary" href="/services">
<span class="nds-label">Browse Services</span>
</a>
<a class="nds-btn nds-secondary-outline" href="/about">
<span class="nds-label">Learn More</span>
</a>
</div>
</div>
</section>
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-flaton pages where a gradient or brand-colored header would feel heavy, such as documentation pages, search results, and admin interfaces - Use
nds-asideonly 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-srcon second and later main hero slides to defer image loading until the slide is about to appear - Adjust
--overlayper 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
| Class | Applied To | Description |
|---|---|---|
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
| Property | Default | Description |
|---|---|---|
--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.7 |
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.
| Field | Description |
|---|---|
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. |