Active theme set to LightDarkLight high contrastDark high contrast and saved in preferences.
Copied to clipboard.
Error submitting your feedback! Please try again.

CSS Framework 1.3.5

Get started with Nord Design System’s CSS Framework that includes a wide range of shorthand utility classes to modify an element’s appearance in your application.

The primary goal of this framework is to provide a method of styling elements with as little friction as possible. Our framework also makes it possible to use our Design Tokens through memorable CSS based utility classes. You can either use this framework standalone, or with another CSS framework, as our CSS selectors are prefixed with .n- to prevent collisions.

Installation #

Before moving further, please make sure you have Node.js installed on your machine. You can install the latest version through their website.

If you’re planning on using Nord CSS Framework in a project that doesn’t yet use Node Package Manager, you’ll have to first create a package.json file. To do this, run npm init and follow the steps provided. Once finished, you can install the CSS Framework by following these instructions.

Install using NPM #

Run in your project or website root directory (where package.json lives):

npm install @nordhealth/css

Install using Yarn #

Run in your project or website root directory (where package.json lives):

yarn add @nordhealth/css

CDN usage #

The CSS Framework can be directly used via Nord CDN, which allows your team to get up and running with minimal additions. The latest version of this framework can be added into your application by adding the below stylesheet <link> tag into the <head> section of your app:

<link rel="stylesheet" href="https://nordcdn.net/ds/css/1.3.5/nord.min.css" integrity="sha384-2R77MJ4GfBZdVkESaIvxhQmGRKuUujM3Yd53diK8d5QdPNUpNv3IcfS1yb8tAd8Y" crossorigin="anonymous" />

Browser support #

Nord’s CSS Framework is tested in the latest two versions of the following browsers. Our team addresses critical bug fixes in earlier versions based on their severity and impact. If you need to support IE11 or pre-Chromium Edge, this library isn’t for you.


Chrome Safari Chrome Chrome Chrome

Usage #

Once you’ve installed the CSS Framework package into your application, you can copy and paste the below stylesheet <link> tag into the <head> section of your app after all other stylesheets. This will load the Nord CSS Framework for you:

<link rel="stylesheet" href="[path-to-dir]/nord.min.css" />

The above example can be used alongside a copy tasks similar to the one described in our Webfonts guidelines. While technically possible, we don’t recommend to load this file directly from node_modules.

Import in Sass #

To import the CSS Framework into your Sass (scss), include this in the beginning of your main partial:

// Import CSS framework
@import "../../node_modules/@nordhealth/css/lib/nord";

You may need to edit the path shown above depending on your setup. If you’re using Webpack you can use the following:

// Import CSS framework
@import "~@nordhealth/css/lib/nord";

Utilities #

This and the below sections explain each provided utility class in detail. We’ve tried to strike a balance between readable but brief. We want your code to be readable but not so verbose that spelling errors get in the way.

Utilities begin with full word naming and begin to scope into more specific. For example borders:

The pattern of shorthand lettering for modifiers has been used throughout to signify a specific side(s) of an element or for a specific size from our Design Tokens, using our t-shirt sizing convention (-xxl, -xl, etc).


Reset utility #

The reset utility shown below is designed to be used on the highest level containing element in your markup and will reset the majority of styles to a sensible default.

