Pick National Day 96 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 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/national_day_96/. The paths below assume assets/events/national_day_96/. 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.
<script src="/assets/events/national_day_96/nds-theme-national-day-96.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 slide is the standard hero markup with the event photo, so it needs no extra styling. Add the event mark to the footer's existing .nds-footer-logos strip.
<link id="nds-theme-stylesheet" rel="stylesheet"
href="/assets/events/national_day_96/nds-theme-national-day-96.min.css">
<!-- add inside the footer's existing .nds-footer-logos strip -->
<img src="/assets/events/national_day_96/national_day_logo.svg"
width="101" height="40" loading="lazy" alt="Saudi National Day 96">
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 | اليوم الوطني السعودي 96 / Saudi National Day 96 | Slide heading per language. |
data-description-ar / data-description-en | نحتفي بمرور 96 عامًا … / We celebrate 96 years … | Slide description. Empty value hides it. |
data-image | hero_bg.webp | Slide background photo. Empty value drops the photo and keeps the default hero surface. |
data-logo | national_day_logo.svg | Event mark, added to the footer logo strip. 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 | اليوم الوطني / National Day | 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, root marker, and hero slide. No build, no markup edits.
The pack adds no brand colours. Your existing palette and every component keep their own colours.
The slide is the normal hero markup with the event photo as its background, so it carries no slide-specific CSS.
A thin event bar sits under every content section, rotating through three artworks, with a corner vector on even sections.
The mark joins the footer's own logo strip, which already sizes every mark, so it lines up with your existing logos.
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. - Set
data-imageto your own event photo when you have one, so the hero matches your campaign. - 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.