Centering
These classes are for the layouts you build yourself. NDS pages are composed from sections, blocks, and components, so this documentation uses them sparingly: they exist for your own markup, not as the structure of the system.
A reference number will reach you by text message within one working day.
<div class="nds-card nds-stroke nds-center">
<div class="nds-card-content">
<div class="nds-card-text">
<span class="nds-card-title">Service request received</span>
<p class="nds-card-description">A reference number will reach you by text message within one working day.</p>
</div>
</div>
</div>
Spacing Reset
Strips padding, margin, border, and corner radius in one class. Reach for it when a component sits inside a frame you already styled and its own spacing would double up.
Sunday to Thursday, 8:00 to 16:00.
<div class="nds-card nds-stroke nds-flush">
<div class="nds-card-content">
<div class="nds-card-text">
<span class="nds-card-title">Opening hours</span>
<p class="nds-card-description">Sunday to Thursday, 8:00 to 16:00.</p>
</div>
</div>
</div>
Direction Isolation
Arabic text mixed with a Latin value is the most common direction bug: the leading plus sign, slash, or question mark drifts to the wrong end of the value. This class pins that value to left-to-right and keeps it from reordering the sentence around it.
للاستفسار اتصل على +966 11 456 7890
تابع طلبك على nds.gov.sa/track?id=4417
<div dir="rtl" lang="ar">
<p>للاستفسار اتصل على <span class="nds-label nds-ltr">+966 11 456 7890</span></p>
<p>تابع طلبك على <span class="nds-label nds-ltr">nds.gov.sa/track?id=4417</span></p>
</div>
Brand Text Color
Paints any element in the brand text color. Links already carry it through nds-color, so this covers the non-link cases: a figure in a summary line, a term in a list, an emphasized word.
Your request is under review and moves to the next stage within two working days.
<p>Your request is <span class="nds-label nds-color-primary">under review</span> and moves to the next stage within two working days.</p>
Note
A short line of secondary text: the required-fields explainer above a form, a fee disclaimer, a footnote under a table, or a hint beside a label. Add a status to tint it.
<form class="nds-form">
<p class="nds-note" data-status="error">* Required information</p>
<div class="nds-form-container" data-required>
<div class="nds-form-header">
<label for="national-id">
<span class="nds-label">National ID</span>
</label>
</div>
<div class="nds-form-control">
<input type="text" id="national-id" class="nds-input" placeholder="10 digits" required>
</div>
</div>
</form>
Built-in Features
Centering uses logical spacing, so the same class behaves identically in Arabic and English pages.
A note takes an error, warning, success, or info status, tinted from the same tokens the rest of the system uses.
Padding, margin, border, and radius clear together, so an embedded component stops fighting your own frame.
Numbers, codes, and URLs read correctly inside Arabic text without changing the page direction.
Brand text reads from the same token as the rest of the system, so it re-tints in dark mode and under a custom palette.
Every class here is CSS only. Nothing to initialize, and nothing added to your page weight.
Usage Guidelines
Best Practices
- Reach for these in your own markup: a wrapper you wrote, a custom panel, a one-off layout. Component appearance is controlled by that component's own modifier classes
- Use
nds-centerwhen a block needs both its text centered and the block itself centered in its parent. It sets the inline margins as well as the text alignment - Use
nds-ltrfor any left-to-right value inside Arabic text: phone numbers, IBANs, tracking codes, email addresses, URLs. Without it, punctuation and signs jump to the wrong end - There is no matching class for the other direction. For content that is genuinely right-to-left inside a left-to-right page, write
dir="rtl"withlangon the element. The attributes tell browsers, screen readers, and translation tools what the content is, which a class cannot - Use
nds-flushwhen you place a component inside a container that already provides padding and a border, such as a card inside your own bordered panel - Do not use
nds-flushto make small spacing corrections. It clears four properties at once with high priority, which makes later adjustments harder. Set the component's own spacing property instead - Do not build a layout from these classes. Use Flex for one-dimensional arrangements and Grid for columns that respond to width
- There are no margin or padding classes on purpose. For spacing, set
--gapon the flex or grid container that holds the items, or apply a value from the spacing token ladder in your own CSS. Spacing belongs to the container, not to a class on every child - Prefer a single
nds-centeron a wrapper over the same class repeated on every child. Text alignment inherits - Keep a required-fields note to one line above the first field. Marking each input is the job of
data-requiredon the field container - Use
nds-notefor plain secondary text. When the message needs an icon, a border, or a dismiss action, use Feedback or Alert instead - For hiding an element at one screen size, use the Hidden utility. For clipping long text, use Truncate Text
Class Reference
| Class | Description |
|---|---|
nds-center | Centers the text inside the element and the element itself within its parent, at every screen width |
nds-flush | Clears padding, margin, border, and corner radius |
nds-ltr | Forces left-to-right direction on the element and everything inside it |
nds-color-primary | Applies the brand text color to any element, including non-link content |
nds-note | Small secondary-colored line of text. Carries no spacing of its own, so it is safe beside a label |
nds-note + data-status | Tints the note. Values: error, warning, success, info |
nds-required-notice | Legacy alias for nds-note with the error status, plus bottom spacing. Prefer the two together on new pages |