<div class="n-reset">
<h1>The quick brown fox jumps over the lazy dog</h1>
<h2>The quick brown fox jumps over the lazy dog</h2>
<h3>The quick brown fox jumps over the lazy dog</h3>
<h4>The quick brown fox jumps over the lazy dog</h4>
<h5>The quick brown fox jumps over the lazy dog</h5>
<h6>The quick brown fox jumps over the lazy dog</h6>
<p>
Lorem ipsum dolor sit amet <a href="#">consectetur adipisicing</a> elit. Deserunt amet ipsam enim sed sequi
voluptatibus, culpa explicabo voluptate maxime a, cumque ea reprehenderit ad <code>consequuntur veniam</code>? Fuga
impedit iste tenetur.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. <a href="#">Architecto quasi</a>, incidunt eum ad, rerum
dolorum sequi numquam illum deleniti nobis doloremque asperiores natus perferendis, recusandae at dolorem et aperiam
totam.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto quasi, incidunt eum ad, rerum dolorum sequi
numquam illum deleniti nobis doloremque asperiores natus perferendis, recusandae at dolorem et aperiam totam.
</p>
<h2>The quick brown fox <a href="#">jumps over the</a> lazy dog</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt amet ipsam enim sed sequi voluptatibus, culpa
explicabo voluptate maxime a, cumque ea reprehenderit ad consequuntur veniam? Fuga impedit iste tenetur.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto quasi, incidunt eum ad, rerum dolorum sequi
numquam illum deleniti nobis doloremque asperiores natus perferendis, recusandae at dolorem et aperiam totam.
</p>
<pre><code>&lt;link rel="stylesheet" href="https://nordcdn.net/ds/tokens/2.0.4/tokens.custom-properties.css" integrity="sha384-XtHi70a2WlH468I3Z4gPGu2ihcHfE7IzpM+bF0cn9nEXAG67YmXsSpBSEYULYC7E" crossorigin="anonymous" /&gt;</code></pre>
<h3>The quick brown fox jumps over the lazy dog</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt amet ipsam enim sed sequi voluptatibus, culpa
explicabo voluptate maxime a, cumque ea reprehenderit ad consequuntur veniam? Fuga impedit iste tenetur.
</p>
<h4>The quick brown fox jumps over the lazy dog</h4>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto quasi, incidunt eum ad, rerum dolorum sequi
numquam illum deleniti nobis doloremque asperiores natus perferendis, recusandae at dolorem et aperiam totam.
</p>
<h5>The quick brown fox jumps over the lazy dog</h5>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt amet ipsam enim sed sequi voluptatibus, culpa
explicabo voluptate maxime a, cumque ea reprehenderit ad consequuntur veniam? Fuga impedit iste tenetur.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto quasi, incidunt eum ad, rerum dolorum sequi
numquam illum deleniti nobis doloremque asperiores natus perferendis, recusandae at dolorem et aperiam totam.
</p>
<h6>The quick brown fox jumps over the lazy dog</h6>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto quasi, incidunt eum ad, rerum dolorum sequi
numquam illum deleniti nobis doloremque asperiores natus perferendis, recusandae at dolorem et aperiam totam.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto quasi, incidunt eum ad, rerum dolorum sequi
numquam illum deleniti nobis doloremque asperiores natus perferendis, recusandae at dolorem et aperiam totam.
</p>
<h3>The quick brown fox jumps over the lazy dog</h3>
<ul>
<li>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste, aperiam doloribus. Dolore, eaque. Distinctio
consequatur alias quae commodi praesentium recusandae libero, voluptate veniam. Commodi, velit ad ex sequi ut
fugit?
</li>
<li>
Molestias autem suscipit quos debitis. Fugiat asperiores vero unde quo, assumenda culpa iusto aspernatur fuga
deleniti enim inventore! Ipsam, est. Impedit, illum! Animi eveniet perspiciatis nobis quia autem nam veniam.
</li>
<li>
Aperiam corporis, aspernatur commodi a, quod illo suscipit voluptas similique, possimus odit error natus ex!
Consequatur perferendis et similique, quo labore delectus autem minus enim aspernatur nesciunt saepe, nihil
laboriosam.
</li>
<li>
Sed, sunt. Ut, nihil? Odio quidem suscipit harum ea. Pariatur alias error incidunt provident tenetur neque
accusantium quis, explicabo et quisquam, dignissimos soluta, consectetur sapiente recusandae cum expedita maiores
deserunt.
</li>
<li>
Soluta mollitia neque nemo libero ut totam minus enim maxime qui inventore et veniam, alias minima officia
pariatur magni ipsa deserunt architecto asperiores ex dignissimos, culpa unde. Sint, cupiditate dolor?
</li>
</ul>
<ol>
<li>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Et alias adipisci ut, ipsum quis quisquam deleniti quia,
laudantium commodi placeat nostrum voluptatibus. Iusto labore voluptatibus dignissimos, sed eum maiores quaerat.
</li>
<li>
Cum quasi temporibus distinctio maiores, dignissimos ullam quisquam? Dolorem similique consequatur laudantium rem
perferendis. In sed ipsam nobis earum temporibus, veritatis totam libero atque sint quam, quo quisquam laborum
est?
</li>
<li>
Consequatur nemo dolorem nobis praesentium. Nisi laudantium pariatur sunt. Quo vitae quis fugit repellendus! Sunt
ratione velit laborum natus libero. Incidunt dolor suscipit debitis commodi possimus. Soluta repellat unde nihil!
</li>
<li>
Dolore labore, consectetur eaque suscipit molestiae incidunt quos dolorum? Aspernatur odio laudantium temporibus
at, dolore illum cum ullam animi in distinctio sint maxime libero itaque, consequuntur eveniet. Doloremque, ipsum
nesciunt?
</li>
<li>
Tenetur ratione dolores accusamus illum totam, quidem sequi odit pariatur quae id numquam assumenda rem. Odit,
numquam distinctio, eaque nihil adipisci aliquam similique, facilis mollitia saepe laudantium ea. Harum,
temporibus.
</li>
</ol>
<dl>
<dt>Lorem ipsum dolor sit amet consectetur adipisicing elit.</dt>
<dd>
Debitis quos exercitationem dolorem vitae doloremque delectus tempore tenetur quaerat maxime totam nihil
praesentium, quae saepe fuga hic, aliquid, optio repellendus reprehenderit.
</dd>
<dt>Lorem ipsum dolor sit amet consectetur adipisicing elit.</dt>
<dd>
Pariatur adipisci quas ducimus unde optio incidunt, dolor dolorum ex! Quos at error dolor veniam facere eaque
possimus ullam perferendis, neque velit?
</dd>
<dt>Lorem ipsum dolor sit, amet consectetur adipisicing elit.</dt>
<dd>
Velit aspernatur culpa dolore non. Enim cupiditate nihil dignissimos deserunt itaque a quis quibusdam, similique
sequi voluptatibus, inventore optio asperiores voluptatem sed?
</dd>
</dl>
<h3>The quick brown fox jumps over the lazy dog</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit eveniet hic
<em>officiis natus itaque dicta praesentium laborum</em>, optio <b>reprehenderit quas est nihil</b>, pariatur, porro
nostrum facere ea molestias debitis quia!
</p>
<blockquote>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex et illum provident nesciunt a illo sit, dicta labore
aspernatur neque quibusdam ducimus in earum fugiat corporis doloribus magni praesentium cumque?
</p>
<cite>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus natus tenetur quidem ab libero accusantium
dolore veniam eveniet recusandae voluptate est fugiat, ex explicabo possimus tempore eos praesentium quaerat quod?
</cite>
</blockquote>
<small>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt quis debitis dolor quasi, explicabo fuga alias illum
provident a architecto itaque, dicta nulla ratione, veniam quidem culpa at consequuntur commodi.
</small>
</div>

View reset examples


