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. That one tag is the whole install — every value has a built-in default. Use the With overrides tab to change any of them; see the attribute table below.
The pack is self-contained. Download the zip, then copy its files into your own assets folder. A template copy already ships them at docs-assets/events/Hajj/. The paths below assume assets/events/Hajj/. The script carries its own CSS and finds its images next to itself, so the folder works at any location as long as its contents stay together. You need the .min.css file only for the no-script setup below, or when you want to override a rule.
<script src="/assets/events/Hajj/nds-theme-hajj.min.js"></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.
<link id="nds-theme-stylesheet" rel="stylesheet"
href="/assets/events/Hajj/nds-theme-hajj.min.css">
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 script tag applies the stylesheet it carries, the root marker, and the hero slide. No build, no markup edits.
A single seed derives the full primary ramp on DGA's lightness curve, with neutral grays — flowing into light and dark automatically.
The hero heading renders in the official Saudi typeface; the rest of the page keeps IBM Plex Sans Arabic.
The hero background swaps between an RTL and an LTR artwork automatically with the page direction.
Each string has Arabic and English values; the pack picks one from the page lang.
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-urlto 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.