Pick Foundation Day from the theme switcher in the top bar: the site re-skins and the event slide appears. Switch back to undo.
Automatic
Add one tag to your shared <head>, after the NDS stylesheets and without defer. It applies the palette and the hero slide; remove it when the event 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/foundation_day/. The paths below assume assets/events/foundation_day/. 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/foundation_day/nds-theme-foundation-day.min.js"></script>
Manual (no JavaScript)
No-JS alternative: link the stylesheet for the palette, 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).
<link id="nds-theme-stylesheet" rel="stylesheet"
href="/assets/events/foundation_day/nds-theme-foundation-day.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 | يوم بدينا / Our Story | Slide heading per language. |
data-description-ar / data-description-en | تأسيس نعتز به، ومستقبل نصنعه / A founding we cherish, a future we shape | Slide description. Empty value hides it. |
data-image | Hero_bg.webp | Background photo. Empty value uses the brown background variant. |
data-cta-url | https://www.foundingday.sa/ | Button link. Empty removes the button; non-https is rejected. |
data-cta-label-ar / data-cta-label-en | منصة يوم التأسيس / Foundation Day Platform | Button label per language. |
data-cta-icon | founding-icon.svg | Button icon. Empty omits it. |
Built-in Features
One script tag applies the palette, root marker, and hero slide. It carries its own CSS, so nothing else is linked. No build, no markup edits.
The script writes its CSS while the page parses, with no second request, so the default colours never flash.
Set the slide title, description, photo, and CTA with data-* attributes; defaults when omitted.
Each string has Arabic and English values; the pack picks one from the page lang.
Delete the tag and the palette, token, and slide are gone on the next load.
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 palette stays 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.