Typographic utilities #

There are two main typographic helpers within the CSS Framework; .n-typescale and .n-typeset. With these helpers, you can apply the values provided in our Design Tokens for font size, weight and spacing, without the need to create CSS of your own.

<!-- Typescale -->
<h1 class="n-typescale-xxxl">The quick brown fox</h1>
<h2 class="n-typescale-xxl">The quick brown fox</h2>
<h3 class="n-typescale-xl">The quick brown fox</h3>
<h4 class="n-typescale-l">The quick brown fox</h4>
<h5 class="n-typescale-m">The quick brown fox</h5>
<h6 class="n-typescale-s">The quick brown fox</h6>

View typescale examples


Additionally, applying .n-typeset to a containing element, will style all of its children text elements which can be useful for laying out typographic foundations.

<div class="n-typeset">
<h1>The quick brown fox jumps over the lazy dog</h1>
<h2>The quick brown fox jumps over the lazy dog</h2>
<h3>The quick brown fox jumps over the lazy dog</h3>
<h4>The quick brown fox jumps over the lazy dog</h4>
<h5>The quick brown fox jumps over the lazy dog</h5>
<h6>The quick brown fox jumps over the lazy dog</h6>
<p>
Lorem ipsum dolor sit amet <a href="#">consectetur adipisicing</a> elit. Deserunt amet ipsam enim sed sequi
voluptatibus, culpa explicabo voluptate maxime a, cumque ea reprehenderit ad <code>consequuntur veniam</code>? Fuga
impedit iste tenetur.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. <a href="#">Architecto quasi</a>, incidunt eum ad, rerum
dolorum sequi numquam illum deleniti nobis doloremque asperiores natus perferendis, recusandae at dolorem et aperiam
totam.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto quasi, incidunt eum ad, rerum dolorum sequi
numquam illum deleniti nobis doloremque asperiores natus perferendis, recusandae at dolorem et aperiam totam.
</p>
<h2>The quick brown fox <a href="#">jumps over the</a> lazy dog</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt amet ipsam enim sed sequi voluptatibus, culpa
explicabo voluptate maxime a, cumque ea reprehenderit ad consequuntur veniam? Fuga impedit iste tenetur.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto quasi, incidunt eum ad, rerum dolorum sequi
numquam illum deleniti nobis doloremque asperiores natus perferendis, recusandae at dolorem et aperiam totam.
</p>
<pre><code>&lt;link rel="stylesheet" href="https://nordcdn.net/ds/tokens/2.0.4/tokens.custom-properties.css" integrity="sha384-XtHi70a2WlH468I3Z4gPGu2ihcHfE7IzpM+bF0cn9nEXAG67YmXsSpBSEYULYC7E" crossorigin="anonymous" /&gt;</code></pre>
<h3>The quick brown fox jumps over the lazy dog</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt amet ipsam enim sed sequi voluptatibus, culpa
explicabo voluptate maxime a, cumque ea reprehenderit ad consequuntur veniam? Fuga impedit iste tenetur.
</p>
<h4>The quick brown fox jumps over the lazy dog</h4>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto quasi, incidunt eum ad, rerum dolorum sequi
numquam illum deleniti nobis doloremque asperiores natus perferendis, recusandae at dolorem et aperiam totam.
</p>
<h5>The quick brown fox jumps over the lazy dog</h5>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt amet ipsam enim sed sequi voluptatibus, culpa
explicabo voluptate maxime a, cumque ea reprehenderit ad consequuntur veniam? Fuga impedit iste tenetur.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto quasi, incidunt eum ad, rerum dolorum sequi
numquam illum deleniti nobis doloremque asperiores natus perferendis, recusandae at dolorem et aperiam totam.
</p>
<h6>The quick brown fox jumps over the lazy dog</h6>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto quasi, incidunt eum ad, rerum dolorum sequi
numquam illum deleniti nobis doloremque asperiores natus perferendis, recusandae at dolorem et aperiam totam.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto quasi, incidunt eum ad, rerum dolorum sequi
numquam illum deleniti nobis doloremque asperiores natus perferendis, recusandae at dolorem et aperiam totam.
</p>
<h3>The quick brown fox jumps over the lazy dog</h3>
<ul>
<li>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste, aperiam doloribus. Dolore, eaque. Distinctio
consequatur alias quae commodi praesentium recusandae libero, voluptate veniam. Commodi, velit ad ex sequi ut
fugit?
</li>
<li>
Molestias autem suscipit quos debitis. Fugiat asperiores vero unde quo, assumenda culpa iusto aspernatur fuga
deleniti enim inventore! Ipsam, est. Impedit, illum! Animi eveniet perspiciatis nobis quia autem nam veniam.
</li>
<li>
Aperiam corporis, aspernatur commodi a, quod illo suscipit voluptas similique, possimus odit error natus ex!
Consequatur perferendis et similique, quo labore delectus autem minus enim aspernatur nesciunt saepe, nihil
laboriosam.
</li>
<li>
Sed, sunt. Ut, nihil? Odio quidem suscipit harum ea. Pariatur alias error incidunt provident tenetur neque
accusantium quis, explicabo et quisquam, dignissimos soluta, consectetur sapiente recusandae cum expedita maiores
deserunt.
</li>
<li>
Soluta mollitia neque nemo libero ut totam minus enim maxime qui inventore et veniam, alias minima officia
pariatur magni ipsa deserunt architecto asperiores ex dignissimos, culpa unde. Sint, cupiditate dolor?
</li>
</ul>
<ol>
<li>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Et alias adipisci ut, ipsum quis quisquam deleniti quia,
laudantium commodi placeat nostrum voluptatibus. Iusto labore voluptatibus dignissimos, sed eum maiores quaerat.
</li>
<li>
Cum quasi temporibus distinctio maiores, dignissimos ullam quisquam? Dolorem similique consequatur laudantium rem
perferendis. In sed ipsam nobis earum temporibus, veritatis totam libero atque sint quam, quo quisquam laborum
est?
</li>
<li>
Consequatur nemo dolorem nobis praesentium. Nisi laudantium pariatur sunt. Quo vitae quis fugit repellendus! Sunt
ratione velit laborum natus libero. Incidunt dolor suscipit debitis commodi possimus. Soluta repellat unde nihil!
</li>
<li>
Dolore labore, consectetur eaque suscipit molestiae incidunt quos dolorum? Aspernatur odio laudantium temporibus
at, dolore illum cum ullam animi in distinctio sint maxime libero itaque, consequuntur eveniet. Doloremque, ipsum
nesciunt?
</li>
<li>
Tenetur ratione dolores accusamus illum totam, quidem sequi odit pariatur quae id numquam assumenda rem. Odit,
numquam distinctio, eaque nihil adipisci aliquam similique, facilis mollitia saepe laudantium ea. Harum,
temporibus.
</li>
</ol>
<dl>
<dt>Lorem ipsum dolor sit amet consectetur adipisicing elit.</dt>
<dd>
Debitis quos exercitationem dolorem vitae doloremque delectus tempore tenetur quaerat maxime totam nihil
praesentium, quae saepe fuga hic, aliquid, optio repellendus reprehenderit.
</dd>
<dt>Lorem ipsum dolor sit amet consectetur adipisicing elit.</dt>
<dd>
Pariatur adipisci quas ducimus unde optio incidunt, dolor dolorum ex! Quos at error dolor veniam facere eaque
possimus ullam perferendis, neque velit?
</dd>
<dt>Lorem ipsum dolor sit, amet consectetur adipisicing elit.</dt>
<dd>
Velit aspernatur culpa dolore non. Enim cupiditate nihil dignissimos deserunt itaque a quis quibusdam, similique
sequi voluptatibus, inventore optio asperiores voluptatem sed?
</dd>
</dl>
<h3>The quick brown fox jumps over the lazy dog</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit eveniet hic
<em>officiis natus itaque dicta praesentium laborum</em>, optio <b>reprehenderit quas est nihil</b>, pariatur, porro
nostrum facere ea molestias debitis quia!
</p>
<blockquote>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex et illum provident nesciunt a illo sit, dicta labore
aspernatur neque quibusdam ducimus in earum fugiat corporis doloribus magni praesentium cumque?
</p>
<cite>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus natus tenetur quidem ab libero accusantium
dolore veniam eveniet recusandae voluptate est fugiat, ex explicabo possimus tempore eos praesentium quaerat quod?
</cite>
</blockquote>
<small>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt quis debitis dolor quasi, explicabo fuga alias illum
provident a architecto itaque, dicta nulla ratione, veniam quidem culpa at consequuntur commodi.
</small>
</div>

