Hajj Theme - National Design System

A welcome skin for the Hajj season. One script tag re-skins the site with a gold-brown brand palette and adds a hero slide with the Saudi-font title, a logo, and a direction-aware background, in light and dark mode. Delete the tag to restore the default.

Preview it live

Pick Hajj from the theme switcher in the top bar: the event slide appears and the section decorations apply. Switch back to undo.

Automatic

Add one tag to your shared <head>, after the NDS stylesheets and without defer. It applies the event stylesheet and the hero slide; remove it when the season ends. Every data-* below is optional (defaults shown); see the table for each one.

The pack is self-contained: copy docs-assets/events/Hajj/ out of the template into your own assets folder, then point the tag at wherever you put it. The paths below assume assets/events/Hajj/. The script finds its own CSS and images relative to itself, so the folder works at any location as long as its contents stay together.

One tag applies everything


<script src="/assets/events/Hajj/nds-theme-hajj.min.js"
        data-title-ar="خلق رحلة روحانية خالدة"
        data-title-en="Creating a Lasting Spiritual Journey"
        data-description-ar="رؤيتنا خلق رحلة روحانية خالدة تفوق تطلعات ضيوف الرحمن"
        data-description-en="Our vision is to create a lasting spiritual journey that exceeds the expectations of the Guests of the Most Merciful."
        data-logo="hayyakom.svg"></script>

Manual (no JavaScript)

No-JS alternative: link the stylesheet for the decorations, and paste the slide markup yourself. Add the CSS link in <head>, and place the slide as the first child of .nds-swiper-wrapper (raise the hero's --total by one). The background flips for direction automatically.

No-JS setup: stylesheet link and slide markup


<link id="nds-theme-stylesheet" rel="stylesheet"
      href="/assets/events/Hajj/nds-theme-hajj.min.css">


<div class="nds-swiper-slide nds-content-wrapper nds-hajj">
  <div class="nds-section-body">
    <img src="/assets/events/Hajj/hayyakom.svg" class="nds-hajj-logo" alt="حياكم">
    <h1 class="nds-section-title">خلق رحلة روحانية خالدة</h1>
    <p class="nds-section-description">رؤيتنا خلق رحلة روحانية خالدة تفوق تطلعات ضيوف الرحمن</p>
  </div>
</div>

Data Attributes

All go on the <script> tag, all optional. Asset values take a bare filename (resolved against the pack folder) or a full https URL.

Attribute	Default	Description
`data-title-ar` / `data-title-en`	خلق رحلة روحانية خالدة / Creating a Lasting Spiritual Journey	Slide heading per language (rendered in the Saudi font).
`data-description-ar` / `data-description-en`	رؤيتنا خلق رحلة روحانية خالدة … / Our vision is to create a lasting spiritual journey …	Slide description. Empty value hides it.
`data-logo`	`hayyakom.svg`	Top-start logo. Empty value omits it.
`data-cta-url`	`(none)`	Opt-in button link. Empty (default) means no button; non-https is rejected.
`data-cta-label-ar` / `data-cta-label-en`	منصة نسك / Nusuk Platform	Button label per language (only when `data-cta-url` is set).
`data-cta-icon`	`(none)`	Button icon. Empty omits it.

Built-in Features

One-Tag Activation

One script tag applies the stylesheet, root marker, and hero slide. No build, no markup edits.

Gold-Brown Brand Palette

A single seed derives the full primary ramp on DGA's lightness curve, with neutral grays — flowing into light and dark automatically.

Saudi-Font Title

The hero heading renders in the official Saudi typeface; the rest of the page keeps IBM Plex Sans Arabic.

Direction-Aware Background

The hero background swaps between an RTL and an LTR artwork automatically with the page direction.

Bilingual Content

Each string has Arabic and English values; the pack picks one from the page lang.

Theme Switcher Integration

The same pack plugs into the theme switcher: loads on demand, applies on selection, tears down on switch-away.

Usage Guidelines

Best Practices

Use an event pack for a temporary, site-wide skin tied to an occasion. For a permanent brand colour, use a custom palette or stylesheet theme instead.
Add the tag to your shared <head> on every page, not just the home page, so the decorations stay consistent.
Override data-cta-url to your own landing page so analytics stay on your domain.
Host the pack folder yourself instead of hotlinking a third-party origin.
Plan the removal up front: deleting the one line is the entire decommissioning.