View typeset example


Font size utilities #

Nord defines its sizing using t-shirt sizes. This makes it possible for anyone, technical or non-technical, to understand the differences and how they relate to each other. Font sizing follows this same convention to mirror our Font Size Design Tokens.

<span class="n-font-size-xxxl">The quick brown fox</span>
<span class="n-font-size-xxl">The quick brown fox</span>
<span class="n-font-size-xl">The quick brown fox</span>
<span class="n-font-size-l">The quick brown fox</span>
<span class="n-font-size-m">The quick brown fox</span>
<span class="n-font-size-s">The quick brown fox</span>
<span class="n-font-size-xs">The quick brown fox</span>

View font size examples


Font weight utilities #

Interfaces are majority text, which is why we’ve spent a great amount of time fine-tuning our typographic choices. Use the below utilities to set font weights consistently.

<span class="n-font-weight-active">The quick brown fox</span>
<span class="n-font-weight-heading">The quick brown fox</span>
<span class="n-font-weight-strong">The quick brown fox</span>

View font weight examples


Color utilities #

Nord CSS Framework provides not only access to the colors within our Design Tokens, but also a method of applying these tokens with a reduced risk of error, to ensure you’re using the colors as they are intended.

Accent color has been made available in all the most common scenarios; color, background-color and fill.

<!-- Text on accent background -->
<div class="n-color-accent n-color-text-on-accent">Element</div>

<!-- Accent color text -->
<span class="n-color-accent-text">The quick brown fox</span>

<!-- Accent color fill -->
<svg class="n-color-accent-fill" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="40" />
</svg>

<!-- Accent color stroke -->
<svg class="n-color-accent-stroke" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="40" fill="none" stroke-width="8" />
</svg>

View color examples


Text color utilities #

Colors intended for text have been wrapped up in a utility helper for direct application:

<!-- Text colors -->
<span class="n-color-text">The quick brown fox</span>
<span class="n-color-text-weak">The quick brown fox</span>
<span class="n-color-text-weaker">The quick brown fox</span>
<span class="n-color-text-weakest">The quick brown fox</span>
<span class="n-color-accent n-color-text-on-accent">The quick brown fox</span>
<span class="n-color-nav-heading">The quick brown fox</span>

<!-- Status colors -->
<span class="n-color-text-error">The quick brown fox</span>
<span class="n-color-text-success">The quick brown fox</span>

<!-- Link color -->
<a href="#" class="n-color-text-link">Element</a>

View text color examples


Background color utilities #

Colors intended for element backgrounds or surfaces have been scoped into the background-color property and can be applied using the following utility helpers:

<!-- Status colors -->
<span class="n-color-status-warning">.n-color-status-warning</span>
<span class="n-color-status-highlight">.n-color-status-highlight</span>
<span class="n-color-status-danger">.n-color-status-danger</span>
<span class="n-color-status-success">.n-color-status-success</span>
<span class="n-color-status-info">.n-color-status-info</span>

<!-- Status weak colors -->
<div class="n-color-status-danger-weak">.n-color-status-danger-weak</div>
<div class="n-color-status-warning-weak">.n-color-status-warning-weak</div>
<div class="n-color-status-success-weak">.n-color-status-success-weak</div>
<div class="n-color-status-info-weak">.n-color-status-info-weak</div>

<!-- Surface colors -->
<div class="n-color-surface">.n-color-surface</div>
<div class="n-color-surface-raised">.n-color-surface-raised</div>
<div class="n-color-nav-surface">.n-color-nav-surface</div>

<!-- Background color -->
<div class="n-color-background">.n-color-background</div>

<!-- Button colors -->
<div class="n-color-button">.n-color-button</div>
<div class="n-color-button-hover">.n-color-button-hover</div>

<!-- Active color -->
<div class="n-color-active">.n-color-active</div>

View surface and background examples


Border utilities #

Borders have been wrapped up into a series of utility helpers that make use of logical properties, so that your styles continue to work when your application changes languages.

These logical properties translate to different sides depending on the viewers language settings. We've abbreviated these properties into their initials to prevent overly verbose classnames. These abbreviations translate to the following properties in left-to-right languages:

<!-- Default border -->
<div class="n-border-is">.n-border-is</div>
<div class="n-border-ie">.n-border-ie</div>
<div class="n-border-bs">.n-border-bs</div>
<div class="n-border-be">.n-border-be</div>
<div class="n-border-b">.n-border-b</div>
<div class="n-border-i">.n-border-i</div>
<div class="n-border">.n-border</div>

<!-- Strong border -->
<div class="n-border-strong-is">.n-border-strong-is</div>
<div class="n-border-strong-ie">.n-border-strong-ie</div>
<div class="n-border-strong-bs">.n-border-strong-bs</div>
<div class="n-border-strong-be">.n-border-strong-be</div>
<div class="n-border-strong-b">.n-border-strong-b</div>
<div class="n-border-strong-i">.n-border-strong-i</div>
<div class="n-border-strong">.n-border-strong</div>

<!-- Hover border -->
<div class="n-border-hover-is">.n-border-hover-is</div>
<div class="n-border-hover-ie">.n-border-hover-ie</div>
<div class="n-border-hover-bs">.n-border-hover-bs</div>
<div class="n-border-hover-be">.n-border-hover-be</div>
<div class="n-border-hover-b">.n-border-hover-b</div>
<div class="n-border-hover-i">.n-border-hover-i</div>
<div class="n-border-hover">.n-border-hover</div>

<!-- Default dashed border -->
<div class="n-border-d-is">.n-border-d-is</div>
<div class="n-border-d-ie">.n-border-d-ie</div>
<div class="n-border-d-bs">.n-border-d-bs</div>
<div class="n-border-d-be">.n-border-d-be</div>
<div class="n-border-d-b">.n-border-d-b</div>
<div class="n-border-d-i">.n-border-d-i</div>
<div class="n-border-d">.n-border-d</div>

<!-- Strong dashed border -->
<div class="n-border-strong-d-is">.n-border-strong-d-is</div>
<div class="n-border-strong-d-ie">.n-border-strong-d-ie</div>
<div class="n-border-strong-d-bs">.n-border-strong-d-bs</div>
<div class="n-border-strong-d-be">.n-border-strong-d-be</div>
<div class="n-border-strong-d-b">.n-border-strong-d-b</div>
<div class="n-border-strong-d-i">.n-border-strong-d-i</div>
<div class="n-border-strong-d">.n-border-strong-d</div>

<!-- Hover dashed border -->
<div class="n-border-hover-d-is">.n-border-hover-d-is</div>
<div class="n-border-hover-d-ie">.n-border-hover-d-ie</div>
<div class="n-border-hover-d-bs">.n-border-hover-d-bs</div>
<div class="n-border-hover-d-be">.n-border-hover-d-be</div>
<div class="n-border-hover-d-b">.n-border-hover-d-b</div>
<div class="n-border-hover-d-i">.n-border-hover-d-i</div>
<div class="n-border-hover-d">.n-border-hover-d</div>

View border examples


Icon utilities #

The icon utilities include colors as well as sizes. Sizes have been scoped into inline-size and block-size properties, while colors have been scoped to the color property so that the currentColor attribute value can respectively inherit the color.

<!-- Icon color -->
<svg class="n-color-icon" viewBox="0 0 100 100">
<circle fill="currentColor" cx="50" cy="50" r="40" />
</svg>

<!-- Icon hover color -->
<svg class="n-color-icon-hover" viewBox="0 0 100 100">
<circle fill="currentColor" cx="50" cy="50" r="40" />
</svg>

<!-- Small icon -->
<svg class="n-size-icon-s" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="40" />
</svg>

<!-- Medium icon -->
<svg class="n-size-icon-m" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="40" />
</svg>

<!-- Large icon -->
<svg class="n-size-icon-l" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="40" />
</svg>

View icon examples


Stack utilities #

The Stack component manages layout of immediate children along the vertical or horizontal axis with optional spacing between each child. The stack utility helpers are designed to provide the same features but with a single class applied to the containing element.

The utility can also be used alongside a .n-gap-m to space children apart using our t-shirt sizing convention.

As with the border utilities, the shorthand utility modifiers use logical properties. However the Stack utilities are only interested in vertical alignment. They follow this convention:

<!-- Default vertical stack -->
<section class="n-stack">
<div>.n-stack</div>
<div>.n-stack</div>
</section>

<hr />

<!-- Vertical stack with S size gap -->
<section class="n-stack n-gap-s">
<div>.n-stack .n-gap-s</div>
<div>.n-stack .n-gap-s</div>
</section>

<hr />

<!-- Vertical stack with M size gap -->
<section class="n-stack n-gap-m">
<div>.n-stack .n-gap-m</div>
<div>.n-stack .n-gap-m</div>
</section>

<hr />

<!-- Vertical stack with L size gap -->
<section class="n-stack n-gap-l">
<div>.n-stack .n-gap-l</div>
<div>.n-stack .n-gap-l</div>
</section>

<hr />

<!-- Vertical stack with XL size gap -->
<section class="n-stack n-gap-xl">
<div>.n-stack .n-gap-xl</div>
<div>.n-stack .n-gap-xl</div>
</section>

<hr />

<!-- Vertical stack with XXL size gap -->
<section class="n-stack n-gap-xxl">
<div>.n-stack .n-gap-xxl</div>
<div>.n-stack .n-gap-xxl</div>
</section>

<hr />

<!-- Horizontal stack with vertical centering -->
<section class="n-stack-horizontal">
<div>.n-stack-horizontal</div>
<div>.n-stack-horizontal<br />.n-stack-horizontal</div>
</section>

<hr />

<!-- Horizontal stack that is vertically aligned to start -->
<section class="n-stack-horizontal-s">
<div>.n-stack-horizontal-s</div>
<div>.n-stack-horizontal-s<br />.n-stack-horizontal-s</div>
</section>

<hr />

<!-- Horizontal stack that is vertically aligned to end -->
<section class="n-stack-horizontal-e">
<div>.n-stack-horizontal-e</div>
<div>.n-stack-horizontal-e<br />.n-stack-horizontal-e</div>
</section>

<hr />

<!-- Horizontal stack with S size gap -->
<section class="n-stack-horizontal n-gap-s">
<div>.n-stack-horizontal .n-gap-s</div>
<div>.n-stack-horizontal .n-gap-s</div>
</section>

<hr />

<!-- Horizontal stack with M size gap -->
<section class="n-stack-horizontal n-gap-m">
<div>.n-stack-horizontal .n-gap-m</div>
<div>.n-stack-horizontal .n-gap-m</div>
</section>

<hr />

<!-- Horizontal stack with L size gap -->
<section class="n-stack-horizontal n-gap-l">
<div>.n-stack-horizontal .n-gap-l</div>
<div>.n-stack-horizontal .n-gap-l</div>
</section>

<hr />

<!-- Horizontal stack with XL size gap -->
<section class="n-stack-horizontal n-gap-xl">
<div>.n-stack-horizontal .n-gap-xl</div>
<div>.n-stack-horizontal .n-gap-xl</div>
</section>

<hr />

<!-- Horizontal stack with XXL size gap -->
<section class="n-stack-horizontal n-gap-xxl">
<div>.n-stack-horizontal .n-gap-xxl</div>
<div>.n-stack-horizontal .n-gap-xxl</div>
</section>

View stack examples


Grid and container utilities #

Grid and container helper classes are for creating layouts that follow our recommended grid layouts as shown in our Toolkit. The grid utilities can be used alongside the .n-gap-m and .n-container-l utilities to space apart grid items and constrain containers to a desired width respectively.

<section class="n-grid n-gap-m">
<div>.n-grid</div>
<div>.n-grid</div>
<div>.n-grid</div>
<div>.n-grid</div>
<div>.n-grid</div>
<div>.n-grid</div>
<div>.n-grid</div>
<div>.n-grid</div>
<div>.n-grid</div>
<div>.n-grid</div>
<div>.n-grid</div>
<div>.n-grid</div>
</section>

<section class="n-grid-8 n-gap-m">
<div>.n-grid-8</div>
<div>.n-grid-8</div>
<div>.n-grid-8</div>
<div>.n-grid-8</div>
<div>.n-grid-8</div>
<div>.n-grid-8</div>
<div>.n-grid-8</div>
<div>.n-grid-8</div>
</section>

<section class="n-grid-6 n-gap-m">
<div>.n-grid-6</div>
<div>.n-grid-6</div>
<div>.n-grid-6</div>
<div>.n-grid-6</div>
<div>.n-grid-6</div>
<div>.n-grid-6</div>
</section>

<section class="n-grid-4 n-gap-m">
<div>.n-grid-4</div>
<div>.n-grid-4</div>
<div>.n-grid-4</div>
<div>.n-grid-4</div>
</section>

<section class="n-grid-3 n-gap-m">
<div>.n-grid-3</div>
<div>.n-grid-3</div>
<div>.n-grid-3</div>
</section>

<section class="n-grid-2 n-gap-m">
<div>.n-grid-2</div>
<div>.n-grid-2</div>
</section>

<section class="n-grid-3 n-gap-m n-container-xl">
<div>.n-grid-3 .n-container-xl</div>
<div>.n-grid-3 .n-container-xl</div>
<div>.n-grid-3 .n-container-xl</div>
</section>

<section class="n-grid-3 n-gap-m n-container">
<div>.n-grid-3 .n-container</div>
<div>.n-grid-3 .n-container</div>
<div>.n-grid-3 .n-container</div>
</section>

<section class="n-grid-3 n-gap-m n-container-m">
<div>.n-grid-3 .n-container-m</div>
<div>.n-grid-3 .n-container-m</div>
<div>.n-grid-3 .n-container-m</div>
</section>

<section class="n-grid-3 n-gap-m n-container-s">
<div>.n-grid-3 .n-container-s</div>
<div>.n-grid-3 .n-container-s</div>
<div>.n-grid-3 .n-container-s</div>
</section>

<section class="n-grid-3 n-gap-m n-container-xs">
<div>.n-grid-3 .n-container-xs</div>
<div>.n-grid-3 .n-container-xs</div>
<div>.n-grid-3 .n-container-xs</div>
</section>

<section class="n-grid-3 n-gap-m n-container-xxs">
<div>.n-grid-3 .n-container-xxs</div>
<div>.n-grid-3 .n-container-xxs</div>
<div>.n-grid-3 .n-container-xxs</div>
</section>

<section class="n-grid-3 n-gap-m" style="block-size: calc(var(--n-size-icon-xxl) * 3)">
<div class="n-grid-center-i">.n-grid-center-i</div>
<div class="n-grid-center-b">.n-grid-center-b</div>
<div class="n-grid-center">.n-grid-center</div>
</section>

When using any of the n-grid utility helpers it’s also possible to fine tune the grid column count to your needs using the --n-grid-columns CSS custom property, however we highly recommend using the existing helpers provided.

View grid examples


Spacing utilities #

Our spacing tokens are accessible via the CSS Framework as margin and padding. These are all applied using logical properties, so that your styles continue to work when your application changes languages. These also follow the t-shirt sizing convention.

Diagram depicting how classnames are broken down

As with the border utilities, the shorthand utility modifiers use logical properties. They follow this convention:

Diagram depicting how logical properties correspond to sides of an element

Margin #

In addition to the spacing tokens the margin helpers come with "auto" margins. These can be useful for pushing an element to the start or end of a stack or grid as well as centering en element horizontally as well as vertically.

<!-- Margin inline start (left) -->
<div class="n-margin-is-s">.n-margin-is-s</div>
<div class="n-margin-is-m">.n-margin-is-m</div>
<div class="n-margin-is-l">.n-margin-is-l</div>
<div class="n-margin-is-xl">.n-margin-is-xl</div>
<div class="n-margin-is-xxl">.n-margin-is-xxl</div>

<hr />

<!-- Margin inline end (right) -->
<div class="n-margin-ie-s">.n-margin-ie-s</div>
<div class="n-margin-ie-m">.n-margin-ie-m</div>
<div class="n-margin-ie-l">.n-margin-ie-l</div>
<div class="n-margin-ie-xl">.n-margin-ie-xl</div>
<div class="n-margin-ie-xxl">.n-margin-ie-xxl</div>

<hr />

<!-- Margin block start (top) -->
<div class="n-margin-bs-s">.n-margin-bs-s</div>
<div class="n-margin-bs-m">.n-margin-bs-m</div>
<div class="n-margin-bs-l">.n-margin-bs-l</div>
<div class="n-margin-bs-xl">.n-margin-bs-xl</div>
<div class="n-margin-bs-xxl">.n-margin-bs-xxl</div>

<hr />

<!-- Margin block end (bottom) -->
<div class="n-margin-be-s">.n-margin-be-s</div>
<div class="n-margin-be-m">.n-margin-be-m</div>
<div class="n-margin-be-l">.n-margin-be-l</div>
<div class="n-margin-be-xl">.n-margin-be-xl</div>
<div class="n-margin-be-xxl">.n-margin-be-xxl</div>

<hr />

<!-- Margin inline (left and right) -->
<div class="n-margin-i-s">.n-margin-i-s</div>
<div class="n-margin-i-m">.n-margin-i-m</div>
<div class="n-margin-i-l">.n-margin-i-l</div>
<div class="n-margin-i-xl">.n-margin-i-xl</div>
<div class="n-margin-i-xxl">.n-margin-i-xxl</div>

<hr />

<!-- Margin block (top and bottom) -->
<div class="n-margin-b-s">.n-margin-b-s</div>
<div class="n-margin-b-m">.n-margin-b-m</div>
<div class="n-margin-b-l">.n-margin-b-l</div>
<div class="n-margin-b-xl">.n-margin-b-xl</div>
<div class="n-margin-b-xxl">.n-margin-b-xxl</div>

<hr />

<!-- Margin all sides -->
<div class="n-margin-s">.n-margin-s</div>
<div class="n-margin-m">.n-margin-m</div>
<div class="n-margin-l">.n-margin-l</div>
<div class="n-margin-xl">.n-margin-xl</div>
<div class="n-margin-xxl">.n-margin-xxl</div>

<hr />

<!-- Margin auto -->
<div class="n-margin-i-auto">.n-margin-i-auto</div>
<div class="n-margin-is-auto">.n-margin-is-auto</div>
<div class="n-margin-ie-auto">.n-margin-ie-auto</div>

<section style="display: flex; flex-direction: column; block-size: calc(var(--n-size-icon-xxl) * 3)">
<div class="n-margin-b-auto">.n-margin-b-auto</div>
<div class="n-margin-bs-auto">.n-margin-bs-auto</div>
<div class="n-margin-be-auto">.n-margin-be-auto</div>
</section>

<section style="display: flex; flex-direction: column; block-size: calc(var(--n-size-icon-xxl) * 3)">
<div class="n-margin-auto">.n-margin-auto</div>
</section>

View margin examples


Padding #

<!-- Padding inline start (left) -->
<div class="n-padding-is-s">.n-padding-is-s</div>
<div class="n-padding-is-m">.n-padding-is-m</div>
<div class="n-padding-is-l">.n-padding-is-l</div>
<div class="n-padding-is-xl">.n-padding-is-xl</div>
<div class="n-padding-is-xxl">.n-padding-is-xxl</div>

<hr />

<!-- Padding inline end (right) -->
<div class="n-padding-ie-s">.n-padding-ie-s</div>
<div class="n-padding-ie-m">.n-padding-ie-m</div>
<div class="n-padding-ie-l">.n-padding-ie-l</div>
<div class="n-padding-ie-xl">.n-padding-ie-xl</div>
<div class="n-padding-ie-xxl">.n-padding-ie-xxl</div>

<hr />

<!-- Padding block start (top) -->
<div class="n-padding-bs-s">.n-padding-bs-s</div>
<div class="n-padding-bs-m">.n-padding-bs-m</div>
<div class="n-padding-bs-l">.n-padding-bs-l</div>
<div class="n-padding-bs-xl">.n-padding-bs-xl</div>
<div class="n-padding-bs-xxl">.n-padding-bs-xxl</div>

<hr />

<!-- Padding block end (bottom) -->
<div class="n-padding-be-s">.n-padding-be-s</div>
<div class="n-padding-be-m">.n-padding-be-m</div>
<div class="n-padding-be-l">.n-padding-be-l</div>
<div class="n-padding-be-xl">.n-padding-be-xl</div>
<div class="n-padding-be-xxl">.n-padding-be-xxl</div>

<hr />

<!-- Padding inline (left and right) -->
<div class="n-padding-i-s">.n-padding-i-s</div>
<div class="n-padding-i-m">.n-padding-i-m</div>
<div class="n-padding-i-l">.n-padding-i-l</div>
<div class="n-padding-i-xl">.n-padding-i-xl</div>
<div class="n-padding-i-xxl">.n-padding-i-xxl</div>

<hr />

<!-- Padding block (top and bottom) -->
<div class="n-padding-b-s">.n-padding-b-s</div>
<div class="n-padding-b-m">.n-padding-b-m</div>
<div class="n-padding-b-l">.n-padding-b-l</div>
<div class="n-padding-b-xl">.n-padding-b-xl</div>
<div class="n-padding-b-xxl">.n-padding-b-xxl</div>

<hr />

<!-- Padding all sides -->
<div class="n-padding-s">.n-padding-s</div>
<div class="n-padding-m">.n-padding-m</div>
<div class="n-padding-l">.n-padding-l</div>
<div class="n-padding-xl">.n-padding-xl</div>
<div class="n-padding-xxl">.n-padding-xxl</div>

View padding examples


Miscellaneous utilities #

These final utility helpers are due to be expanded upon but at present provide options for truncating lines of text, adding dividers and creating form fields. Multiline truncation is achieved using webkit line clamp, please check browser compatibility before using.

<!-- Clinic switcher icon helpers -->
<div class="n-stack n-stack-horizontal n-gap-s">
<span class="n-clinic-icon">N</span>
<span class="n-clinic-icon" style="--n-icon-color: var(--n-color-status-success)">O</span>
<span class="n-clinic-icon" style="--n-icon-color: var(--n-color-status-info)">R</span>
<span class="n-clinic-icon" style="--n-icon-color: var(--n-color-status-danger)">D</span>
</div>

<!-- Divider -->
<hr class="n-divider" />

<!-- Form helpers -->
<div class="n-stack n-gap-s">
<label class="n-label" for="input">Label</label>
<div id="hint" class="n-hint">Hint is a way to provide additional information</div>
<input id="input" class="n-input" aria-describedby="hint" placeholder="Placeholder text" />
</div>

<!-- Divider -->
<hr class="n-divider" />

<!-- Form error helpers -->
<div class="n-stack n-gap-s">
<label class="n-label" for="input2">Label</label>
<input id="input2" class="n-input" aria-invalid="true" aria-describedby="error" value="Value" />
<div class="n-error" id="error" role="alert">This field is required</div>
</div>

<!-- Divider -->
<hr class="n-divider" />

<!-- Signle line truncation -->
<span class="n-truncate" style="max-width: 200px">
The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps
over the lazy dog.
</span>

<!-- Two line truncation -->
<span class="n-truncate-2" style="max-width: 200px">
The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps
over the lazy dog.
</span>

<!-- Three line truncation -->
<span class="n-truncate-3" style="max-width: 200px">
The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps
over the lazy dog.
</span>

View misc examples


CSS custom properties #

While we do recommend using components and utility helpers where you can, it’s possible to use our design tokens directly in your code to give you finer grain control over your presentation. Our design tokens can be accessed using CSS custom properties (also known as CSS variables). These are the exact same custom properties shown on our design tokens page.

An example use case could be that you wish to use our spacing tokens to add margin around an element:

.custom-cta {
margin: var(--n-space-xxl);
}

Another use case could be that you want to apply a color token to a highlighted piece of text:

mark {
background: var(--n-color-status-highlight);
}

Using our design tokens via CSS custom properties means that not only will these values be kept up to date but they will also change automatically when used in conjunction with our themes.

View all design tokens


Getting support #

Need help with our CSS Framework? Please head over to the Support page for more information and ways to contact us.


Was this page helpful?

YesNo
Send feedback

We use this feedback to improve our documentation.

 
Edit page