# Getting Started

\*Welcome to the Nord Design System developer docs. If you're building something in code for Nordhealth products, you're in the right place.\*

Nord Design System is a collection of reusable components and tools, guided by clear standards, that can be assembled together to build digital products and experiences for [Nordhealth](https://nordhealth.com){rel=""nofollow""}.

The goal of Nord Design System is to improve UI consistency and quality, while making our software design and development processes more efficient. The system also helps to establish a common vocabulary between everyone in our organization and ease collaboration between different teams and disciplines.

\> \[!NOTE]
\> Designing rather than building? Start with the \[design documentation]\(/design/) for principles, foundations, tokens, and the Figma toolkit.

---

## How Nord fits together

Nord is framework-agnostic: the components are standard custom elements, so they can be used from plain HTML or from frameworks like Vue, React, and Angular.

The system is made from a few layers that can be adopted together or separately:

- **Components** provide the interactive UI building blocks.
- **CSS and Tailwind utilities** apply Nord tokens in application layouts and custom UI.
- **Themes** set the active Nordhealth brand, color mode, and high-contrast variant.
- **Supporting packages** provide icons, fonts, tokens, and specialist integrations when needed.

Most teams do not need to think about the internal component rendering model to get started. Where it affects styling or integration, the relevant component and setup pages call it out directly.

::div
---
::

## Start with the essentials

Most implementations only need the component package, the CSS and Tailwind utilities, and the active Nordhealth theme. Install only the parts your app uses; each page below includes its own setup instructions.

\*\*\[Install Web Components]\(/docs/developer/web-components/)\*\* - Set up Nord components in plain HTML, Vue, React, or another framework.

\*\*\[Browse Components]\(/components/)\*\* - Find component APIs, examples, and usage guidance.

\*\*\[Tailwind CSS]\(/core/css/tailwind/)\*\* - Use Nord tokens through Tailwind CSS utility classes.

\*\*\[Themes]\(/design/themes/)\*\* - Apply the correct Nordhealth brand and color mode.

For supporting packages, see [Nordicons](https://nordhealth.design/icons/), [Design Tokens](https://nordhealth.design/core/tokens/), [Webfonts](https://nordhealth.design/docs/developer/webfonts/), and the [AG Grid Theme](https://nordhealth.design/components/table/#recommendation-for-component-based-libraries).

::div
---
::

## What's new

This section is updated regularly with new content to help you stay up to date with the latest [releases](https://nordhealth.design/changelogs) and [updates](https://nordhealth.design/updates/) from the Nord team. We also have [an RSS feed](https://nordhealth.design/feed.xml) you can subscribe to.

\*\*\[Changelog]\(/changelogs)\*\* - nordhealth.design/changelogs

\*\*\[Latest Updates]\(/updates/)\*\* - nordhealth.design/updates/

\*\*\[Migration Guides]\(/migrations/)\*\* - nordhealth.design/migrations/

::div
---
::

## Browser support

Nord Design System is tested in the latest two versions of the following browsers. Our team addresses critical [bug fixes](https://nordhealth.design/resources/support/) 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.

\*\*Supported browsers:\*\* Chrome, Safari, Edge, Firefox, Opera

::div
---
::

## Can I use Nord in my own project?

Nord Design System is solely meant for building digital products and experiences for [Nordhealth](https://nordhealth.com){rel=""nofollow""}. Please see the [terms of use](https://nordhealth.design/resources/terms/) for full license details.

::div
---
::

## Getting support

If you experience any issues while getting started with any of Nord's tools, please head over to the [Support page](https://nordhealth.design/resources/support/) for more guidelines and help.


# Components

\- \[nord-accordion]\(/raw/components/accordion.md): Accordion is a set of collapsible sections, each with a header that toggles
the visibility of its content. It coordinates a group of
Accordion Item elements, keyboard focus
movement between them, and which items are open.
\- \[nord-aside]\(/raw/components/aside.md): Container for the right-side rail + drawer pattern in the app shell.
\- \[nord-autocomplete]\(/raw/components/autocomplete.md): Autocomplete is a free-text input with suggestions: the text the user types
is itself the committed value (a string), and the options are completion
aids. Picking a suggestion fills the input with the option's label and commits
that label. Use it when the answer is open-ended text but you can offer
helpful completions (a city, a tag, a username); reach for
Combobox instead when the value must be one of a
fixed set of options.
Autocomplete is a control only — it has no built-in label, hint or error.
Compose it inside a Field to give it a label, hint and
error message, the same way you would a native input.
Base UI parity: Autocomplete is the Combobox primitive with
selectionMode="none" + fillInputOnItemPress.
\- \[nord-avatar]\(/raw/components/avatar.md): Avatar is used for showing a thumbnail representation of a single user or entity.
Default avatar illustration is displayed when no src is specified.
\- \[nord-badge]\(/raw/components/badge.md): Badges are used to inform users of the status of an object
or of an action that’s been taken. Commonly used in tabular
data to indicate status.
\- \[nord-banner]\(/raw/components/banner.md): Banner informs users about important changes or conditions in the
interface. Use this component if you need to communicate to users
in a prominent way.
\- \[nord-button]\(/raw/components/button.md): Buttons are used for interface actions. Primary style should be
used only once per section for main call-to-action, while other
styles can appear more frequently.
\- \[nord-button-group]\(/raw/components/button-group.md): Button groups are designed to bring together button controls that are of a similar nature. For example text formatting controls.
\- \[nord-calendar]\(/raw/components/calendar.md): Calendar allows user to pick a date. It comes with built-in
functionality that allows you to set a minimum and a maximum allowed date.
Please note that the date must be passed in ISO-8601 format.
\- \[nord-card]\(/raw/components/card.md): Cards are shadowed surfaces that display content and actions on a
single topic. They should be easy to scan for relevant and
actionable information.
\- \[nord-checkbox]\(/raw/components/checkbox.md): Checkboxes allow user to choose one or more options from a limited set of options.
If you have more than 10 options, please use Select component instead.
\- \[nord-collapsible]\(/raw/components/collapsible.md): Collapsible is a disclosure that shows or hides a section of content. It wires
together a Collapsible Trigger and a
Collapsible Panel, animating the panel
height as it opens and closes.
\- \[nord-combobox]\(/raw/components/combobox.md): Combobox lets users choose one option (or several) from a list by typing to
filter, then picking with the keyboard or pointer. Use it when a Select
would be unwieldy because there are many options to scan.
Combobox is a control only — it has no built-in label, hint or error. Compose
it inside a Field to give it a label, hint and error
message, the same way you would a native input.
The committed value is an option's value (or an array of them with
multiple); the input is a filter/search field whose text is discarded on
commit. For a free-text input with suggestions where the typed text is the
value, use Autocomplete instead.
\- \[nord-command-menu]\(/raw/components/command-menu.md): Command Menu allows users to navigate and use an app without
touching the mouse and helps them transform into “power users”
who can harness more advanced features far faster.
\- \[nord-date-picker]\(/raw/components/date-picker.md):
Date Picker allows user to enter a date either through text input,
or by choosing a date from the calendar. Please note that the date
must be passed in ISO-8601 format: YYYY-MM-DD.
\- \[nord-date-range-picker]\(/raw/components/date-range-picker.md): Date Range Picker lets people choose a start and end date as a single range,
either from a built-in list of presets (Today, Last 7 days, This month, …) or
from a range calendar. It is a control only — compose it inside a
Field for a label, hint or error, like a native input.
The committed value is an ISO-8601 interval string YYYY-MM-DD/YYYY-MM-DD;
the convenience start-date / end-date props and the valueAsDateRange
getter/setter stay in sync with it. Selecting in the popout builds a \*pending\*
range; \*\*Apply\*\* commits it (firing change), \*\*Cancel\*\* reverts to the last
committed value, and \*\*Clear\*\* empties it.
\- \[nord-divider]\(/raw/components/divider.md): Divider components are used to separate and distinguish sections of
content or groups of menu items. Visually, they look like
horizontal or vertical lines.
\- \[nord-drawer]\(/raw/components/drawer.md): Drawer is used to display context-sensitive actions and information.
Drawer doesn’t block users from completing their task, like a modal would.
\- \[nord-dropdown]\(/raw/components/dropdown.md): Dropdown menu displays a list of actions or selectable options for
a user. Dropdown uses popout component internally to create
the overlay functionality.
\- \[nord-empty-state]\(/raw/components/empty-state.md): Empty state can be used when there is no data to display to
describe what the user can do next. Empty state provides
explanation and guidance to help user progress.
\- \[nord-field]\(/raw/components/field.md): Field is the wrapper for a single form control. It lays out a
Field Label, a control (such as an
Input), an optional
Field Description and a
Field Error with consistent spacing.
Combine several together in a Field Group and
group related groups with a Field Set.
The Field shares its state with the control through context: a Nord control
placed inside a Field suppresses its own built-in label/hint/error and takes
its accessible name, description and invalid/disabled state from the Field.
\- \[nord-fieldset]\(/raw/components/fieldset.md): Deprecated: for new code, group related controls with the composable Field
family — see grouping fields with Field.
nord-fieldset remains supported for backwards compatibility and is not
scheduled for removal.
Fieldset is used for grouping sets of input components. It is necessary to use a
fieldset with radio and checkbox components, and can also be useful for logically
grouping other types of inputs.
\- \[nord-filter-bar]\(/raw/components/filter-bar.md): Filter Bar is a layout wrapper for a row of filter controls. It lays its
children out in a wrapping flex row with a consistent gap, so you can drop in
Filter Field, Filter Input,
Filter Add Button and
Filter Reset Button (or any controls) and
have them align without extra styling.
Like Pagination, it is composition-first: it owns no
filter state and emits no events. Your app owns the active filters and any URL
or query-string syncing; the filter primitives only emit intent.
\- \[nord-footer]\(/raw/components/footer.md): The footer is a block of designated space for providing additional information or actions that are positioned below the main content.
\- \[nord-header]\(/raw/components/header.md): The header is a block of designated space for labelling the currently
viewed context as well as providing primary actions.
\- \[nord-icon]\(/raw/components/icon.md): Icons are used to provide additional meaning or in places where text label doesn’t fit.
Icon component allows you to display an icon from the Nordicons library.
\- \[nord-input]\(/raw/components/input.md): Inputs are used to allow users to provide text input when the expected input is short.
As well as plain text, Input supports various types of text, including passwords and numbers.
\- \[nord-item]\(/raw/components/item.md): Item is a flexible, composable row used to display a piece of content such as
a person, a file or a setting. Combine it with Item Media,
Item Content, Item Title,
Item Description and Item Actions
to build rich list rows. Stack several together with Item Group.
To make a whole Item act as a link, wrap it in an \<a> element. The row
highlights on hover when wrapped this way.
\- \[nord-kbd]\(/raw/components/kbd.md): Kbd is used to display a keyboard key, such as a shortcut or a key the user
should press. Group related keys together with Kbd Group.
\- \[nord-layout]\(/raw/components/layout.md): Layout component is used to create the main layout of an app. Layout
currently comes with one main configuration: two-column.
\- \[nord-message]\(/raw/components/message.md): Message represents a specific item within a collection,
such as notifications, tasks or conversations. Message
can be placed directly inside a dropdown component.
\- \[nord-meter]\(/raw/components/meter.md): Meter is a graphical display of a numeric value within a known range,
such as disk usage, a battery level or a score. Unlike Progress Bar, it
represents a static measurement rather than the completion of a task.
\- \[nord-modal]\(/raw/components/modal.md): Modal component is used to display content that temporarily blocks interactions
with the main view of an application. Modal should be used sparingly and
only when necessary.
\- \[nord-navigation]\(/raw/components/navigation.md): Navigation is used to display the primary navigation in the sidebar
of an application. Navigation includes a list of links that users
use to move between sections of the application.
\- \[nord-notification]\(/raw/components/notification.md): Notifications provide important information that requires action or acknowledgement.
A notification is displayed until the user dismisses it.
\- \[nord-number-field]\(/raw/components/number-field.md): Number Field is a control for entering a numeric value, with decrement and
increment stepper buttons, optional drag-to-scrub, and locale-aware
formatting. It ports the behaviour of Base UI's Number Field: arrow/Page
stepping, Home/End to the bounds, press-and-hold auto-repeat, optional
wheel/scrub, clamping, and Intl.NumberFormat formatting.
Number Field is a control only — it has no built-in label, hint or error.
Compose it inside a Field with a
Field Label to give it a label, hint and error,
the same way you would a native input.
FORM PARTICIPATION: the value is submitted as the raw numeric string under the
host name via FormDataController (the inner input has no name, avoiding a
double submit). Unlike Base UI there is no hidden native number input, and —
like the other new Nord controls — Number Field does NOT use
ElementInternals, so it performs no native constraint validation: required,
min, max and step are NOT enforced as form-blocking validity. min/max
govern interactive stepping and (unless allow-out-of-range is set) clamp the
value; required only surfaces as required/aria-required on the inner input
for assistive technology. Authors must validate constraints themselves and
reflect failures via invalid and a nord-field-error.
ACCESSIBILITY NOTE: the inner control is a text input (with inputmode) and
aria-roledescription="Number field", NOT role="spinbutton" and NOT a
native type="number". A text input lets us show locale-formatted text
(currency, percent, grouping) while keeping full text editing — assistive tech
reads the formatted value from the input's text. We do NOT add
aria-valuenow/valuemin/valuemax/valuetext: those are only valid on a
range role (e.g. spinbutton/slider) and would fail aria-allowed-attr
validation on a text input. This mirrors what Base UI's NumberFieldInput
actually ships (only aria-roledescription).
\- \[nord-otp-field]\(/raw/components/otp-field.md): OTP Field is a segmented one-time-code input: it renders length individual
character cells plus a visually-hidden input that holds the full value, enabling
SMS / keychain autofill and native pattern/required validation. Typing fills
and auto-advances, Backspace clears and moves back, the arrow keys navigate, and
pasting a code distributes its characters across the cells.
OTP Field is a control only — it has no built-in label, hint or error. Compose
it inside a Field with a Field Label
(connected with for) to give it an accessible name, helper text and an error
message, exactly like a native input.
\- \[nord-outline]\(/raw/components/outline.md): Outline is an in-page table of contents that lists a page's headings and
highlights the section currently in view as you scroll.
Provide Outline Item children, or point for at
a container to build the list from its headings.
\- \[nord-pagination]\(/raw/components/pagination.md): Pagination is the navigation root for a paginated collection. It is
composition-first: it owns no page state, renders no controls, and emits no
events. Your app owns the page state, URL/query syncing, cursors and any data
fetching; Nord supplies the semantic/layout primitives, the styling and the
paginate() math utility for building the page window.
As a root it is a navigation landmark — it sets role="navigation" and a
default accessible label so screen-reader users can jump to it. Compose the
lower-level primitives inside it:
\- Pagination Content — the list row.
\- Pagination Item — a slot in the row.
\- Pagination Link — a page link (set current).
\- Pagination Previous — the previous control.
\- Pagination Next — the next control.
\- Pagination Ellipsis — the collapsed-pages marker.
Bring your own interactive element — an \<a> (e.g. a framework \<Link> /
\<NuxtLink>) or a nord-button — and own its href, navigation and
disabled state. See the framework adapters in the docs.
\- \[nord-popout]\(/raw/components/popout.md): Popouts are small overlays that open on demand. They let users access additional content and actions without cluttering the page.
\- \[nord-progress]\(/raw/components/progress.md): Progress component is used to display a circular pie-chart style progress indicator.
You can customize the size and color of the progress indicator with the
provided properties.
\- \[nord-progress-bar]\(/raw/components/progress-bar.md): Progress Bar is used to visually represent the completion
of a task or process. It shows how much of the task has
been completed and how much is still left.
\- \[nord-qrcode]\(/raw/components/qrcode.md): QR Code component is used for providing information or links
to users which they can quickly scan with their smartphone.
\- \[nord-radio]\(/raw/components/radio.md): Radio buttons are graphical user interface elements that allow user to choose only one option from
a predefined set of mutually exclusive options.
\- \[nord-range]\(/raw/components/range.md): Range input lets user specify a numeric value using a slider which
must be no less than a given value, and no more than another given value.
\- \[nord-scroll-area]\(/raw/components/scroll-area.md): Scroll Area is a container that wraps overflowing content in a custom scroll
viewport with consistently-styled scrollbars. Native scrollbars are hidden and
replaced with a thin overlay thumb that appears on hover or while scrolling.
It also exposes the distance from each edge as CSS custom properties
(--scroll-area-overflow-\*), which can drive an edge-fade mask on
\::part(viewport) — see the docs example.
The scroll machinery lives in shadow DOM; slot your content directly inside.
\- \[nord-segmented-control]\(/raw/components/segmented-control.md): Segmented control is used to pick one choice from a set of
closely related choices, and immediately apply that selection.
\- \[nord-select]\(/raw/components/select.md): Select lets users choose one option from an options menu.
Consider using select when you have 5 or more options to choose from.
\- \[nord-skeleton]\(/raw/components/skeleton.md): Skeletons are used to provide a low fidelity representation of content
before it appears in a view. This improves the perceived loading time
for our users.
\- \[nord-spinner]\(/raw/components/spinner.md): Spinner component is used to indicate users that their action is being
processed. You can customize the size and color of the spinner with the
provided properties.
\- \[nord-stack]\(/raw/components/stack.md): Stack component manages layout of immediate children along the
vertical or horizontal axis with optional spacing between each child.
\- \[nord-tab]\(/raw/components/tab.md): The interactive tab button for use within the tab group component.
\- \[nord-table]\(/raw/components/table.md): Table is used to organize and display information from a data set.
Provides table styles in addition to features like sticky
headers and support for narrow viewports.
\- \[nord-tag]\(/raw/components/tag.md): Tags represent a set of keywords that help label, categorize,
and organize objects. Commonly used to signify the attributes of an object.
\- \[nord-textarea]\(/raw/components/textarea.md): Textarea is a component that allows user to write text over
multiple rows. Used when the expected user input is long.
For shorter input, use the Input component.
\- \[nord-time-picker]\(/raw/components/time-picker.md): Time Picker pairs the browser's native time field with a dropdown of quick
options, generated at a configurable interval between start and end.
The native field handles typing, locale-aware display and validation; the
dropdown is a shortcut for common times.
The value is held in ISO HH\:mm format.
Like a native input, Time Picker is a control only — it has no built-in
label, hint or error. Compose it inside a Field (with a
Field Label, Field Description
and Field Error) to label it and add help or error text.
\- \[nord-toast]\(/raw/components/toast.md): Toasts are non-disruptive messages that appear in the interface
to provide quick, at-a-glance feedback on the outcome of an action.
\- \[nord-toggle]\(/raw/components/toggle.md): Toggle switch gives control over a feature or option that can be
turned on or off. If a physical switch would work for the action, a
toggle is probably the best component to use.
\- \[nord-tooltip]\(/raw/components/tooltip.md): Tooltips are floating containers for displaying additional information
for the currently focused element. A tooltip can be useful when you want
to e.g. give a hint about an existing Command Menu shortcut.
\- \[nord-top-bar]\(/raw/components/top-bar.md): Top bar is a header component that is always visible at the top of the interface. Top bar allows functionality such as search and contextual menus to be placed at the top of the interface.
\- \[nord-truncate]\(/raw/components/truncate.md): Truncate clips text with a single- or multi-line ellipsis and reveals a tooltip with the full text when the content overflows.
\- \[nord-visually-hidden]\(/raw/components/visually-hidden.md): Visually hidden is used when an element needs to be available
to assistive technologies like screen readers, but be otherwise
hidden.


# Readme

## Usage

This section includes guidelines for designers and developers about the usage of this component in different contexts.

\> \*\*Do:\*\* - Use to group several related sections of content, such as a list of frequently asked questions or grouped settings.
\- Give each \[Accordion Item]\(/components/accordion-item/) a unique \`value\` so the open state can be tracked.
\- Use the \`multiple\` attribute when more than one section should be expandable at the same time.
\- Control which sections are open with the \`value\` property (an array of item values); it is the single source of truth. Render the full set of items up front rather than adding or removing them after the accordion has connected.
\- Keep \[Accordion Trigger]\(/components/accordion-trigger/) labels short and descriptive so users can scan the sections.

\> \*\*Don't:\*\* - Don’t use for a single disclosure of content, use \[Collapsible]\(/components/collapsible/) instead.
\- Don’t nest interactive controls inside a trigger that compete with toggling the section.
\- Don’t hide content that the user always needs, such as primary actions or critical information.


# Readme

## Usage

This section includes guidelines for designers and developers about the usage of this component in different contexts.

\> \*\*Do:\*\* - Place inside \`\<nord-aside>\`’s default slot, one per surface the user can toggle.
\- Give each drawer a unique \`id\` — \`\<nord-aside>\`’s \`active-drawer\` attribute matches against it.
\- Put arbitrary content in the default slot: a \`\<nord-drawer>\`, a custom component, plain markup, an \`\<iframe>\` you instantiate yourself.
\- Use \`default-width\`, \`min-width\`, and \`max-width\` to define the resize range; the component persists the user’s chosen width per drawer \`id\`.

\> \*\*Don't:\*\* - Don’t use outside of \`\<nord-aside>\` — the parent owns open/closed state.
\- Don’t manage the panel’s visibility yourself. The drawer is always mounted and toggled via the ancestor’s \`active-drawer\`.
\- Don’t share an \`id\` between drawers — width persistence and trigger wiring both key off it.

---

## Additional considerations

- Always mounted. Shown when the ancestor `<nord-aside>`’s `active-drawer` matches this drawer’s `id`, otherwise hidden via the native `[hidden]` attribute.
- The component sizes the panel and owns its open/closed state; the consumer owns the contents.
- Emits `width-change` with `{ width, source }` where `source` is `'drag' | 'keyboard' | 'attribute' | 'storage'`.
- Width is persisted in `localStorage` under the drawer’s `id`. If `default-width` changes between sessions, the persisted value is re-seeded to the new default.


# Readme

## Usage

This section includes guidelines for designers and developers about the usage of this component in different contexts.

\> \*\*Do:\*\* - Use inside \`\<nord-aside slot="rail">\` to toggle a specific \`\<nord-aside-drawer>\`.
\- Set \`drawer\` to the target drawer’s \`id\` and \`label\` for the accessible name.
\- Use \`href\` for rail items that navigate to a page instead of opening a drawer. The trigger renders a real anchor, so middle-click, cmd/ctrl-click and right-click work as expected. \`target\` and \`rel\` are forwarded to the anchor.
\- Use the \`icon\` attribute for the common case; place a \`\<nord-icon>\` (or other element) in the default slot when you need full control.
\- Use the \`badge\` attribute to surface a count or status indicator.

\> \*\*Don't:\*\* - Don’t set both \`drawer\` and \`href\` — they are mutually exclusive. When both are set, \`href\` wins and the trigger acts as a link.
\- Don’t set \`drawer\` to a missing or disabled drawer \`id\`. The trigger will warn and behave as inert.
\- Don’t omit \`label\` — the rail button has no visible text, so the accessible name comes from this attribute.

---

## Additional considerations

- `disabled` on the trigger takes precedence over the target drawer’s `disabled` state.
- The `active` state mirrors the ancestor `<nord-aside>`’s `active-drawer` and is exposed for styling via `[active]`.
- In link mode (`href` set) the trigger has no expand/collapse semantics: `aria-expanded` and `aria-controls` are omitted, and badge, icon, label and tooltip work the same as in drawer mode.


# Readme

## Usage

This section includes guidelines for designers and developers about the usage of this component in different contexts.

\> \*\*Do:\*\* - Use as the right-side rail + drawer container in the app shell.
\- Mix \`\<nord-aside-trigger>\`s with plain \`\<nord-button>\`s or \`\<a>\`s in the \`rail\` slot — triggers toggle drawers, plain buttons/links are for navigation-only items.
\- Place one or more \`\<nord-aside-drawer>\` panels in the default slot; the aside shows the one whose \`id\` matches \`active-drawer\`.
\- Let consumers drive the open state via the \`active-drawer\` attribute and the \`active-drawer-change\` event.

\> \*\*Don't:\*\* - Don’t put more than one \`\<nord-aside>\` on the page — it owns app-shell-level state.
\- Don’t open multiple drawers at once. The aside is single-active by design.
\- Don’t wrap navigation-only rail items in \`\<nord-aside-trigger>\` — use a plain \`\<nord-button>\` or \`\<a>\` instead.

---

## Additional considerations

- Owns the single-active drawer state and the inline-start resize handle. Drag-for-resize is independent of `handle-click`, which only controls the click (no-drag) behaviour: `toggle`, `close`, or `none`.
- Width and gap of the rail column are configurable via `--n-aside-rail-width` and `--n-aside-rail-gap`.
- Emits `active-drawer-change` with `{ activeDrawer, previousDrawer }` and `drawer-resize` with `{ drawerId, width }`.


# Readme

## Usage

Autocomplete is a **control only** — it has no built-in label, hint or error. Pair it with a [Field](https://nordhealth.design/components/field/) to give it a label, helper text and an error message, exactly like a native input. Connect the [Field Label](https://nordhealth.design/components/field-label/) to the autocomplete with the `for` attribute so it gets an accessible name and click-to-focus.

Import the autocomplete and the Field parts you need — each import registers its custom element:

```js
import '@nordhealth/components/lib/Autocomplete'
import '@nordhealth/components/lib/Field'
import '@nordhealth/components/lib/FieldLabel'
import '@nordhealth/components/lib/FieldDescription'
import '@nordhealth/components/lib/FieldError'
```

Then compose the Field around the autocomplete:

```html
<nord-field>
  <nord-field-label for="tag">Search tags</nord-field-label>
  <nord-autocomplete id="tag" placeholder="e.g. feature"></nord-autocomplete>
  <nord-field-description>The text you type is the value; suggestions help you complete it.</nord-field-description>
  <!-- show a Field Error and mark the Field invalid instead, when validation fails -->
</nord-field>
```

Provide the suggestions with the `options` property — pairing it with a Field only handles labelling and layout, it doesn't change how you populate the list:

```js
document.querySelector('nord-autocomplete').options = [
  { value: 'feature', label: 'feature' },
  { value: 'fix', label: 'fix' },
]
```

Autocomplete renders in the light DOM, so you can style it directly with your own CSS or Tailwind utilities, and set its width on the autocomplete (or on its Field).

Use the `size` property (`s`, `m` or `l`, defaulting to `m`) to scale the control's height, padding and font size to match surrounding form controls.

### Free text is the value

The text the user types **is** the committed `value` (a single string). Suggestions are completion aids: picking one fills the input with that option's `label` and commits that label. Nothing is discarded when the listbox closes — the typed text stays as the value and the filter query.

Add `inline` for ghost-text completion: while an option is highlighted with the arrow keys, the input previews the highlighted option's remaining label as selected text that the user can accept (Enter, → / End at the end of the text, or a click) or overwrite by continuing to type.

The `value` is distinct from the inherited native HTML-autofill `autocomplete` property; the inner input always hard-codes `autocomplete="off"` so browser autofill never fights the suggestion list.

### Autocomplete vs Combobox

Both let users type to filter a list, but they differ in what the value becomes:

- **Autocomplete** — the raw typed text is committed directly as `value`. Suggestions optionally complete it; the value can be anything the user types.
- **[Combobox](https://nordhealth.design/components/combobox/)** — the `value` must be one of the options' `value`s. The input is a search/filter field whose text is discarded on commit unless the user picks an option.

\> \*\*Do:\*\* - Use when the answer is open-ended text but you can offer helpful completions, such as a city, a tag or a username.
\- Pair it with a \[Field]\(/components/field/) and a \[Field Label]\(/components/field-label/) connected with \`for\`, so it has an accessible name, helper text and an error message.
\- Use \`external-filtering\` and update \`options\` from the \`input\` event when the suggestions come from a server.
\- Group related suggestions with the \`group\` property to help users scan long lists.

\> \*\*Don't:\*\* - Don’t use when the value must be one of a fixed set of options, see \[Combobox]\(/components/combobox/) instead.
\- Don’t add a Field Label without a \`for\` pointing at the autocomplete’s \`id\`, or the control will have no accessible name.
\- Don’t use for plain free-form text entry with no useful suggestions, see \[Input]\(/components/input/) instead.
\- Don’t use to trigger actions or commands, see \[Command Menu]\(/components/command-menu/) instead.


# Readme

## Usage

This section includes guidelines for designers and developers about the usage of this component in different contexts.

\> \*\*Do:\*\* - Use the circle avatar to represent a single user or an animal.
\- Use the square avatar for organizations or group of animals.
\- Always add the name of the user, animal, organization, or group of animals using the \`name\` property.
\- For the best results, use square images or images cropped into a square.

\> \*\*Don't:\*\* - Don’t use the circle avatar to represent organizations or group of animals.
\- Don’t use the square avatar to represent a single user or an animal.
\- Don’t use an avatar when an icon is more suitable, for example when denoting groups or "things".
\- Try to avoid using landscape or portrait images as avatars. Let users crop their images before or after uploading if possible.


# Readme

## Usage

This section includes guidelines for designers and developers about the usage of this component in different contexts.

\> \*\*Do:\*\* - Use established variants and color patterns so that users can clearly identify the importance level.
\- Use to show a status update on a piece of information or action.
\- Use to mark something as a “draft” or “new”.
\- Use when you want to highlight something that has been added recently.
\- Always position badge so that it’s easy to understand what object it’s related to.

\> \*\*Don't:\*\* - Don’t make badges clickable. Instead use button component’s small variant.
\- Don’t use alternatives to existing badge variants.
\- Don't use badges for labeling, categorizing, or organizing objects. Use the \[tag component]\(/components/tag/) instead.

---

## Content guidelines

Badge labels should use a single word to describe the status of an object. Only use two words if you need to describe a complex state:

\> \*\*Do:\*\* Complete

\> \*\*Don't:\*\* Action completed

When writing badge labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):

\> \*\*Do:\*\* Partially refunded

\> \*\*Don't:\*\* Partially Refunded

Avoid unnecessary words and articles in badge labels, such as “is”, “the”, “an” or “a”:

\> \*\*Do:\*\* Pending

\> \*\*Don't:\*\* Item is pending

Always describe the status in the past tense:

\> \*\*Do:\*\* Refunded

\> \*\*Don't:\*\* Refund

---

## Variants

This section describes the different component variants, their purpose, and when to use each variant.

| Name        | Purpose                                                                                                                                 |
| ----------- | --------------------------------------------------------------------------------------------------------------------------------------- |
| `neutral`   | The default style variant.                                                                                                              |
| `info`      | Used to convey general information that isn’t critical.                                                                                 |
| `success`   | Used to convey success states. For example, you might want to show a badge that tells the user a payment was successful.                |
| `highlight` | Used to highlight specific items in the interface, like notifications.                                                                  |
| `danger`    | Used to communicate problems that have to be resolved so that user can continue forward. Should always be used for highlighting errors. |
| `warning`   | Used to display information that needs a user’s attention attention and may require further steps.                                      |
| `progress`  | Used to convey something that’s in progress.                                                                                            |


# Readme

## Usage

This section includes guidelines for designers and developers about the usage of this component in different contexts.

\> \*\*Do:\*\* - Use this component if you need to communicate in a prominent way.
\- Place banner at the top of the section it applies to.
\- Use for highlighting errors and success statuses.
\- Put banner close to the context it’s referring to.
\- Move focus to the banner if it’s relevant to the current workflow.

\> \*\*Don't:\*\* - Move focus to banner if it appears on page load.
\- Use for highlighting general content or as a banner.
\- Use to replace an error page.

---

## Content guidelines

Banner content should be clear, accurate and easy to understand:

\> \*\*Do:\*\* We’re experiencing an incident. Please see our status page for more details.

\> \*\*Don't:\*\* There was an error.

When writing banner content, always write it in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):

\> \*\*Do:\*\* We’re experiencing an incident.

\> \*\*Don't:\*\* We’re Experiencing An Incident.

Always end in punctuation:

\> \*\*Do:\*\* We’re experiencing an incident.

\> \*\*Don't:\*\* We’re experiencing an incident


# Readme

## Usage

This section includes guidelines for designers and developers about the usage of this component in different contexts.

\> \*\*Do:\*\* - Use to group together buttons, or dropdowns, of a similar nature or purpose.
\- Use the appropriate \`role\` attribute on the button group to provide additional semantics.
\- Use an \`aria-labelledby\` attribute referencing another element to best explain the contents of the button group.

\> \*\*Don't:\*\* - Don’t add components other than buttons, dropdowns and in some instances visually hidden components to the button group.
\- Don’t skip the addition of an appropriate label if the added \`role\` attribute value calls for it.
\- Don’t use for building grid based layouts.

---

## Content guidelines

Button labels should be clear, accurate and predictable. It should be possible for the user to understand what will happen when they click a button:

\> \*\*Do:\*\* View user settings

\> \*\*Don't:\*\* Click here

When writing button labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):

\> \*\*Do:\*\* My tasks

\> \*\*Don't:\*\* My Tasks

Avoid unnecessary words and articles in button labels, such as “the”, “an” or “a”:

\> \*\*Do:\*\* Add item

\> \*\*Don't:\*\* Add an item

---

## Variants

This section describes the different component variants, their purpose, and when to use each variant.

| Name      | Purpose                                                                                                  |
| --------- | -------------------------------------------------------------------------------------------------------- |
| `default` | The default variant renders a group of segmented buttons to emphasize that they’re thematically-related. |
| `spaced`  | The spaced variant renders a gap between the buttons to space them out evenly.                           |


# Readme

## Usage

This section includes guidelines for designers and developers about the usage of this component in different contexts.

\> \*\*Do:\*\* - Only use one primary button per section, as a main call-to-action.
\- Use clear and accurate labels.
\- Use established button colors appropriately. For example, only use a danger button style for an action that’s difficult or impossible to undo.
\- Prioritize the most important actions. Too many buttons will cause confusion.
\- Be consistent with positioning of buttons in the user interface.
\- Use strong, actionable verbs in labels such as “Add”, “Close”, “Cancel”, or “Save”.

\> \*\*Don't:\*\* - Don't use a primary button in every row of a table.
\- Don’t use buttons to link to other pages. Use regular link or a plain style instead where necessary.
\- Don’t use buttons for navigation where the link appears within or following a sentence.
\- Don’t use labels such as “Read more”, “Click here” or “More”.

---

## Content guidelines

Button labels should be clear, accurate and predictable. It should be possible for the user to understand what will happen when they click a button:

\> \*\*Do:\*\* View user settings

\> \*\*Don't:\*\* Click here

When writing button labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):

\> \*\*Do:\*\* My tasks

\> \*\*Don't:\*\* My Tasks

Avoid unnecessary words and articles in button labels, such as “the”, “an” or “a”:

\> \*\*Do:\*\* Add item

\> \*\*Don't:\*\* Add an item

---

## Variants

This section describes the different component variants, their purpose, and when to use each variant.

| Name       | Purpose                                                                                                                                                                                                  |
| ---------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `default`  | Default style is the most common button variant. Only switch to another variant if you need to adjust the visual weight of the element.                                                                  |
| `primary`  | Primary style is reserved for main call-to-actions. Should be used only once per content area or panel, e.g. for a “Save” action.                                                                        |
| `dashed`   | Dashed style should be used for actions that trigger filtering.                                                                                                                                          |
| `danger`   | Danger style should be used for actions that delete data or otherwise make it hard to undo the action.                                                                                                   |
| `plain`    | Used for less important or less common actions. Can be also used for linking to other pages.                                                                                                             |
| `disabled` | Used for actions that aren’t currently available or not available anymore. Also prevents users from being able to interact with the component, and conveys its inactive state to assistive technologies. |

---

## Icon usage in button

Illustrative icons should be always positioned in the `start` slot:

![Button with icon in start slot](https://nordhealth.design/img/components/button/start-slot.png){.n-border.n-border-radius.n-brand-therapy height="475" loading="lazy" style="max-inline-size:700px;" width="800"}![Button with icon in start slot](https://nordhealth.design/img/components/button/start-slot-vet.png){.n-border.n-border-radius.n-brand-veterinary height="475" loading="lazy" style="max-inline-size:700px;" width="800"}

When a button is used as a dropdown toggle, the `interface-dropdown-small` icon from [Nordicons](https://nordhealth.design/nordicons/) is automatically placed in the `end` slot (you can use the `hideDropdownIcon` property to hide it):

![Dropdown button](https://nordhealth.design/img/components/button/dropdown.png){.n-border.n-border-radius height="475" loading="lazy" style="max-inline-size:700px;" width="800"}

Each button size has a recommended icon size. The medium button uses the `s` icon size, the [small button](https://nordhealth.design/components/button/?example=small+buttons) uses the `xs` icon size, and the [large button](https://nordhealth.design/components/button/?example=large+buttons) uses the `m` icon size. The icon will adjust size automatically based on the button size, so you will get the correct behavior by default. However, this can be overridden by explicitly setting a size on the icon.

![Button icon sizes](https://nordhealth.design/img/components/button/icon-sizes.png){.n-border.n-border-radius.n-brand-therapy height="475" loading="lazy" style="max-inline-size:700px;" width="800"}![Button icon sizes](https://nordhealth.design/img/components/button/icon-sizes-vet.png){.n-border.n-border-radius.n-brand-veterinary height="475" loading="lazy" style="max-inline-size:700px;" width="800"}

Use `interface-add-small` icon in the `start` slot for create/add type primary actions in the [header](https://nordhealth.design/components/header/):

![Create/add type primary action with icon](https://nordhealth.design/img/components/button/create.png){.n-border.n-border-radius.n-brand-therapy height="475" loading="lazy" style="max-inline-size:700px;" width="800"}![Create/add type primary action with icon](https://nordhealth.design/img/components/button/create-vet.png){.n-border.n-border-radius.n-brand-veterinary height="475" loading="lazy" style="max-inline-size:700px;" width="800"}

---

## Additional considerations

- Users of assistive technology expect a button to submit data or do an action. If you need the button to navigate into another view, use the `href` property which will output `<a>` tag instead of a `<button>`.
- When you need to disable a button, use `disabled` property as it conveys this information correctly to assistive technologies like screen readers.
- Button component provides 3 size variants; small, medium and large. The large size should only be used for marketing purposes or on areas such as an empty space/content notice.


# Readme

## Usage

This section includes guidelines for designers and developers about the usage of this component in different contexts.

\> \*\*Do:\*\* - Use when the user needs to choose a single date or a date range.
\- Close calendar after a single date is selected, unless a range with a start and end date is required.

\> \*\*Don't:\*\* - Don’t use for entering date of birth. Use input component instead.
\- Don’t use for choosing a date that is over 10 years in the future or the past.

---

## Keyboard accessibility

Calendar component is built to closely follow [W3C Date Picker Dialog example](https://www.w3.org/TR/wai-aria-practices/examples/dialog-modal/datepicker-dialog.html){rel="&#x22;nofollow&#x22;"} with some small exceptions to e.g. better support iOS VoiceOver and Android TalkBack.

### Month/year buttons

- `Space, Enter`: Changes the month and/or year displayed.

### Calendar grid

- `Space, Enter`: Selects a date.
- `Arrow up`: Moves focus to the same day of the previous week.
- `Arrow down`: Moves focus to the same day of the next week.
- `Arrow right`: Moves focus to the next day. In right-to-left languages, moves focus to the previous day.
- `Arrow left`: Moves focus to the previous day. In right-to-left languages, moves focus to the next day.
- `Home`: Moves focus to the first day (e.g Monday) of the current week.
- `End`: Moves focus to the last day (e.g. Sunday) of the current week.
- `Page Up`: Changes the grid of dates to the previous month and sets focus on the same day of the same week.
- `Shift + Page Up`: Changes the grid of dates to the previous year and sets focus on the same day of the same week.
- `Page Down`: Changes the grid of dates to the next month and sets focus on the same day of the same week.
- `Shift + Page Down`: Changes the grid of dates to the next year and sets focus on the same day of the same week.


# Readme

## Usage

This section includes guidelines for designers and developers about the usage of this component in different contexts.

\> \*\*Do:\*\* - Use to display content and actions on a single topic inside a container.
\- Use to visually separate specific parts of content in an application view.
\- Use to wrap a form into a container, for example a login form.
\- Include a header when placing a \[Table]\(/components/table) component inside the card.

\> \*\*Don't:\*\* - Don’t place cards within cards. Consider using the \[divider]\(/components/divider/) component to break up sections instead.
\- Don’t use when you need to capture user’s attention in a prominent way.
\- Don’t use to inform user about important changes or conditions in the interface.
\- Don’t use multiple primary buttons inside a card. A card should only contain a single primary action.


# Readme

## Usage

This section includes guidelines for designers and developers about the usage of this component in different contexts.

\> \*\*Do:\*\* - Use for making it possible to choose one or more options from a limited number of options.
\- Use for “accepting terms of service” and similar functionality.
\- Use in forms to toggle something on or off.

\> \*\*Don't:\*\* - Avoid using when you have more than 10 options to choose from.
\- Don’t change the selection of another checkbox when another one is clicked. Only exception is when a checkbox is used to make a bulk selection of multiple items.

---

## Hint placement

Hint text is rendered above the control by default to preserve existing behavior for current consumers. Use the `hint-below` property to opt in to rendering the hint below the control and any error.

This is a non-breaking rollout for teams adopting the new layout gradually. Existing integrations keep the current placement unless `hint-below` is explicitly set.

---

## Content guidelines

Checkbox labels should be clear, accurate and predictable. It should be possible for the user to understand what they are selecting:

\> \*\*Do:\*\* User settings

\> \*\*Don't:\*\* Option 1

When writing checkbox labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):

\> \*\*Do:\*\* User settings

\> \*\*Don't:\*\* User Settings

Avoid ending in punctuation if it’s a single sentence, word, or a fragment:

\> \*\*Do:\*\* Show dashboard

\> \*\*Don't:\*\* Show dashboard.

Do not use commas or semicolons at the end of each line

\> \*\*Do:\*\* Patients

\> \*\*Don't:\*\* Patients;


# Readme

## Usage

This section includes guidelines for designers and developers about the usage of this component in different contexts.

\> \*\*Do:\*\* - Use to progressively disclose a single section of content behind a trigger, such as order details or advanced settings.
\- Always pair a \[Collapsible Trigger]\(/components/collapsible-trigger/) with a \[Collapsible Panel]\(/components/collapsible-panel/) inside a Collapsible.
\- Give the trigger a clear, descriptive label so its purpose is obvious even when the panel is collapsed.

\> \*\*Don't:\*\* - Don’t use to group several related sections that should expand and collapse together, use \[Accordion]\(/components/accordion/) instead.
\- Don’t hide essential content that the user always needs to see.
\- Don’t nest interactive controls inside the trigger that compete with toggling the panel.


# Readme

## Usage

Combobox is a **control only** — it has no built-in label, hint or error. Pair it with a [Field](https://nordhealth.design/components/field/) to give it a label, helper text and an error message, exactly like a native input. Connect the [Field Label](https://nordhealth.design/components/field-label/) to the combobox with the `for` attribute so it gets an accessible name and click-to-focus.

Import the combobox and the Field parts you need — each import registers its custom element:

```js
import '@nordhealth/components/lib/Combobox'
import '@nordhealth/components/lib/Field'
import '@nordhealth/components/lib/FieldLabel'
import '@nordhealth/components/lib/FieldDescription'
import '@nordhealth/components/lib/FieldError'
```

Then compose the Field around the combobox:

```html
<nord-field>
  <nord-field-label for="framework">Framework</nord-field-label>
  <nord-combobox id="framework" placeholder="Select a framework"></nord-combobox>
  <nord-field-description>Choose the framework for your project.</nord-field-description>
  <!-- show a Field Error and mark the Field invalid instead, when validation fails -->
</nord-field>
```

Provide the choices with the `options` property — pairing it with a Field only handles labelling and layout, it doesn't change how you populate the list:

```js
document.querySelector('nord-combobox').options = [
  { value: 'next', label: 'Next.js' },
  { value: 'astro', label: 'Astro' },
]
```

Combobox renders in the light DOM, so you can style it directly with your own CSS or Tailwind utilities, and set its width on the combobox (or on its Field).

Use the `size` property (`s`, `m` or `l`, defaulting to `m`) to scale the control's height, padding and font size to match surrounding form controls.

### Select vs free-text suggestions

The committed `value` is an option's `value`. The input is a search/filter field whose text is discarded on commit; closing the listbox reverts the input to the selected option's label. Nothing is committed unless the user picks an option, so the value is always one of the options you provide (or an array of them with `multiple`).

If you instead need the typed text *itself* to be the committed value — free-text input with the options as completion aids — use [Autocomplete](https://nordhealth.design/components/autocomplete/). Autocomplete also offers `inline` ghost-text completion, where arrow-key navigation previews the highlighted option's remaining label.

### Picking an option vs creating one

Both `multiple` and `creatable` keep the `value` made of option `value`s — they never produce arbitrary free text (use [Autocomplete](https://nordhealth.design/components/autocomplete/) for that):

- **`multiple`** lets users pick several options, each shown as a removable chip; the listbox stays open after every selection.
- **`creatable`** offers a *Create* row (hinted with a ⏎ Kbd) when the query matches no option. Choosing it fires a `create` event so **you** add the option — the combobox never mutates `options`. With `multiple`, append the created option to `value` yourself.

The inner input always hard-codes `autocomplete="off"` so browser autofill never fights the suggestion list.

\> \*\*Do:\*\* - Use when users need to pick from a long list of options and benefit from typing to filter, such as countries, timezones or frameworks.
\- Pair it with a \[Field]\(/components/field/) and a \[Field Label]\(/components/field-label/) connected with \`for\`, so it has an accessible name, helper text and an error message.
\- Use \`multiple\` when users may legitimately pick more than one option, showing each choice as a removable chip.
\- Use \`external-filtering\` and update \`options\` from the \`input\` event when the list comes from a server or is too large to filter on the client.
\- Group related options with the \`group\` property to help users scan long lists.

\> \*\*Don't:\*\* - Don’t use when there are only a handful of options and filtering adds no value, see \[Select]\(/components/select/) instead.
\- Don’t add a Field Label without a \`for\` pointing at the combobox’s \`id\`, or the control will have no accessible name.
\- Don’t use for free-form text entry, see \[Input]\(/components/input/) instead.
\- Don’t use to trigger actions or commands, see \[Command Menu]\(/components/command-menu/) instead.


# Readme

## Usage

This section includes guidelines for designers and developers about the usage of this component in different contexts.

\> \*\*Do:\*\* - Use to provide global and contextual keyboard shortcuts for users.
\- Make command menu available everywhere. Users must be able to bring up the command menu easily.
\- Make command menu central. Users should be able to find global shortcuts from one location.
\- Make command menu omnipotent. Give users access to every possible action.
\- Group related commands logically under sections with the section setting.
\- Use \`Alt\` key as the modifier, since this is less likely to clash with existing shortcuts.

\> \*\*Don't:\*\* - Don’t make command menu available only in certain views of the application.
\- Don’t define shortcuts such as \`Ctrl+C\`, since this will clash with the native "Copy" shortcut.
\- Don't create complex shortcuts, as users will struggle to remember them.
\- Avoid using \`KeyboardEvent.key\` for defining the shortcut keys.
\- Don’t use as a search field only.

---

## Content guidelines

Command titles should be clear, accurate and predictable. It should be possible for the user to understand what will happen when they execute a command:

\> \*\*Do:\*\* Start consultation

\> \*\*Don't:\*\* Consultation

Always lead with a strong verb that encourages action. To provide enough context to user, use the {verb} + {noun} content formula:

\> \*\*Do:\*\* Open dashboard

\> \*\*Don't:\*\* Dashboard

When writing command titles, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):

\> \*\*Do:\*\* New appointment

\> \*\*Don't:\*\* New Appointment

Avoid unnecessary words and articles in command titles, such as “the”, “an” or “a”:

\> \*\*Do:\*\* Change theme

\> \*\*Don't:\*\* Change the theme

Avoid ending in punctuation:

\> \*\*Do:\*\* Switch user

\> \*\*Don't:\*\* Switch user.

Use ellipsis in the title when describing sections that have commands grouped inside of them:

\> \*\*Do:\*\* Change theme…

\> \*\*Don't:\*\* Change theme

---

## Commands data

Each command in the `commands` data array must include at least an `id` and `title`. A command may also include properties for `section`, `icon`, `handler`, `shortcut`, `forceShortcut`, `parent`, and `keywords`:

| Name            | Purpose                                                                                                                                                                                                                                                    |
| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `id`            | An identifier for each command, must be unique. Example: `id: "user"`.                                                                                                                                                                                     |
| `title`         | The title shown to users. This is used when searching for a command. Example: `title: "Change theme..."`.                                                                                                                                                  |
| `keywords`      | Not visible in the user interface, but can make it easier to discover commands through search. Example: `keywords: "command change log sign out in"`.                                                                                                      |
| `shortcut`      | The keyboard shortcut. Example: `shortcut: "Alt+KeyU"`. See the sections [Defining Shortcuts](https://nordhealth.design/#defining-shortcuts) and [Choosing shortcuts](https://nordhealth.design/#choosing-shortcuts) below for more information.           |
| `forceShortcut` | Set to `true` to let the command override a browser-reserved shortcut (the menu calls `preventDefault()` for it). Off by default. See [Browser-reserved shortcuts](https://nordhealth.design/#browser-reserved-shortcuts). Example: `forceShortcut: true`. |
| `section`       | Used for grouping many commands under a common header. Example: `section: "Commands"`.                                                                                                                                                                     |
| `icon`          | A name of an icon form Nordicons to show beside the title. If not specified, default command icon will be used instead. Example: `icon: "file-picture"`.                                                                                                   |
| `parent`        | The `id` of a parent command. This is used for nesting commands. Example: `parent: "theme"`.                                                                                                                                                               |
| `handler`       | A function to execute when an user triggers a command. Example: `handler: () => { alert("Change to light theme") }`. In cases where a command is only used as a parent command e.g. "Change theme", this is not required.                                  |

---

## Defining shortcuts

Shortcuts in the Command Menu have the following form: `[modifier]+[key]`. Shortcuts are made up of a sequence of presses. A press can be as simple as a single key which matches against [`KeyboardEvent.code`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code/code_values){rel="&#x22;nofollow&#x22;"}:

```js
// Matches: event.code:
'KeyD'
```

Presses can optionally be prefixed with &#x2A;**modifiers*** which match against any valid value to [`KeyboardEvent.getModifierState()`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/getModifierState){rel="&#x22;nofollow&#x22;"}.

```js
'Control+KeyD'
'Meta+KeyD'
'Shift+KeyD'
'Alt+KeyD'
'Meta+Shift+KeyD'
```

There is also a special `$mod` modifier that makes it easy to support cross platform keybindings:

- Mac: `$mod` = `Meta` (⌘)
- Windows/Linux: `$mod` = `Control`

```js
'$mod+KeyD' // ⌘/Ctrl + D
'$mod+Shift+KeyD' // ⌘/Ctrl + Shift + D
```

The Command Menu itself can be opened using `⌘+k` (or `Ctrl+k` on Windows) and closed by hitting `Esc`. These are both non-configurable shortcuts in order to unify the experience across our platforms.

---

## Choosing shortcuts

When choosing shortcuts, it is very important that they do not clash with native operating system or browser shortcuts.

For example, you *should not* define a shortcut like `$mod+KeyC`, since this will clash with the native “Copy” shortcut, and will be triggered every time a user copies text in the app. Nor should you use shortcuts like `Shift+KeyA` since this will get triggered whenever a user types an uppercase “A” character. Therefore, special care and attention must be given to *each and every* shortcut choice.

In general, we recommend using the `Alt` modifier, since this is less likely to clash with existing shortcuts. However, be aware, the `Alt` key is also used for accented characters e.g. `Alt+KeyA` produces the letter “å”. Again, it is crucial that you choose shortcuts carefully.

### Browser-reserved shortcuts

Some key combinations are reserved by the browser or operating system and are unsafe to use as a command `shortcut`. By default a command's `handler` runs but the browser's own action runs too, so a reserved combo (for example `Alt+KeyD`) will still focus the address bar. Avoid the following:

| Combination                      | Reserved for                       | Reclaimable?                     |
| -------------------------------- | ---------------------------------- | -------------------------------- |
| `Alt+KeyD`                       | Focus the browser address bar      | Yes, with `forceShortcut`        |
| `$mod+KeyL` (`Ctrl+L` / `Cmd+L`) | Focus the browser address bar      | Yes, with `forceShortcut`        |
| `Alt+Home`                       | Navigate to the browser home page  | No — intercepted before the page |
| `Alt+F4`                         | Close the current window (Windows) | No — handled by the OS           |

If you knowingly want a command to take over a reclaimable reserved combo, set `forceShortcut: true` on that command — the Command Menu then calls `event.preventDefault()` so the browser default does not run:

```js
({
  id: 'dashboard',
  title: 'Go to dashboard',
  shortcut: 'Alt+KeyD',
  forceShortcut: true, // opt in to reclaim Alt+D from the browser
  handler: () => {
    // navigate to the dashboard
  },
})
```

This is opt-in so command shortcuts never silently override browser or OS keys. Even so, reusing a reserved combo will surprise users who expect the address bar, so prefer a different combination where you can. `Alt+Home` and `Alt+F4` are intercepted before the page receives the event and cannot be reclaimed even with `forceShortcut`.

You should strive to choose shortcuts that are intuitive and easy to remember. The more complex a shortcut, the less likely a user is to remember it. Of course, a user can still find a command by searching the command menu, and for some users this may be their preferred way of triggering commands.

---

## Common keybindings

Keybindings will be matched against [`KeyboardEvent.key`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key){rel="&#x22;nofollow&#x22;"} and [`KeyboardEvent.code`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code/code_values){rel="&#x22;nofollow&#x22;"} which may have some names you don’t expect. Please note that we recommend always using `KeyboardEvent.code` for defining the keys and only using `KeyboardEvent.key` for defining modifiers.

| Windows       | macOS           | key           | code                           |
| ------------- | --------------- | ------------- | ------------------------------ |
| N/A           | `Command` / `⌘` | `Meta`        | `MetaLeft` / `MetaRight`       |
| `Alt`         | `Option` / `⌥`  | `Alt`         | `AltLeft` / `AltRight`         |
| `Control`     | `Control` / `^` | `Control`     | `ControlLeft` / `ControlRight` |
| `Shift`       | `Shift`         | `Shift`       | `ShiftLeft` / `ShiftRight`     |
| `Space`       | `Space`         | N/A           | `Space`                        |
| `Enter`       | `Return`        | `Enter`       | `Enter`                        |
| `Esc`         | `Esc`           | `Escape`      | `Escape`                       |
| `1`, `2`, etc | `1`, `2`, etc   | `1`, `2`, etc | `Digit1`, `Digit2`, etc        |
| `a`, `b`, etc | `a`, `b`, etc   | `a`, `b`, etc | `KeyA`, `KeyB`, etc            |
| `-`           | `-`             | `-`           | `Minus`                        |
| `=`           | `=`             | `=`           | `Equal`                        |
| `+`           | `+`             | `+`           | `Equal`\*                      |

In addition to the above table, you can use <https://keycode.info/>{rel="&#x22;nofollow&#x22;"} for checking the specific values needed. Note that some keys will have the same code as others because they appear on the same key on the keyboard. Keep in mind how this is affected by international keyboards which may have different layouts.

---

## Navigating with the command menu

1. Use `Ctrl+K` (Windows/Linux) or `Cmd+K` (Mac) to open the command menu.
2. Start typing the command you want to execute. The suggestions in the command menu change to match your text.
3. Finish entering the name, or use the arrow keys to highlight the command you want from the list of suggestions.
4. Use `Enter` to execute the chosen command.
5. If you chose a command that has nested commands, you can use `Backspace` to return to the previous menu.
6. When the command menu is active, you can use one of the following keyboard shortcuts to close it: `Esc`, `Ctrl+K` (Windows and Linux) or `Cmd+K` (Mac).


# Readme

## Usage

This section includes guidelines for designers and developers about the usage of this component in different contexts.

\> \*\*Do:\*\* - Use when the user needs to choose a single date or a date range.

\> \*\*Don't:\*\* - Don’t use for entering date of birth. Use input component instead.
\- Don’t use to choose a date that is over 10 years in the future or the past.

---

## Hint placement

Hint text is rendered above the control by default to preserve existing behavior for current consumers. Use the `hint-below` property to opt in to rendering the hint below the control and any error.

This is a non-breaking rollout for teams adopting the new layout gradually. Existing integrations keep the current placement unless `hint-below` is explicitly set.

---

## Keyboard accessibility

Date picker is built to closely follow [W3C Date Picker Dialog example](https://www.w3.org/TR/wai-aria-practices/examples/dialog-modal/datepicker-dialog.html){rel="&#x22;nofollow&#x22;"} with some small exceptions to e.g. better support iOS VoiceOver and Android TalkBack.

### Choose date button

- `Space, Enter`: Opens the date picker dialog and moves focus to the first select menu in the dialog.

### Date picker dialog

- `Esc`: Closes the date picker dialog and moves focus back to the “choose date” button.
- `Tab`: Moves focus to the next element in the dialog. Please note since the calendar uses `role="grid"`, only one button in the calendar grid is in the tab sequence. Additionally, if focus is on the last focusable element, focus is next moved back to the first focusable element inside the date picker dialog.
- `Shift + Tab`: Same as above, but in reverse order.

### Date picker dialog: Month/year buttons

- `Space, Enter`: Changes the month and/or year displayed.

### Date picker dialog: Date grid

- `Space, Enter`: Selects a date, closes the dialog, and moves focus back to the “Choose Date” button. Additionally updates the value of the date picker input with the selected date, and adds selected date to “Choose Date” button label.
- `Arrow up`: Moves focus to the same day of the previous week.
- `Arrow down`: Moves focus to the same day of the next week.
- `Arrow right`: Moves focus to the next day. In right-to-left languages, moves focus to the previous day.
- `Arrow left`: Moves focus to the previous day. In right-to-left languages, moves focus to the next day.
- `Home`: Moves focus to the first day (e.g Monday) of the current week.
- `End`: Moves focus to the last day (e.g. Sunday) of the current week.
- `Page Up`: Changes the grid of dates to the previous month and sets focus on the same day of the same week.
- `Shift + Page Up`: Changes the grid of dates to the previous year and sets focus on the same day of the same week.
- `Page Down`: Changes the grid of dates to the next month and sets focus on the same day of the same week.
- `Shift + Page Down`: Changes the grid of dates to the next year and sets focus on the same day of the same week.

#### Date picker dialog: Close button

- `Space, Enter`: Closes the dialog, moves focus to “choose date” button, but does not update the date in input.


# Readme

## Usage

This section includes guidelines for designers and developers about the usage of this component in different contexts.

\> \*\*Do:\*\* - Use to represent thematic breaks between elements.
\- Use when you need to divide sections of content from each other.
\- Use to separate content into clear groups.
\- Use dividers sparingly, to create groupings or to separate items.

\> \*\*Don't:\*\* - Avoid using for presentational purposes only.
\- Don’t use strong colors in dividers.
\- Don’t use dividers for replacing card components.

---

## Additional considerations

- Divider uses a role called `separator` which indicates that the element is a divider that separates and distinguishes sections of content or groups of menu items. The implicit ARIA role of the native thematic break (`<hr>` element) is a separator.
- Dividers have an implicit aria-orientation value of `horizontal` which can be changed using the `direction` property.
- For more details, please see [ARIA: separator role on MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/separator_role){rel="&#x22;nofollow&#x22;"}.


# Readme

## Usage

This section includes guidelines for designers and developers about the usage of this component in different contexts.

\> \*\*Do:\*\* - Use for displaying contextual actions or information. For example, when clicking on a table row.
\- Use when you don’t want to block users from completing their task in the main view of an application.
\- Always include a header that summarizes the actions and information in the drawer.
\- Should be closeable through actions like “Done” and “Close”.

\> \*\*Don't:\*\* - Don’t put cards inside the drawer. Consider using the \[divider]\(/components/divider/) component to break up sections instead.
\- Don’t reset the drawer’s state when closed if used for settings or filters. Settings should persist.
\- Don’t open from within another drawer. Only one drawer can be open at a time.
\- Don’t use for presenting a small amount of content or an actions menu, use the \[popout]\(/components/popout/) or \[dropdown]\(/components/dropdown/) component instead.

---

## Additional considerations

- You can customize the width of the component using `--n-layout-drawer-inline-size` CSS Custom Property that is offered on [Layout component](https://nordhealth.design/components/layout/).


# Readme

## Usage

This section includes guidelines for designers and developers about the usage of this component in different contexts.

\> \*\*Do:\*\* - Group dropdown items into dropdown groups based on related categories.
\- Use group headings to clarify the category of a section.

\> \*\*Don't:\*\* - Don’t use for grouping other types of content.

---

## Content guidelines

Dropdown items should be always written in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):

\> \*\*Do:\*\* Create user

\> \*\*Don't:\*\* Create User

Dropdown items should always lead with a strong verb that encourages action. Use the `{verb}+{noun}` format except in the case of common actions like Save, Close or Cancel:

\> \*\*Do:\*\* Edit row

\> \*\*Don't:\*\* Editing options

Avoid unnecessary words and articles in dropdown items, such as “the”, “an” or “a”:

\> \*\*Do:\*\* Change theme

\> \*\*Don't:\*\* Change the theme

Avoid ending dropdown items in punctuation:

\> \*\*Do:\*\* Switch user

\> \*\*Don't:\*\* Switch user.

Avoid all caps for dropdown items:

\> \*\*Do:\*\* Rename

\> \*\*Don't:\*\* RENAME

Keep dropdown items to a single line of text:

\> \*\*Do:\*\* Change theme

\> \*\*Don't:\*\* Change the theme
of the veterinary application.


# Readme

## Usage

This section includes guidelines for designers and developers about the usage of this component in different contexts.

\> \*\*Do:\*\* - Group dropdown items into dropdown groups based on related categories.
\- Use group headings to clarify the category of a section.

\> \*\*Don't:\*\* - Don’t use dropdown item outside of dropdown group and dropdown components.

---

## Content guidelines

Dropdown items should be always written in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):

\> \*\*Do:\*\* Create user

\> \*\*Don't:\*\* Create User

Dropdown items should always lead with a strong verb that encourages action. Use the `{verb}+{noun}` format except in the case of common actions like Save, Close or Cancel:

\> \*\*Do:\*\* Edit row

\> \*\*Don't:\*\* Editing options

Avoid unnecessary words and articles in dropdown items, such as “the”, “an” or “a”:

\> \*\*Do:\*\* Change theme

\> \*\*Don't:\*\* Change the theme

Avoid ending dropdown items in punctuation:

\> \*\*Do:\*\* Switch user

\> \*\*Don't:\*\* Switch user.

Avoid all caps for dropdown items:

\> \*\*Do:\*\* Rename

\> \*\*Don't:\*\* RENAME

Keep dropdown items to a single line of text:

\> \*\*Do:\*\* Change theme

\> \*\*Don't:\*\* Change the theme
of the veterinary application.


# Dropdown Submenu

Dropdown submenu nests a secondary menu within a dropdown. It automatically handles opening on hover, closing on outside click, keyboard navigation, and manages accessibility attributes.

## Usage

```html
<nord-dropdown>
  <nord-button slot="toggle">Menu</nord-button>

  <nord-dropdown-submenu>
    <nord-dropdown-item slot="trigger">
      Export
      <nord-icon slot="end" name="arrow-right"></nord-icon>
    </nord-dropdown-item>
    <nord-dropdown-item>Export as PDF</nord-dropdown-item>
    <nord-dropdown-item>Export as CSV</nord-dropdown-item>
  </nord-dropdown-submenu>

  <nord-dropdown-item>Delete</nord-dropdown-item>
</nord-dropdown>
```

## Behavior

- **Opens on hover (non-touch devices)** — Hovering over the trigger item opens the submenu
- **Opens on click (touch devices & accessibility)** — Clicking the trigger toggles the submenu open/closed
- **Keyboard navigation** — ArrowRight or Enter to open, ArrowLeft to close, first item auto-focused
- **Closes siblings** — Opening one submenu automatically closes other open submenus
- **Closes on regular item hover** — Hovering a non-trigger item closes the submenu
- **Accessibility** — Automatically manages `aria-haspopup="menu"` and `aria-expanded` attributes
- **Capability-based** — Detects touch capability and adapts interaction model accordingly
- **Mobile Sheet** — Converts to a mobile sheet stack navigation on small screens, unless the parent `nord-dropdown` has the `always-floating` property set.

## Methods

- `close()` — Programmatically close the submenu

## Slots

- `trigger` — The element that opens the submenu (typically `nord-dropdown-item`, but any element works)
- default — The submenu content items (can be `nord-dropdown-item`, `nord-dropdown-group`, or any custom HTML/components)

## Content Flexibility

The submenu slot accepts any content type, not just dropdown items. This enables use cases like:

- Form inputs (checkboxes, radio buttons, inputs)
- Custom buttons and layouts
- Mixed content (items grouped with custom controls)
- Any HTML structure that makes sense for your use case


# Readme

## Usage

This section includes guidelines for designers and developers about the usage of this component in different contexts.

\> \*\*Do:\*\* - Dropdown menus are typically used when you have 5-15 items to choose from. They’re used for navigation or commands, where an action is initiated based on the selection.
\- When organizing dropdown menu items, sort the list in a logical order by putting the most selected option at the top.
\- Use for a “more” menu, where the control contains an icon.
\- Use for user profiles, where the control is an avatar.
\- Use in conjunction with the \[dropdown item]\(/components/dropdown-item/) and \[dropdown group]\(/components/dropdown-group/) components.

\> \*\*Don't:\*\* - Don't use for form inputs or selects, use the \[select component]\(/components/select/) or \[input component]\(/components/input/) instead.
\- Don't use for hiding primary actions since they should be visible by default.
\- Don't nest elements or components other than the \[dropdown item]\(/components/dropdown-item/) and \[dropdown group]\(/components/dropdown-group/) components. Consider using the \[popout component]\(/components/popout/) when creating custom UI.
\- Don't use \`always-floating\` property for long lists or complex content that benefits from full-screen focus.

---

## Content guidelines

Dropdown items should be always written in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):

\> \*\*Do:\*\* Create user

\> \*\*Don't:\*\* Create User

Dropdown items should always lead with a strong verb that encourages action. Use the `{verb}+{noun}` format except in the case of common actions like Save, Close or Cancel:

\> \*\*Do:\*\* Edit row

\> \*\*Don't:\*\* Editing options

Avoid unnecessary words and articles in dropdown items, such as “the”, “an” or “a”:

\> \*\*Do:\*\* Change theme

\> \*\*Don't:\*\* Change the theme

Avoid ending dropdown items in punctuation:

\> \*\*Do:\*\* Switch user

\> \*\*Don't:\*\* Switch user.

Avoid all caps for dropdown items:

\> \*\*Do:\*\* Rename

\> \*\*Don't:\*\* RENAME

Keep dropdown items to a single line of text:

\> \*\*Do:\*\* Change theme

\> \*\*Don't:\*\* Change the theme
of the veterinary application.

---

## Additional considerations

- Consider using the `alwaysFloating` property for compact dropdown menus that work well in a small floating container.


# Readme

## Usage

This section includes guidelines for designers and developers about the usage of this component in different contexts.

\> \*\*Do:\*\* - Use when another component or part of UI has no items or data to show.
\- Help users by clearly explaining the benefit and utility of a product or feature.
\- Be encouraging and never make users feel unsuccessful or guilty.

\> \*\*Don't:\*\* - Don’t use as a generic banner to highlight specific content.

---

## Content guidelines

Empty state headings should state to the user what’s wrong or why there’s no content:

\> \*\*Do:\*\* No results found

\> \*\*Don't:\*\* Error

When writing empty state headings, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):

\> \*\*Do:\*\* You don’t have access to this content

\> \*\*Don't:\*\* You Don’t Have Access To This Content

Descriptions in empty states should add useful and relevant additional information:

\> \*\*Do:\*\* We were unable to connect to the service. Click Retry to try again or View log to learn what happened.

\> \*\*Don't:\*\* No connection.

Button labels should be clear, accurate and predictable. It should be possible for the user to understand what will happen when they click a button:

\> \*\*Do:\*\* Clear filters

\> \*\*Don't:\*\* Clear

When writing button labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):

\> \*\*Do:\*\* View log

\> \*\*Don't:\*\* View Log

Avoid unnecessary words and articles in button labels, such as “the”, “an” or “a”:

\> \*\*Do:\*\* Request access

\> \*\*Don't:\*\* Request an access


# Readme

## Usage

This section includes guidelines for designers and developers about the usage of this component in different contexts.

\> \*\*Do:\*\* - Connect each \[Field Label]\(/components/field-label/) to its control with the \`for\` attribute so clicking the label focuses the control and the control gets an accessible name.
\- Wrap related fields in a \[Field Set]\(/components/field-set/) with a \[Field Legend]\(/components/field-legend/) to group them under a legend.
\- Mark a Field as \`invalid\` when showing a \[Field Error]\(/components/field-error/) so the error styling and announcement stay in sync.

\> \*\*Don't:\*\* - Don’t omit the \`for\` attribute on a \[Field Label]\(/components/field-label/), as the control would then lack an accessible name.
\- Don’t put more than one control in a single Field; use a \[Field Group]\(/components/field-group/) for multiple fields.
\- Don’t reach for a Field around a Nord control that already has its own label, hint and error unless you need the extra composition.


# Readme

> **Deprecated.** For new code, group related controls with the composable Field family — see [grouping fields with Field](https://nordhealth.design/components/field#radio). `nord-fieldset` keeps working for backwards compatibility and is not scheduled for removal — there's no need to rush a migration.

## Usage

This section includes guidelines for designers and developers about the usage of this component in different contexts.

\> \*\*Do:\*\* - Use the fieldset component when you need to create a relationship between multiple form inputs.
\- It is especially important to use with a group of radio components.

\> \*\*Don't:\*\* - Don’t place interactive content (buttons, links etc) inside the label.
\- Don’t use with a checkbox component when there is \*\*only one\*\* checkbox. For example, when accepting terms and conditions.

---

## Hint placement

Hint text is rendered above the grouped controls by default to preserve existing behavior for current consumers. Use the `hint-below` property to opt in to rendering the hint below the grouped controls and any error.

This is a non-breaking rollout for teams adopting the new layout gradually. Existing integrations keep the current placement unless `hint-below` is explicitly set.

---

## Content guidelines

Fieldset label should be clear, accurate and predictable. It should help the user to understand how the items in the fieldset are grouped together, or what kind of choice the user is making:

\> \*\*Do:\*\* Pick a color

\> \*\*Don't:\*\* Choose

When writing fieldset labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):

\> \*\*Do:\*\* Pick a color

\> \*\*Don't:\*\* Pick A Color

Avoid ending in punctuation if it’s a single sentence, word, or a fragment:

\> \*\*Do:\*\* Pick a color

\> \*\*Don't:\*\* Pick a color.

Do not use colons in fieldset label:

\> \*\*Do:\*\* Payment details

\> \*\*Don't:\*\* Payment details:

---

## Additional considerations

- A label (which becomes to `<legend>` inside the fieldset) is always required.
- Hint text can be used to offer further information or explanation for an option.


# Readme

## Usage

This section includes guidelines for designers and developers about the usage of this component in different contexts.

\> \*\*Do:\*\* - Use the footer component to show actions for a stepped workflow.
\- Use the footer component to provide additional information or actions that are positioned below the main content.
\- The footer component can also be used within Nord to provide a layer of actions or information at the bottom of a component. It’s currently used internally in the \[modal]\(/components/modal/) and \[drawer components]\(/components/drawer/).
\- When using the footer component within the \[layout component]\(/components/layout/?example=footer), you can make the footer sticky by using the provided \`stickyFooter\` property of the layout component. \[View an example]\(/components/layout/?example=footer).

\> \*\*Don't:\*\* - Don’t overcrowd the footer with too many actions or information.
\- Don’t nest the footer deeply and restrict its available space.
\- Don’t add large amounts of content or long paragraphs. Aim for actions that are short and concise.

---

## Content guidelines

Footer action labels should be clear, accurate and predictable. It should be possible for the user to understand what will happen when they click a button:

\> \*\*Do:\*\* Create client

\> \*\*Don't:\*\* Click here

When writing button labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):

\> \*\*Do:\*\* My tasks

\> \*\*Don't:\*\* My Tasks

Avoid unnecessary words and articles in button labels, such as “the”, “an” or “a”:

\> \*\*Do:\*\* Add item

\> \*\*Don't:\*\* Add an item


# Readme

## Usage

This section includes guidelines for designers and developers about the usage of this component in different contexts.

\> \*\*Do:\*\* - Use the header component to show a heading to describe the current view.
\- Use the header component to hold primary actions.
\- Use the header component at a visual high position at full width.
\- Utilise the \[\`n-truncate\`]\(/css/#miscellaneous-utilities) CSS helper to prevent long headings from wrapping.

\> \*\*Don't:\*\* - Don’t overcrowd the header component with too many actions or information.
\- Don’t nest the header component too deeply and restrict its available space.
\- Don’t add large amounts of content or long headings. Aim for headings that are short and concise.

---

## Content guidelines

The header component should be a containing element placed high on the page to present high level controls and to describe the page itself. It shouldn’t be overcrowded with controls or information.

\> \*\*Do:\*\* \[Menu] Dashboard \[Account] \[Log out]

\> \*\*Don't:\*\* \[Menu] Use the cards below to view various information \[Export] \[Save] \[Edit Profile] \[Log out] \[Preferences]


# Readme

## Usage

This section includes guidelines for designers and developers about the usage of this component in different contexts.

\[View Nordicons]\(/nordicons/)

\> \*\*Do:\*\* - Use to provide additional meaning in addition to a text label.
\- Use to help users who have difficulties with reading and attention.
\- Use in places where text label doesn’t fit (remember to add an accessible label for the icon).

\> \*\*Don't:\*\* - Don’t use for decorative purposes alone.
\- Don’t use when a button’s action is already clear based on the text label.
\- Don’t use the same icon for differing purposes, as users will come to associate icons with specific types of actions.

---

## Additional considerations

- Icon components are hidden from assistive technologies by default.
- Use `label` property to give an accessible label for the icon and to make it visible to assistive technologies.


# Readme

## Usage

This section includes guidelines for designers and developers about the usage of this component in different contexts.

\> \*\*Do:\*\* - Use to provide a text input where the expected input is short.
\- Use to only ask for information that’s really needed. Hide optional fields by default if possible or have them shown with a lower priority.
\- Use help text and placeholder to provide additional, non-critical instructions.
\- Validate input as soon as users have finished interacting with them (but not before).
\- Where necessary, label the input as “Optional” when you need to request input that’s not required.

\> \*\*Don't:\*\* - Don’t use when the expected text input is long. Use textarea component instead.
\- Don’t use the placeholder to provide information that’s required to use the input. Hint text should be used for this purpose instead.

---

## Hint placement

Hint text is rendered above the control by default to preserve existing behavior for current consumers. Use the `hint-below` property to opt in to rendering the hint below the control and any error.

This is a non-breaking rollout for teams adopting the new layout gradually. Existing integrations keep the current placement unless `hint-below` is explicitly set.

---

## Content guidelines

Input labels act as a title for the text field. Labels should typically be short and in noun form:

\> \*\*Do:\*\* Company name

\> \*\*Don't:\*\* What is your company name?

When writing input labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):

\> \*\*Do:\*\* Company name

\> \*\*Don't:\*\* Company Name

When an input isn’t part of a form and is placed individually on a page, you could provide the input label as a call to action:

\> \*\*Do:\*\* Leave a comment

\> \*\*Don't:\*\* Comment

Do not use colons in input label:

\> \*\*Do:\*\* First name

\> \*\*Don't:\*\* First name:

---

## Types

This section describes the different input types, their purpose, and when to use each type.

| Name       | Purpose                                                                                                                                                      |
| ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `text`     | The default and most common variant. Displayed as a single-line text field. Line-breaks are automatically removed from the input value.                      |
| `email`    | A field for editing an email address. Looks similar to a text input, but has validation parameters and relevant keyboard for devices with dynamic keyboards. |
| `password` | A single-line text field where the value is obscured. This type will alert user if a site is not secure.                                                     |
| `tel`      | A field for entering a telephone number. Displays a number keypad on mobile devices.                                                                         |
| `url`      | A field variant that is used to let the user enter and edit an URL.                                                                                          |
| `search`   | A single-line text field for entering search strings.                                                                                                        |
| `number`   | Used to let the user enter a number.                                                                                                                         |

---

## Icon usage in input

Each [input size](https://nordhealth.design/components/input/?example=size) has a recommended icon size. The medium input uses the `s` icon size, the small input uses the `xs` icon size, and the large input uses the `m` icon size. The icon will adjust size automatically based on the button size, so you will get the correct behavior by default. However, this can be overridden by explicitly setting a size on the icon.

---

## Input mode

The `inputmode` attribute provides a hint to the browser about what type of keyboard to show on mobile devices. This is particularly useful for optimizing the mobile experience by opening the appropriate keyboard (numeric, email, URL, etc.) based on the expected input.

- The `inputmode` attribute accepts the following values: `none`, `text`, `decimal`, `numeric`, `tel`, `search`, `email`, and `url`.
- The component automatically defaults `inputmode` based on the input `type`:
  - `type="number"` → `inputmode="numeric"`
  - `type="email"` → `inputmode="email"`
  - `type="tel"` → `inputmode="tel"`
  - `type="url"` → `inputmode="url"`
  - `type="search"` → `inputmode="search"`
- You can override these defaults by explicitly setting a custom `inputmode` value, for example `inputmode="decimal"` on a number type input, or `inputmode="numeric"` on a text type input.

---

## Input masking

We recommend using [Maskito](https://maskito.dev/){rel="&#x22;nofollow&#x22;"} for creating an [input mask](https://nordhealth.design/components/input/?example=input+mask) which ensures that users type values according to a predefined format.


# Readme

## Usage

This section includes guidelines for designers and developers about the usage of this component in different contexts.

Item is a composable row. Combine it with its parts to build list rows:

- [Item Media](https://nordhealth.design/components/item-media/) for a leading icon, avatar or image.
- [Item Content](https://nordhealth.design/components/item-content/) wrapping an [Item Title](https://nordhealth.design/components/item-title/) and an [Item Description](https://nordhealth.design/components/item-description/).
- [Item Actions](https://nordhealth.design/components/item-actions/) for trailing controls.
- [Item Header](https://nordhealth.design/components/item-header/) and [Item Footer](https://nordhealth.design/components/item-footer/) for full-width rows.
- [Item Group](https://nordhealth.design/components/item-group/) and [Item Separator](https://nordhealth.design/components/item-separator/) to stack several items as a list.

```html
<nord-item variant="outline">
  <nord-item-media variant="icon">
    <nord-icon name="navigation-notifications"></nord-icon>
  </nord-item-media>
  <nord-item-content>
    <nord-item-title>Inbox</nord-item-title>
    <nord-item-description>You have 3 unread messages.</nord-item-description>
  </nord-item-content>
  <nord-item-actions>
    <nord-button size="s">View</nord-button>
  </nord-item-actions>
</nord-item>
```

### Clickable items

To make a whole item act as a link, wrap it in an `<a>` element. The row
highlights on hover and shows a focus ring when the link is focused.

```html
<a href="/profile">
  <nord-item variant="outline">
    <nord-item-content>
      <nord-item-title>Your profile</nord-item-title>
    </nord-item-content>
    <nord-item-actions>
      <nord-icon name="arrow-right-small"></nord-icon>
    </nord-item-actions>
  </nord-item>
</a>
```

\> \*\*Do:\*\* - Use Item to present a single, self-contained piece of content such as a person, file or setting.
\- Group related items with \[Item Group]\(/components/item-group/) so assistive technology announces them as a list.
\- Keep the \[Item Title]\(/components/item-title/) concise and put supporting text in the \[Item Description]\(/components/item-description/).
\- Wrap an item in an \`\<a>\` element when the entire row should be a link.

\> \*\*Don't:\*\* - Don’t place interactive controls inside an item that is itself wrapped in a link, as nested interactive elements are not accessible.
\- Don’t use Item for long-form content, it is intended for compact rows.
\- Don’t omit an accessible label on icon-only buttons placed in \[Item Actions]\(/components/item-actions/).


# Readme

## Usage

This section includes guidelines for designers and developers about the usage of this component in different contexts.

\> \*\*Do:\*\* - Use to display a keyboard key or shortcut, such as ⌘ K.
\- Group the keys of a multi-key shortcut together with \[Kbd Group]\(/components/kbd-group/).
\- Use the same casing and symbols the user sees on their keyboard.

\> \*\*Don't:\*\* - Don’t use to style arbitrary inline code, use a \`\<code>\` element instead.
\- Don’t rely on Kbd alone to convey an action, always pair it with a descriptive label.


# Readme

## Usage

This section includes guidelines for designers and developers about the usage of this component in different contexts.

\> \*\*Do:\*\* - To visually group content in a layout section, use the Card component.
\- To lay out a set of smaller components, use the Stack component.

\> \*\*Don't:\*\* - Never put layout component inside another HTML landmark.
\- Don’t use when you need a vertical or horizontal layout system. Use Stack component instead.

---

## Additional considerations

- Layout component uses `<main>` element internally which is an HTML sectioning element which by default defines an ARIA landmark role. For that reason you should never put layout component inside another HTML landmark.

---

## Theming

Please see the [Accent color](https://nordhealth.design/themes/#accent-color) and [Top Bar theming](https://nordhealth.design/themes/#top-bar-theming) sections in our theming documentation for detailed guidelines.

\[Theming Guidelines]\(/themes/#accent-color)


# Readme

## Usage

This section includes guidelines for designers and developers about the usage of this component in different contexts.

\> \*\*Do:\*\* - Messages should always perform an action when clicked.
\- The click action should navigate to a new page or provide more detail about the message.
\- Mark unread messages as read on user interaction.

\> \*\*Don't:\*\* - Don’t slot other components inside a message.

---

## Content guidelines

Message content should be clear, accurate and easy to understand:

\> \*\*Do:\*\* Ariel Salminen arrived to clinic with Pixie cat.

\> \*\*Don't:\*\* Patient arrived

When writing the message content, be concise. Keep content to 1 to 2 sentence:

\> \*\*Do:\*\* You’ve reached the limit of 30 users included in your plan. Upgrade to add more.

\> \*\*Don't:\*\* You have reached the user limit. Your clinic can only have a maximum of 30 users. To add more users, remove users you no longer need or upgrade your plan to add more.

When writing the notification content, always write it in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):

\> \*\*Do:\*\* Ariel Salminen arrived to clinic with Pixie cat.

\> \*\*Don't:\*\* Ariel Salminen Arrived To Clinic With Pixie Cat.

Always end in punctuation:

\> \*\*Do:\*\* Ariel Salminen arrived to clinic with Pixie cat.

\> \*\*Don't:\*\* Ariel Salminen arrived to clinic with Pixie cat

Avoid all caps for messages:

\> \*\*Do:\*\* Nina Williams arrived to clinic with Norfryd

\> \*\*Don't:\*\* NINA WILLIAMS ARRIVED TO CLINIC WITH NORFRYD


# Readme

## Usage

This section includes guidelines for designers and developers about the usage of this component in different contexts.

\> \*\*Do:\*\* - Use to display a static numeric measurement within a known range, such as disk usage, a battery level or a score.
\- Always provide a \`label\` describing what the meter represents.
\- Use the \`min\` and \`max\` attributes when the value is not on a 0–100 scale.

\> \*\*Don't:\*\* - Don’t use to show the progress of an ongoing task, see \[Progress Bar]\(/components/progress-bar/) instead.
\- Don’t use for values that change continuously to indicate loading, see \[Spinner]\(/components/spinner/) instead.


# Readme

## Usage

This section includes guidelines for designers and developers about the usage of this component in different contexts.

\> \*\*Do:\*\* - Use for confirmations and conditional changes.
\- Use when the user is required to take an action.
\- Use when you need to display content that temporarily blocks interactions with the main view of an application.
\- Use when you need to ask a confirmation from a user before proceeding.
\- Use for important warnings, as a way to prevent or correct critical errors.

\> \*\*Don't:\*\* - Don’t use for nonessential information that is not related to the current userflow.
\- Don’t use when the modal requires additional information for decision making that is unavailable in the modal itself.
\- Don’t open a modal window on top of another modal.

---

## Content guidelines

Modal title should be clear, accurate and predictable. Always lead with a strong verb that encourages action. To provide enough context to user, use the {verb} + {noun} content formula:

\> \*\*Do:\*\* Edit patient

\> \*\*Don't:\*\* Edit the patient called John Doe

\> \*\*Do:\*\* Discard changes?

\> \*\*Don't:\*\* Discard?

\> \*\*Do:\*\* Delete patient?

\> \*\*Don't:\*\* Are you sure you want to delete this patent?

When writing modal titles, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):

\> \*\*Do:\*\* New appointment

\> \*\*Don't:\*\* New Appointment

Avoid unnecessary words and articles in modal titles, such as “the”, “an” or “a”:

\> \*\*Do:\*\* Change theme

\> \*\*Don't:\*\* Change the theme

Avoid ending in punctuation:

\> \*\*Do:\*\* Edit patient

\> \*\*Don't:\*\* Edit patient.

---

## Focus behaviour

- Use the `autofocus` attribute to set the initial focus to the first location that accepts user input.
- If it is a transactional modal without form inputs, then `autofocus` should be set on the primary button in the modal footer. This is for efficiency since most users will simply dismiss the dialog as soon as they have read the message.
- If the modal contains a form, use `autofocus` in the first form field.
- Focus remains trapped inside the modal dialog until it is closed.
- For more examples and best practices, please see [WAI-ARIA Authoring Practices Modal Dialog Example](https://www.w3.org/TR/2017/NOTE-wai-aria-practices-1.1-20171214/examples/dialog-modal/dialog.html){rel="&#x22;nofollow&#x22;"}.


# Readme

## Usage

This section includes guidelines for designers and developers about the usage of this component in different contexts.

\> \*\*Do:\*\* - Group navigation items into navigation groups based on related categories.
\- Use group headings to clarify the category of a section.
\- Use icons for all top level navigation items.

\> \*\*Don't:\*\* - Don’t use for grouping other types of content.

---

## Content guidelines

When writing navigation item labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):

\> \*\*Do:\*\* My tasks

\> \*\*Don't:\*\* My Tasks

Avoid unnecessary words and articles in item labels, such as “the”, “an” or “a”:

\> \*\*Do:\*\* Change theme

\> \*\*Don't:\*\* Change the theme

Avoid ending item labels in punctuation:

\> \*\*Do:\*\* Switch user

\> \*\*Don't:\*\* Switch user.

Use as few words as possible to describe each item label:

\> \*\*Do:\*\* Payments

\> \*\*Don't:\*\* Payments in your clinic

Avoid all caps for item labels and group titles:

\> \*\*Do:\*\* Dashboard

\> \*\*Don't:\*\* DASHBOARD


# Readme

## Usage

This section includes guidelines for designers and developers about the usage of this component in different contexts.

\> \*\*Do:\*\* - Group navigation items into navigation groups based on related categories.
\- Use group headings to clarify the category of a section.
\- Use icons for all top level navigation items.

\> \*\*Don't:\*\* - Don’t use navigation item outside of navigation group and navigation components.

---

## Closing the rail-mode flyout on selection

When the layout is collapsed to a rail (`collapse-mode="rail"` with the nav closed), a parent navigation item opens its subnav in a flyout. Selecting a leaf link inside that flyout does not close it automatically, because the click happens inside the flyout's own overlay.

Call `closeFlyout()` on the parent `<nord-nav-item>` to close its flyout without reaching into the component's shadow DOM:

```js
const leaf = document.querySelector('nord-nav-item[href="/reports"]')

leaf.addEventListener('click', () => {
  const parent = leaf.closest('nord-nav-group')?.closest('nord-nav-item')
  parent?.closeFlyout()
})
```

To close every open flyout from one root-level handler, use `closeAllFlyouts()` on `<nord-navigation>` instead. You can also set the `auto-dismiss-on-select` attribute on `<nord-nav-item>` (or on `<nord-navigation>`) to close the flyout automatically when a leaf item is activated.

---

## Content guidelines

When writing navigation item labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):

\> \*\*Do:\*\* My tasks

\> \*\*Don't:\*\* My Tasks

Avoid unnecessary words and articles in item labels, such as “the”, “an” or “a”:

\> \*\*Do:\*\* Change theme

\> \*\*Don't:\*\* Change the theme

Avoid ending item labels in punctuation:

\> \*\*Do:\*\* Switch user

\> \*\*Don't:\*\* Switch user.

Use as few words as possible to describe each item label:

\> \*\*Do:\*\* Payments

\> \*\*Don't:\*\* Payments in your clinic

Avoid all caps for item labels and group titles:

\> \*\*Do:\*\* Dashboard

\> \*\*Don't:\*\* DASHBOARD


# Readme

## Usage

This section includes guidelines for designers and developers about the usage of this component in different contexts.

\> \*\*Do:\*\* - Use a tooltip with the toggle that’s labelled as \`Toggle navigation\`.
\- We recommend setting a keyboard shortcut that toggles the navigation.

\> \*\*Don't:\*\* - Don’t use as a generic button or toggle. Use the \[Button component]\(/components/button/) instead.

---

## Additional considerations

- Used internally by `<nord-layout>` as the default contents of its `nav-toggle` slot. Can also be placed &#x2A;*anywhere inside `<nord-layout>`** (e.g. inside a `<nord-header>` next to the page title) — the layout listens for clicks on any descendant `<nord-nav-toggle>` and toggles the navigation accordingly.
- Outside of a `<nord-layout>` it renders as a presentational button with no behaviour.
- The two displayed icons can be customised via the `icon` and `icon-active` attributes. The first is shown in the resting state; the second replaces it on hover/focus (≥ 768px).
- Set `auto-hide` to have the toggle disappear automatically when the ancestor `<nord-layout>`'s nav is open (on wide viewports), mirroring the built-in fallback toggle's behaviour.


# Readme

## Usage

This section includes guidelines for designers and developers about the usage of this component in different contexts.

\> \*\*Do:\*\* - Use for primary navigation items that perform an action when clicked. Each action should navigate to a URL or trigger another action like a modal overlay.
\- Group navigation items into navigation groups based on related categories.
\- Use group headings to clarify the category of a section.
\- Use icons for all top level navigation items.

\> \*\*Don't:\*\* - Don’t place a \`\<nav>\` element inside the navigation component, as it already contains one internally.

---

## Closing rail-mode flyouts on selection

When the layout is collapsed to a rail (`collapse-mode="rail"` with the nav closed), a parent navigation item opens its subnav in a flyout. Selecting a leaf link inside that flyout does not close it automatically, because the click happens inside the flyout's own overlay.

Call `closeAllFlyouts()` on `<nord-navigation>` to close every open flyout in the tree without reaching into component shadow DOM. Wire a single handler at the navigation root:

```js
const navigation = document.querySelector('nord-navigation')

navigation.addEventListener('click', (event) => {
  const leaf = event.target.closest('nord-nav-item[href]')
  if (leaf) {
    navigation.closeAllFlyouts()
  }
})
```

Alternatively, set the `auto-dismiss-on-select` attribute on `<nord-navigation>` to close any open flyout automatically when a leaf item is activated:

```html
<nord-navigation auto-dismiss-on-select>
  <!-- nav items -->
</nord-navigation>
```

To close the flyout for a single item, call `closeFlyout()` on that `<nord-nav-item>` instead.

---

## Content guidelines

When writing navigation item labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):

\> \*\*Do:\*\* My tasks

\> \*\*Don't:\*\* My Tasks

Avoid unnecessary words and articles in item labels, such as “the”, “an” or “a”:

\> \*\*Do:\*\* Change theme

\> \*\*Don't:\*\* Change the theme

Avoid ending item labels in punctuation:

\> \*\*Do:\*\* Switch user

\> \*\*Don't:\*\* Switch user.

Use as few words as possible to describe each item label:

\> \*\*Do:\*\* Payments

\> \*\*Don't:\*\* Payments in your clinic

Avoid all caps for item labels and group titles:

\> \*\*Do:\*\* Dashboard

\> \*\*Don't:\*\* DASHBOARD


# Readme

## Usage

This section includes guidelines for designers and developers about the usage of this component in different contexts.

\> \*\*Do:\*\* - Use in combination with \[Notification]\(/components/notification/) so that notifications get styled and positioned correctly.
\- Add as close to the start of your main content area as possible.

\> \*\*Don't:\*\* - Don’t use for grouping anything other than notification components

---

## Content guidelines

Notification content should be clear, accurate and easy to understand:

\> \*\*Do:\*\* Ariel Salminen arrived to clinic with Pixie cat.

\> \*\*Don't:\*\* Patient arrived

When writing the notification content, be concise. Keep content to 1 to 2 sentence:

\> \*\*Do:\*\* You’ve reached the limit of 30 users included in your plan. Upgrade to add more.

\> \*\*Don't:\*\* You have reached the user limit. Your clinic can only have a maximum of 30 users. To add more users, remove users you no longer need or upgrade your plan to add more.

When writing the notification content, always write it in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):

\> \*\*Do:\*\* Ariel Salminen arrived to clinic with Pixie cat.

\> \*\*Don't:\*\* Ariel Salminen Arrived To Clinic With Pixie Cat.

Always end in punctuation:

\> \*\*Do:\*\* Ariel Salminen arrived to clinic with Pixie cat.

\> \*\*Don't:\*\* Ariel Salminen arrived to clinic with Pixie cat

Action link labels in notifications should be clear, accurate and predictable. It should be possible for the user to understand what will happen when they click a button:

\> \*\*Do:\*\* Start consultation

\> \*\*Don't:\*\* Click here

When writing action link labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):

\> \*\*Do:\*\* Start consultation

\> \*\*Don't:\*\* Start Consultation

Avoid unnecessary words and articles in action link labels, such as “the”, “an” or “a”:

\> \*\*Do:\*\* Add item

\> \*\*Don't:\*\* Add an item


# Readme

## Usage

This section includes guidelines for designers and developers about the usage of this component in different contexts.

\> \*\*Do:\*\* - Use for short messages that describe the purpose of the notification.
\- Use for important updates that require user action/attention.
\- Provide a single call to action within the notification.
\- Use in combination with \[Notification group]\(/components/notification-group) so that notifications get styled and positioned correctly.

\> \*\*Don't:\*\* - Don’t use for transient or unimportant messages. Consider using a \[Toast]\(/components/toast) instead.
\- Don't remove a notification until a user has explicitly dismissed, or acted on the notification.
\- Don’t use for error messages unless absolutely necessary. Try to favor a \[Banner]\(/components/banner/) for error messaging instead.

---

## Content guidelines

Notification content should be clear, accurate and easy to understand:

\> \*\*Do:\*\* Ariel Salminen arrived to clinic with Pixie cat.

\> \*\*Don't:\*\* Patient arrived

When writing the notification content, be concise. Keep content to 1 to 2 sentence:

\> \*\*Do:\*\* You’ve reached the limit of 30 users included in your plan. Upgrade to add more.

\> \*\*Don't:\*\* You have reached the user limit. Your clinic can only have a maximum of 30 users. To add more users, remove users you no longer need or upgrade your plan to add more.

When writing the notification content, always write it in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):

\> \*\*Do:\*\* Ariel Salminen arrived to clinic with Pixie cat.

\> \*\*Don't:\*\* Ariel Salminen Arrived To Clinic With Pixie Cat.

Always end in punctuation:

\> \*\*Do:\*\* Ariel Salminen arrived to clinic with Pixie cat.

\> \*\*Don't:\*\* Ariel Salminen arrived to clinic with Pixie cat

Action link labels in notifications should be clear, accurate and predictable. It should be possible for the user to understand what will happen when they click a button:

\> \*\*Do:\*\* Start consultation

\> \*\*Don't:\*\* Click here

When writing action link labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):

\> \*\*Do:\*\* Start consultation

\> \*\*Don't:\*\* Start Consultation

Avoid unnecessary words and articles in action link labels, such as “the”, “an” or “a”:

\> \*\*Do:\*\* Add item

\> \*\*Don't:\*\* Add an item


# Readme

## Usage

Number Field is a **control only** — it has no built-in label, hint or error. Pair it with a [Field](https://nordhealth.design/components/field/) to give it a label, helper text and an error message, exactly like a native input. Connect the [Field Label](https://nordhealth.design/components/field-label/) to the number field with the `for` attribute so it gets an accessible name and click-to-focus.

Import the number field and the Field parts you need — each import registers its custom element:

```js
import '@nordhealth/components/lib/NumberField'
import '@nordhealth/components/lib/Field'
import '@nordhealth/components/lib/FieldLabel'
import '@nordhealth/components/lib/FieldDescription'
import '@nordhealth/components/lib/FieldError'
```

Then compose the Field around the number field:

```html
<nord-field>
  <nord-field-label for="amount">Amount</nord-field-label>
  <nord-number-field id="amount"></nord-number-field>
  <nord-field-description>Enter an amount between 1 and 100.</nord-field-description>
  <!-- show a Field Error and mark the Field invalid instead, when validation fails -->
</nord-field>
```

Read and write the value with the `value` property — it is a `number` (or `null` when empty), not a string:

```js
const field = document.querySelector('nord-number-field')
field.value = 42
field.addEventListener('input', () => console.log(field.value))
```

Constrain and format the field with the `min`, `max`, `step` and `format` options. `format` takes [`Intl.NumberFormat` options](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat){rel="&#x22;nofollow&#x22;"} and is set as a property:

```js
field.min = 0
field.max = 1000
field.format = { style: 'currency', currency: 'EUR' }
```

Number Field renders in the light DOM, so you can style it directly with your own CSS or Tailwind utilities, and size it by setting a width on the field (or on its Field).

### Keyboard, buttons and scrubbing

- **Arrow keys** step by `step`; **Shift+Arrow** and **PageUp/PageDown** step by `large-step`; **Alt+Arrow** steps by `small-step`. **Home** and **End** jump to `min` and `max` when those are set.
- The **stepper buttons** support press-and-hold to auto-repeat. They are `tabindex="-1"`, so keyboard users step via the input while touch and assistive-technology users can still tap the buttons.
- Enable `scrub` to add a drag handle, or `allow-wheel-scrub` to change the value with the mouse wheel while the input is focused.

### Accessibility

The inner control is a text input with `inputmode`, carrying `aria-roledescription="Number field"` — **not** `role="spinbutton"` and **not** a native `type="number"`. This lets it display locale-formatted text (currency, percent, grouping) while keeping full text editing; assistive technology reads the formatted value straight from the input's text. The form value is submitted as the raw numeric string under the host `name`; the inner input has no `name`, so there is no double submit.

\> \*\*Do:\*\* - Use for entering a single numeric value, such as a quantity, price, percentage or duration.
\- Pair it with a \[Field]\(/components/field/) and a \[Field Label]\(/components/field-label/) connected with \`for\`, so it has an accessible name, helper text and an error message.
\- Set \`min\`, \`max\` and \`step\` to constrain the value, and \`format\` to display it in the user's locale (currency, percent, grouping).
\- Use \`scrub\` or \`allow-wheel-scrub\` when fine-grained, fast adjustment is helpful, such as in design tools.

\> \*\*Don't:\*\* - Don’t use for non-numeric input, see \[Input]\(/components/input/) instead.
\- Don’t use for choosing from a fixed list of values, see \[Select]\(/components/select/) or \[Combobox]\(/components/combobox/) instead.
\- Don’t add a Field Label without a \`for\` pointing at the number field’s \`id\`, or the control will have no accessible name.
\- Don’t rely on the number field for validation messaging — mark the surrounding \[Field]\(/components/field/) invalid and show a \[Field Error]\(/components/field-error/).


# Readme

## Usage

OTP Field is a **control only** — it has no built-in label, hint or error. Pair it with a [Field](https://nordhealth.design/components/field/) to give it a label, helper text and an error message, exactly like a native input. Connect the [Field Label](https://nordhealth.design/components/field-label/) to the OTP field with the `for` attribute so it gets an accessible name and click-to-focus. The label names the **first cell** (the OTP field forwards its accessible name onto it), while the remaining cells announce their position (for example, "Character 2 of 6").

Import the OTP field and the Field parts you need — each import registers its custom element:

```js
import '@nordhealth/components/lib/OtpField'
import '@nordhealth/components/lib/Field'
import '@nordhealth/components/lib/FieldLabel'
import '@nordhealth/components/lib/FieldDescription'
import '@nordhealth/components/lib/FieldError'
```

Then compose the Field around the OTP field:

```html
<nord-field>
  <nord-field-label for="verification-code">Verification code</nord-field-label>
  <nord-otp-field id="verification-code" length="6"></nord-otp-field>
  <nord-field-description>Enter the 6-character code we sent to your device.</nord-field-description>
  <!-- show a Field Error and mark the Field invalid instead, when validation fails -->
</nord-field>
```

OTP Field renders `length` individual character cells plus a visually-hidden input that holds the full value. The hidden input carries `autocomplete="one-time-code"`, so SMS and keychain one-time-code autofill works, and it carries the native `pattern`, `minlength`, `maxlength` and `required` so form validation works. Typing fills and auto-advances, Backspace clears and moves back, the arrow keys navigate, and pasting a code distributes its characters across the cells.

OTP Field renders in the light DOM, so you can style it directly with your own CSS or Tailwind utilities, and size it with the `size` attribute (`s` | `m` | `l`) or the `--n-otp-field-*` custom properties.

Set `name` to submit the value with a form. The value submits under the host `name`; the inner cell inputs and the hidden input carry no `name`, so the browser never double-submits.

```html
<form>
  <nord-field>
    <nord-field-label for="otp">Verification code</nord-field-label>
    <nord-otp-field id="otp" name="verificationCode" length="6" required></nord-otp-field>
  </nord-field>
</form>
```

Listen for the `complete` event to react when every cell is filled — for example, to submit the form automatically.

```js
document.querySelector('nord-otp-field').addEventListener('complete', (event) => {
  console.log('Code entered:', event.value)
})
```

\> \*\*Do:\*\* - Use for short verification or one-time codes, such as 2FA, email confirmation, or recovery codes.
\- Pair it with a \[Field]\(/components/field/) and a \[Field Label]\(/components/field-label/) connected with \`for\`, so it has an accessible name, helper text and an error message.
\- Use \`type="alphanumeric"\` for codes that mix letters and digits, and \`type="numeric"\` for digit-only codes.
\- Set \`autocomplete="one-time-code"\` (the default) so SMS and keychain autofill works.
\- Use \`mask\` when the code should be obscured on shared screens.

\> \*\*Don't:\*\* - Don't use for free-form or long text entry, see \[Input]\(/components/input/) instead.
\- Don't add a Field Label without a \`for\` pointing at the OTP field's \`id\`, or the first cell will have no accessible name.
\- Don't use for passwords or secrets longer than a few characters, see \[Input]\(/components/input/) instead.
\- Don't change \`length\` to mismatch the code the user is expected to enter — every cell should map to one character of the code.


# Readme

## Usage

This section includes guidelines for designers and developers about the usage of this component in different contexts.

\> \*\*Do:\*\* - Use Outline as a table of contents for navigation \*within\* a single long page, such as documentation, help articles or long settings pages.
\- Pass a flat, ordered list of \[Outline Item]\(/components/outline-item/) children and let \`level\` control the indentation.
\- Set \`active\` when your own scroll logic owns the active section — this disables the built-in scroll-spy.
\- Use \`density="compact"\` in dense sidebars where vertical space is tight.
\- Use \`for\` to generate the outline from a content container's headings automatically.

\> \*\*Don't:\*\* - Don’t use Outline for application navigation between routes — use \[Navigation]\(/components/navigation/) instead.
\- Don’t use Outline for expandable, collapsible hierarchy.
\- Don’t place a \`\<nav>\` element inside the outline, as the host already exposes a navigation landmark.

---

## Content guidelines

Outline item labels should match the headings they link to. Write them in sentence case, keep them short, and avoid ending in punctuation:

\> \*\*Do:\*\* Getting started

\> \*\*Don't:\*\* Getting Started.


# Readme

## Usage

Pagination is the navigation root for moving through a paginated collection. It is **composition-first**: it owns no page state, renders no controls, and emits no events. Your app owns the page state, URLs, cursors and any data fetching; Nord supplies the semantic/layout primitives, the styling, and the `paginate()` math utility for building the page window.

```js
import '@nordhealth/components/lib/Pagination'
```

Compose the primitives inside it, bringing your own interactive element — an `<a>` (e.g. a framework `<Link>` / `<NuxtLink>` for crawlable, SSR-friendly links) or a `nord-button`. You own each link's `href`, navigation and `disabled` state. Mark the active page with `current` on the `nord-pagination-link` and it mirrors `aria-current="page"` onto your link.

```html
<nord-pagination>
  <nord-pagination-content>
    <nord-pagination-item>
      <nord-pagination-previous>
        <nord-button square href="?page=1">
          <nord-icon name="arrow-left-small"></nord-icon>
          <nord-visually-hidden>Previous</nord-visually-hidden>
        </nord-button>
      </nord-pagination-previous>
    </nord-pagination-item>
    <nord-pagination-item>
      <nord-pagination-link current>
        <nord-button variant="primary" href="?page=1">1</nord-button>
      </nord-pagination-link>
    </nord-pagination-item>
    <nord-pagination-item>
      <nord-pagination-link>
        <nord-button variant="plain" href="?page=2">2</nord-button>
      </nord-pagination-link>
    </nord-pagination-item>
    <nord-pagination-item>
      <nord-pagination-ellipsis></nord-pagination-ellipsis>
    </nord-pagination-item>
    <nord-pagination-item>
      <nord-pagination-next>
        <nord-button square href="?page=2">
          <nord-icon name="arrow-right-small"></nord-icon>
          <nord-visually-hidden>Next</nord-visually-hidden>
        </nord-button>
      </nord-pagination-next>
    </nord-pagination-item>
  </nord-pagination-content>
</nord-pagination>
```

The root sets `role="navigation"` and a default accessible label, so you don't need to wrap it in a `<nav>`. It renders in the light DOM, so you can style it directly with your own CSS or Tailwind utilities.

### Building the page window

For numbered pages with known totals, the `paginate()` utility returns the sequence of page numbers (and ellipsis markers) to render, keeping the window centred on the current page:

```js
import { paginate } from '@nordhealth/components'

paginate(currentPage, pageCount) // → [1, "…", 4, 5, 6, "…", 50]
```

Map the tokens to `nord-pagination-link` / `nord-pagination-ellipsis` yourself — see the docs page for Next.js, Nuxt and TanStack adapters.

\> \*\*Do:\*\* - Treat your app as the source of truth: own page state, URLs and cursors, and supply the links.
\- Use \`paginate()\` to compute the numbered page window for known totals.
\- Set \`current\` on the active \`nord-pagination-link\` so it announces as the current page.
\- For icon-only previous/next, put a \`nord-visually-hidden\` label inside the \`nord-button\`.

\> \*\*Don't:\*\* - Don't expect it to render controls or change page on its own — you supply the markup.
\- Don't put an \`aria-label\` on a \`nord-button\` host; use a \`nord-visually-hidden\` child instead.
\- Don't add a second \`\<nav>\` around the root — it is already a navigation landmark.


# Readme

## Usage

This section includes guidelines for designers and developers about the usage of this component in different contexts.

\> \*\*Do:\*\* - Always position popout next to the button or other interface element that toggles it.
\- Use a popout to contain controls or information that doesn’t need to be shown immediately.
\- Use a popout to contain items that will most likely not fit into the current view.
\- Use a clearly labelled button to reveal the popout.
\- Use the appropriate \`aria-haspopup\` and \`role\` attributes for both the toggle button and containing items. Please refer to the \[MDN documentation on both role values]\(https\://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-haspopup#values) and \[child role values]\(https\://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-haspopup#associated\_roles).

\> \*\*Don't:\*\* - Don't hide information inside a popout that is imperative to using the current view.
\- Don't obscure other controls that are important with the popout.
\- Don't allow the popout to be obscured by other controls or the outer bounds of the current view.
\- Don't use \`always-floating\` property for long lists or complex content that benefits from full-screen focus.

---

## Content guidelines

If a popout contains actions, they should be always written in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):

\> \*\*Do:\*\* Create user

\> \*\*Don't:\*\* Create User

Popout actions should always lead with a strong verb that encourages action. Use the `{verb}+{noun}` format except in the case of common actions like Save, Close or Cancel:

\> \*\*Do:\*\* Edit row

\> \*\*Don't:\*\* Editing options

Avoid unnecessary words and articles in popout actions, such as “the”, “an” or “a”:

\> \*\*Do:\*\* Change theme

\> \*\*Don't:\*\* Change the theme

Avoid ending popout actions in punctuation:

\> \*\*Do:\*\* Switch user

\> \*\*Don't:\*\* Switch user.

Avoid all caps for popout actions:

\> \*\*Do:\*\* Rename

\> \*\*Don't:\*\* RENAME

---

## Additional considerations

- The popout component is a containing component, only providing a way to reveal and hide controls by using a single button.
- Consider using the `alwaysFloating` property for compact interactions like simple filters or dropdown menus.


# Readme

## Usage

This section includes guidelines for designers and developers about the usage of this component in different contexts.

\> \*\*Do:\*\* - Use to show the completion status of an ongoing task.
\- Use progress bar when you can determine the percentage of the completed task at any time.
\- Always provide an accessible label when using Progress Bar.

\> \*\*Don't:\*\* - Don’t use in constrained spaces indicating indeterminate loading state, see \[Spinner]\(/components/spinner/) instead.


# Readme

## Usage

This section includes guidelines for designers and developers about the usage of this component in different contexts.

\> \*\*Do:\*\* - Use to show the completion status of a task with a circular indicator.
\- Use when you can determine the percentage of the completed task at any time.
\- Use the label property to provide an accessible label for the progress indicator.
\- Use for compact spaces where a circular indicator is more appropriate than a linear progress bar.

\> \*\*Don't:\*\* - Don't use for indeterminate loading states, see \[Spinner]\(/components/spinner/) instead.
\- Don't use when a linear representation of progress is more appropriate, see \[Progress Bar]\(/components/progress-bar/) instead.


# Readme

## Usage

This section includes guidelines for designers and developers about the usage of this component in different contexts.

\> \*\*Do:\*\* - Use to allow people to access information on their smartphone without the need to type.
\- Always provide an alternative way to access the same information.

\> \*\*Don't:\*\* - Don’t hide important information behind a QR Code only.


# Readme

## Usage

This section includes guidelines for designers and developers about the usage of this component in different contexts.

\> \*\*Do:\*\* - Use a radio component when users can only select one option from a list.
\- Favor radios over a select component when there are a small number of options. This reduces the number of clicks a user has to make, increasing efficiency.
\- Radio buttons are grouped by their \`name\` attribute. Therefore, it is crucial that the same \`name\` is used for a group of radios.
\- Give each radio within a group a unique \`value\`.
\- Radios \*\*must\*\* be grouped for accessibility — wrap them in a \[Field Set]\(/components/field-set/) with a \[Field Legend]\(/components/field-legend/). The legacy \[Fieldset]\(/components/fieldset/) still works but is deprecated.
\- In most cases, a stack component should be used to layout a group of radio buttons.

\> \*\*Don't:\*\* - Don’t place interactive content (buttons, links etc) inside the label.
\- Don’t use when a user can select more than one option. In this case, use a checkbox instead.
\- Don’t use for “accepting terms of service” and similar functionality. Use a checkbox instead.
\- When you have more than 10 options to choose from. Consider using a select instead.

---

## Hint placement

Hint text is rendered above the control by default to preserve existing behavior for current consumers. Use the `hint-below` property to opt in to rendering the hint below the control and any error.

This is a non-breaking rollout for teams adopting the new layout gradually. Existing integrations keep the current placement unless `hint-below` is explicitly set.

---

## Content guidelines

Radio button labels should be clear, accurate and predictable. It should be possible for the user to understand what they are enabling or disabling:

\> \*\*Do:\*\* User settings

\> \*\*Don't:\*\* Option 1

When writing radio button labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):

\> \*\*Do:\*\* My tasks

\> \*\*Don't:\*\* My Tasks

Avoid ending in punctuation if it’s a single sentence, word, or a fragment:

\> \*\*Do:\*\* Blue

\> \*\*Don't:\*\* Blue.

Do not use commas or semicolons at the end of each line

\> \*\*Do:\*\* Patient

\> \*\*Don't:\*\* Patient;

---

## Additional considerations

- Hint text can be used to offer further information or explanation for an option.
- Once a radio has been selected, users cannot return to having no radios selected without refreshing their browser window. Therefore, you should include "None of the above" or "I do not know" if they are valid options.
- In most cases, radio buttons should be stacked vertically. However, radio buttons can be stacked horizontally when there are only two options with short labels. An example might be a yes/no question.


# Readme

## Usage

This section includes guidelines for designers and developers about the usage of this component in different contexts.

\> \*\*Do:\*\* - Use to let user specify a numeric value using a slider.
\- Use when the accuracy of the numeric value entered isn’t important.
\- Always use with a label, even if that label is hidden.

\> \*\*Don't:\*\* - Don’t use when the accuracy of the numeric value entered is important.
\- For entering arbitrary numeric values. Use \[input component]\(/components/input/) instead.

---

## Hint placement

Hint text is rendered above the control by default to preserve existing behavior for current consumers. Use the `hint-below` property to opt in to rendering the hint below the control and any error.

This is a non-breaking rollout for teams adopting the new layout gradually. Existing integrations keep the current placement unless `hint-below` is explicitly set.

---

## Content guidelines

Range labels act as a title for the range input. Labels should typically be short and in noun form:

\> \*\*Do:\*\* Lightness percentage

\> \*\*Don't:\*\* What is the lightness percentage?

When writing range labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):

\> \*\*Do:\*\* Item price

\> \*\*Don't:\*\* Item Price

Do not use colons in range label:

\> \*\*Do:\*\* Color depth

\> \*\*Don't:\*\* Color depth:


# Readme

## Usage

This section includes guidelines for designers and developers about the usage of this component in different contexts.

\> \*\*Do:\*\* - Use segmented control to allow users to pick one choice from a set of closely related choices, and immediately apply that selection.
\- Favor segmented control or \[radio component]\(/components/radio/) over a select component when there are a small number of options. This reduces the number of clicks a user has to make, increasing efficiency.
\- Segmented control items are grouped by their \`name\` attribute. Therefore, it is crucial that the same \`name\` is used for a group of segmented control items.
\- Give each segmented control item within a group a unique \`value\`.
\- Segmented control items \*\*must\*\* be used in combination with a \[segmented control component]\(/components/segmented-control/).

\> \*\*Don't:\*\* - Don’t place interactive content (buttons, links etc) inside the label.
\- Don’t use when a user can select more than one option. In this case, use a \[checkbox]\(/components/checkbox/) or \[selectable tag]\(/components/tag/?example=selectable) instead.
\- Don’t use for “accepting terms of service” and similar functionality. Use a \[checkbox]\(/components/checkbox/) instead.
\- When you have more than 5 options to choose from. Consider using a \[select]\(/components/select/) instead.

---

## Content guidelines

Segmented control labels should be clear, accurate and predictable. It should be possible for the user to understand what they are enabling or disabling:

\> \*\*Do:\*\* User settings

\> \*\*Don't:\*\* Option 1

When writing segmented control labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):

\> \*\*Do:\*\* My tasks

\> \*\*Don't:\*\* My Tasks

Avoid ending in punctuation if it’s a single sentence, word, or a fragment:

\> \*\*Do:\*\* Blue

\> \*\*Don't:\*\* Blue.

Do not use commas or semicolons at the end of each line

\> \*\*Do:\*\* Patient

\> \*\*Don't:\*\* Patient;

---

## Additional considerations

- Once a segmented control item has been selected, users cannot return to having no items selected without refreshing their browser window. Therefore, you should always make sure one of the items is pre-selected.


# Readme

## Usage

This section includes guidelines for designers and developers about the usage of this component in different contexts.

\> \*\*Do:\*\* - Use segmented control to allow users to pick one choice from a set of closely related choices, and immediately apply that selection.
\- Favor segmented control or \[radio component]\(/components/radio/) over a select component when there are a small number of options. This reduces the number of clicks a user has to make, increasing efficiency.
\- Segmented control items are grouped by their \`name\` attribute. Therefore, it is crucial that the same \`name\` is used for a group of segmented control items.
\- Give each segmented control item within a group a unique \`value\`.

\> \*\*Don't:\*\* - Don’t place interactive content (buttons, links etc) inside the label.
\- Don’t use when a user can select more than one option. In this case, use a \[checkbox]\(/components/checkbox/) or \[selectable tag]\(/components/tag/?example=selectable) instead.
\- Don’t use for “accepting terms of service” and similar functionality. Use a \[checkbox]\(/components/checkbox/) instead.
\- When you have more than 5 options to choose from. Consider using a \[select]\(/components/select/) instead.

---

## Content guidelines

Segmented control labels should be clear, accurate and predictable. It should be possible for the user to understand what they are enabling or disabling:

\> \*\*Do:\*\* User settings

\> \*\*Don't:\*\* Option 1

When writing segmented control labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):

\> \*\*Do:\*\* My tasks

\> \*\*Don't:\*\* My Tasks

Avoid ending in punctuation if it’s a single sentence, word, or a fragment:

\> \*\*Do:\*\* Blue

\> \*\*Don't:\*\* Blue.

Do not use commas or semicolons at the end of each line

\> \*\*Do:\*\* Patient

\> \*\*Don't:\*\* Patient;

---

## Additional considerations

- Once a segmented control item has been selected, users cannot return to having no items selected without refreshing their browser window. Therefore, you should always make sure one of the items is pre-selected.


# Readme

## Usage

This section includes guidelines for designers and developers about the usage of this component in different contexts.

\> \*\*Do:\*\* - Use to let a user choose one option from an options menu.
\- Use when you have more than 6 options to choose from.
\- Use when you don’t know how many options there will be.
\- Use hint text and placeholder to provide additional, non-critical instructions.

\> \*\*Don't:\*\* - Don't use a select if you have less than 6 options to choose from. Consider using \[segmented control]\(/components/segmented-control/) or \[radio components]\(/components/radio/) instead, if you have enough space to allow it.

---

## Hint placement

Hint text is rendered above the control by default to preserve existing behavior for current consumers. Use the `hint-below` property to opt in to rendering the hint below the control and any error.

This is a non-breaking rollout for teams adopting the new layout gradually. Existing integrations keep the current placement unless `hint-below` is explicitly set.

---

## Content guidelines

Select labels act as a title for the select field. Labels should typically be short and in noun form:

\> \*\*Do:\*\* Company name

\> \*\*Don't:\*\* What is your company name?

When writing select labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):

\> \*\*Do:\*\* Company name

\> \*\*Don't:\*\* Company Name

Do not use colons in select labels:

\> \*\*Do:\*\* Choose organization

\> \*\*Don't:\*\* Choose organization:


# Readme

## Usage

This section includes guidelines for designers and developers about the usage of this component in different contexts.

\> \*\*Do:\*\* - Use skeleton component for dynamic content only.
\- Use to give the user an indication of what the page layout will be like once loaded.
\- Mimick the actual layout using multiple Skeleton components.
\- Use \`aria-busy="true"\` to indicate which area on the screen is currently loading and remove it or set it to \`false\` once loaded.

\> \*\*Don't:\*\* - Don’t use Skeleton component for static content.
\- Don’t show placeholder content after Skeleton disappears that will change when the page fully loads.


# Readme

## Usage

This section includes guidelines for designers and developers about the usage of this component in different contexts.

\> \*\*Do:\*\* - Use for indicating users that their action is being processed.
\- Use the label property to provide an accessible label for the spinner. If no label is supplied, the spinner is hidden from assistive technology.

\> \*\*Don't:\*\* - Don’t use to show progress. Favor a progress bar instead.


# Readme

## Usage

This section includes guidelines for designers and developers about the usage of this component in different contexts.

\> \*\*Do:\*\* - Use when you need to stack multiple components vertically or horizontally.
\- Use when you want to adjust the white space between two or more components.

\> \*\*Don't:\*\* - Don’t use for building grid based layouts.


# Readme

## Usage

This section includes guidelines for designers and developers about the usage of this component in different contexts.

\> \*\*Do:\*\* - Use to allow multiple panels to be contained within a single window.
\- Use the tab panel and tab components within the tab group component.
\- Use the tab and tab panel components in order to create a tab group content structure.

\> \*\*Don't:\*\* - Don’t use tabs to navigate to other pages. Use navigation or links instead.
\- Don't use other components to the tab and tab panel within the tab group component.
\- Don't obscure important information within a tab panel that isn't revealed by default.
\- Don't add a tab or tab panel component without providing an accompanying panel or tab.

---

## Content guidelines

When writing tab labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):

\> \*\*Do:\*\* My tasks

\> \*\*Don't:\*\* My Tasks

Avoid unnecessary words and articles in tab labels, such as “the”, “an” or “a”:

\> \*\*Do:\*\* Dashboard

\> \*\*Don't:\*\* The dashboard

Avoid ending tab labels in punctuation:

\> \*\*Do:\*\* Patients

\> \*\*Don't:\*\* Patients.

Use as few words as possible to describe each tab label:

\> \*\*Do:\*\* Payments

\> \*\*Don't:\*\* Payments in your clinic

Avoid all caps for tab labels:

\> \*\*Do:\*\* Dashboard

\> \*\*Don't:\*\* DASHBOARD

---

## Additional considerations

- If the content contained within the tabs UI has significance or is important for the user to see, consider using a different form of presentation that doesn't obscure it.
- If there is a particular tab panel you wish to show out of order of the tabs UI itself consider using the `selected` option on the tab component related to the panel to select the tab but prevent the order of the tabs being affected.


# Readme

## Usage

This section includes guidelines for designers and developers about the usage of this component in different contexts.

\> \*\*Do:\*\* - Use the tab panel component within the tab group component.
\- Use both non-interactive and interactive elements within the contents of the tab panel.

\> \*\*Don't:\*\* - Don't use the tab panel component outside of the tab group component.
\- Don't obscure important information within a tab panel that isn't revealed by default.

---

## Content guidelines

When writing tab labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):

\> \*\*Do:\*\* My tasks

\> \*\*Don't:\*\* My Tasks

Avoid unnecessary words and articles in tab labels, such as “the”, “an” or “a”:

\> \*\*Do:\*\* Dashboard

\> \*\*Don't:\*\* The dashboard

Avoid ending tab labels in punctuation:

\> \*\*Do:\*\* Patients

\> \*\*Don't:\*\* Patients.

Use as few words as possible to describe each tab label:

\> \*\*Do:\*\* Payments

\> \*\*Don't:\*\* Payments in your clinic

Avoid all caps for tab labels:

\> \*\*Do:\*\* Dashboard

\> \*\*Don't:\*\* DASHBOARD

---

## Additional considerations

- If the content contained within the tabs UI has significance or is important for the user to see, consider using a different form of presentation that doesn't obscure it.
- If there is a particular tab panel you wish to show out of order of the tabs UI itself consider using the `selected` option on the related tab component to select the tab but prevent the order of the tabs being affected.


# Readme

## Usage

This section includes guidelines for designers and developers about the usage of this component in different contexts.

\> \*\*Do:\*\* - Use the tab component within the tab group component.
\- Use the \`selected\` option to signify if the tab is selected.
\- Use text, icons and other non-interactive content within the tab.

\> \*\*Don't:\*\* - Don’t use tabs to navigate to other pages. Use navigation or links instead.
\- Don't use the tab component outside of the tab group component.
\- Don't add interactive elements, such as buttons and links, inside the tab component.

---

## Content guidelines

When writing tab labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):

\> \*\*Do:\*\* My tasks

\> \*\*Don't:\*\* My Tasks

Avoid unnecessary words and articles in tab labels, such as “the”, “an” or “a”:

\> \*\*Do:\*\* Dashboard

\> \*\*Don't:\*\* The dashboard

Avoid ending tab labels in punctuation:

\> \*\*Do:\*\* Patients

\> \*\*Don't:\*\* Patients.

Use as few words as possible to describe each tab label:

\> \*\*Do:\*\* Payments

\> \*\*Don't:\*\* Payments in your clinic

Avoid all caps for tab labels:

\> \*\*Do:\*\* Dashboard

\> \*\*Don't:\*\* DASHBOARD

---

## Additional considerations

- If the content contained within the tabs UI has significance or is important for the user to see, consider using a different form of presentation that doesn't obscure it.
- If there is a particular section you wish to show out of order of the tabs UI itself consider using the `selected` option to select the tab but prevent the order of the tabs being affected.


# Readme

## Usage

This section includes guidelines for designers and developers about the usage of this component in different contexts.

\> \*\*Do:\*\* - Use when you need to display tabular data in a view.
\- Use a \`\<table>\` element directly within the component.
\- Use inside a \[Card]\(/components/card/?example=with+table), and give the card a header.

\> \*\*Don't:\*\* - Don’t use to display list data.
\- Don’t use to display basic key and value pairs, consider a \[description list]\(https\://developer.mozilla.org/en-US/docs/Web/HTML/Element/dl) instead.
\- Don’t use tables for layout.
\- Don't use a primary button in every row of a table.

---

## Content guidelines

Headers in a table should be clear, accurate and predictable. When writing headers, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):

\> \*\*Do:\*\* User account

\> \*\*Don't:\*\* User Account

Include units of measurement symbols in the table header so they aren’t repeated throughout every single column:

\> \*\*Do:\*\* Temperature °C

\> \*\*Don't:\*\* Temperature

Avoid unnecessary words and articles in table headers, such as “the”, “an” or “a”:

\> \*\*Do:\*\* Description

\> \*\*Don't:\*\* A description

Keep decimals consistent. For example, don’t use 3 decimals in one row and 2 in others:

\> \*\*Do:\*\* 30.00
25.00

\> \*\*Don't:\*\* 30.000
25.0

---

## Additional considerations

- Nord’s table component acts as a lightweight and un-opinionated *wrapper* component for enhancing tabular data. It is up to the user of this component to make sure that the table markup they use is accessible.
- Despite the name the Nord table component does not supplement the HTML `<table>` element. Please ensure that a `<table>` element is a direct descendant of the table component.
- It’s important to pay close attention to semantics when authoring tables. The markup in the examples can be used as a starting point. However, be aware that [HTML tables have a large feature set](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table){rel="&#x22;nofollow&#x22;"} which cannot be fully covered in this documentation.
- When making adjustments to table columns such as width, color, alignment and other styles please consider using the HTML `<col>` and `<colgroup>` elements for applying them. Further information on the `<col>` and `<colgroup>` elements can be [found in the MDN docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/col){rel="&#x22;nofollow&#x22;"}.

---

## Advanced use-cases

The table component itself does not provide any functionality, only styles. This works well for simple or static tables, but there are instances where functionality such as sorting, resizing, or column dragging are required. This kind of functionality is out of scope for the table component, as the spectrum of possible use-cases is too broad for a single component to cover effectively. Whilst the table component is limited out of the box, these same limitations make it easy to integrate with third-party libraries which offer advanced functionality.

Broadly speaking, there are two categories of library for building advanced tables: *headless* and *component-based*.

### Which kind of table library should I use?

Each approach has subtle tradeoffs. Understanding these subtleties will help you make the right decision for your application and team.

#### Component-based Table Libraries

Component-based table libraries will typically supply you with a feature-rich drop-in solution, and ready-to-use components/markup complete with styles/theming.

**Pros:**

- Ship with ready-to-use markup/styles.
- Little setup required.
- Turn-key experience.

**Cons:**

- Less control over markup.
- Custom styles are typically theme-based.
- Larger bundle-sizes.

If you want a ready-to-use table and design/bundle-size are not hard requirements, then you should consider using a component-based table library.

#### Headless Table Libraries

Headless table libraries will typically supply you with functions, state, utilities and event listeners to build your own table markup or attach to existing table markups.

**Pros:**

- Full control over markup and styles.
- Supports all styling patterns (CSS, CSS-in-JS, UI libraries, etc).
- Smaller bundle-sizes.

**Cons:**

- More setup and effort required.
- No markup, styles or themes provided.

If you want a lighter-weight table or full control over the design, then you should consider using a headless table library.

### Recommendation for headless libraries

In the headless category, we recommend [Tanstack Table](https://tanstack.com/table/){rel="&#x22;nofollow&#x22;"}. Tanstack table offers integrations for many UI frameworks, such as Vue and React. It is easy to work with, and because it does not bring any HTML or styles itself, you can use it to render a plain, semantic `<table>` wrapped in a `<nord-table>`, and you will get all the necessary styles.

We have created examples in both Vue and React, showing how to combine Tanstack table with Nord's table component, in order to build a table with both sorting and resizable columns. Check out the [React example](https://nordhealth.design/components/table/?example=with+react+and+tanstack+table) and likewise the [Vue example](https://nordhealth.design/components/table/?example=with+vue+and+tanstack+table).

\[React / Tanstack table source]\(https\://github.com/nordhealth/advanced-table-examples/tree/main/nord-react-tanstack-table)
\[Vue / Tanstack table source]\(https\://github.com/nordhealth/advanced-table-examples/tree/main/nord-vue-tanstack-table)

### Recommendation for component-based libraries

In the component-based category, we recommend [AG Grid](https://www.ag-grid.com/){rel="&#x22;nofollow&#x22;"}, specifically the community edition. AG Grid is feature-rich, has extensive documentation, and offers integrations for many UI frameworks, such as Vue and React. AG Grid takes control of all rendering and output, but offers extension points for taking control of some aspects. It does not output a `<table>` element, so it cannot be used with Nord's own table component.

However it can be styled via themes, and we have created a Nord theme using our design tokens. The theme is published on npm as `@nordhealth/ag-theme-nord`. To use the theme, include the CSS in your project and add the class `ag-theme-nord` to the element wrapping AG Grid. You have to [configure legacy themes](https://www.ag-grid.com/javascript-data-grid/theming-migration/#continue-with-legacy-themes){rel="&#x22;nofollow&#x22;"} if you are using v33 or higher.

We have created examples in both Vue and React showing how to combine AG Grid with Nord's theme, in order to build a table with sorting, resizable columns, draggable and re-orderable columns, plus sticky/pinned columns. Check out the [React example](https://nordhealth.design/components/table/?example=with+react+and+ag+grid) and likewise the [Vue example](https://nordhealth.design/components/table/?example=with+vue+and+ag+grid).

\[React / AG Grid table source]\(https\://github.com/nordhealth/advanced-table-examples/tree/main/nord-react-ag-grid)
\[Vue / AG Grid table source]\(https\://github.com/nordhealth/advanced-table-examples/tree/main/nord-vue-ag-grid)


# Readme

## Usage

This section includes guidelines for designers and developers about the usage of this component in different contexts.

\> \*\*Do:\*\* - Use to group together selectable tags.
\- Use the appropriate \`role\` attribute on the tag group to provide additional semantics.
\- Use an \`aria-labelledby\` attribute referencing another element to best explain the contents of the tag group.

\> \*\*Don't:\*\* - Don’t add components other than selectable tags and in some instances visually hidden components to the tag group.
\- Don’t skip the addition of an appropriate label if the added \`role\` attribute value calls for it.
\- Don’t use for building grid based layouts.

---

## Content guidelines

Tags should use short and clear labels for easy scanning. They should be concise and informative:

\> \*\*Do:\*\* Has seizures

\> \*\*Don't:\*\* This dog has seizures often

When writing tag labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):

\> \*\*Do:\*\* Service dog

\> \*\*Don't:\*\* Service Dog

Avoid unnecessary words and articles in tag labels, such as “the”, “an” or “a”:

\> \*\*Do:\*\* Service dog

\> \*\*Don't:\*\* A service dog

---

## Variants

This section describes the different component variants, their purpose, and when to use each variant.

| Name      | Purpose                                                                                     |
| --------- | ------------------------------------------------------------------------------------------- |
| `default` | The default variant renders a group of tags to emphasize that they’re thematically-related. |
| `spaced`  | The spaced variant renders a gap between the tags to space them out evenly.                 |


# Readme

## Usage

This section includes guidelines for designers and developers about the usage of this component in different contexts.

\> \*\*Do:\*\* - Use for labeling, categorizing, or organizing objects.
\- Ensure there is enough space around tags when they are interactive.
\- Always position tags so that it’s easy to understand what object they’re related to.
\- Keep in mind that tags can increase the amount of cognitive noise, particularly when combined with the status component, so use them in moderation.

\> \*\*Don't:\*\* - Don’t use for showing the status of an object, use the \[badge component]\(/components/badge/) instead.
\- Don’t use when you want to highlight something that has been added recently, use the \[badge component]\(/components/badge/) instead.
\- Don’t use alternatives to existing tag variants.

---

## Content guidelines

Tags should use short and clear labels for easy scanning. They should be concise and informative:

\> \*\*Do:\*\* Has seizures

\> \*\*Don't:\*\* This dog has seizures often

When writing tag labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):

\> \*\*Do:\*\* Service dog

\> \*\*Don't:\*\* Service Dog

Avoid unnecessary words and articles in tag labels, such as “the”, “an” or “a”:

\> \*\*Do:\*\* Service dog

\> \*\*Don't:\*\* A service dog

---

## Variants

This section describes the different component variants, their purpose, and when to use each variant.

| Name         | Purpose                                           |
| ------------ | ------------------------------------------------- |
| `default`    | The default variant for a non-interactive tag.    |
| `removable`  | Used for tags that can be removed by the user.    |
| `selectable` | Used for tags that can be selected or deselected. |


# Readme

## Usage

This section includes guidelines for designers and developers about the usage of this component in different contexts.

\> \*\*Do:\*\* - Use to allow text input where the expected input is long.

\> \*\*Don't:\*\* - Don’t use when the expected text input is short. Use input component instead.

---

## Hint placement

Hint text is rendered above the control by default to preserve existing behavior for current consumers. Use the `hint-below` property to opt in to rendering the hint below the control and any error.

This is a non-breaking rollout for teams adopting the new layout gradually. Existing integrations keep the current placement unless `hint-below` is explicitly set.

---

## Content guidelines

Textarea labels act as a title for the text field. Labels should typically be short and in noun form:

\> \*\*Do:\*\* Company name

\> \*\*Don't:\*\* What is your company name?

When writing textarea labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):

\> \*\*Do:\*\* Provide description

\> \*\*Don't:\*\* Provide Description

When a textarea isn’t part of a form and is placed individually on a page, you could provide the textarea label as a call to action:

\> \*\*Do:\*\* Leave a comment

\> \*\*Don't:\*\* Comment

Do not use colons in textarea labels:

\> \*\*Do:\*\* Provide description

\> \*\*Don't:\*\* Provide description:


# Readme

## Usage

This section includes guidelines for designers and developers about the usage of this component in different contexts.

\> \*\*Do:\*\* - Use in combination with \[Toast]\(/components/toast/) so that toasts get styled and announced to screen readers correctly.
\- Add as close to the bottom of the document as possible, ideally near the body closing tag, to maintain correct stacking order.

\> \*\*Don't:\*\* - Don’t use for grouping anything other than toast components

---

## Content guidelines

Toast content should be clear, accurate and understandable by the user:

\> \*\*Do:\*\* Message sent

\> \*\*Don't:\*\* Your message has been sent

When writing the toast content, use the {noun} + {verb} content formula:

\> \*\*Do:\*\* Patient created

\> \*\*Don't:\*\* Your patient has been successfully updated

Use a maximum of 3 words when writing the toast content:

\> \*\*Do:\*\* Product updated

\> \*\*Don't:\*\* Your product was updated just now

When writing the toast content, always write it in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):

\> \*\*Do:\*\* Message sent

\> \*\*Don't:\*\* Message Sent

Avoid unnecessary words and articles in the toast content, such as “the”, “an” or “a”:

\> \*\*Do:\*\* Changes saved

\> \*\*Don't:\*\* The changes were saved

Never end in punctuation:

\> \*\*Do:\*\* Message sent

\> \*\*Don't:\*\* Message sent.

---

## Additional considerations

- Toasts are complicated from an accessibility perspective. Whilst they are a convenient UI pattern for messaging, they present difficulties for keyboard or screen reader users. Therefore careful consideration should be given as to whether a toast is the correct choice.
- If the message cannot be conveyed in 3 words or less, consider re-wording. If the message cannot be shortened any further, consider choosing a different pattern than toast.


# Readme

## Usage

This section includes guidelines for designers and developers about the usage of this component in different contexts.

\> \*\*Do:\*\* - Use for short messages that confirm an action taken by a user.
\- Use for ephemeral status updates.
\- Use in combination with \[Toast group]\(/components/toast-group) so that toasts get styled and announced to screen readers correctly.

\> \*\*Don't:\*\* - Don’t use toasts for critical information that user needs to act on. Consider using a \[Notification]\(/components/notification) instead.
\- Don’t rely on users seeing toasts. Toasts are transient and should not be used for critical messages.
\- Don’t place interactive content in toasts. Assistive technology like screen readers will not convey any semantics when announcing toast messages.
\- Don’t use for error messages unless absolutely necessary. Try to favor a \[Banner]\(/components/banner/) for error messaging instead.

---

## Content guidelines

Toast content should be clear, accurate and easy to understand:

\> \*\*Do:\*\* Message sent

\> \*\*Don't:\*\* Your message has been sent

When writing the toast content, use the {noun} + {verb} content formula:

\> \*\*Do:\*\* Patient created

\> \*\*Don't:\*\* Your patient has been successfully updated

Use a maximum of 3 words when writing the toast content:

\> \*\*Do:\*\* Product updated

\> \*\*Don't:\*\* Your product was updated just now

When writing the toast content, always write it in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):

\> \*\*Do:\*\* Message sent

\> \*\*Don't:\*\* Message Sent

Avoid unnecessary words and articles in the toast content, such as “the”, “an” or “a”:

\> \*\*Do:\*\* Changes saved

\> \*\*Don't:\*\* The changes were saved

Never end in punctuation:

\> \*\*Do:\*\* Message sent

\> \*\*Don't:\*\* Message sent.

---

## Additional considerations

- Toasts are complicated from an accessibility perspective. Whilst they are a convenient UI pattern for messaging, they present difficulties for keyboard or screen reader users. Therefore careful consideration should be given as to whether a toast is the correct choice.
- If the message cannot be conveyed in 3 words or less, consider re-wording. If the message cannot be shortened any further, consider choosing a different pattern than toast.


# Readme

## Usage

This section includes guidelines for designers and developers about the usage of this component in different contexts.

\> \*\*Do:\*\* - Use toggles when your intent is to turn something on or off instantly.
\- Use for any feature or option that can be turned on or off.
\- If a physical switch would work for the action, the toggle is probably the best component to use.
\- Use for making it possible to choose one or more options from a limited number of options.

\> \*\*Don't:\*\* - Toggles should never require users to click a button to apply or save the setting.
\- Avoid using when you have more than 10 options to choose from.
\- Don’t change the selection of another toggle when another one is clicked. Only exception is when a toggle is used to make a bulk selection of multiple items.

---

## Hint placement

Hint text is rendered above the control by default to preserve existing behavior for current consumers. Use the `hint-below` property to opt in to rendering the hint below the control and any error.

This is a non-breaking rollout for teams adopting the new layout gradually. Existing integrations keep the current placement unless `hint-below` is explicitly set.

---

## Content guidelines

Toggle labels should be clear, accurate and predictable. It should be possible for the user to understand what they are selecting:

\> \*\*Do:\*\* User settings

\> \*\*Don't:\*\* Option 1

When writing toggle labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):

\> \*\*Do:\*\* User settings

\> \*\*Don't:\*\* User Settings

Avoid ending in punctuation if it’s a single sentence, word, or a fragment:

\> \*\*Do:\*\* Show dashboard

\> \*\*Don't:\*\* Show dashboard.

Do not use commas or semicolons at the end of each line

\> \*\*Do:\*\* Patients

\> \*\*Don't:\*\* Patients;


# Readme

## Usage

This section includes guidelines for designers and developers about the usage of this component in different contexts.

\> \*\*Do:\*\* - Use a tooltip if an interactive element requires more explanation.
\- Use a tooltip to provide additional information, such as UI shortcuts.
\- Use the \`label\` attribute on icons used for shortcuts for accessibility.
\- Use clear and accurate phrasing.
\- Be consistent with positioning of tooltips in the user interface.

\> \*\*Don't:\*\* - Don’t use interactive elements such as links or buttons inside a tooltip.
\- Don’t rely on tooltips when you have room to provide more explanation.
\- Don’t depend on tooltips for vital information.

---

## Content guidelines

Tooltips should be clear and informative, but not imperative to using the interface they refer to. They should not contain interactive elements such as buttons or links.

\> \*\*Do:\*\* Export – Export data as a spreadsheet

\> \*\*Don't:\*\* Export – Export data as a CSV, more information on CSVs

Tooltips should provide useful information and not repeat information that is already present.

\> \*\*Do:\*\* Export – Export data as a spreadsheet

\> \*\*Don't:\*\* Export – Export data

When writing tooltips, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):

\> \*\*Do:\*\* Export data as a spreadsheet

\> \*\*Don't:\*\* Export Data As a Spreadsheet

Use tooltips sparingly. If your UI is requiring a lot of tooltips, consider revising the interface to provide better explanations and better labelling.

---

## Additional considerations

- Always provide a tooltip for icon-only buttons or a button with an associated keyboard shortcut.
- Don’t use tooltip to communicate critical information, including errors.
- Use sparingly. If you’re building something that requires a lot of tooltips, take a step back and work on clarifying the design and the language used instead.


# Readme

## Usage

This section includes guidelines for designers and developers about the usage of this component in different contexts.

\> \*\*Do:\*\* - Applications that utilize the top bar can allow users to customize the color of the top bar to match their preference. \[View an example]\(/components/top-bar/?example=color).
\- If your application allows it, include search to help users find resources and navigate.
\- Include a user menu in the end slot of the top bar.
\- Use the \[layout component]\(/components/layout/?example=top-bar) to provide structure for the top bar component. We’ve also created \[an example which shows full theming capabilities]\(/components/layout/?example=theming).

\> \*\*Don't:\*\* - Don’t use for global navigation. Use the \[navigation component]\(/components/navigation/) instead.
\- Don’t allow the user to set a top bar color that doesn’t provide enough contrast with the content.
\- Don’t allow the user to freely pick a hex code as the top bar color. Instead, offer a choice from a predefined palette of colors which provides sufficient contrast with the content. \[View an example]\(/components/top-bar/?example=color).

---

## Theming

Please see the [Top Bar theming](https://nordhealth.design/themes/#top-bar-theming) section in our theming documentation for detailed guidelines.

\[Theming Guidelines]\(/themes/#top-bar-theming)


# Readme

## Usage

This section includes guidelines for designers and developers about the usage of this component in different contexts.

\> \*\*Do:\*\* - Use to truncate single-line text inside a constrained container (table cells, nav items, card metadata) so the layout never breaks.
\- Trust the component to add a tooltip only when the text actually overflows — there is no need to detect truncation in application code.
\- Provide plain text as the slotted content; the full string is mirrored into the tooltip for screen reader and pointer users.

\> \*\*Don't:\*\* - Don’t use for multi-line text — this component is single-line only. Use \`-webkit-line-clamp\` directly when you need multi-line clamping.
\- Don’t nest interactive elements (links, buttons) inside the slot. Apply the truncate component to the label of the interactive element instead.
\- Don’t add a \`title\` attribute on the truncate or its parent. It would produce a second, browser-native tooltip competing with the one this component already provides.

---

## Additional considerations

- The key feature is automatic overflow detection: the component measures the slotted text against its container and only adds the ellipsis and tooltip when the content actually overflows. There is no need to detect truncation in application code.
- Truncation is performed in JS — the text node is replaced with a pre-truncated string plus ellipsis — which avoids the CSS `text-overflow: ellipsis` quirk where clicking inside clipped text shifts the line and loses the ellipsis, because the visible text now fits exactly.

## Accessibility

The truncate component splits text between two accessibility sources: the visible truncated string is the accessible **name** of the host, and the full text is exposed as the accessible **description** via `aria-describedby` to a portaled `nord-tooltip`. Screen readers announce both — name then description — as the standard `<abbr title>`-style pairing, not a double-reading of the same content.

### Set `aria-label` on interactive parents

When `nord-truncate` is placed inside an interactive element (`nord-button`, `<a>`, menu item, tab, etc.), the parent's accessible name is computed from its slotted content — which means the parent ends up named with the truncated string (e.g. `"Lorem ipsu…"`). That is useless to a screen reader user.

Add `aria-label` with the **full text** on the interactive parent:

```html
<nord-button aria-label="Open patient record for Suspendisse blandit sodales…">
  <nord-truncate>Suspendisse blandit sodales…</nord-truncate>
</nord-button>
```

For non-interactive parents (`<p>`, `<td>`, `<span>`, `<div>`), no `aria-label` is needed — the truncate's own `aria-describedby` wiring already exposes the full text to assistive tech.


# Readme

## Usage

This section includes guidelines for designers and developers about the usage of this component in different contexts.

\> \*\*Do:\*\* - Use to hide text visually from the screen, but keep it available to assistive technologies, such as screen readers.

\> \*\*Don't:\*\* - Don’t use for hiding interactive content.


# Accessibility

\*This is an accessibility checklist that we use when building new features. It helps us improve the experience for everyone who uses our products and ensures our high standards are met.\*

For our public commitment to accessibility, see the [accessibility statement](https://nordhealth.design/resources/accessibility-statement/).

## Generic

\- \[ ] \*\*Nord's automated accessibility tests pass.\*\*
You can run automated tests by running "pnpm test" in the \[root of the project]\(https\://github.com/nordhealth/design-system). Please note this runs Axe too.
\- \[ ] \*\*Passes automated validation using Axe Chrome extension.\*\*
\[Download and install]\(https\://chrome.google.com/webstore/detail/axe-devtools-web-accessib/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US) Axe Chrome extension to check off this item.
\- \[ ] \*\*Works with NVDA screen reader on Windows.\*\*
\[Download and install]\(https\://www\.nvaccess.org/download/) NVDA for Windows to check off this item.
\- \[ ] \*\*Works with Jaws screen reader on Windows.\*\*
\[Download and install]\(https\://support.freedomscientific.com/Downloads/JAWS) Jaws for Windows to check off this item.
\- \[ ] \*\*Works with VoiceOver on macOS.\*\*
macOS ships with VoiceOver which can be enabled \[through preferences]\(https\://support.apple.com/guide/voiceover/welcome/mac).
\- \[ ] \*\*Works with TalkBack on Android.\*\*
Android ships with TalkBack which can be enabled by following \[these instructions]\(https\://support.google.com/accessibility/android/answer/6007100?hl=en).
\- \[ ] \*\*Works with Windows high contrast mode.\*\*
\[High contrast mode]\(https\://assistivlabs.com/assistive-tech/display/high-contrast-mode) uses a limited color palette with contrasting colors to make an interface easier to use.
\- \[ ] \*\*Works when text size is increased to 200%.\*\*
Follow \[these instructions]\(https\://support.google.com/chrome/answer/96810?hl=en\&co=GENIE.Platform%3DDesktop) to change the default text size in Chrome.
\- \[ ] \*\*Works when zoomed in 400%.\*\*
Most browsers allow you to zoom in or out using Cmd and +/- keys.

## Content

\- \[ ] \*\*Content is written in a plain and clear language.\*\*
Accessible writing ensures your content is understandable for everyone to read. Use \[Readability Analyzer set to '8th grade level']\(https\://datayze.com/readability-analyzer.php) to check your writing.
\- \[ ] \*\*\<button>, \<a>, and \<label> contents are unique and descriptive.\*\*
Avoid terms like "click here" and "read more" which do not provide any context for the user.
\- \[ ] \*\*There is only one \<h1> heading per page.\*\*
The \[h1 element]\(https\://dequeuniversity.com/rules/axe/4.1/page-has-heading-one) should be used to communicate the high-level purpose of the page or view.
\- \[ ] \*\*Heading elements appear in logical order.\*\*
The order of heading elements should descend, based on the depth of the content.
\- \[ ] \*\*Heading levels aren't skipped.\*\*
If heading levels need to be skipped for a specific visual style, use CSS classes instead.
\- \[ ] \*\*List elements (\<ol>, \<ul>, \<dl>) are used for list content.\*\*
This may also include sections of related content and items displayed in a grid layout.
\- \[ ] \*\*A skip link is provided that is keyboard focusable.\*\*
A skip link is used to provide direct access to the main content of a page or view.
\- \[ ] \*\*Main content's line height is at least 1.5 times the font size.\*\*
People with low vision require increased space between lines to be able to read text.

## Markup

\- \[ ] \*\*HTML has been validated with W3 validator.\*\*
\[Valid HTML]\(https\://validator.w3.org/nu/) helps to provide a consistent, expected experience across all browsers.
\- \[ ] \*\*\<html> element has correct lang attribute.\*\*
This \[helps assistive technologies]\(https\://dequeuniversity.com/rules/axe/4.1/html-has-lang), such as screen readers, to pronounce content correctly.
\- \[ ] \*\*Each page has a unique \<title>.\*\*
This \[helps people]\(https\://dequeuniversity.com/rules/axe/4.1/document-title) using assistive technologies to understand what view they are going to start navigating.
\- \[ ] \*\*Markup uses landmarks to indicate content regions.\*\*
\[Landmarks]\(https\://dequeuniversity.com/rules/axe/4.1/region) help communicate the layout, and allow direct access to these regions.
\- \[ ] \*\*No tabindex attribute values other than 0 or -1.\*\*
Elements that are inherently focusable \[don't require a tabindex]\(https\://dequeuniversity.com/rules/axe/4.1/tabindex).
\- \[ ] \*\*No autofocus attributes in markup.\*\*
Autofocus HTML attribute should be avoided. Focus into fields programmatically instead where necessary.
\- \[ ] \*\*No title attribute tooltips in markup.\*\*
The title attribute has \[multiple issues]\(https\://developer.mozilla.org/en-US/docs/Web/HTML/Global\_attributes/title#accessibility\_concerns) and should not be used.
\- \[ ] \*\*\<a> element is used for all links.\*\*
Links should always have a href attribute, even in SPAs. Without this, the link won't be properly recognized.
\- \[ ] \*\*\<button> element is used for all buttons.\*\*
Users of assistive technology expect a button to do an action. If you need to navigate into another view, use a link.
\- \[ ] \*\*\<table> element is used to describe tabular data.\*\*
Do you need to display data in rows and columns? Use table element.
\- \[ ] \*\*\<th> is used for table headers.\*\*
Correct use of table headers helps users of assistive technology to understand your data.
\- \[ ] \*\*\<caption> element is used to provide titles for tables.\*\*
A caption should describe what kind of information the table contains.
\- \[ ] \*\*\<nord-visually-hidden> is used instead of aria-label.\*\*
\[Nord Visually Hidden]\(/components/visually-hidden/) provides wider support for assistive technology and different locales.

## Keyboard

\- \[ ] \*\*Tested to be keyboard accessible.\*\*
Some people cannot use a mouse, so it's important that the interface can be navigated with a keyboard.
\- \[ ] \*\*All interactive elements have visible focus styles.\*\*
Can a person navigating with a keyboard, \[switch]\(https\://axesslab.com/switches/), voice control, or screen reader see where they currently are?
\- \[ ] \*\*Keyboard focus order matches the visual layout.\*\*
Can a person move around the page in a predictable way?
\- \[ ] \*\*There are no invisible focusable elements.\*\*
Remove any elements that are not presently meant to be discoverable.
\- \[ ] \*\*Buttons are accessible using space and enter keys.\*\*
Users of assistive technology expect a button to behave in a certain way.
\- \[ ] \*\*Dialogs and overlays can be closed using esc key.\*\*
As well as using the "close" button, it should be possible to close a dialog by pressing the Esc key.

## Images

\- \[ ] \*\*All \<img> elements have alt attribute values.\*\*
alt attributes help explain images to people who may not be able to view them.
\- \[ ] \*\*Complex charts and graphs have text alternatives.\*\*
Describe all visible information in text format as well. This includes graph axes, data points and labels.
\- \[ ] \*\*Decorative \<svg> elements use aria-hidden='true'.\*\*
Decorative images don't communicate information that is required to understand the interface's overall meaning.
\- \[ ] \*\*\<img> elements with an \<svg> source use role='img' attribute.\*\*
If you are using embedded SVGs, \[always set role="img"]\(https\://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/img\_role#svg\_and\_roleimg) and give the element a label.

## Forms

\- \[ ] \*\*All inputs are associated with a corresponding label element.\*\*
Use a for/id pairing to guarantee the highest level of browser support.
\- \[ ] \*\*\<fieldset> and \<legend> elements are used where appropriate.\*\*
Use fieldset to group sections of related inputs, and legend to provide a label for the section.
\- \[ ] \*\*Form input fields support autocomplete where appropriate.\*\*
Supporting autocomplete allows users to utilise existing text entry features on their device, minimising friction when filling in forms.
\- \[ ] \*\*Input error messages are associated with the inputs they correspond to.\*\*
This allows users to clearly understand the difference between the input and the error.

## Color contrast

\- \[ ] \*\*All text contents have a contrast ratio of at least 4.5:1.\*\*
Level AA compliance requires a contrast ratio of 4.5:1.
\- \[ ] \*\*All UI components have a contrast ratio of at least 3:1.\*\*
Level AA compliance requires a contrast ratio of 3:1.
\- \[ ] \*\*Interface has been tested with a color blindness simulator.\*\*
If you are not suffering from a color vision deficiency, it's hard to imagine what it looks like to be colorblind.
\- \[ ] \*\*Color isn't the only way information/meaning is conveyed.\*\*
This makes it impossible for people who are visually impaired, or who struggle to distinguish colors, to access information.

## Mobile

\- \[ ] \*\*Website can be rotated to any orientation.\*\*
Does the interface allow both landscape and portrait orientations?
\- \[ ] \*\*Website works on 320px wide viewport.\*\*
Make sure the interface stays usable even on the smallest viewports.
\- \[ ] \*\*The whole page doesn't scroll horizontally.\*\*
Requiring users to scroll horizontally can be difficult for some people.
\- \[ ] \*\*All touch targets are at least 44x44px, except when placed inline.\*\*
Ensure that touch target sizes are \[large enough]\(https\://www\.w3.org/WAI/WCAG21/Understanding/target-size.html) for users to activate them.
\- \[ ] \*\*Viewport zooming isn't disabled.\*\*
Some users need to increase the size of content so that they can read it. Do not stop them from doing this.


# Color System

\*Nord Design System uses a color system to guide our users, create a branded look-and-feel, draw attention to important information, and make content more accessible for everyone.\*

![Nord Color System](https://nordhealth.design/img/colors/colors.svg){.n-border.n-border-radius.n-brand-therapy height="450" width="800"}![Nord Color System](https://nordhealth.design/img/colors/colors-vet.svg){.n-border.n-border-radius.n-brand-veterinary height="450" width="800"}

When designing digital products you can use Nord Design System’s [color system](https://nordhealth.design/core/tokens/) to pick color combinations that work harmoniously, adapt based on usage, and provide support for different appearance modes like light and dark.

---

## Principles

### Use sparingly and intentionally

Nord Design System uses [functional coloring](https://nordhealth.design/core/tokens/) that supports products designed to be run on workstations. Color is used to communicate not to decorate. We use color sparingly and intentionally in order to emphasize important information. The color system facilitates all-day use while minimizing visual fatigue.

### Utilize color roles

We offer a [curated palette of colors](https://nordhealth.design/core/tokens/) that are intended for specific roles within Nord Design System. For example, we apply consistent coloring to [components](https://nordhealth.design/components/) such as text, status, buttons, and navigation. This helps users to identify a component and understand its relationship to its environment.

### Make it accessible

When the color system is applied, it will be in compliance with color [accessibility standards](https://nordhealth.design/design/foundations/accessibility-checklist/). We support [WCAG 2.1](https://www.w3.org/TR/WCAG21/#distinguishable){rel="&#x22;nofollow&#x22;"} level AA which requires 4.5:1 contrast for text. We never rely solely on color for communication in Nord Design System. Accessibility ensures that our product works for people with visual impairments and improves legibility for all users.

---

## Applying colors to interface

Nord Design System uses common patterns of color application to create consistency and convey meaning. The below sections explain in detail how to use and apply [Nord Design System’s colors](https://nordhealth.design/core/tokens/) in different contexts.

### Surface colors

Surface colors are the default UI surfaces for applications. Surface colors are used for pages, modals, tables, headers, and cards. Surfaces live on top of backgrounds. All content such as text, buttons, forms, and icons should be placed on a surface.

The basic structure of an application in Nord Design System is `Background > Surface > Content`.

![Surface colors](https://nordhealth.design/img/colors/1.png){.n-border height="950" loading="lazy" style="border-radius: var(--n-border-radius)" width="1600"}

### Text colors

Text always appears on a surface and contains modifiers to indicate hierarchy, status, and importance.

![Text colors](https://nordhealth.design/img/colors/2.png){.n-border height="950" loading="lazy" style="border-radius: var(--n-border-radius)" width="1600"}

### Accent colors

This is the accent color for a design. It is used as primary button background, hero area backgrounds, selected states, and such.

![Accent colors](https://nordhealth.design/img/colors/3.png){.n-border.n-brand-therapy height="950" loading="lazy" style="border-radius: var(--n-border-radius)" width="1600"}![Accent colors](https://nordhealth.design/img/colors/3-vet.png){.n-border.n-brand-veterinary height="950" loading="lazy" style="border-radius: var(--n-border-radius)" width="1600"}

### Navigation colors

This is the color for sidebar navigation. The sidebar color helps to distinguish navigation from other surfaces.

![Navigation colors](https://nordhealth.design/img/colors/4.png){.n-border.n-brand-therapy height="950" loading="lazy" style="border-radius: var(--n-border-radius)" width="1600"}![Navigation colors](https://nordhealth.design/img/colors/4-vet.png){.n-border.n-brand-veterinary height="950" loading="lazy" style="border-radius: var(--n-border-radius)" width="1600"}

### Border colors

Borders can define the edges of a component or separate content areas.

![Border colors](https://nordhealth.design/img/colors/5.png){.n-border height="950" loading="lazy" style="border-radius: var(--n-border-radius)" width="1600"}

### Status colors

Color can be used to highlight important information by giving it a status. For example the green success status indicates a strong positive state.

![Status colors](https://nordhealth.design/img/colors/6.png){.n-border height="950" loading="lazy" style="border-radius: var(--n-border-radius)" width="1600"}

### Button colors

Button colors are used to define the default button style and states in Nord Design System.

![Button colors](https://nordhealth.design/img/colors/7.png){.n-border height="950" loading="lazy" style="border-radius: var(--n-border-radius)" width="1600"}

### Icon colors

Icon colors should be used when an icon is placed on a surface. If an icon appears on the accent color, use the text-on-accent color in place of the default icon color.

![Icon colors](https://nordhealth.design/img/colors/8.png){.n-border.n-brand-therapy height="950" loading="lazy" style="border-radius: var(--n-border-radius)" width="1600"}![Icon colors](https://nordhealth.design/img/colors/8-vet.png){.n-border.n-brand-veterinary height="950" loading="lazy" style="border-radius: var(--n-border-radius)" width="1600"}

---

## Figma usage

You can find the color variables for all our themes in the [Figma Toolkit](https://nordhealth.design/design/foundations/figma/).

---

## Getting support

Have a question about color usage? Please head over to the [Support page](https://nordhealth.design/resources/support/) for more guidelines and ways to contact us.


# Color Utilities

\*Nord Design System includes a collection of color utilities that are meant for creating and maintaining consistent and accessible color palettes.\*

Integrating `@nordhealth/color` into your project is straightforward. You can start using our color utilities immediately by adding this tag to the `<head>` of your application:

```html
<script src="https://nordcdn.net/ds/color/3.0.18/index.min.js"></script>
```

With the above script tag added, you now have access to all of Nord’s color utilities via `NordColor` function:

```html
<script>
  const contrastRatio = NordColor.getContrastRatio(textColor, backgroundColor)
  const colorPalette = NordColor.getColorPalette({ hues: 18 })
  const hexToRgb = NordColor.hexToRgb('#3559c7')
  const rgbToHex = NordColor.rgbToHex('rgb(53, 89, 199)')
</script>
```

\> \[!WARNING]
\> Whilst this is a fast way to get started, we recommend using a bundler for production, for optimal performance. For instructions, keep reading below.

---

## Installation

Before moving further with the installation, please make sure you have [Node.js](https://nodejs.org/en/){rel="&#x22;nofollow&#x22;"} installed on your machine. You can install the latest version through their website.

If you’re planning on using Nord Design System’s Color Utilities in a project that doesn’t yet use [Node Package Manager](https://www.npmjs.com){rel="&#x22;nofollow&#x22;"}, you’ll have to first create a [package.json](https://docs.npmjs.com/files/package.json){rel="&#x22;nofollow&#x22;"} file. To do this, run `npm init` and follow the steps provided. Once finished, you can install Nord’s Color Utilities by following the instructions below.

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

```bash
# With npm
npm install @nordhealth/color

# With pnpm
pnpm install @nordhealth/color

# With Yarn
yarn add @nordhealth/color
```

Once installed, you can import the necessary tools from the color package:

```js
// Import one utility
import { getContrastRatio } from '@nordhealth/color'
```

```js
// Import all utilities
import { getColorPalette, getContrastRatio, hexToRgb, rgbToHex } from '@nordhealth/color'
```

---

## Contrast Ratio utility

`getContrastRatio` utility calculates and returns the contrast ratio between two CSS colors. Most commonly used for calculating the contrast between text and background. Please note that the utility expects the input color to be in `HEX` or `RGB` format:

```js
// Get contrast ratio between two colors
const textColor = '#fafafa'
const backgroundColor = '#fafafa'

const contrastRatio = getContrastRatio(textColor, backgroundColor)
```

This utility can be be used to determine whether a certain color combination passes the color contrast requirements (4.5:1 or higher contrast). We’re utilizing it in our [Design Tokens documentation](https://nordhealth.design/core/tokens/) to determine accessible color combinations.

---

## Color Palette utility

`getColorPalette` utility takes a valid CSS color as the base which is used for generating complementary colors. This utility is meant for creating and maintaining consistent and accessible color palettes. We use it internally to develop our existing Figma color palettes and to test new color variations:

```js
// Generate a color palette with 18 hues
const colorPalette = getColorPalette({ hues: 18 })
```

This utility can be be used to for example [generate status colors programmatically](https://nordhealth.design/color-generator/). Combined with `getTextColor` utility you can make sure that generated color combinations stay accessible.

`getColorPalette` also allows you to set the number of color hues, number of shades, the amount of lightness, and whether gray is included or not:

```js
// Generate a color palette with 12 hues and 1 shade
getColorPalette({ hues: 12, shades: 1 })

// Generate a color palette with 12 hues, 1 shade and a gray hue
getColorPalette({ hues: 12, shades: 1, gray: true })

// Generate a color palette with 12 hues and 1 shade, based on a custom accent color
getColorPalette({ hues: 12, shades: 1, accent: '#2a469d' })

// Generate a color palette with 12 hues and 1 shade, with custom lightness
getColorPalette({ hues: 12, shades: 1, lightness: 0.7 })
```

Here’s a list of all available options with their default values:

```js
getColorPalette({
  accent: nColorAccent, // {String}  Valid CSS color to be used as the base for calculations
  hues: 12, // {Number}  How many hues should be generated based on the accent color
  shades: 1, // {Number}  How many shades of each hue should be generated
  lightness: 0.5, // {Number}  Controls the overall lightness of color palettes (0-1)
  gray: false // {Boolean} Whether or not to include a specific gray palette
})
```

---

## Hex to RGB utility

`hexToRgb` utility converts a HEX color to a RGB color:

```js
// Convert hex to rgb
const hex = '#3559c7'
const rgb = hexToRgb(hex) // outputs "rgb(53, 89, 199)"
```

---

## RGB to HEX utility

`rgbToHex` utility converts a RGB color to a HEX color:

```js
// Convert rgb to hex
const rgb = 'rgb(53, 89, 199)'
const hex = rgbToHex(rgb) // outputs "#3559c7"
```

For more examples, see [Nord Color Generator](https://nordhealth.design/color-generator/).

---

## Color generator

[Nord Color Generator](https://nordhealth.design/color-generator/) is a tool that generates color palettes program­matically for use with [Nord Themes](https://nordhealth.design/design/themes/). While this tool demonstrates the capabilities of the color utilities found from `@nordhealth/color` package, it also acts as an internal tool for our team. We use it to develop our existing color palettes and test new color variations.

\*\*\[Color Generator]\(/color-generator)\*\* - Updated 28.4.2025

---

## Getting support

Have a question about color usage? Please head over to the [Support page](https://nordhealth.design/resources/support/) for more guidelines and ways to contact us.


# Principles

\*These principles form the foundation of our design system. They guide our team when working on different parts of the system and help us do better and more informed decisions.\*

## Put user needs first

We care for the people who use our products. We’re here to make their day-to-day and long-term work better and more pleasant through great user experience.

## Strive for consistency, not uniformity

We should use the same language and design patterns wherever possible. This helps people get familiar with our services. Same holds true for the system and its developer experience.

## Default to openness

We should share what we’re doing whenever we can. Building our services transparently increases their visibility and accountability and makes us push towards higher quality.

## Make it accessible

Our services are for everyone. We make sure people with different needs can use our products and that they meet the accessibility standards outlined in WCAG 2.1.

## Provide a good developer experience

Providing a good developer experience is very important to us. Developers should be able to start using our tools in minutes, not hours, days or weeks.

## Automate everything you can

We value the time of our colleagues, users, and our future selves over our own. We are always proactively looking for ways to automate repetitive tasks and testing.


# Figma Toolkit

\*Nord Figma Toolkit is a resource for exploration and collaboration. It contains all the building blocks for designing with Nord and allows you to build beautiful, accessible experiences rapidly.\*

Use our [documentation](https://nordhealth.design/components/){rel="&#x22;nofollow&#x22;"} for guidance on how to use the components in this toolkit. You can get started with the Nord Figma Toolkit by enabling the Nord Team Library inside Figma. Follow the below instruction for guidelines on how to do this.

---

## Nord Team Library

We offer access to the team libraries for Nordhealth team members. The libraries are:

- **Nord Figma Toolkit v4**: Color, type, grids, and components for building digital products using Nord.
- **Nordicons**: Nord's icon library.
- **Brand Elements**: Color, type, logo, and components for marketing and branding of Nordhealth.

## How to get the libraries

1. Sign into Figma using your Nordhealth email.
2. Open a design file.
3. Navigate to the Figma Menu then select Libraries.
4. In the Libraries modal that appears, find the team called Nordhealth and add the libraries called “Nord Figma Toolkit v4” and “Nordicons” (if they haven't been added to your file yet).

\*\[Video: /img/figma/nord-figma-toolkit-v4-add-library.mp4]\*

---

## Not a part of the Nord Figma team?

If you're working with Nordhealth as an external partner, we can add you to our Figma Team. We recommend that you do all of your work in the Nordhealth Figma Team instead of an external team. Please contact [our support](https://nordhealth.design/resources/support/) to gain access.

---

## Components

Included in the library are the Nord components and their variants. To insert a component go to the Asset panel and find the component you would like to use. You can drag it from the asset panel onto the canvas.

If a component includes variants, you will see them displayed in the right sidebar.

\*\[Video: /img/figma/nord-figma-toolkit-v4-drag-component.mp4]\*

Variables (tokens) plus Text, Drop Shadow, and Grid styles in Nord Figma Toolkit can be found from the right sidebar in Figma.

\*\[Video: /img/figma/nord-figma-toolkit-v4-apply-variables-and-styles.mp4]\*

---

## Theming

Nord Figma Toolkit supports theming natively in Figma using Figma Variables. To get started with theming, follow the below instructions.

1. In the right sidebar, click the "Apply variable mode" button (swatch icon).
2. Select the "Tokens" variable collection.
3. Choose your desired theme from the dropdown.

\*\[Video: /img/figma/nord-figma-toolkit-v4-theme-switching.mp4]\*

---

## Figma assets

In addition to components, we've created [Interface Templates v4](https://www.figma.com/design/G6E9A44lTA7aOFcNXosKCR/Interface-Templates-v4?node-id=2-9&t=VRwF0X33GVvnkgdH-1) that show our components in context. You can use this Figma Design File as an example of how to use Nord.

\*\*\[Nord Figma Toolkit v4]\(https\://www\.figma.com/design/yarhTRV8eFffff0BIpevi6/Nord-Figma-Toolkit-v4?node-id=1696-298217)\*\* - Updated 14.11.2025
\*\*\[Nordicons]\(https\://www\.figma.com/file/2uz2VbPlyMR5QHi9eGDMFf/Nordicons?node-id=2%3A36)\*\* - Updated 28.4.2025
\*\*\[Nord Interface Templates v4]\(https\://www\.figma.com/design/G6E9A44lTA7aOFcNXosKCR/Interface-Templates-v4?node-id=2-9)\*\* - Updated 14.11.2025
\*\*\[Nord Component Illustrations]\(https\://www\.figma.com/file/n03Z6aG3GAP31Oc9V6IKYy/Component-Illustrations?node-id=0%3A1)\*\* - Updated 28.4.2025

---

## Versioning and changelog

We follow [Semantic Versioning](https://semver.org/){rel="&#x22;nofollow&#x22;"} for Figma Toolkit. Under this scheme, version numbers and the way they change convey meaning about the underlying features and what has been modified from one version to the next. For more details, see [our changelog](https://nordhealth.design/changelogs/figma).

---

## Support

Need help with our Figma Toolkit? Please head over to the [Support page](https://nordhealth.design/resources/support/) for more guidelines and ways to contact us. For additional support specific to Figma, please reference the [Figma Help Center](https://resources/support/.figma.com/hc/en-us){rel="&#x22;nofollow&#x22;"}.


# Grid

\*The grid helps us achieve visual balance and makes the user interface easier to scan. With the grid we can create consistent layouts that work across devices, screen sizes, and environments.\*

## Grid anatomy

Grids in Nord Design System contain columns (1), gutters (2), and margins (3).

![Grid anatomy](https://nordhealth.design/img/grid/anatomy.png){.n:border style="border-radius: var(--n-border-radius)"}

---

## Columns

Columns define the areas of a design that contain content. The column widths are defined by percentages, and will resize based on the viewport. The number of columns available will also be affected by the viewport. A general rule of thumb is to allow the content to determine the breakpoints and how many columns to show at each viewport size.

![Grid colums](https://nordhealth.design/img/grid/columns.png){.n:border style="border-radius: var(--n-border-radius)"}

---

## Gutters

Gutters are fixed-width spacing between columns that separate content. We use our [space tokens](https://nordhealth.design/core/tokens/#space) to define the gutters for the grid.

![Grid gutters](https://nordhealth.design/img/grid/gutters.png){.n:border style="border-radius: var(--n-border-radius)"}

---

## Margins

Margins separate content from the left and right edges of the grid. Margins are fixed-width and defined by using our [space tokens](https://nordhealth.design/core/tokens/#space). In general, wider margins are more suited for larger screens. Margins should either be the same width, or wider than the gutter width.

![Grid margins](https://nordhealth.design/img/grid/margins.png){.n:border style="border-radius: var(--n-border-radius)"}

---

## Applying the Grid

Nord Design System offers options for customizing the grid. We support up to 12 column layouts that can be fixed or fluid.

![Applying the grid](https://nordhealth.design/img/grid/applying.png){.n:border style="border-radius: var(--n-border-radius)"}

### Layout across columns

Content can span multiple columns or use a subset of columns in a grid.

![Layout across columns](https://nordhealth.design/img/grid/across.png){.n:border style="border-radius: var(--n-border-radius)"}

### Gutter and margin spacing

We offer three types of spacing for gutters and margins: S, L, and XL. These options align with our space tokens. Typically, larger spacing makes sense on larger screens.

![Gutter and margin spacing](https://nordhealth.design/img/grid/spacing.png){.n:border style="border-radius: var(--n-border-radius)"}

### Fixed-width or fluid grid

You can apply a fixed-width or a fluid grid to your design. The fixed-width grid works well when dealing with long pages of content (fixed grid behaves like fluid grid when the viewport is smaller than the grid’s max-width):

\*\[Video: /img/grid/fixed.mp4]\*

The fluid grid work well when you’re dealing with screens that require lots of interaction or large datasets:

\*\[Video: /img/grid/fluid.mp4]\*

---

## Layout

For laying out applications, we place navigation (2) on the left and page header (1) across the top of the screen. The grid is applied to the content area (3).

![Layout](https://nordhealth.design/img/grid/layout.png){.n:border style="border-radius: var(--n-border-radius)"}

---

## Figma usage

You can find the different grids from our [Figma Toolkit](https://nordhealth.design/design/foundations/figma/).

---

## Getting support

Have a question about grid usage? Please head over to the [Support page](https://nordhealth.design/resources/support/) for more guidelines and ways to contact us.


# Iconography

\*Nord Design System uses icons to provide additional meaning or in places where text label doesn’t fit. They communicate messages at a glance and draw attention to important information.\*

Our icon library is called [Nordicons](https://nordhealth.design/icons/). Nordicons are designed to be used at small sizes and were built on a 20px grid which ensures that they render well when used with inline text or inside small interface items and buttons. Their design language is friendly and matches closely the shape and thickness of [Nordhealth’s logomark](https://nordhealth.design/design/foundations/brand/).

When designing new icons, try to stick to symbols that represent the most basic ideas, objects or actions. Always prioritize representing the function, rather than how nice the icon looks.

## Base grid

A 20 × 20px grid is used as the foundation for all [Nordicons](https://nordhealth.design/icons/) to determine line thickness, proportions, and shape across the entire icon set. This foundational grid guides you when designing new icons and ensures a unified visual look.

![](https://nordhealth.design/img/iconography/grid.svg){style="max-width:700px;"}

---

## Keyshapes

Predefined key lines give you consistent sizing for basic shapes and proportions across the icon set. This helps to establish relationships between similar icons.

![](https://nordhealth.design/img/iconography/guidelines.svg){style="max-width:700px;"}

---

## Style and Anatomy

The stylistic conventions of Nordicons create a meaningful connection with our [UI typeface](https://nordhealth.design/design/foundations/typography/) and the [Nordhealth logomark](https://nordhealth.design/design/foundations/brand/). The overall style is friendly, rounded, and matches closely the shape and thickness of both Nordhealth’s logomark and the typeface we use to set text in user interfaces.

1. Corner
2. Stroke
3. Stroke terminal
4. Bounding area
5. Counter stroke
6. Counter area

![](https://nordhealth.design/img/iconography/shape.svg){style="max-width:700px;"}

---

## Stroke

Nordicons use a consistent stroke width of 2px, including curves and angles. When designing new icons, maintain the same visual weight by using this stroke thickness for all new icons.

The only exception to this rule is when designing icons for tiny contexts. These icons use a stroke width of 3px and are marked with `-small` suffix in our [icon library](https://nordhealth.design/icons/).

![](https://nordhealth.design/img/iconography/stroke.svg){style="max-width:700px;"}

---

## Icon sizes

Nordicons are drawn on a 20 × 20px grid and are scaled up and down linearly to different sizes. The most common sizes Nordicons are used in are:

\- \`--n-size-icon-xxs\`: \`8px\` — This is a xx-small size for icons. Most commonly used for the caret icons inside navigation items and page progress icons.
\- \`--n-size-icon-xs\`: \`10px\` — This is a x-small size for icons. Most commonly used inside small form fields and buttons.
\- \`--n-size-icon-s\`: \`12px\` — This is a small size for icons. Most commonly used for icons inside buttons and select menu toggles.
\- \`--n-size-icon-m\`: \`16px\` — This is a medium size for icons. Most commonly used for icons that sit inside large buttons.
\- \`--n-size-icon-l\`: \`24px\` — This is a large size for icons. Most commonly used for illustrative purposes.
\- \`--n-size-icon-xl\`: \`36px\` — This is a x-large size for icons. Most commonly used for illustrative purposes.
\- \`--n-size-top-bar\`: \`52px\` — This is the default height of the top bar. It is also used for the small header variant.
\- \`--n-size-icon-xxl\`: \`72px\` — This is a xx-large size for icons. Most commonly used for illustrative purposes.

## Creating an icon

1. Create a 20 × 20px artboard for each icon.
2. Use 2px stroke to draw regular icons and 3px stroke to draw `-small` versions.
3. In most cases Nordicons shouldn’t have padding around them.
4. Set your workspace to snap to pixels and round most values to whole pixels.
5. Don’t use borders or strokes to draw the icon.
6. All possible shapes and paths should be combined into one.
7. Make sure to properly name layers and artboards.

---

## Figma usage

You can find the design guidelines for Nordicons from our Figma Toolkit.

\*\*\[Iconography Guidelines]\(https\://www\.figma.com/file/BzNVNU56npd4nCLVShMmor/Iconography-Guidelines?node-id=0%3A1)\*\* - Updated 25.1.2023

---

## Getting support

Have a question about iconography guidelines? Please head over to the [Support page](https://nordhealth.design/resources/support/) for more guidelines and ways to contact us.


# Naming

\*Different disciplines use names defined in the design system to communicate about tokens, components and similar. Hence, names must be modular, meaningful and pronounceable.\*

The following set of principles guide our team when naming things and help us do better and more informed decisions. These principles are adapted from Brad Frost’s [CSS Architecture for Design Systems](http://bradfrost.com/blog/post/css-architecture-for-design-systems/){rel="&#x22;nofollow&#x22;"}.

## Make it modular

Nord consists of independent modules which applies to our naming as well. Different parts of the system need to be clearly separated.

## Make it legible

Developers should be able to understand code at a glance and understand the purpose of any given part. Same is true for design components.

## Avoid conflicts

Since Nord’s components will be used on many platforms, it’s critical to ensure that its naming doesn’t conflict with other systems.

---

## Design Tokens

Users should be able understand the purpose of any given token at a glance. To make sure naming stays consistent and straightforward, we follow these guidelines:

- **Naming structure:** `{prefix}-{category}-{subcategory}-{name}`.
- **Prefix:** Token names always start with a prefix and a hyphen. For example `n-color-success` or `n-space-xl`. “N” stands for Nord Design System. Prefixing is critical to ensure that our naming doesn’t conflict with other systems.
- **Categorization:** Token names always include at least one category, like `color`, `space`, or similar. If it makes sense in your use case, you can also include subcategory in the name. For example `n-color-status-success` or `n-color-status-warning`.
- **Examples:** `n-color-accent`, `n-font-family-code`, `n-space-xl`.

---

## Sizes

We define sizing using T-shirt sizes. This makes it possible for anyone, technical or non-technical person, to understand the differences and how they relate to each other.

- **Keep it consistent and short:** Always use the short form version (s, m, l, xl) when naming components, tokens, and symbols. This makes it quicker for developers to reference them.
- **Default size:** `m` is always the default or the base value.
- **Larger than default:** When you want to define a size larger than `m` we use `l`, `xl`, `xxl`, and so on. If it’s a component, make it possible to pass the size via a “size” property.
- **Smaller than default:** When you want to define a size smaller than `m`, we use `s`, `xs`, `xxs`, and so on. If it’s a component, make it possible to pass the size via a “size” property.
- **Examples:** `n-space-l`, `n-space-xl`, `n-space-s`.

---

## Colors

Each color name contains a role, modifier and theme. This accommodate needs such as state, interactivity, and emphasis for different products. For example, a component may require color variations for hover, active, selected, focused, and disabled states.

Roles in color names are used to indicate how color is applied. By defining roles instead of specific values, we can ensure the correct use of each color, allow for modifiers, and support theming.

Each color follows the same naming convention so that they are understandable at a glance:

- **Naming structure:** `n-color-{role}-{modifier}-{theme}`
- **Role:** Each color has a role in Nord such as `accent`, `border`, `text`, `status`, or `surface`.
- **Modifier:** Modifiers are optional and may include variations such as `weak`, `strong`, `active`, `hover`, or `success`.
- **Examples:** `n-color-accent`, `n-color-border-strong`, `n-color-text-weak`.

---

## Components

Different disciplines use component names to communicate about them. Hence, they must be short, meaningful, and pronounceable.

- **Naming structure:** `{prefix}-{name}`.
- **Prefix:** Component names always start with a prefix and a hyphen. For example `nord-button` or `nord-visually-hidden`. “N” stands for Nord Design System. Prefixing is critical to ensure that our naming doesn’t conflict with other systems.
- **Noun rather than verb:** Components are not actions, they are conceptually “things.” It is better to use nouns instead of verbs, such as `<animation/>` instead of `<animating/>`. `<input/>`, `<tab/>`, `<navigation/>`, and `<menu/>` are some examples.
- **Meaningful:** Not over specific, not overly abstract.
- **Short:** Maximum of 2 words after `nord-` prefix.
- **Pronounceable:** We want to be able talk about them.
- **Custom element spec compliant:** Don’t use reserved names. Reserved names include: `annotation-xml`, `font-face`, `font-face-src`, `font-face-uri`, `font-face-format`, `font-face-name`, `missing-glyph`, `color-profile`.
- **Examples:** `<nord-button/>`, `<nord-visually-hidden/>`, `<nord-tabs/>`.

---

## Icons

- **Naming structure:** `{category}-{subcategory}-{name}`.
- **Prefix:** Icon names always start with a category name and a hyphen. For example `action-{name}` or `messaging-{name}`.
- **Categorization:** Icon names always include at least one category, like `action`, `messaging`, or similar. If it makes sense in your use case, you can also include a subcategory in the name. For example `messaging-status-alert`. Nord uses the following icon categories:
  - `arrow`: represent any form of arrows.
  - `file`: illustrate file types and files.
  - `graph`: illustrate graphs and charts.
  - `interface`: interface specific icons like close, add, or save.
  - `keyboard`: illustrate keyboard keys.
  - `medical`: health and medical icons.
  - `navigation`: used for the nav item component.
  - `text`: represent text editor controls.
  - `user`: show user related functions.
  - `generic`: use when icons don’t fit into an existing categories.

---

## HTML Classes

- **Naming structure:** `.{prefix}-{name}-{modifier}` and `.is-{status}`.
- **Prefix:** HTML Class attributes always start with a prefix and a hyphen. For example `.n-button` or `.n:sr-only`. “N” stands for Nord Design System. Prefixing is critical to ensure that our naming doesn’t conflict with other systems.
- **Modifiers:** Modifier is a flag on an HTML element. Use them to change appearance or behavior. For example `.n-button-primary`, `.n-button-secondary`.
- **Statuses:** To indicate different statuses in the user interface, we use a specific HTML Class name formatting: `.is-{status}`. For example: `.is-loading`.
- **Examples:** `.n-button`, `.n-button-primary`, `.is-loading`.

---

## Component Props

When naming Web Component properties we need to be careful that the names we use do not conflict with existing standardized prototype members. Reserved names include:

`align`, `title`, `lang`, `translate`, `dir`, `dataset`, `hidden`, `tabIndex`, `accessKey`, `draggable`, `spellcheck`, `autocapitalize`, `contentEditable`, `isContentEditable`, `inputMode`, `offsetParent`, `offsetTop`, `offsetLeft`, `offsetWidth`, `offsetHeight`, `style`, `innerText`, `outerText`, `oncopy`, `oncut`, `onpaste`, `onabort`, `onblur`, `oncancel`, `oncanplay`, `oncanplaythrough`, `onchange`, `onclick`, `onclose`, `oncontextmenu`, `oncuechange`, `ondblclick`, `ondrag`, `ondragend`, `ondragenter`, `ondragleave`, `ondragover`, `ondragstart`, `ondrop`, `ondurationchange`, `onemptied`, `onended`, `onerror`, `onfocus`, `onfocusin`, `onfocusout`, `oninput`, `oninvalid`, `onkeydown`, `onkeypress`, `onkeyup`, `onload`, `onloadeddata`, `onloadedmetadata`, `onloadstart`, `onmousedown`, `onmouseenter`, `onmouseleave`, `onmousemove`, `onmouseout`, `onmouseover`, `onmouseup`, `onmousewheel`, `onpause`, `onplay`, `onplaying`, `onprogress`, `onratechange`, `onreset`, `onresize`, `onscroll`, `onseeked`, `onseeking`, `onselect`, `onstalled`, `onsubmit`, `onsuspend`, `ontimeupdate`, `ontoggle`, `onvolumechange`, `onwaiting`, `onwheel`, `onauxclick`, `ongotpointercapture`, `onlostpointercapture`, `onpointerdown`, `onpointermove`, `onpointerup`, `onpointercancel`, `onpointerover`, `onpointerout`, `onpointerenter`, `onpointerleave`, `onselectstart`, `onselectionchange`, `nonce`, `click`, `focus`, `blur`, `namespaceURI`, `prefix`, `localName`, `tagName`, `id`, `className`, `classList`, `slot`, `attributes`, `shadowRoot`, `assignedSlot`, `innerHTML`, `outerHTML`, `scrollTop`, `scrollLeft`, `scrollWidth`, `scrollHeight`, `clientTop`, `clientLeft`, `clientWidth`, `clientHeight`, `attributeStyleMap`, `onbeforecopy`, `onbeforecut`, `onbeforepaste`, `onsearch`, `previousElementSibling`, `nextElementSibling`, `children`, `firstElementChild`, `lastElementChild`, `childElementCount`, `onfullscreenchange`, `onfullscreenerror`, `onwebkitfullscreenchange`, `onwebkitfullscreenerror`, `setPointerCapture`, `releasePointerCapture`, `hasPointerCapture`, `hasAttributes`, `getAttributeNames`, `getAttribute`, `getAttributeNS`, `setAttribute`, `setAttributeNS`, `removeAttribute`, `removeAttributeNS`, `hasAttribute`, `hasAttributeNS`, `toggleAttribute`, `getAttributeNode`, `getAttributeNodeNS`, `setAttributeNode`, `setAttributeNodeNS`, `removeAttributeNode`, `closest`, `matches`, `webkitMatchesSelector`, `attachShadow`, `getElementsByTagName`, `getElementsByTagNameNS`, `getElementsByClassName`, `insertAdjacentElement`, `insertAdjacentText`, `insertAdjacentHTML`, `requestPointerLock`, `getClientRects`, `getBoundingClientRect`, `scrollIntoView`, `scroll`, `scrollTo`, `scrollBy`, `scrollIntoViewIfNeeded`, `animate`, `computedStyleMap`, `before`, `after`, `replaceWith`, `remove`, `prepend`, `append`, `querySelector`, `querySelectorAll`, `requestFullscreen`, `webkitRequestFullScreen`, `webkitRequestFullscreen`, `part`, `createShadowRoot`, `getDestinationInsertionPoints`, `nodeType`, `nodeName`, `baseURI`, `isConnected`, `ownerDocument`, `parentNode`, `parentElement`, `childNodes`, `firstChild`, `lastChild`, `previousSibling`, `nextSibling`, `nodeValue`, `textContent`, `hasChildNodes`, `getRootNode`, `normalize`, `cloneNode`, `isEqualNode`, `isSameNode`, `compareDocumentPosition`, `contains`, `lookupPrefix`, `lookupNamespaceURI`, `isDefaultNamespace`, `insertBefore`, `appendChild`, `replaceChild`, and `removeChild`.

---

## CSS Custom Properties

- **Naming structure:** `--n-{component}-{property}` for public properties, `--_n-{component}-{property}` for private properties
- **Prefix:** `--n-` prefixes a public custom property, meaning developers can use it to fine tune components. `--_n-` prefixes a private custom property, which is used internally by component authors
- **Examples:** `--n-banner-border-radius`, `--_n-banner-background`, `--_n-banner-border-radius`

All CSS custom properties should be created as a private custom property on the `:host` selector, but can be adjusted with other selectors. If the custom property needs to be opened up for public use, then the value of the private property should be set as its public custom property counterpart with a fallback. Here’s an example of both a public and private custom property:

```css
:host {
  /* Public properties */
  --_n-banner-border-radius: var(--n-banner-border-radius, var(--n-border-radius));

  /* Private properties */
  --_n-banner-background: var(--n-color-status-info-weak);
}
```

---

## Repositories

While we don’t follow a strict naming format on repositories, there’re a few rules we follow to make sure naming stays consistent and straightforward to follow:

- **Separating words:** We use kebab-case to separate words, e.g. `nord-design-system` or `nord-react`. Never use camelCase, snake\_case or any other format when naming a repository.
- **Always lowercase:** The whole repository name should be in lowercase letters. Do not use uppercase letters or Capitalization.

---

## Getting support

Have questions about naming? Please head over to the [Support page](https://nordhealth.design/resources/support/) for more guidelines and ways to contact us.


# Nordhealth Brand

\*Welcome to Nordhealth’s brand guidelines. Here you’ll learn how to express our brand and follow our design philosophy to uniquely distinguishing us from the competitors.\*

We like to think that we’re not your traditional healthcare software provider. For starters, we have strong Nordic roots. That drives us to challenge the status quo with modern design thinking and innovation. We want our brand to reflect this.

![Nordhealth brand](https://nordhealth.design/img/brand.svg){height="721" style="max-width: 1000px;" width="1486"}

::div
---
::

## Our logo

The Nordhealth logo is composed of the “together” logomark and a logotype set in Armin Grotesk Ultrabold. The horizontal version is the primary logo and should be used in all external applications. Always use the logo files provided in our [downloads section](https://nordhealth.design/design/assets/). Do not try to re-create the logo yourself.

\[Download logo]\(/design/assets/)

![Nordhealth logo](https://nordhealth.design/img/brand/logo.svg){#logo}

::div
---
::

## Logomark

Nordhealth logomark is visually based on the N from our company name. But if you look closer it shows two individual elements coming together to form a solid structure.

This is where the idea of togetherness comes into play. Two sides working as one. On a business level it represents a key driver for Nordhealth, acquisition. For the customer and end users it expresses the seamless use of our products to improve productivity and communication. It brings healthcare professionals closer to their patients. It defines you and your teams working as a strong unit.

On a deeper level it illustrates a bigger idea, change and innovation on the global healthcare stage. We make our products available to the patients where it makes the biggest difference.

![Nordhealth logo](https://nordhealth.design/img/brand/logo2.svg){style="max-width: 700px;"}

::div
---
::

## Getting creative with logo

The Nordhealth logomark can be re-created for a particular event or to emanate an idea. This is strictly for internal use only and should be led by the marketing and brand team.

![Nordhealth logo](https://nordhealth.design/img/brand/logo3.svg){style="max-width: 700px;"}

::div
---
::

## Logo minimums

Small logo rules apply when the logo is below 100px wide for digital and 26mm wide for print. The logo lockup should not go below 50px/14mm wide. The singular mark can go as small as 25px × 25px or 7mm × 7mm and for a favicon, 16px × 16px.

![Nordhealth logo](https://nordhealth.design/img/brand/logo4.svg){style="max-width: 700px;"}

::div
---
::

## Logo usage on backgrounds

The Nordhealth logo should only be used as a solid white on strong backgrounds. The blue combination variation can be used on white or very light backgrounds.

![Nordhealth logo](https://nordhealth.design/img/brand/logo5.svg)

::div
---
::

## One color use for Logo

For applications that don’t require color or need to be knocked back use either a solid black version or the secondary navy blue.

![Nordhealth logo](https://nordhealth.design/img/brand/logo6.svg){style="max-width: 500px;"}

::div
---
::

## Partnership logo

When using the lockup with other logos be sure to apply the right amount of safe space so the logo can still be legible.

![Nordhealth logo](https://nordhealth.design/img/brand/logo7.svg)

::div
---
::

## From Nordhealth logo

When you need to indicate that another product is made by Nordhealth, use the following logo variation that is available on our [downloads page](https://nordhealth.design/design/assets/).

![From Nordhealth logo](https://nordhealth.design/img/brand/from-nordhealth.svg){style="max-width: 650px;"}

::div
---
::

## Logo misuse

![Nordhealth logo](https://nordhealth.design/img/brand/logo8.svg){style="max-width: 1100px;"}

::div
---
::

## Colors

Our primary and secondary colors are Sky Blue and Navy Blue. They should be used in all applications within the brand with more weight than any other tertiary color.

![Nordhealth colors](https://nordhealth.design/img/brand/colors.svg){style="max-width: 900px;"}

::div
---
::

## Tertiary palette

Our tertiary colors should be used less frequently. They should be applied as a highlight or to create variation. They are used across the brand in underlines, illustrations, highlighted numbers, backgrounds and many more touchpoints.

![Nordhealth colors](https://nordhealth.design/img/brand/colors2.svg){style="max-width: 900px;"}

::div
---
::

## Gray palette

Grays are essential for any brand. They are used as backgrounds, secondary text, disabled states and in illustrations.

![Nordhealth colors](https://nordhealth.design/img/brand/colors3.svg){style="max-width: 900px;"}

::div
---
::

## Gradients

Gradients add depth when we want to keep some touchpoints simplistic and not too colorful. Only use in digital applications.

![Nordhealth colors](https://nordhealth.design/img/brand/colors4.svg){style="max-width: 900px;"}

::div
---
::

## Accessible color combinations

It’s essential that the brand colors used in conjuction with text are at least AA compliant when used on any digital application.

![Nordhealth accessible colors](https://nordhealth.design/img/brand/a11y.svg){style="max-width: 1100px;"}

::div
---
::

## Color design tokens

Nord offers color design tokens which are a tech-agnostic way to store variables. We use tokens instead of hard coded values in all digital user interfaces to ensure a better consistency across different platforms.

\[Browse tokens]\(/core/tokens/)

::div
---
::

## Typography

The Nordhealth typeface is called Armin Grotesk. It’s used in all aspects of the brand. In headings, body copy, captions and numbers.

\> \[!WARNING]
\> Please note that for application UIs (Veterinary & Healthcare) we use a typeface called Inter that should be utilized using \[Nord's Webfonts package]\(/docs/developer/webfonts/).

![Nordhealth type](https://nordhealth.design/img/brand/typography.svg){style="max-width: 1000px;"}

\[Download typeface]\(https\://drive.google.com/file/d/1pkgxdEF8SVtw-gNvAXwwOzpu49PnL0F9/view?usp=sharing)

::div
---
::

## Type hierarchy

![Nordhealth type](https://nordhealth.design/img/brand/typography2.svg){style="max-width: 1200px;"}

::div
---
::

## Number style

We have two number styles. Style 01 is for larger number pullouts and style 02, which is more legible, is used for paragraphy and caption styles.

![Nordhealth type](https://nordhealth.design/img/brand/typography3.svg){style="max-width: 1000px;"}

::div
---
::

## Ideal stack

![Nordhealth type](https://nordhealth.design/img/brand/typography4.svg){style="max-width: 1200px;"}

::div
---
::

## Underlining

The underline is used to highlight specific words from large statement text’s only. Use sparingly to pullout a handful of words. No more than 2-4 per text block.

![Nordhealth type](https://nordhealth.design/img/brand/typography5.svg){style="max-width: 600px;"}

::div
---
::

## Illustrations

Our illustrations are inspired by process and product wireframe visuals used in software design processes. Style 01 illustrations all share the line element from the logomark. They are minimalistic in approach and idea but should be well drawn and use a minimum of 3 colors.

Line thickness can vary depending on scale. Extra small illustrations should start at 2px in stroke weight. As they increase in size they go up in 2px increments. Use your design eye.

![Nordhealth illustrations](https://nordhealth.design/img/brand/illustrations.svg){style="max-width: 1000px;"}

\[Download illustrations]\(/design/assets/)

::div
---
::

## Icons

Icons follow the same style as the illustrations. We have an extensive library of icons for any use which is based on [Streamline iconset](https://streamlineicons.com/){rel="&#x22;nofollow&#x22;"}. We use them across all digital applications. Stroke weight is fully adjustable.

![Nordhealth icons](https://nordhealth.design/img/brand/illustrations2.svg){style="max-width: 800px;"}

\[Download icons]\(/icons/)

::div
---
::

## Photography

We have two main styles of photography. For head shots we use a cutout with a colored background from our extensive color palette. For images that show our people and environments we should adopt a more reportage style that captures the tone of our culture.

![Nordhealth photography](https://nordhealth.design/img/brand/photography.png){style="max-width: 1000px;"}

::div
---
::

## Our mission

Our mission statement communicates the brand’s purpose, objectives and how we plan to serve our audience.

**Nordhealth’s mission is to redefine digital healthcare.**

![Nordhealth’s mission](https://nordhealth.design/img/brand/mission.svg){style="max-width: 800px;"}

::div
---
::

## Our vision `Draft`

Our vision brings to the surface what’s behind the brand. What inspires us, our employees and our customers. A vision gives us a clear direction into the future.

**Nordhealth’s vision is to make healthcare more universal, efficient and secure through data and technology.**

![Nordhealth’s mission](https://nordhealth.design/img/brand/vision.svg){style="max-width: 800px;"}

::div
---
::

## Our values

With every ambition, comes a set of values. Ones that shape our day to day culture, define who we are, what we do, and how we push forward.

### 1. Put customers first

Never overlook what really matters. Great service, ease of use, honest pricing, and respect for our customer’s time, money, and trust.

### 2. Take ownership

Think long-term and take initiative. Care about the outcome. Be accountable. Do the right thing for us, our customers, and the team.

### 3. Do more with less

Simplicity is the key to great results. Create fewer features, but make them great instead of merely good. Dare to say “no” to prevent the core from being lost in the noise.

### 4. Be stronger together

Engage beginners and attract experts to grow excellent teams. This isn’t something we do on our own — it’s all about sharing and exchanging ideas.

### 5. Embrace change

Challenge the status quo. Seek out and embrace continuous change, evolution, and improvement.

::div
---
::

## Brand personality

Brands are like peoples and people exhibit emotions through personality. As a brand we want to stay true to our personality in everything we do. The following personality traits express us:

- **Innovative**
- **Efficient**
- **Caring**
- **Passionate**
- **Trustworthy**
- **Customer oriented**

::div
---
::

## Examples

### Brand with two tones

We have two sides to our brand. Internally we apply the brand in a colorful, conversational and creative manner. External applications can be more monotone, to the point and business focused.

![Nordhealth examples](https://nordhealth.design/img/brand/example5.png){style="max-width: 1000px;"}

::div
---
::

## Website

You can find our website’s living style guide under [nordhealth.com/styleguide](https://nordhealth.com/styleguide/){rel="&#x22;nofollow&#x22;"}. Additionally, if you press “g” on your keyboard at [nordhealth.com](https://nordhealth.com/){rel="&#x22;nofollow&#x22;"}, you’ll be able to view our design grid.

![Nordhealth.com style guide](https://nordhealth.design/img/brand/styleguide.png){style="max-width: 900px;"}

::div
---
::

## Business cards

Business cards can be printed using the templates provided. Get creative for internal applications and more monotone for external.

\[Download template]\(/design/assets/)

![Nordhealth examples](https://nordhealth.design/img/brand/example.png){style="max-width: 1000px;"}

::div
---
::

## Letterheads

Letterhead can be used for multiple applications from writing paper to invoices. Make sure the logo is always positioned in the top left hand corner and type sizes are consistent.

\[Download template]\(/design/assets/)

![Nordhealth examples](https://nordhealth.design/img/brand/example2.png){style="max-width: 450px;"}

::div
---
::

## Posters

Posters are both for internal and external use. Be more creative and colorful for anything internal. For external applications use the more monotone approach.

\[Download template]\(/design/assets/)

![Nordhealth examples](https://nordhealth.design/img/brand/example3.png){style="max-width: 800px;"}

::div
---
::

## Presentations

Presentations should be large format, simplistic and clear in their creation. Use large type sizes and keep the slides clean but on brand.

\[Download template]\(/design/assets/)

![Nordhealth examples](https://nordhealth.design/img/brand/example4.png){style="max-width: 1100px;"}

::div
---
::

## Social media

Try to keep social applications impactful and simplistic. They can be colorful or monotone and use either our illustrations or photos of people.

\[Download template]\(/design/assets/)

![Nordhealth examples](https://nordhealth.design/img/brand/example7.png){style="max-width: 1200px;"}

::div
---
::

## Merchandise

When designing merchandise keep it simplistic but creative. The brand works well with solid colors and illustrations. Combine the two with a subject matter for a great result.

![Nordhealth examples](https://nordhealth.design/img/brand/example6.jpg){style="max-width: 500px;"}

\[Download logo for clothes]\(/assets/nordhealth/nordhealth-clothes-logo.zip)

::div
---
::

### Email signature

Nordhealth’s email signature is simplistic and to the point. It does not include images or any other assets. Copy and paste the below template to your email application to edit the details.

\> \[!WARNING]
\> Please note that the name of the person should be in bold and the text set in Sans Serif, Helvetica, or Arial typeface.

```
```

When adding the signature into your email application, please pay attention to the formatting. The name of the person should be in bold and the text set in Sans Serif, Helvetica, or Arial typeface. An example:

![Email signature example](https://nordhealth.design/img/brand/signature.png){style="max-width: 280px;"}

::div
---
::

## Getting support

Need support producing new brand assets? Have questions on how to express our brand? Please head over to the [Support page](https://nordhealth.design/resources/support/) for ways to contact us.


# Typography

\*Nord Design System provides a constrained, purposeful set of typographic styles that we use to present user interface and content as clearly and efficiently as possible.\*

![Nord Webfonts](https://nordhealth.design/img/type.svg){height="981" width="1584"}

---

## Typographic scale

We use the following typographic scale to communicate visual hierarchy in text and to create a predictable sizing for headers and text content. Our typographic scale is purposefully harmonious with our [spacing scale](https://nordhealth.design/core/tokens/#space). The base font-size is 14px.

<table id="type-scale" class="type-scale">
  <thead>
    <tr>
      <th width="40%">Category</th>
      <th>Size</th>
      <th>Difference</th>
      <th width="30%">Size token</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <div class="n-typescale-xxxl">Typescale XXXL</div>
      </td>
      <td>36px (2.25rem)</td>
      <td>+12px</td>
      <td><code>var(--n-font-size-xxxl)</code></td>
    </tr>
    <tr>
      <td>
        <div class="n-typescale-xxl">Typescale XXL</div>
      </td>
      <td>24px (1.5rem)</td>
      <td>+4px</td>
      <td><code>var(--n-font-size-xxl)</code></td>
    </tr>
    <tr>
      <td>
        <div class="n-typescale-xl">Typescale XL</div>
      </td>
      <td>20px (1.25rem)</td>
      <td>+4px</td>
      <td><code>var(--n-font-size-xl)</code></td>
    </tr>
    <tr>
      <td>
        <div class="n-typescale-l">Typescale L</div>
      </td>
      <td>16px (1rem)</td>
      <td>+2px</td>
      <td><code>var(--n-font-size-l)</code></td>
    </tr>
    <tr>
      <td>
        <div class="n-typescale-m">Typescale M</div>
      </td>
      <td>14px (0.875rem)</td>
      <td>0</td>
      <td><code>var(--n-font-size-m)</code></td>
    </tr>
    <tr>
      <td>
        <div class="n-typescale-s">Typescale S</div>
      </td>
      <td>12px (0.75rem)</td>
      <td>-2px</td>
      <td><code>var(--n-font-size-s)</code></td>
    </tr>
    <tr>
      <td>
        <div class="n-typescale-xs">Typescale XS</div>
      </td>
      <td>11px (0.6875rem)</td>
      <td>-1px</td>
      <td><code>var(--n-font-size-xs)</code></td>
    </tr>
    <tr>
      <td>
        <div class="n-typescale-xxs">Typescale XXS</div>
      </td>
      <td>10px (0.625rem)</td>
      <td>-2px</td>
      <td><code>var(--n-font-size-xxs)</code></td>
    </tr>
  </tbody>
</table>

## Line length

Set the reading environment to suit the reader. Shorter lines are usually more comfortable to the reader. As the line length increases, the user’s eye has to travel further from the end of one line to the beginning of the next, making it harder to track their progress vertically. Aim for an average line length of 50–90 characters, including spaces.

Please keep in mind that our users can control the application layout width, meaning that a line length can not always be specified. For this reason, it’s good practice to design for an ideal line length range, and use responsive design techniques to anticipate different contexts.

![Nord line length](https://nordhealth.design/img/line-length.svg)

---

## Tables

For [tables](https://nordhealth.design/components/table/) Nord offers default text styles that provide a legible and accessible typography. Typographic treatment should be consistent across all tables to create a cohesive language. The font size is large enough for users to read comfortably, and the font weight and color should be appropriate for the type of data in each table cell.

![Table text](https://nordhealth.design/img/table-text.png){.n-border.n-border-radius}![Table headers](https://nordhealth.design/img/table-headers.png){.n-border.n-border-radius}![Table deemphasized text](https://nordhealth.design/img/table-deemphasized-text.png){.n-border.n-border-radius}![Table status text](https://nordhealth.design/img/table-status-text.png){.n-border.n-border-radius}

---

## Brand typography

We use a typeface called Armin Grotesk for almost everything related to Nordhealth brand and marketing — from banner ads to print materials. This typeface should not be used for application UIs where we use a typeface called Inter.

![Nordhealth brand type](https://nordhealth.design/img/brand/typography.svg){style="max-width: 1000px;"}

\[Download typeface]\(https\://drive.google.com/file/d/1pkgxdEF8SVtw-gNvAXwwOzpu49PnL0F9/view?usp=sharing)

---

## Product typography

For digital products, we use a typeface called Inter which is carefully crafted and designed for computer screens specifically. It features a tall x-height to aid in readability of mixed-case and lower-case text. Several OpenType features are provided as well, like contextual alternates and slashed zero for when you need to disambiguate "0" from "O".

![Nordhealth product type](https://nordhealth.design/img/inter.svg)

\[Download typeface]\(/assets/nordhealth/nord-ui-typeface.zip)

---

## Font stacks

We use sans serif fonts for most of our type in digital products, the only exception being when you want to display code.

#### Sans serif font stack:

```css
font-family:
  'Nordhealth Sans',
  -apple-system,
  BlinkMacSystemFont,
  'Segoe UI',
  Helvetica,
  Arial,
  sans-serif,
  'Apple Color Emoji',
  'Segoe UI Emoji';
```

#### Code font stack:

```css
font-family: 'Nordhealth Mono', monospace, monospace;
```

---

## Punctuation

Punctuation matters because it conveys pause and effect to the reader, and mastering it walks the fine line between a skill for typographers and a skill for copywriters. The most common mistake we often see is using a neutral or straight quote symbol in place of an apostrophe:

\> \*\*Do:\*\* This’ll do nicely.

\> \*\*Don't:\*\* Please don't do this.

Always use smart quotation marks and put commas and periods inside the quotation:

\> \*\*Do:\*\* “It’s a ‘magic’ sock.”

\> \*\*Don't:\*\* "It's a 'magic' sock".

Use multiplication sign, minus sign and plus sign correctly:

\> \*\*Do:\*\* 1 × 0.5 − 0 = ½

\> \*\*Don't:\*\* 1 X 0.5 - 0 = 1/2

Use correct units of measurement symbols:

\> \*\*Do:\*\* Temperature °C

\> \*\*Don't:\*\* Temperature C

Use real trademark and copyright symbols:

\> \*\*Do:\*\* © 2015 Corp™

\> \*\*Don't:\*\* (c) 2015 Corp (TM)

When writing pixel dimensions, use times sign:

\> \*\*Do:\*\* 1024×768

\> \*\*Don't:\*\* 1024X768

Use the prime and double prime instead of quotation marks to specify inches and feet:

\> \*\*Do:\*\* Steve Jobs is 6′ 10″

\> \*\*Don't:\*\* Steve Jobs is 6' 10"

Use em dash (`&mdash;`) and thin spaces (`&thinsp;`) to make a break between parts of a sentence:

\> \*\*Do:\*\* A typeface — and thus a whole text — looks

\> \*\*Don't:\*\* A typeface - and thus a whole text - looks

use en dash (`&ndash;`) and thin spaces (`&thinsp;`) when indicating a range of values:

\> \*\*Do:\*\* 1880 – 1912

\> \*\*Don't:\*\* 1880 - 1912

Use ellipsis instead of three periods to indicate an omission:

\> \*\*Do:\*\* from a … to z

\> \*\*Don't:\*\* from a . . . to z

---

## Getting support

Need help with typography? Please head over to the [Support page](https://nordhealth.design/resources/support/) for more guidelines and ways to contact us.


# Design Tokens

\*Design tokens are a tech-agnostic way to store variables. We use tokens instead of hard coded values to ensure a better UI consistency across different platforms.\*

## Color

### General

These colors can be used anywhere and map to Tailwind's `text-*`, `bg-*` and `border-*` utilities (e.g. `n:text-accent`).

\- \`--n-color-accent\`: \`rgb(53, 89, 199)\` — Accent color for Therapy. Used as primary button background, hero area background, and as a link color. This color provides accessible contrast when used for text on light background.
\- \`--n-color-accent-secondary\`: \`rgb(53, 89, 199)\` — Used for theming purposes to style the background of the top bar in addition to the navigation header. By default, this aliases the accent color, but can be set to a custom color if necessary.
\- \`--n-color-active\`: \`rgb(246, 248, 248)\` — Default active color for Therapy.
\- \`--n-color-background\`: \`rgb(250, 251, 251)\` — Default application background color for Therapy. Should be set to either html or body element.
\- \`--n-color-border\`: \`rgb(216, 222, 228)\` — Default border color for Therapy.
\- \`--n-color-border-danger\`: \`rgb(250, 199, 190)\` — Danger border color. Used for the danger badge border style.
\- \`--n-color-border-highlight\`: \`rgb(227, 204, 244)\` — Highlight border color. Used for the highlight badge border style.
\- \`--n-color-border-hover\`: \`rgb(102, 118, 128)\` — Default border hover color for Therapy.
\- \`--n-color-border-info\`: \`rgb(198, 212, 249)\` — Info border color. Used for the info badge border style.
\- \`--n-color-border-neutral\`: \`rgb(215, 220, 224)\` — Neutral border color. Used for the neutral badge border style.
\- \`--n-color-border-progress\`: \`rgb(176, 229, 238)\` — Progress border color.
\- \`--n-color-border-strong\`: \`rgb(188, 197, 204)\` — Strong border color for Therapy for highlighting specific parts in the user interface.
\- \`--n-color-border-success\`: \`rgb(183, 223, 186)\` — Success border color. Used for the success badge border style.
\- \`--n-color-border-warning\`: \`rgb(248, 216, 124)\` — Warning border color. Used for the warning badge border style.
\- \`--n-color-button\`: \`rgb(255, 255, 255)\` — Default button background color for Therapy.
\- \`--n-color-button-hover\`: \`rgb(246, 248, 248)\` — Default button hover background color for Therapy.
\- \`--n-color-header\`: \`rgb(246, 248, 248)\` — Default header background color for modals.
\- \`--n-color-icon\`: \`rgb(102, 118, 128)\` — Default icon color for Therapy.
\- \`--n-color-icon-hover\`: \`rgb(12, 26, 61)\` — Default icon hover color for Therapy.
\- \`--n-color-nav-heading\`: \`rgb(143, 161, 170)\` — Default heading color for sidebar navigation.
\- \`--n-color-nav-hover\`: \`rgb(240, 241, 243)\` — Default hover color for sidebar navigation.
\- \`--n-color-nav-selected\`: \`rgb(233, 234, 237)\` — Default selected color for sidebar navigation.
\- \`--n-color-nav-surface\`: \`rgb(255, 255, 255)\` — Default surface color for sidebar navigation. Used as alias for default button hover background and active hover color as well.
\- \`--n-color-overlay\`: \`rgba(144, 152, 152, 0.4)\` — Default overlay color for Therapy. Use this to distinguish modal and popout layers from the layer underneath.
\- \`--n-color-status-danger\`: \`rgb(210, 64, 35)\` — Default danger status color for Therapy. Used to communicate problems that have to be resolved so that user can continue forward. This color should be always used for e.g. highlighting errors.
\- \`--n-color-status-danger-weak\`: \`rgb(255, 240, 238)\` — Weak danger status color. Used to communicate problems that have to be resolved so that user can continue forward. This color should be always used for e.g. highlighting errors.
\- \`--n-color-status-highlight\`: \`rgb(142, 78, 198)\` — Default highlight status color for Therapy. Used to highlight specific items in the interface.
\- \`--n-color-status-highlight-weak\`: \`rgb(249, 241, 254)\` — Weak highlight status color. Used to highlight specific items in the interface.
\- \`--n-color-status-info\`: \`rgb(62, 99, 221)\` — Default info status color for Therapy. Used to convey something informal.
\- \`--n-color-status-info-weak\`: \`rgb(240, 244, 255)\` — Weak info status color. Used to convey something informal.
\- \`--n-color-status-neutral\`: \`rgb(255, 255, 255)\` — Default neutral status color for Therapy.
\- \`--n-color-status-neutral-weak\`: \`rgb(241, 243, 245)\` — Weak neutral status color for Therapy. Used for the badge default state.
\- \`--n-color-status-notification\`: \`rgb(231, 84, 54)\` — Default notification indicator color for Therapy. Used to convey unread information.
\- \`--n-color-status-progress\`: \`rgb(0, 127, 153)\` — Default progress status color for Therapy. Used to convey something is in progress.
\- \`--n-color-status-progress-weak\`: \`rgb(231, 249, 251)\` — Weak progress status color. Used to convey something is in progress.
\- \`--n-color-status-success\`: \`rgb(29, 134, 51)\` — Default success status color for Therapy. Used to convey success states. For example, you might show a success message that tells the user that changes were saved or something was completed.
\- \`--n-color-status-success-weak\`: \`rgb(235, 249, 235)\` — Weak success status color. Used to convey success states. For example, you might show a success message that tells the user that changes were saved or something was completed.
\- \`--n-color-status-warning\`: \`rgb(246, 205, 90)\` — Default warning status color for Therapy. Used to display information that needs user’s attention and may require further steps.
\- \`--n-color-status-warning-weak\`: \`rgb(255, 250, 225)\` — Weak warning status color. Used to display information that needs a user’s attention and may require further steps.
\- \`--n-color-surface\`: \`rgb(255, 255, 255)\` — Default application surface color for Therapy. Use this for e.g. card backgrounds.
\- \`--n-color-surface-background\`: \`rgb(247, 247, 248)\` — Default surface background color for Therapy. Use this for the application background layer behind raised surfaces.
\- \`--n-color-surface-canvas\`: \`rgb(252, 252, 252)\` — Default canvas surface color for Therapy. Use this for the outermost canvas layer beneath the application background.
\- \`--n-color-surface-lowered\`: \`rgb(230, 232, 235)\` — Default lowered surface color for Therapy. Use this when you need to make a specific layer to appear lower than the surface color, e.g. progress bar.
\- \`--n-color-surface-raised\`: \`rgb(250, 251, 251)\` — Default raised surface color for Therapy. Use this when you need to separate a specific layer from the surface color, e.g. table headers.
\- \`--n-color-text\`: \`rgb(12, 26, 61)\` — Default text color. Used as the main text color throughout the UI. Provides good and legible contrast for our content.
\- \`--n-color-text-danger\`: \`rgb(178, 48, 21)\` — Default text color for danger messages for Therapy. Also used for the danger badge text.
\- \`--n-color-text-error\`: \`rgb(210, 64, 35)\` — Default text color for error messages for Therapy. Also used for the danger badge text.
\- \`--n-color-text-highlight\`: \`rgb(121, 58, 175)\` — Highlight text color. Used for the highlight badge text.
\- \`--n-color-text-info\`: \`rgb(52, 81, 178)\` — Info text color. Used for the info badge text.
\- \`--n-color-text-link\`: \`rgb(53, 89, 199)\` — Default link text color for Therapy. Used for all paragraph level links in an user interface.
\- \`--n-color-text-neutral\`: \`rgb(85, 89, 93)\` — Neutral text color. Used for the neutral badge text.
\- \`--n-color-text-neutral-strong\`: \`rgb(17, 24, 28)\` — Strong neutral text color. Used for the strong neutral badge text.
\- \`--n-color-text-on-accent\`: \`rgb(255, 255, 255)\` — Default text on accent color for Therapy. Used when text sits on the acccent color or a dark background.
\- \`--n-color-text-progress\`: \`rgb(1, 109, 131)\` — Progress text color.
\- \`--n-color-text-success\`: \`rgb(17, 118, 39)\` — Default text color for success messages for Therapy. Also used for the success badge text.
\- \`--n-color-text-warning\`: \`rgb(148, 105, 0)\` — Warning text color. Used for the warning badge text.
\- \`--n-color-text-warning-strong\`: \`rgb(51, 40, 16)\` — Strong warning text color. Used for the strong warning badge text.
\- \`--n-color-text-weak\`: \`rgb(54, 67, 74)\` — Weak text color for Therapy. Used for e.g. introduction paragraphs and help texts that are coupled with form elements.
\- \`--n-color-text-weaker\`: \`rgb(102, 118, 128)\` — Weaker text color for Therapy. Used for e.g. disabled buttons, footers, table headings, captions and placeholder texts.
\- \`--n-color-text-weakest\`: \`rgb(178, 186, 191)\` — Weakest text color for Therapy. Used for e.g. disabled input text and placeholder text in focused inputs.

### Text

These colors are intended for text and map to Tailwind's `text-*` utilities (e.g. `n:text-weak`).

\- \`--n-color-accent\`: \`rgb(53, 89, 199)\` — Accent color for Therapy. Used as primary button background, hero area background, and as a link color. This color provides accessible contrast when used for text on light background.
\- \`--n-color-accent-secondary\`: \`rgb(53, 89, 199)\` — Used for theming purposes to style the background of the top bar in addition to the navigation header. By default, this aliases the accent color, but can be set to a custom color if necessary.
\- \`--n-color-active\`: \`rgb(246, 248, 248)\` — Default active color for Therapy.
\- \`--n-color-background\`: \`rgb(250, 251, 251)\` — Default application background color for Therapy. Should be set to either html or body element.
\- \`--n-color-border\`: \`rgb(216, 222, 228)\` — Default border color for Therapy.
\- \`--n-color-border-danger\`: \`rgb(250, 199, 190)\` — Danger border color. Used for the danger badge border style.
\- \`--n-color-border-highlight\`: \`rgb(227, 204, 244)\` — Highlight border color. Used for the highlight badge border style.
\- \`--n-color-border-hover\`: \`rgb(102, 118, 128)\` — Default border hover color for Therapy.
\- \`--n-color-border-info\`: \`rgb(198, 212, 249)\` — Info border color. Used for the info badge border style.
\- \`--n-color-border-neutral\`: \`rgb(215, 220, 224)\` — Neutral border color. Used for the neutral badge border style.
\- \`--n-color-border-progress\`: \`rgb(176, 229, 238)\` — Progress border color.
\- \`--n-color-border-strong\`: \`rgb(188, 197, 204)\` — Strong border color for Therapy for highlighting specific parts in the user interface.
\- \`--n-color-border-success\`: \`rgb(183, 223, 186)\` — Success border color. Used for the success badge border style.
\- \`--n-color-border-warning\`: \`rgb(248, 216, 124)\` — Warning border color. Used for the warning badge border style.
\- \`--n-color-button\`: \`rgb(255, 255, 255)\` — Default button background color for Therapy.
\- \`--n-color-button-hover\`: \`rgb(246, 248, 248)\` — Default button hover background color for Therapy.
\- \`--n-color-header\`: \`rgb(246, 248, 248)\` — Default header background color for modals.
\- \`--n-color-icon\`: \`rgb(102, 118, 128)\` — Default icon color for Therapy.
\- \`--n-color-icon-hover\`: \`rgb(12, 26, 61)\` — Default icon hover color for Therapy.
\- \`--n-color-nav-heading\`: \`rgb(143, 161, 170)\` — Default heading color for sidebar navigation.
\- \`--n-color-nav-hover\`: \`rgb(240, 241, 243)\` — Default hover color for sidebar navigation.
\- \`--n-color-nav-selected\`: \`rgb(233, 234, 237)\` — Default selected color for sidebar navigation.
\- \`--n-color-nav-surface\`: \`rgb(255, 255, 255)\` — Default surface color for sidebar navigation. Used as alias for default button hover background and active hover color as well.
\- \`--n-color-overlay\`: \`rgba(144, 152, 152, 0.4)\` — Default overlay color for Therapy. Use this to distinguish modal and popout layers from the layer underneath.
\- \`--n-color-status-danger\`: \`rgb(210, 64, 35)\` — Default danger status color for Therapy. Used to communicate problems that have to be resolved so that user can continue forward. This color should be always used for e.g. highlighting errors.
\- \`--n-color-status-danger-weak\`: \`rgb(255, 240, 238)\` — Weak danger status color. Used to communicate problems that have to be resolved so that user can continue forward. This color should be always used for e.g. highlighting errors.
\- \`--n-color-status-highlight\`: \`rgb(142, 78, 198)\` — Default highlight status color for Therapy. Used to highlight specific items in the interface.
\- \`--n-color-status-highlight-weak\`: \`rgb(249, 241, 254)\` — Weak highlight status color. Used to highlight specific items in the interface.
\- \`--n-color-status-info\`: \`rgb(62, 99, 221)\` — Default info status color for Therapy. Used to convey something informal.
\- \`--n-color-status-info-weak\`: \`rgb(240, 244, 255)\` — Weak info status color. Used to convey something informal.
\- \`--n-color-status-neutral\`: \`rgb(255, 255, 255)\` — Default neutral status color for Therapy.
\- \`--n-color-status-neutral-weak\`: \`rgb(241, 243, 245)\` — Weak neutral status color for Therapy. Used for the badge default state.
\- \`--n-color-status-notification\`: \`rgb(231, 84, 54)\` — Default notification indicator color for Therapy. Used to convey unread information.
\- \`--n-color-status-progress\`: \`rgb(0, 127, 153)\` — Default progress status color for Therapy. Used to convey something is in progress.
\- \`--n-color-status-progress-weak\`: \`rgb(231, 249, 251)\` — Weak progress status color. Used to convey something is in progress.
\- \`--n-color-status-success\`: \`rgb(29, 134, 51)\` — Default success status color for Therapy. Used to convey success states. For example, you might show a success message that tells the user that changes were saved or something was completed.
\- \`--n-color-status-success-weak\`: \`rgb(235, 249, 235)\` — Weak success status color. Used to convey success states. For example, you might show a success message that tells the user that changes were saved or something was completed.
\- \`--n-color-status-warning\`: \`rgb(246, 205, 90)\` — Default warning status color for Therapy. Used to display information that needs user’s attention and may require further steps.
\- \`--n-color-status-warning-weak\`: \`rgb(255, 250, 225)\` — Weak warning status color. Used to display information that needs a user’s attention and may require further steps.
\- \`--n-color-surface\`: \`rgb(255, 255, 255)\` — Default application surface color for Therapy. Use this for e.g. card backgrounds.
\- \`--n-color-surface-background\`: \`rgb(247, 247, 248)\` — Default surface background color for Therapy. Use this for the application background layer behind raised surfaces.
\- \`--n-color-surface-canvas\`: \`rgb(252, 252, 252)\` — Default canvas surface color for Therapy. Use this for the outermost canvas layer beneath the application background.
\- \`--n-color-surface-lowered\`: \`rgb(230, 232, 235)\` — Default lowered surface color for Therapy. Use this when you need to make a specific layer to appear lower than the surface color, e.g. progress bar.
\- \`--n-color-surface-raised\`: \`rgb(250, 251, 251)\` — Default raised surface color for Therapy. Use this when you need to separate a specific layer from the surface color, e.g. table headers.
\- \`--n-color-text\`: \`rgb(12, 26, 61)\` — Default text color. Used as the main text color throughout the UI. Provides good and legible contrast for our content.
\- \`--n-color-text-danger\`: \`rgb(178, 48, 21)\` — Default text color for danger messages for Therapy. Also used for the danger badge text.
\- \`--n-color-text-error\`: \`rgb(210, 64, 35)\` — Default text color for error messages for Therapy. Also used for the danger badge text.
\- \`--n-color-text-highlight\`: \`rgb(121, 58, 175)\` — Highlight text color. Used for the highlight badge text.
\- \`--n-color-text-info\`: \`rgb(52, 81, 178)\` — Info text color. Used for the info badge text.
\- \`--n-color-text-link\`: \`rgb(53, 89, 199)\` — Default link text color for Therapy. Used for all paragraph level links in an user interface.
\- \`--n-color-text-neutral\`: \`rgb(85, 89, 93)\` — Neutral text color. Used for the neutral badge text.
\- \`--n-color-text-neutral-strong\`: \`rgb(17, 24, 28)\` — Strong neutral text color. Used for the strong neutral badge text.
\- \`--n-color-text-on-accent\`: \`rgb(255, 255, 255)\` — Default text on accent color for Therapy. Used when text sits on the acccent color or a dark background.
\- \`--n-color-text-progress\`: \`rgb(1, 109, 131)\` — Progress text color.
\- \`--n-color-text-success\`: \`rgb(17, 118, 39)\` — Default text color for success messages for Therapy. Also used for the success badge text.
\- \`--n-color-text-warning\`: \`rgb(148, 105, 0)\` — Warning text color. Used for the warning badge text.
\- \`--n-color-text-warning-strong\`: \`rgb(51, 40, 16)\` — Strong warning text color. Used for the strong warning badge text.
\- \`--n-color-text-weak\`: \`rgb(54, 67, 74)\` — Weak text color for Therapy. Used for e.g. introduction paragraphs and help texts that are coupled with form elements.
\- \`--n-color-text-weaker\`: \`rgb(102, 118, 128)\` — Weaker text color for Therapy. Used for e.g. disabled buttons, footers, table headings, captions and placeholder texts.
\- \`--n-color-text-weakest\`: \`rgb(178, 186, 191)\` — Weakest text color for Therapy. Used for e.g. disabled input text and placeholder text in focused inputs.

### Border

These colors are intended for borders and map to Tailwind's `border-*` utilities (e.g. `n:border-strong`).

\- \`--n-color-accent\`: \`rgb(53, 89, 199)\` — Accent color for Therapy. Used as primary button background, hero area background, and as a link color. This color provides accessible contrast when used for text on light background.
\- \`--n-color-accent-secondary\`: \`rgb(53, 89, 199)\` — Used for theming purposes to style the background of the top bar in addition to the navigation header. By default, this aliases the accent color, but can be set to a custom color if necessary.
\- \`--n-color-active\`: \`rgb(246, 248, 248)\` — Default active color for Therapy.
\- \`--n-color-background\`: \`rgb(250, 251, 251)\` — Default application background color for Therapy. Should be set to either html or body element.
\- \`--n-color-border\`: \`rgb(216, 222, 228)\` — Default border color for Therapy.
\- \`--n-color-border-danger\`: \`rgb(250, 199, 190)\` — Danger border color. Used for the danger badge border style.
\- \`--n-color-border-highlight\`: \`rgb(227, 204, 244)\` — Highlight border color. Used for the highlight badge border style.
\- \`--n-color-border-hover\`: \`rgb(102, 118, 128)\` — Default border hover color for Therapy.
\- \`--n-color-border-info\`: \`rgb(198, 212, 249)\` — Info border color. Used for the info badge border style.
\- \`--n-color-border-neutral\`: \`rgb(215, 220, 224)\` — Neutral border color. Used for the neutral badge border style.
\- \`--n-color-border-progress\`: \`rgb(176, 229, 238)\` — Progress border color.
\- \`--n-color-border-strong\`: \`rgb(188, 197, 204)\` — Strong border color for Therapy for highlighting specific parts in the user interface.
\- \`--n-color-border-success\`: \`rgb(183, 223, 186)\` — Success border color. Used for the success badge border style.
\- \`--n-color-border-warning\`: \`rgb(248, 216, 124)\` — Warning border color. Used for the warning badge border style.
\- \`--n-color-button\`: \`rgb(255, 255, 255)\` — Default button background color for Therapy.
\- \`--n-color-button-hover\`: \`rgb(246, 248, 248)\` — Default button hover background color for Therapy.
\- \`--n-color-header\`: \`rgb(246, 248, 248)\` — Default header background color for modals.
\- \`--n-color-icon\`: \`rgb(102, 118, 128)\` — Default icon color for Therapy.
\- \`--n-color-icon-hover\`: \`rgb(12, 26, 61)\` — Default icon hover color for Therapy.
\- \`--n-color-nav-heading\`: \`rgb(143, 161, 170)\` — Default heading color for sidebar navigation.
\- \`--n-color-nav-hover\`: \`rgb(240, 241, 243)\` — Default hover color for sidebar navigation.
\- \`--n-color-nav-selected\`: \`rgb(233, 234, 237)\` — Default selected color for sidebar navigation.
\- \`--n-color-nav-surface\`: \`rgb(255, 255, 255)\` — Default surface color for sidebar navigation. Used as alias for default button hover background and active hover color as well.
\- \`--n-color-overlay\`: \`rgba(144, 152, 152, 0.4)\` — Default overlay color for Therapy. Use this to distinguish modal and popout layers from the layer underneath.
\- \`--n-color-status-danger\`: \`rgb(210, 64, 35)\` — Default danger status color for Therapy. Used to communicate problems that have to be resolved so that user can continue forward. This color should be always used for e.g. highlighting errors.
\- \`--n-color-status-danger-weak\`: \`rgb(255, 240, 238)\` — Weak danger status color. Used to communicate problems that have to be resolved so that user can continue forward. This color should be always used for e.g. highlighting errors.
\- \`--n-color-status-highlight\`: \`rgb(142, 78, 198)\` — Default highlight status color for Therapy. Used to highlight specific items in the interface.
\- \`--n-color-status-highlight-weak\`: \`rgb(249, 241, 254)\` — Weak highlight status color. Used to highlight specific items in the interface.
\- \`--n-color-status-info\`: \`rgb(62, 99, 221)\` — Default info status color for Therapy. Used to convey something informal.
\- \`--n-color-status-info-weak\`: \`rgb(240, 244, 255)\` — Weak info status color. Used to convey something informal.
\- \`--n-color-status-neutral\`: \`rgb(255, 255, 255)\` — Default neutral status color for Therapy.
\- \`--n-color-status-neutral-weak\`: \`rgb(241, 243, 245)\` — Weak neutral status color for Therapy. Used for the badge default state.
\- \`--n-color-status-notification\`: \`rgb(231, 84, 54)\` — Default notification indicator color for Therapy. Used to convey unread information.
\- \`--n-color-status-progress\`: \`rgb(0, 127, 153)\` — Default progress status color for Therapy. Used to convey something is in progress.
\- \`--n-color-status-progress-weak\`: \`rgb(231, 249, 251)\` — Weak progress status color. Used to convey something is in progress.
\- \`--n-color-status-success\`: \`rgb(29, 134, 51)\` — Default success status color for Therapy. Used to convey success states. For example, you might show a success message that tells the user that changes were saved or something was completed.
\- \`--n-color-status-success-weak\`: \`rgb(235, 249, 235)\` — Weak success status color. Used to convey success states. For example, you might show a success message that tells the user that changes were saved or something was completed.
\- \`--n-color-status-warning\`: \`rgb(246, 205, 90)\` — Default warning status color for Therapy. Used to display information that needs user’s attention and may require further steps.
\- \`--n-color-status-warning-weak\`: \`rgb(255, 250, 225)\` — Weak warning status color. Used to display information that needs a user’s attention and may require further steps.
\- \`--n-color-surface\`: \`rgb(255, 255, 255)\` — Default application surface color for Therapy. Use this for e.g. card backgrounds.
\- \`--n-color-surface-background\`: \`rgb(247, 247, 248)\` — Default surface background color for Therapy. Use this for the application background layer behind raised surfaces.
\- \`--n-color-surface-canvas\`: \`rgb(252, 252, 252)\` — Default canvas surface color for Therapy. Use this for the outermost canvas layer beneath the application background.
\- \`--n-color-surface-lowered\`: \`rgb(230, 232, 235)\` — Default lowered surface color for Therapy. Use this when you need to make a specific layer to appear lower than the surface color, e.g. progress bar.
\- \`--n-color-surface-raised\`: \`rgb(250, 251, 251)\` — Default raised surface color for Therapy. Use this when you need to separate a specific layer from the surface color, e.g. table headers.
\- \`--n-color-text\`: \`rgb(12, 26, 61)\` — Default text color. Used as the main text color throughout the UI. Provides good and legible contrast for our content.
\- \`--n-color-text-danger\`: \`rgb(178, 48, 21)\` — Default text color for danger messages for Therapy. Also used for the danger badge text.
\- \`--n-color-text-error\`: \`rgb(210, 64, 35)\` — Default text color for error messages for Therapy. Also used for the danger badge text.
\- \`--n-color-text-highlight\`: \`rgb(121, 58, 175)\` — Highlight text color. Used for the highlight badge text.
\- \`--n-color-text-info\`: \`rgb(52, 81, 178)\` — Info text color. Used for the info badge text.
\- \`--n-color-text-link\`: \`rgb(53, 89, 199)\` — Default link text color for Therapy. Used for all paragraph level links in an user interface.
\- \`--n-color-text-neutral\`: \`rgb(85, 89, 93)\` — Neutral text color. Used for the neutral badge text.
\- \`--n-color-text-neutral-strong\`: \`rgb(17, 24, 28)\` — Strong neutral text color. Used for the strong neutral badge text.
\- \`--n-color-text-on-accent\`: \`rgb(255, 255, 255)\` — Default text on accent color for Therapy. Used when text sits on the acccent color or a dark background.
\- \`--n-color-text-progress\`: \`rgb(1, 109, 131)\` — Progress text color.
\- \`--n-color-text-success\`: \`rgb(17, 118, 39)\` — Default text color for success messages for Therapy. Also used for the success badge text.
\- \`--n-color-text-warning\`: \`rgb(148, 105, 0)\` — Warning text color. Used for the warning badge text.
\- \`--n-color-text-warning-strong\`: \`rgb(51, 40, 16)\` — Strong warning text color. Used for the strong warning badge text.
\- \`--n-color-text-weak\`: \`rgb(54, 67, 74)\` — Weak text color for Therapy. Used for e.g. introduction paragraphs and help texts that are coupled with form elements.
\- \`--n-color-text-weaker\`: \`rgb(102, 118, 128)\` — Weaker text color for Therapy. Used for e.g. disabled buttons, footers, table headings, captions and placeholder texts.
\- \`--n-color-text-weakest\`: \`rgb(178, 186, 191)\` — Weakest text color for Therapy. Used for e.g. disabled input text and placeholder text in focused inputs.

### Background

These colors are intended for backgrounds and map to Tailwind's `bg-*` utilities (e.g. `n:bg-surface`).

\- \`--n-color-accent\`: \`rgb(53, 89, 199)\` — Accent color for Therapy. Used as primary button background, hero area background, and as a link color. This color provides accessible contrast when used for text on light background.
\- \`--n-color-accent-secondary\`: \`rgb(53, 89, 199)\` — Used for theming purposes to style the background of the top bar in addition to the navigation header. By default, this aliases the accent color, but can be set to a custom color if necessary.
\- \`--n-color-active\`: \`rgb(246, 248, 248)\` — Default active color for Therapy.
\- \`--n-color-background\`: \`rgb(250, 251, 251)\` — Default application background color for Therapy. Should be set to either html or body element.
\- \`--n-color-border\`: \`rgb(216, 222, 228)\` — Default border color for Therapy.
\- \`--n-color-border-danger\`: \`rgb(250, 199, 190)\` — Danger border color. Used for the danger badge border style.
\- \`--n-color-border-highlight\`: \`rgb(227, 204, 244)\` — Highlight border color. Used for the highlight badge border style.
\- \`--n-color-border-hover\`: \`rgb(102, 118, 128)\` — Default border hover color for Therapy.
\- \`--n-color-border-info\`: \`rgb(198, 212, 249)\` — Info border color. Used for the info badge border style.
\- \`--n-color-border-neutral\`: \`rgb(215, 220, 224)\` — Neutral border color. Used for the neutral badge border style.
\- \`--n-color-border-progress\`: \`rgb(176, 229, 238)\` — Progress border color.
\- \`--n-color-border-strong\`: \`rgb(188, 197, 204)\` — Strong border color for Therapy for highlighting specific parts in the user interface.
\- \`--n-color-border-success\`: \`rgb(183, 223, 186)\` — Success border color. Used for the success badge border style.
\- \`--n-color-border-warning\`: \`rgb(248, 216, 124)\` — Warning border color. Used for the warning badge border style.
\- \`--n-color-button\`: \`rgb(255, 255, 255)\` — Default button background color for Therapy.
\- \`--n-color-button-hover\`: \`rgb(246, 248, 248)\` — Default button hover background color for Therapy.
\- \`--n-color-header\`: \`rgb(246, 248, 248)\` — Default header background color for modals.
\- \`--n-color-icon\`: \`rgb(102, 118, 128)\` — Default icon color for Therapy.
\- \`--n-color-icon-hover\`: \`rgb(12, 26, 61)\` — Default icon hover color for Therapy.
\- \`--n-color-nav-heading\`: \`rgb(143, 161, 170)\` — Default heading color for sidebar navigation.
\- \`--n-color-nav-hover\`: \`rgb(240, 241, 243)\` — Default hover color for sidebar navigation.
\- \`--n-color-nav-selected\`: \`rgb(233, 234, 237)\` — Default selected color for sidebar navigation.
\- \`--n-color-nav-surface\`: \`rgb(255, 255, 255)\` — Default surface color for sidebar navigation. Used as alias for default button hover background and active hover color as well.
\- \`--n-color-overlay\`: \`rgba(144, 152, 152, 0.4)\` — Default overlay color for Therapy. Use this to distinguish modal and popout layers from the layer underneath.
\- \`--n-color-status-danger\`: \`rgb(210, 64, 35)\` — Default danger status color for Therapy. Used to communicate problems that have to be resolved so that user can continue forward. This color should be always used for e.g. highlighting errors.
\- \`--n-color-status-danger-weak\`: \`rgb(255, 240, 238)\` — Weak danger status color. Used to communicate problems that have to be resolved so that user can continue forward. This color should be always used for e.g. highlighting errors.
\- \`--n-color-status-highlight\`: \`rgb(142, 78, 198)\` — Default highlight status color for Therapy. Used to highlight specific items in the interface.
\- \`--n-color-status-highlight-weak\`: \`rgb(249, 241, 254)\` — Weak highlight status color. Used to highlight specific items in the interface.
\- \`--n-color-status-info\`: \`rgb(62, 99, 221)\` — Default info status color for Therapy. Used to convey something informal.
\- \`--n-color-status-info-weak\`: \`rgb(240, 244, 255)\` — Weak info status color. Used to convey something informal.
\- \`--n-color-status-neutral\`: \`rgb(255, 255, 255)\` — Default neutral status color for Therapy.
\- \`--n-color-status-neutral-weak\`: \`rgb(241, 243, 245)\` — Weak neutral status color for Therapy. Used for the badge default state.
\- \`--n-color-status-notification\`: \`rgb(231, 84, 54)\` — Default notification indicator color for Therapy. Used to convey unread information.
\- \`--n-color-status-progress\`: \`rgb(0, 127, 153)\` — Default progress status color for Therapy. Used to convey something is in progress.
\- \`--n-color-status-progress-weak\`: \`rgb(231, 249, 251)\` — Weak progress status color. Used to convey something is in progress.
\- \`--n-color-status-success\`: \`rgb(29, 134, 51)\` — Default success status color for Therapy. Used to convey success states. For example, you might show a success message that tells the user that changes were saved or something was completed.
\- \`--n-color-status-success-weak\`: \`rgb(235, 249, 235)\` — Weak success status color. Used to convey success states. For example, you might show a success message that tells the user that changes were saved or something was completed.
\- \`--n-color-status-warning\`: \`rgb(246, 205, 90)\` — Default warning status color for Therapy. Used to display information that needs user’s attention and may require further steps.
\- \`--n-color-status-warning-weak\`: \`rgb(255, 250, 225)\` — Weak warning status color. Used to display information that needs a user’s attention and may require further steps.
\- \`--n-color-surface\`: \`rgb(255, 255, 255)\` — Default application surface color for Therapy. Use this for e.g. card backgrounds.
\- \`--n-color-surface-background\`: \`rgb(247, 247, 248)\` — Default surface background color for Therapy. Use this for the application background layer behind raised surfaces.
\- \`--n-color-surface-canvas\`: \`rgb(252, 252, 252)\` — Default canvas surface color for Therapy. Use this for the outermost canvas layer beneath the application background.
\- \`--n-color-surface-lowered\`: \`rgb(230, 232, 235)\` — Default lowered surface color for Therapy. Use this when you need to make a specific layer to appear lower than the surface color, e.g. progress bar.
\- \`--n-color-surface-raised\`: \`rgb(250, 251, 251)\` — Default raised surface color for Therapy. Use this when you need to separate a specific layer from the surface color, e.g. table headers.
\- \`--n-color-text\`: \`rgb(12, 26, 61)\` — Default text color. Used as the main text color throughout the UI. Provides good and legible contrast for our content.
\- \`--n-color-text-danger\`: \`rgb(178, 48, 21)\` — Default text color for danger messages for Therapy. Also used for the danger badge text.
\- \`--n-color-text-error\`: \`rgb(210, 64, 35)\` — Default text color for error messages for Therapy. Also used for the danger badge text.
\- \`--n-color-text-highlight\`: \`rgb(121, 58, 175)\` — Highlight text color. Used for the highlight badge text.
\- \`--n-color-text-info\`: \`rgb(52, 81, 178)\` — Info text color. Used for the info badge text.
\- \`--n-color-text-link\`: \`rgb(53, 89, 199)\` — Default link text color for Therapy. Used for all paragraph level links in an user interface.
\- \`--n-color-text-neutral\`: \`rgb(85, 89, 93)\` — Neutral text color. Used for the neutral badge text.
\- \`--n-color-text-neutral-strong\`: \`rgb(17, 24, 28)\` — Strong neutral text color. Used for the strong neutral badge text.
\- \`--n-color-text-on-accent\`: \`rgb(255, 255, 255)\` — Default text on accent color for Therapy. Used when text sits on the acccent color or a dark background.
\- \`--n-color-text-progress\`: \`rgb(1, 109, 131)\` — Progress text color.
\- \`--n-color-text-success\`: \`rgb(17, 118, 39)\` — Default text color for success messages for Therapy. Also used for the success badge text.
\- \`--n-color-text-warning\`: \`rgb(148, 105, 0)\` — Warning text color. Used for the warning badge text.
\- \`--n-color-text-warning-strong\`: \`rgb(51, 40, 16)\` — Strong warning text color. Used for the strong warning badge text.
\- \`--n-color-text-weak\`: \`rgb(54, 67, 74)\` — Weak text color for Therapy. Used for e.g. introduction paragraphs and help texts that are coupled with form elements.
\- \`--n-color-text-weaker\`: \`rgb(102, 118, 128)\` — Weaker text color for Therapy. Used for e.g. disabled buttons, footers, table headings, captions and placeholder texts.
\- \`--n-color-text-weakest\`: \`rgb(178, 186, 191)\` — Weakest text color for Therapy. Used for e.g. disabled input text and placeholder text in focused inputs.

## Border Radius

\- \`--n-border-radius-sharp\`: \`0.02em\` — This is sharp border radius.
\- \`--n-border-radius-s\`: \`3px\` — This is small border radius.
\- \`--n-border-radius\`: \`5px\` — This is the default border radius.
\- \`--n-border-radius-circle\`: \`50%\` — This is for creating rounded avatars and similar objects.
\- \`--n-border-radius-pill\`: \`999px\` — This is for creating pill shaped tags and similar.

## Box Shadow

\- \`--n-box-shadow\`: \`0 1px 3px rgba(12, 12, 12, 0.09)\` — Default box shadow. Used with buttons, active states, and such.
\- \`--n-box-shadow-header\`: \`0 1px 5px rgba(12, 12, 12, 0.05)\` — Default box shadow for header component.
\- \`--n-box-shadow-card\`: \`0 0 0 1px var(--n-color-border), 0 1px 5px rgba(12, 12, 12, 0.05), 0 0 40px rgba(12, 12, 12, 0.015)\` — Default box shadow for card component that creates drop shadow, raised surface, and a border around the card.
\- \`--n-box-shadow-nav\`: \`0 0 0 1px var(--n-color-border), 0 5px 17px rgba(12, 12, 12, 0.14)\` — Default box shadow for navigation component. Used in collapsed state.
\- \`--n-box-shadow-popout\`: \`0 4px 12px rgba(12, 12, 12, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05)\` — Default box shadow to be used with all pop out windows.
\- \`--n-box-shadow-modal\`: \`0 24px 38px 3px rgba(12, 12, 12, 0.16), 0 9px 86px 8px rgba(12, 12, 12, 0.1), 0 11px 15px -7px rgba(12, 12, 12, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.05)\` — Default box shadow for modal component. Used in dialogs, modals, and such.

## Font Size

\- \`--n-font-size-xxxl\`: \`2.25rem\` — This is the xxx-large font size.
\- \`--n-font-size-xxl\`: \`1.5rem\` — This is the xx-large font size.
\- \`--n-font-size-xl\`: \`1.25rem\` — This is the x-large font size.
\- \`--n-font-size-l\`: \`1rem\` — This is the large font size.
\- \`--n-font-size-m\`: \`0.875rem\` — This is the base font size.
\- \`--n-font-size-s\`: \`0.75rem\` — This is the small font size.
\- \`--n-font-size-xs\`: \`0.6875rem\` — This is the x-small font size.
\- \`--n-font-size-xxs\`: \`0.625rem\` — This is the xx-small font size.

## Font

\- \`--n-font-family\`: \`'Nordhealth Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'\` — Inter is the default UI font family utilized by all our applications.
\- \`--n-font-family-code\`: \`'Nordhealth Mono', monospace, monospace\` — This font family is utilized by all our themes for code.
\- \`--n-font-features\`: \`'kern' 1, 'tnum' 1, 'calt' 1, 'case' 1, 'cv05' 1, 'zero' 1, 'cv08' 0, 'ss03' 1\` — This token includes the default font feature settings to be used together with our font family.
\- \`--n-font-features-reduced\`: \`'kern' 1, 'tnum' 0, 'calt' 1, 'case' 1, 'cv05' 1, 'zero' 0, 'cv08' 0, 'ss03' 1\` — This token includes a font feature variation with reduced legibility. This is mainly used for display headings.
\- \`--n-font-weight\`: \`400\` — Default font weight for body text.
\- \`--n-font-weight-active\`: \`500\` — Default font weight for active items.
\- \`--n-font-weight-heading\`: \`600\` — Default font weight for headings.
\- \`--n-font-weight-strong\`: \`670\` — Default font weight for strong.

## Line Height

\- \`--n-line-height-tightest\`: \`1\` — This token sets line height equal to the font size (no extra leading), equivalent to 100%. Tighter than Line Height Tight.
\- \`--n-line-height-tight\`: \`1.15\` — This token can be used when you don’t want line height taking any extra space.
\- \`--n-line-height-heading\`: \`1.2\` — This is the default line height for headings.
\- \`--n-line-height-caption\`: \`1.3\` — This is the default line height for captions, hint texts and form errors.
\- \`--n-line-height\`: \`1.5\` — This is the default line height for body text.
\- \`--n-line-height-form\`: \`20px\` — This is the default line height for form inputs, textareas and buttons.

## Size

\- \`--n-size-icon-xxs\`: \`8px\` — This is a xx-small size for icons. Most commonly used for the caret icons inside navigation items and page progress icons.
\- \`--n-size-icon-xs\`: \`10px\` — This is a x-small size for icons. Most commonly used inside small form fields and buttons.
\- \`--n-size-icon-s\`: \`12px\` — This is a small size for icons. Most commonly used for icons inside buttons and select menu toggles.
\- \`--n-size-icon-m\`: \`16px\` — This is a medium size for icons. Most commonly used for icons that sit inside large buttons.
\- \`--n-size-icon-l\`: \`24px\` — This is a large size for icons. Most commonly used for illustrative purposes.
\- \`--n-size-icon-xl\`: \`36px\` — This is a x-large size for icons. Most commonly used for illustrative purposes.
\- \`--n-size-top-bar\`: \`52px\` — This is the default height of the top bar. It is also used for the small header variant.
\- \`--n-size-icon-xxl\`: \`72px\` — This is a xx-large size for icons. Most commonly used for illustrative purposes.

## Space

\- \`--n-space-xs\`: \`4px\` — This is a x-small space.
\- \`--n-space-s\`: \`8px\` — This is a small space.
\- \`--n-space-m\`: \`16px\` — This is a medium space.
\- \`--n-space-l\`: \`24px\` — This is a large space.
\- \`--n-space-xl\`: \`36px\` — This is a x-large space.
\- \`--n-space-xxl\`: \`72px\` — This is a xx-large space.

## Transition

\- \`--n-transition-quickly\`: \`0.05s ease\` — Use this design token for a quick transition. Most often used for quick hover effects on things such as links, icons and more.
\- \`--n-transition-slowly\`: \`0.2s ease\` — Use this design token for a slow transition. Used for example in modals, tooltips, collapsing elements, and more.
\- \`--n-transition-mobile\`: \`0.4s ease\` — Use this design token for mobile menu transitions. Used for example in the mobile version of popout and dropdown.

## Z-index

\- \`--n-index-deep\`: \`-999999\` — Deep z-index is used to stack something behind everything else.
\- \`--n-index-default\`: \`1\` — The default z-index for components and elements inside components.
\- \`--n-index-masked\`: \`100\` — Default z-index for masked interface elements.
\- \`--n-index-mask\`: \`200\` — Default z-index for masking interface elements.
\- \`--n-index-sticky\`: \`300\` — Default z-index for sticky interface elements.
\- \`--n-index-nav\`: \`400\` — Default z-index for navigation.
\- \`--n-index-top-bar\`: \`500\` — Default z-index for top bar.
\- \`--n-index-overlay\`: \`600\` — Default z-index for modal and popup overlays.
\- \`--n-index-spinner\`: \`700\` — Default z-index for spinners, stacking on top of overlay.
\- \`--n-index-popout\`: \`800\` — Default z-index for popouts that stacks on top of all other elements.
\- \`--n-index-modal\`: \`900\` — Default z-index for modals that stacks on top of overlays and other elements.
\- \`--n-index-toast\`: \`1000\` — Default z-index for toast messages that stacks on top of all other elements including modals.

---

## Usage

Design tokens are a central location to store design related information such as colors, fonts, sizes and transitions. These raw values are automatically transformed to different formats like Sass, CSS, JSON and more.

Nord Design System uses design tokens instead of hard coded values to ensure a better UI consistency across different platforms.

\> \[!WARNING]
\> Please note that in most cases you will want to install our
\> \[
\> CSS Framework
\> ]\(/docs/developer/css-framework/)
\> instead of Design Tokens package directly. CSS Framework imports this package internally and gives you both the design tokens and a wide range of shorthand utility classes to modify an element's appearance in your application.

### Installation

Before moving further, please make sure you have [Node.js](https://nodejs.org/en/){rel="&#x22;nofollow&#x22;"} installed on your machine. You can install the latest version through their website.

If you're planning on using Nord Design Tokens in a project that doesn't yet use [Node Package Manager](https://www.npmjs.com/){rel="&#x22;nofollow&#x22;"}, you'll have to first create a [package.json](https://docs.npmjs.com/files/package.json){rel="&#x22;nofollow&#x22;"} file. To do this, run npm init and follow the steps provided. Once finished, you can install Nord Design Tokens by following the instructions below.

### Install using NPM

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

```bash
npm install @nordhealth/tokens
```

### Importing CSS Custom Properties

CSS Custom properties (sometimes referred to as CSS variables) are the recommended way to use Nord's Design Tokens. You can import them in plain CSS or Sass:

```scss
/* Import as CSS variables */
@import '~@nordhealth/tokens/lib/tokens.custom-properties.css';

.example {
  color: var(--n-color-accent);
}
```

If you're not using [Webpack](https://webpack.github.io/){rel="&#x22;nofollow&#x22;"} or similar tool for your build process, you may have to provide the full path to Node Modules:

```scss
// Import as basic variables
@import '/node_modules/@nordhealth/tokens/lib/tokens.custom-properties.css';

.example {
  color: var(--n-color-accent);
}
```

### Importing in HTML

CSS Custom properties can be imported in HTML as well. This is the most common and straightforward way to use them. Add the following to the `<head>` section of your app to get started:

```html
<link rel="stylesheet" href="https://nordcdn.net/ds/tokens/9.0.0/tokens.custom-properties.css" />
```

### Importing in JavaScript

In JavaScript, token names are formatted in lower camelCase. To import the design tokens, require the provided ES module:

```js
// Import design tokens
const tokens = require('@nordhealth/tokens')

// Console.log accent color value
console.log(tokens.nColorAccent)
```

In JSON, design token names are formatted in snake\_case:

```js
// Import design tokens
const tokens = require('@nordhealth/tokens/lib/tokens.json')

// Console.log accent color value
console.log(tokens.n_color_accent)
```

If your project supports ECMAScript Modules, you can also use the import syntax:

```js
// Import design tokens
import * as tokens from '@nordhealth/tokens'

// …or… import a single design token
import { nColorAccent } from '@nordhealth/tokens'
```

### Importing in Sass

Sass variables and map keys are formatted in kebab-case. There're a few ways to import them. The simplest way is to reference and import the tokens partial directly:

```scss
// Import as basic variables
@import '~@nordhealth/tokens/lib/tokens.scss';

.example {
  color: $n-color-accent;
}

// Import a Sass map of all tokens
@import '~@nordhealth/tokens/lib/tokens.map.scss';

.example {
  color: map-get($tokens-map, 'n-color-accent');
}
```

### Accessing brand themes in JavaScript and Sass

All our brand specific tokens have an appendix in their name. We don't surface this in the token documentation because the recommended way to use the tokens is via CSS Custom Properties that allows us to use the [Nord Themes package](https://nordhealth.design/design/themes/) to override the default colors.

If you have a need to directly access specific brand's colors in e.g. Sass or JavaScript, you can do it by adding the following appendix into the color name:

```scss
.example {
  // To access veterinary brand colors, use -vet appendix
  color: $n-color-accent-vet;

  // To access therapy brand colors (default), no appendix is needed
  color: $n-color-accent;
}
```

Same when using our Common.js module:

```js
// To access veterinary brand colors, use Vet appendix
console.log(tokens.nColorAccentVet)

// To access therapy brand colors (default), no appendix is needed
console.log(tokens.nColorAccent)
```

### List of all available formats

Below you can find a list of all available formats and paths to them.

- **Sass:** `@nordhealth/tokens/lib/tokens.scss`
- **Sass Map:** `@nordhealth/tokens/lib/tokens.map.scss`
- **CSS Custom Properties:** `@nordhealth/tokens/lib/tokens.custom-properties.css`
- **Less:** `@nordhealth/tokens/lib/tokens.less`
- **Stylus:** `@nordhealth/tokens/lib/tokens.styl`
- **Module.js:** `@nordhealth/tokens/lib/tokens.module.js`
- **Common.js:** `@nordhealth/tokens/lib/tokens.common.js`
- **JSON:** `@nordhealth/tokens/lib/tokens.json`
- **Raw JSON:** `@nordhealth/tokens/lib/tokens.raw.json`
- **iOS JSON:** `@nordhealth/tokens/lib/tokens.ios.json`
- **Android XML:** `@nordhealth/tokens/lib/tokens.android.xml`

### Testing integration

To quickly test if Nord Design Tokens are correctly installed, follow the below steps.

1. Require common.js module: `const tokens = require("@nordhealth/tokens")`
2. Use console log to output a list of all tokens: `console.log(tokens)`
3. If everything works, you should now see a long list of Design Tokens in your console.

### Examples

- The very page you're looking at is using tokens: [Nord Design Tokens](https://nordhealth.design/core/tokens/)
- For more concrete examples, see [Nordhealth Pay prototype](https://nordhealth.github.io/nordhealth-pay-prototype/os-theme-support/){rel="&#x22;nofollow&#x22;"}.

### Developing tokens

The design tokens package in Nord Design System can be found under `packages/tokens`. It's built with [Theo](https://github.com/salesforce-ux/theo){rel="&#x22;nofollow&#x22;"} that transforms YAML based design tokens into a variety of output formats.

The following are the most commonly used commands during development:

- `pnpm start` - Compile tokens, start watching for changes.
- `pnpm build` - Builds the project.
- `pnpm test` - Run all tests once.

### Can I use Nord in my own project?

Nord Design System is solely meant for building digital products and experiences for [Nordhealth](https://nordhealth.com){rel="&#x22;nofollow&#x22;"}. Please see the [terms of use](https://nordhealth.design/resources/terms/) for full license details.

### Getting support

If you experience any issues while getting started with Nord Design Tokens, please head over to the [Support page](https://nordhealth.design/resources/support/) for more guidelines and help.


# Tailwind CSS

\*Style your application using Nord Design Tokens through Tailwind CSS utility classes.\*

## Tailwind CSS `Recommended`

Use our Tailwind CSS integration for new Nord projects. It provides:

- Modern utility-first approach with Tailwind CSS v4
- Smaller bundle sizes through automatic purging
- Excellent developer experience and IDE support
- Wide industry adoption and community support
- Full access to Nord Design Tokens as Tailwind theme variables
- ESLint plugin for enforcing best practices and migration assistance

\[Get started with Tailwind]\(/core/css/tailwind/)

---

## Developer tooling

The legacy CSS Framework and ESLint plugin are developer tooling pages. Keep using them for existing projects or migration support.

\[View CSS Framework]\(/docs/developer/css-framework/)

\[View ESLint Plugin]\(/docs/developer/eslint/)

---

## Getting support

Need help choosing or using our CSS solutions? Please head over to the [Support page](https://nordhealth.design/resources/support/) for more information and ways to contact us.


# Tailwind CSS

\*Integrate Nord Design Tokens with Tailwind CSS v4 for a modern, utility-first approach to styling your application.\*

We provide a Tailwind CSS entry point that maps all Nord Design Tokens to Tailwind theme variables. This allows you to use familiar Tailwind syntax while maintaining design consistency with Nord. All utilities use the `n:` prefix (variant syntax) to prevent collisions.

\> \[!NOTE]
\> \*\*Learning Tailwind CSS\*\* For comprehensive documentation on all available utility classes, visit the official \[Tailwind CSS documentation]\(https\://tailwindcss.com/docs). This page covers Nord-specific configuration and components—use \[tailwindcss.com]\(https\://tailwindcss.com) as your reference for standard utilities like flexbox, grid, spacing, and more.

\> \[!NOTE]
\> \*\*Migrating from Legacy CSS?\*\* See our \[Tailwind CSS Migration Guide]\(/migrations/tailwind/) for a complete mapping of legacy classes to Tailwind equivalents.

## Installation

First, ensure you have [Tailwind CSS v4 installed](https://tailwindcss.com/docs/installation){rel="&#x22;nofollow&#x22;"} in your project.

Then install the CSS package:

```bash
npm install @nordhealth/css
```

## Usage

Import the Tailwind entry in your main CSS file:

```css
@import "@nordhealth/css/tailwind";
```

All Tailwind utilities are prefixed with `n:` to prevent collisions with other frameworks:

```html
<div class="n:flex n:gap-m n:p-l n:bg-surface n:rounded">
  <span class="n:text-default n:font-sans">Hello World</span>
</div>
```

\> \[!WARNING]
\> \*\*Prefix syntax\*\* Tailwind v4 uses variant-style prefixes. Write \`n\:flex\` not \`n-flex\`. The colon is required.

## Peer Dependencies

The Tailwind entry requires `tailwindcss ^4.0.0` as a peer dependency.

---

## Theme Variables

The Tailwind entry maps all Nord Design Tokens to Tailwind theme variables. For the full list of available utilities, see the [Tailwind CSS documentation](https://tailwindcss.com/docs){rel="&#x22;nofollow&#x22;"}.

| Category              | Nord Values                                                                                                                                         | Example                                                                                                                                                                                                                          |
| --------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Spacing**           | `0`, `xs`, `s`, `m`, `l`, `xl`, `xxl`                                                                                                               | `n:p-0`, `n:p-m`, `n:px-l`, `n:py-s`, `n:ps-m`, `n:pe-l`, `n:pbs-s`, `n:pbe-m`, `n:m-xl`, `n:mx-auto`, `n:my-l`, `n:ms-s`, `n:me-m`, `n:mbs-l`, `n:mbe-xl`, `n:-m-s`, `n:-ms-m`, `n:-mbs-l`, `n:gap-m`, `n:gap-x-s`, `n:gap-y-l` |
| **Text Colors**       | `default`, `link`, `weak`, `weaker`, `weakest`, `on-accent`, `error`, `danger`, `success`, `neutral`, `warning`, `highlight`, `info`, `nav-heading` | `n:text-default`, `n:text-weak`, `n:text-error`                                                                                                                                                                                  |
| **Background Colors** | `default`, `surface`, `surface-raised`, `surface-lowered`, `header`, `status-*`, `button`, `button-hover`, `overlay`, `nav-surface`, `nav-hover`    | `n:bg-surface`, `n:bg-nav-surface`, `n:bg-status-success`                                                                                                                                                                        |
| **Border Colors**     | `default`, `strong`, `hover`, `neutral`, `warning`, `danger`, `success`, `info`                                                                     | `n:border-default`, `n:border-hover`                                                                                                                                                                                             |
| **General Colors**    | `accent`, `accent-secondary`, `active`, `icon`, `icon-hover`                                                                                        | `n:text-accent`, `n:bg-accent`                                                                                                                                                                                                   |
| **Font Sizes**        | `xs`, `s`, `m`, `l`, `xl`, `xxl`, `xxxl`                                                                                                            | `n:text-m`, `n:text-xl`, `n:lg:text-xxxl`                                                                                                                                                                                        |
| **Font Families**     | `sans`, `mono`                                                                                                                                      | `n:font-sans`, `n:font-mono`                                                                                                                                                                                                     |
| **Font Weights**      | `default`, `active`, `heading`, `strong`                                                                                                            | `n:font-default`, `n:font-heading`, `n:font-strong`                                                                                                                                                                              |
| **Line Heights**      | `tight`, `heading`, `default`, `caption`                                                                                                            | `n:leading-tight`, `n:leading-heading`, `n:leading-default`, `n:leading-caption`                                                                                                                                                 |
| **Border Radius**     | `sharp`, `s`, `default`, `pill`, `circle`                                                                                                           | `n:rounded-default`, `n:rounded-s`, `n:rounded-pill`, `n:rounded-circle`                                                                                                                                                         |
| **Shadows**           | `default`, `card`, `header`, `nav`, `popout`, `modal`                                                                                               | `n:shadow-default`, `n:shadow-card`, `n:shadow-popout`, `n:shadow-modal`                                                                                                                                                         |
| **Z-Index**           | `deep`, `default`, `sticky`, `nav`, `overlay`, `popout`, `modal`                                                                                    | `n:z-deep`, `n:z-default`, `n:z-sticky`, `n:z-overlay`, `n:z-popout`, `n:z-modal`                                                                                                                                                |
| **Breakpoints**       | `xxs`, `xs`, `s`, `m`, `l`, `xl`                                                                                                                    | `n:xxs:flex`, `n:xs:grid`, `n:m:hidden`, `n:l:block`, `n:xl:flex`                                                                                                                                                                |

This covers also all hover, focus, breakpoints and other states, see [hover, focus and other states](https://tailwindcss.com/docs/hover-focus-and-other-states){rel="&#x22;nofollow&#x22;"} and [responsive design](https://tailwindcss.com/docs/responsive-design){rel="&#x22;nofollow&#x22;"} for more information.

## Logical Properties

Tailwind CSS v4 provides built-in logical property utilities. Most padding, margin, sizing, border, and inset utilities use their TW4 built-in names. We provide additional custom utilities for cases TW4 doesn't cover:

| Category          | Utilities                                                                | Example                             | Notes                           |
| ----------------- | ------------------------------------------------------------------------ | ----------------------------------- | ------------------------------- |
| **Padding**       | `ps-*`, `pe-*`, `pbs-*`, `pbe-*`, `px-*`, `py-*`                         | `n:ps-m` (start), `n:px-l` (inline) | TW4 built-in                    |
| **Margin**        | `ms-*`, `me-*`, `mbs-*`, `mbe-*`, `mx-*`, `my-*`                         | `n:ms-auto`, `n:my-m`               | TW4 built-in                    |
| **Sizing**        | `inline-*`, `block-*`, `min-inline-*`, `max-inline-*`                    | `n:inline-full`, `n:max-inline-xl`  | TW4 built-in                    |
| **Borders**       | `border-s`, `border-e`, `border-bs`, `border-be`, `border-x`, `border-y` | `n:border-s`                        | TW4 built-in                    |
| **Space Between** | `space-x-*`, `space-y-*`                                                 | `n:space-x-m`                       | TW4 built-in (uses logical CSS) |
| **Insets**        | `inset-bs-*`, `inset-be-*`, `start-*`, `end-*`                           | `n:inset-bs-m`                      | TW4 built-in                    |

## Typography Examples

Use Tailwind's [typography utilities](https://tailwindcss.com/docs/font-size){rel="&#x22;nofollow&#x22;"} with Nord font sizes and weights.

```html
<!-- Font sizes -->
<p class="n:text-xxxl">.n:text-xxxl - The quick brown fox</p>
<p class="n:text-xxl">.n:text-xxl - The quick brown fox</p>
<p class="n:text-xl">.n:text-xl - The quick brown fox</p>
<p class="n:text-l">.n:text-l - The quick brown fox</p>
<p class="n:text-m">.n:text-m - The quick brown fox</p>
<p class="n:text-s">.n:text-s - The quick brown fox</p>
<p class="n:text-xs">.n:text-xs - The quick brown fox</p>

<hr class="n:divider" />

<!-- Font weights -->
<p class="n:font-default">.n:font-default - The quick brown fox</p>
<p class="n:font-active">.n:font-active - The quick brown fox</p>
<p class="n:font-heading">.n:font-heading - The quick brown fox</p>
<p class="n:font-strong">.n:font-strong - The quick brown fox</p>

<hr class="n:divider" />

<!-- Font families -->
<p class="n:font-sans">.n:font-sans - The quick brown fox jumps over the lazy dog</p>
<p class="n:font-mono">.n:font-mono - The quick brown fox jumps over the lazy dog</p>

<hr class="n:divider" />

<!-- Line heights -->
<p class="n:text-l n:leading-tight">
  .n:leading-tight - Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt amet ipsam enim sed sequi
  voluptatibus.
</p>
<p class="n:text-l n:leading-heading">
  .n:leading-heading - Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt amet ipsam enim sed sequi
  voluptatibus.
</p>
<p class="n:text-l n:leading-default">
  .n:leading-default - Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt amet ipsam enim sed sequi
  voluptatibus.
</p>
<p class="n:text-l n:leading-caption">
  .n:leading-caption - Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt amet ipsam enim sed sequi
  voluptatibus.
</p>

<hr class="n:divider" />

<!-- Text alignment -->
<p class="n:text-left">.n:text-left - Aligned to the left</p>
<p class="n:text-center">.n:text-center - Centered text</p>
<p class="n:text-right">.n:text-right - Aligned to the right</p>

<hr class="n:divider" />

<!-- Text transform -->
<p class="n:uppercase">.n:uppercase - the quick brown fox</p>
<p class="n:lowercase">.n:lowercase - THE QUICK BROWN FOX</p>
<p class="n:capitalize">.n:capitalize - the quick brown fox</p>

<hr class="n:divider" />

<!-- Text wrapping and overflow -->
<div class="n:max-w-xs n:truncate">.n:truncate - This text will be truncated with an ellipsis when it overflows</div>
<div class="n:max-w-xs n:break-words">.n:break-words - Thisisaverylongwordthatwillbreakwhenneeded</div>
```

\[View typography examples]\(/tailwind/examples/typography/)

---

## Color Examples

Use Tailwind's [color utilities](https://tailwindcss.com/docs/text-color){rel="&#x22;nofollow&#x22;"} with Nord semantic colors.

```html
<!-- Text colors -->
<p class="n:text-default">.n:text-default - Default text color</p>
<p class="n:text-weak">.n:text-weak - Weak text color</p>
<p class="n:text-weaker">.n:text-weaker - Weaker text color</p>
<p class="n:text-weakest">.n:text-weakest - Weakest text color</p>
<p class="n:text-link">.n:text-link - Link text color</p>
<p class="n:text-error">.n:text-error - Error text color</p>
<p class="n:text-danger">.n:text-danger - Danger text color</p>
<p class="n:text-success">.n:text-success - Success text color</p>
<p class="n:text-warning">.n:text-warning - Warning text color</p>
<p class="n:text-info">.n:text-info - Info text color</p>
<p class="n:text-highlight">.n:text-highlight - Highlight text color</p>
<p class="n:text-progress">.n:text-progress - Progress text color</p>

<hr class="n:divider" />

<!-- Background colors - surfaces -->
<div class="n:bg-surface n:p-m">.n:bg-surface</div>
<div class="n:bg-default n:p-m">.n:bg-default</div>
<div class="n:bg-surface-raised n:p-m">.n:bg-surface-raised</div>
<div class="n:bg-surface-lowered n:p-m">.n:bg-surface-lowered</div>

<hr class="n:divider" />

<!-- Background colors - status -->
<div class="n:bg-status-neutral n:p-m n:text-on-accent">.n:bg-status-neutral</div>
<div class="n:bg-status-warning n:p-m">.n:bg-status-warning</div>
<div class="n:bg-status-highlight n:p-m n:text-on-accent">.n:bg-status-highlight</div>
<div class="n:bg-status-danger n:p-m n:text-on-accent">.n:bg-status-danger</div>
<div class="n:bg-status-success n:p-m n:text-on-accent">.n:bg-status-success</div>
<div class="n:bg-status-info n:p-m n:text-on-accent">.n:bg-status-info</div>
<div class="n:bg-status-progress n:p-m n:text-on-accent">.n:bg-status-progress</div>

<hr class="n:divider" />

<!-- Background colors - status weak -->
<div class="n:bg-status-neutral-weak n:p-m">.n:bg-status-neutral-weak</div>
<div class="n:bg-status-warning-weak n:p-m">.n:bg-status-warning-weak</div>
<div class="n:bg-status-highlight-weak n:p-m">.n:bg-status-highlight-weak</div>
<div class="n:bg-status-danger-weak n:p-m">.n:bg-status-danger-weak</div>
<div class="n:bg-status-success-weak n:p-m">.n:bg-status-success-weak</div>
<div class="n:bg-status-info-weak n:p-m">.n:bg-status-info-weak</div>
<div class="n:bg-status-progress-weak n:p-m">.n:bg-status-progress-weak</div>

<hr class="n:divider" />

<!-- Border colors -->
<div class="n:border n:border-default n:p-m">.n:border-default</div>
<div class="n:border n:border-strong n:p-m">.n:border-strong</div>
<div class="n:border n:border-danger n:p-m">.n:border-danger</div>
<div class="n:border n:border-success n:p-m">.n:border-success</div>
<div class="n:border n:border-warning n:p-m">.n:border-warning</div>
<div class="n:border n:border-info n:p-m">.n:border-info</div>

<hr class="n:divider" />

<!-- Accent colors -->
<div class="n:bg-accent n:p-m n:text-on-accent">.n:bg-accent</div>
<div class="n:text-accent">.n:text-accent - Accent text color</div>
```

\[View color examples]\(/tailwind/examples/colors/)

---

## Border Examples

Use Tailwind's [border utilities](https://tailwindcss.com/docs/border-radius){rel="&#x22;nofollow&#x22;"} with Nord border radius and colors.

```html
<!-- Border radius -->
<div class="n:rounded-sharp n:border n:border-default n:p-m">.n:rounded-sharp</div>
<div class="n:rounded-s n:border n:border-default n:p-m">.n:rounded-s</div>
<div class="n:rounded-default n:border n:border-default n:p-m">.n:rounded-default</div>
<div class="n:rounded-pill n:border n:border-default n:p-m">.n:rounded-pill</div>
<div class="n:flex n:size-icon-xxl n:items-center n:justify-center n:rounded-circle n:border n:border-default n:p-m">
  .n:rounded-circle
</div>

<hr class="n:divider" />

<!-- Border widths -->
<div class="n:border n:border-default n:p-m">.n:border (1px)</div>
<div class="n:border-2 n:border-default n:p-m">.n:border-2 (2px)</div>
<div class="n:border-4 n:border-default n:p-m">.n:border-4 (4px)</div>

<hr class="n:divider" />

<!-- Border sides -->
<div class="n:border-t n:border-default n:p-m">.n:border-t (top only)</div>
<div class="n:border-r n:border-default n:p-m">.n:border-r (right only)</div>
<div class="n:border-b n:border-default n:p-m">.n:border-b (bottom only)</div>
<div class="n:border-l n:border-default n:p-m">.n:border-l (left only)</div>

<hr class="n:divider" />

<!-- Border with colors -->
<div class="n:border n:border-danger n:p-m">.n:border-danger</div>
<div class="n:border n:border-success n:p-m">.n:border-success</div>
<div class="n:border n:border-warning n:p-m">.n:border-warning</div>
<div class="n:border n:border-info n:p-m">.n:border-info</div>
<div class="n:border n:border-highlight n:p-m">.n:border-highlight</div>
```

\[View border examples]\(/tailwind/examples/borders/)

---

## Shadow Examples

Use Tailwind's [shadow utilities](https://tailwindcss.com/docs/box-shadow){rel="&#x22;nofollow&#x22;"} with Nord shadow values.

```html
<!-- Box shadows -->
<div class="n:rounded-default n:bg-surface n:p-l n:shadow-default">.n:shadow-default</div>

<hr class="n:divider" />

<div class="n:rounded-default n:bg-surface n:p-l n:shadow-card">.n:shadow-card</div>

<hr class="n:divider" />

<div class="n:rounded-default n:bg-surface n:p-l n:shadow-header">.n:shadow-header</div>

<hr class="n:divider" />

<div class="n:rounded-default n:bg-surface n:p-l n:shadow-nav">.n:shadow-nav</div>

<hr class="n:divider" />

<div class="n:rounded-default n:bg-surface n:p-l n:shadow-popout">.n:shadow-popout</div>

<hr class="n:divider" />

<div class="n:rounded-default n:bg-surface n:p-l n:shadow-modal">.n:shadow-modal</div>
```

\[View shadow examples]\(/tailwind/examples/shadows/)

---

## Miscellaneous Utilities

Additional Nord-specific utilities:

- `n:divider` - Horizontal divider line
- `n:caption` - Secondary text styling for captions

```html
<!-- Divider -->
<p>Content above divider</p>
<hr class="n:divider" />
<p>Content below divider</p>

<hr class="n:divider" />

<!-- Caption -->
<p class="n:caption">.n:caption - Secondary text for captions and metadata</p>
<p>Regular paragraph text for comparison</p>
```

\[View misc examples]\(/tailwind/examples/misc/)

---

## Nord Components

These components are unique to Nord and style their children automatically.

### Reset

The `n:reset` class normalizes child elements to a sensible default, applying Nord's typography settings and resetting margins, padding, and borders.

```html
<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 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>
      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 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 example]\(/tailwind/examples/reset/)

---

### Typeset

The `n:typeset` class styles all child text elements for rich content areas like articles or documentation.

```html
<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 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>
      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 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]\(/tailwind/examples/typeset/)

---

### Description List

The `n:dl` class styles description lists for presenting key/value data.

```html
<!-- Description list component -->
<dl class="n:dl">
  <dt>Name</dt>
  <dd>John Smith</dd>
  <dt>Email</dt>
  <dd>john.smith@example.com</dd>
  <dt>Role</dt>
  <dd>Software Engineer</dd>
  <dt>Department</dt>
  <dd>Engineering</dd>
  <dt>Location</dt>
  <dd>Helsinki, Finland</dd>
</dl>
```

\[View description list example]\(/tailwind/examples/descriptionlist/)

---

## Form Utilities

Style form elements with these Nord-specific utilities:

- `n:label` - Form label styling
- `n:hint` - Form hint text
- `n:error` - Form error text
- `n:input` - Base input styling

```html
<!-- Form label -->
<label class="n:label">Email address</label>

<hr class="n:divider" />

<!-- Form hint -->
<span class="n:hint">Enter your work email</span>

<hr class="n:divider" />

<!-- Form error -->
<span class="n:error">This field is required</span>

<hr class="n:divider" />

<!-- Form input -->
<input class="n:input" type="text" placeholder="Enter text..." />

<hr class="n:divider" />

<!-- Complete form field -->
<div class="n:flex n:flex-col n:gap-xs">
  <label class="n:label">Email address</label>
  <input class="n:input" type="email" placeholder="you@example.com" />
  <span class="n:hint">We'll never share your email</span>
</div>

<hr class="n:divider" />

<!-- Form field with error -->
<div class="n:flex n:flex-col n:gap-xs">
  <label class="n:label">Password</label>
  <input class="n:input" type="password" placeholder="Enter password" />
  <span class="n:error">Password must be at least 8 characters</span>
</div>
```

\[View form examples]\(/tailwind/examples/forms/)

---

## Grid

Use Tailwind's [grid utilities](https://tailwindcss.com/docs/grid-template-columns){rel="&#x22;nofollow&#x22;"} for layout with Nord spacing values.

```html
<!-- Default 12 column grid -->
<section class="n:mb-m n:grid n:grid-cols-12 n:gap-m">
  <div class="n:rounded-s n:border n:border-default n:bg-surface-raised n:p-s">.n:grid-cols-12</div>
  <div class="n:rounded-s n:border n:border-default n:bg-surface-raised n:p-s">.n:grid-cols-12</div>
  <div class="n:rounded-s n:border n:border-default n:bg-surface-raised n:p-s">.n:grid-cols-12</div>
  <div class="n:rounded-s n:border n:border-default n:bg-surface-raised n:p-s">.n:grid-cols-12</div>
  <div class="n:rounded-s n:border n:border-default n:bg-surface-raised n:p-s">.n:grid-cols-12</div>
  <div class="n:rounded-s n:border n:border-default n:bg-surface-raised n:p-s">.n:grid-cols-12</div>
  <div class="n:rounded-s n:border n:border-default n:bg-surface-raised n:p-s">.n:grid-cols-12</div>
  <div class="n:rounded-s n:border n:border-default n:bg-surface-raised n:p-s">.n:grid-cols-12</div>
  <div class="n:rounded-s n:border n:border-default n:bg-surface-raised n:p-s">.n:grid-cols-12</div>
  <div class="n:rounded-s n:border n:border-default n:bg-surface-raised n:p-s">.n:grid-cols-12</div>
  <div class="n:rounded-s n:border n:border-default n:bg-surface-raised n:p-s">.n:grid-cols-12</div>
  <div class="n:rounded-s n:border n:border-default n:bg-surface-raised n:p-s">.n:grid-cols-12</div>
</section>

<!-- Grid with 8 columns -->
<section class="n:mb-m n:grid n:grid-cols-8 n:gap-m">
  <div class="n:rounded-s n:border n:border-default n:bg-surface-raised n:p-s">.n:grid-cols-8</div>
  <div class="n:rounded-s n:border n:border-default n:bg-surface-raised n:p-s">.n:grid-cols-8</div>
  <div class="n:rounded-s n:border n:border-default n:bg-surface-raised n:p-s">.n:grid-cols-8</div>
  <div class="n:rounded-s n:border n:border-default n:bg-surface-raised n:p-s">.n:grid-cols-8</div>
  <div class="n:rounded-s n:border n:border-default n:bg-surface-raised n:p-s">.n:grid-cols-8</div>
  <div class="n:rounded-s n:border n:border-default n:bg-surface-raised n:p-s">.n:grid-cols-8</div>
  <div class="n:rounded-s n:border n:border-default n:bg-surface-raised n:p-s">.n:grid-cols-8</div>
  <div class="n:rounded-s n:border n:border-default n:bg-surface-raised n:p-s">.n:grid-cols-8</div>
</section>

<!-- Grid with 6 columns -->
<section class="n:mb-m n:grid n:grid-cols-6 n:gap-m">
  <div class="n:rounded-s n:border n:border-default n:bg-surface-raised n:p-s">.n:grid-cols-6</div>
  <div class="n:rounded-s n:border n:border-default n:bg-surface-raised n:p-s">.n:grid-cols-6</div>
  <div class="n:rounded-s n:border n:border-default n:bg-surface-raised n:p-s">.n:grid-cols-6</div>
  <div class="n:rounded-s n:border n:border-default n:bg-surface-raised n:p-s">.n:grid-cols-6</div>
  <div class="n:rounded-s n:border n:border-default n:bg-surface-raised n:p-s">.n:grid-cols-6</div>
  <div class="n:rounded-s n:border n:border-default n:bg-surface-raised n:p-s">.n:grid-cols-6</div>
</section>

<!-- Grid with 4 columns -->
<section class="n:mb-m n:grid n:grid-cols-4 n:gap-m">
  <div class="n:rounded-s n:border n:border-default n:bg-surface-raised n:p-s">.n:grid-cols-4</div>
  <div class="n:rounded-s n:border n:border-default n:bg-surface-raised n:p-s">.n:grid-cols-4</div>
  <div class="n:rounded-s n:border n:border-default n:bg-surface-raised n:p-s">.n:grid-cols-4</div>
  <div class="n:rounded-s n:border n:border-default n:bg-surface-raised n:p-s">.n:grid-cols-4</div>
</section>

<!-- Grid with 3 columns -->
<section class="n:mb-m n:grid n:grid-cols-3 n:gap-m">
  <div class="n:rounded-s n:border n:border-default n:bg-surface-raised n:p-s">.n:grid-cols-3</div>
  <div class="n:rounded-s n:border n:border-default n:bg-surface-raised n:p-s">.n:grid-cols-3</div>
  <div class="n:rounded-s n:border n:border-default n:bg-surface-raised n:p-s">.n:grid-cols-3</div>
</section>

<!-- Grid with 2 columns -->
<section class="n:mb-m n:grid n:grid-cols-2 n:gap-m">
  <div class="n:rounded-s n:border n:border-default n:bg-surface-raised n:p-s">.n:grid-cols-2</div>
  <div class="n:rounded-s n:border n:border-default n:bg-surface-raised n:p-s">.n:grid-cols-2</div>
</section>

<!-- Grid with XS gap -->
<section class="n:mb-m n:grid n:grid-cols-2 n:gap-xs">
  <div class="n:rounded-s n:border n:border-default n:bg-surface-raised n:p-s">.n:grid-cols-2 .n:gap-xs</div>
  <div class="n:rounded-s n:border n:border-default n:bg-surface-raised n:p-s">.n:grid-cols-2 .n:gap-xs</div>
</section>

<!-- Grid with S gap -->
<section class="n:mb-m n:grid n:grid-cols-2 n:gap-s">
  <div class="n:rounded-s n:border n:border-default n:bg-surface-raised n:p-s">.n:grid-cols-2 .n:gap-s</div>
  <div class="n:rounded-s n:border n:border-default n:bg-surface-raised n:p-s">.n:grid-cols-2 .n:gap-s</div>
</section>

<!-- Grid with L gap -->
<section class="n:mb-m n:grid n:grid-cols-2 n:gap-l">
  <div class="n:rounded-s n:border n:border-default n:bg-surface-raised n:p-s">.n:grid-cols-2 .n:gap-l</div>
  <div class="n:rounded-s n:border n:border-default n:bg-surface-raised n:p-s">.n:grid-cols-2 .n:gap-l</div>
</section>

<!-- Grid with XL gap -->
<section class="n:mb-m n:grid n:grid-cols-2 n:gap-xl">
  <div class="n:rounded-s n:border n:border-default n:bg-surface-raised n:p-s">.n:grid-cols-2 .n:gap-xl</div>
  <div class="n:rounded-s n:border n:border-default n:bg-surface-raised n:p-s">.n:grid-cols-2 .n:gap-xl</div>
</section>

<!-- Grid with XXL gap -->
<section class="n:mb-m n:grid n:grid-cols-2 n:gap-xxl">
  <div class="n:rounded-s n:border n:border-default n:bg-surface-raised n:p-s">.n:grid-cols-2 .n:gap-xxl</div>
  <div class="n:rounded-s n:border n:border-default n:bg-surface-raised n:p-s">.n:grid-cols-2 .n:gap-xxl</div>
</section>

<!-- Grid with no gap (omit gap class) -->
<section class="n:mb-m n:grid n:grid-cols-2">
  <div class="n:rounded-s n:border n:border-default n:bg-surface-raised n:p-s">.n:grid-cols-2 (no gap)</div>
  <div class="n:rounded-s n:border n:border-default n:bg-surface-raised n:p-s">.n:grid-cols-2 (no gap)</div>
</section>

<!-- Grid with auto-centering -->
<section class="n:mx-auto n:mb-m n:grid n:grid-cols-3 n:gap-m" style="max-width: 800px">
  <div class="n:rounded-s n:border n:border-default n:bg-surface-raised n:p-s">.n:mx-auto (centered)</div>
  <div class="n:rounded-s n:border n:border-default n:bg-surface-raised n:p-s">.n:mx-auto (centered)</div>
  <div class="n:rounded-s n:border n:border-default n:bg-surface-raised n:p-s">.n:mx-auto (centered)</div>
</section>

<!-- Grid with column span -->
<section class="n:mb-m n:grid n:grid-cols-4 n:gap-m">
  <div class="n:col-span-2 n:rounded-s n:border n:border-default n:bg-surface-raised n:p-s">.n:col-span-2</div>
  <div class="n:rounded-s n:border n:border-default n:bg-surface-raised n:p-s">.n:grid-cols-4</div>
  <div class="n:rounded-s n:border n:border-default n:bg-surface-raised n:p-s">.n:grid-cols-4</div>
</section>

<!-- Grid with place-items-center -->
<section
  class="n:mb-m n:grid n:grid-cols-3 n:place-items-center n:gap-m"
  style="block-size: calc(var(--n-size-icon-xxl) * 3)"
>
  <div class="n:rounded-s n:border n:border-default n:bg-surface-raised n:p-s">.n:place-items-center</div>
  <div class="n:rounded-s n:border n:border-default n:bg-surface-raised n:p-s">.n:place-items-center</div>
  <div class="n:rounded-s n:border n:border-default n:bg-surface-raised n:p-s">.n:place-items-center</div>
</section>
```

\[View grid examples]\(/tailwind/examples/grid/)

### Container Utilities

Use `n:container` for a centered container with max-width 1200px, or add a size modifier (`n:container-xl`, `n:container-l`, `n:container-m`, `n:container-s`, `n:container-xs`, `n:container-xxs`) for different max-widths:

```html
<!-- Container utilities -->
<div>
  <div class="n:container n:mb-m n:rounded-default n:bg-surface-raised n:p-m">
    <p>.n:container - max-width: 1200px (default)</p>
  </div>

  <div class="n:mb-m n:rounded-default n:bg-surface-raised n:p-m n:container-xl">
    <p>.n:container-xl - max-width: 2400px</p>
  </div>

  <div class="n:mb-m n:rounded-default n:bg-surface-raised n:p-m n:container-l">
    <p>.n:container-l - max-width: 1200px</p>
  </div>

  <div class="n:mb-m n:rounded-default n:bg-surface-raised n:p-m n:container-m">
    <p>.n:container-m - max-width: 1000px</p>
  </div>

  <div class="n:mb-m n:rounded-default n:bg-surface-raised n:p-m n:container-s">
    <p>.n:container-s - max-width: 800px</p>
  </div>

  <div class="n:mb-m n:rounded-default n:bg-surface-raised n:p-m n:container-xs">
    <p>.n:container-xs - max-width: 600px</p>
  </div>

  <div class="n:rounded-default n:bg-surface-raised n:p-m n:container-xxs">
    <p>.n:container-xxs - max-width: 400px</p>
  </div>
</div>
```

\[View container examples]\(/tailwind/examples/container/)

### Breakpoints

Use breakpoint prefixes to apply styles at different screen sizes. Available breakpoints: `xxs` (400px), `xs` (500px), `s` (620px), `m` (840px), `l` (1000px), `xl` (2400px). See [Customizing Breakpoints](https://nordhealth.design/#customizing-breakpoints) for how to override these values.

The `n:` prefix always comes first, followed by the breakpoint, then the utility:

```html
<!-- Pattern: n:[breakpoint]:[utility] -->
<div class="n:hidden n:m:block">Hidden on mobile, visible on medium+</div>
<div class="n:text-s n:l:text-xl">Small text, large on l+ screens</div>
```

```html
<!-- Breakpoint examples using container queries so they respond to resize handle -->
<div class="n:@container n:flex n:flex-col n:gap-m">
  <div class="n:rounded-default n:bg-surface-raised n:p-m">
    <p class="n:mb-s n:font-heading">Responsive visibility</p>
    <div class="n:flex n:flex-wrap n:gap-s">
      <span class="n:hidden n:rounded-s n:bg-status-info n:px-s n:py-xs n:text-on-accent n:@xs:inline">xs+</span>
      <span class="n:hidden n:rounded-s n:bg-status-success n:px-s n:py-xs n:text-on-accent n:@s:inline">s+</span>
      <span class="n:hidden n:rounded-s n:bg-status-warning n:px-s n:py-xs n:text-on-accent n:@m:inline">m+</span>
      <span class="n:hidden n:rounded-s n:bg-status-highlight n:px-s n:py-xs n:text-on-accent n:@l:inline">l+</span>
      <span class="n:hidden n:rounded-s n:bg-status-danger n:px-s n:py-xs n:text-on-accent n:@xl:inline">xl+</span>
    </div>
    <p class="n:mt-s n:text-s n:text-weaker">Resize to see badges appear at each breakpoint</p>
  </div>

  <div class="n:rounded-default n:bg-surface-raised n:p-m">
    <p class="n:mb-s n:font-heading">Responsive layout</p>
    <div class="n:flex n:flex-col n:gap-s n:@s:flex-row">
      <div class="n:flex-1 n:rounded-s n:bg-surface n:p-s">Item 1</div>
      <div class="n:flex-1 n:rounded-s n:bg-surface n:p-s">Item 2</div>
      <div class="n:flex-1 n:rounded-s n:bg-surface n:p-s">Item 3</div>
    </div>
    <p class="n:mt-s n:text-s n:text-weaker">Stacks vertically on narrow containers, horizontal on s+ containers</p>
  </div>

  <div class="n:rounded-default n:bg-surface-raised n:p-m">
    <p class="n:mb-s n:font-heading">Responsive spacing</p>
    <div class="n:flex n:gap-xs n:@s:gap-s n:@m:gap-m n:@l:gap-l">
      <div class="n:rounded-s n:bg-surface n:p-s">A</div>
      <div class="n:rounded-s n:bg-surface n:p-s">B</div>
      <div class="n:rounded-s n:bg-surface n:p-s">C</div>
    </div>
    <p class="n:mt-s n:text-s n:text-weaker">Gap increases at each breakpoint</p>
  </div>

  <div class="n:rounded-default n:bg-surface-raised n:p-m">
    <p class="n:mb-s n:font-heading">Responsive text</p>
    <p class="n:text-s n:@s:text-m n:@m:text-l n:@l:text-xl">This text grows with container size</p>
  </div>
</div>
```

\[View breakpoint examples]\(/tailwind/examples/breakpoints/)

### Container Queries

Container queries let you style elements based on the size of their container rather than the viewport. This is useful for reusable components that need to adapt to their context.

Use `n:@container` to define a query container, then use container breakpoint variants like `n:@s:`, `n:@m:`, etc. to apply styles:

```html
<!-- Define a container -->
<div class="n:@container">
  <!-- Styles change based on container width -->
  <div class="n:flex n:flex-col n:@s:flex-row">
    <aside class="n:hidden n:@s:block">Sidebar</aside>
    <main>Content</main>
  </div>
</div>
```

You can also use named containers for more precise control:

```html
<div class="n:@container/sidebar">
  <p class="n:text-s n:@m/sidebar:text-l">Responds to "sidebar" container</p>
</div>
```

| Container Breakpoint | Width         |
| -------------------- | ------------- |
| `@xs`                | 20rem (320px) |
| `@s`                 | 24rem (384px) |
| `@m`                 | 28rem (448px) |
| `@l`                 | 32rem (512px) |
| `@xl`                | 36rem (576px) |

```html
<nord-layout class="n:-m-m">
  <nord-navigation slot="nav">
    <nord-dropdown slot="header" expand>
      <nord-button slot="toggle" expand>
        <nord-avatar slot="start" name="Bath Clinic" variant="square">B</nord-avatar>
        Bath Clinic
      </nord-button>
      <nord-dropdown-group heading="laura.williams@nordhealth.com">
        <nord-dropdown-item>
          <nord-avatar slot="start" name="Bath Clinic" size="s" variant="square">B</nord-avatar>
          Bath Clinic
          <nord-icon slot="end" name="interface-checked"></nord-icon>
        </nord-dropdown-item>
        <nord-dropdown-item>
          <nord-avatar
            slot="start"
            name="Ocean Beach Clinic"
            size="s"
            variant="square"
            style="--n-avatar-color: var(--n-color-status-success)"
          >
            O
          </nord-avatar>
          Ocean Beach Clinic
        </nord-dropdown-item>
        <nord-dropdown-item>
          <nord-avatar
            slot="start"
            name="Park Animal Hospital"
            size="s"
            variant="square"
            style="--n-avatar-color: var(--n-color-status-highlight)"
          >
            P
          </nord-avatar>
          Park Animal Hospital
        </nord-dropdown-item>
        <nord-dropdown-item>
          <nord-avatar
            slot="start"
            name="Balboa Pet Hospital"
            size="s"
            variant="square"
            style="--n-avatar-color: var(--n-color-status-danger)"
          >
            B
          </nord-avatar>
          Balboa Pet Hospital
        </nord-dropdown-item>
      </nord-dropdown-group>
      <nord-dropdown-group>
        <nord-dropdown-item>Add another clinic</nord-dropdown-item>
        <nord-dropdown-item>Customize style</nord-dropdown-item>
      </nord-dropdown-group>
      <nord-dropdown-item>Sign out from all clinics</nord-dropdown-item>
    </nord-dropdown>
    <nord-nav-group heading="Workspace">
      <nord-nav-item href="#" active icon="navigation-dashboard">Dashboard</nord-nav-item>
      <nord-nav-item icon="navigation-payments">
        Payments
        <nord-nav-group slot="subnav">
          <nord-nav-item href="#">All transactions</nord-nav-item>
          <nord-nav-item href="#">Payments</nord-nav-item>
          <nord-nav-item href="#">Disputes</nord-nav-item>
        </nord-nav-group>
      </nord-nav-item>
      <nord-nav-item icon="navigation-reports">
        Reports
        <nord-nav-group slot="subnav">
          <nord-nav-item href="#">Payments</nord-nav-item>
          <nord-nav-item href="#">Disputes</nord-nav-item>
          <nord-nav-item href="#">Payouts</nord-nav-item>
        </nord-nav-group>
      </nord-nav-item>
      <nord-nav-item href="#" icon="navigation-settings">Settings</nord-nav-item>
    </nord-nav-group>
    <nord-dropdown expand slot="footer">
      <nord-button slot="toggle" expand>
        <nord-avatar slot="start" aria-hidden="true" name="Laura Williams"></nord-avatar>
        Laura Williams
      </nord-button>
      <nord-dropdown-group>
        <nord-dropdown-item href="#">View profile</nord-dropdown-item>
        <nord-dropdown-item>Settings</nord-dropdown-item>
      </nord-dropdown-group>
      <nord-dropdown-group>
        <nord-dropdown-item>
          Show keyboard shortcuts
          <div slot="end" class="n-color-text-weaker n-font-size-xs">Cmd+K</div>
        </nord-dropdown-item>
        <nord-dropdown-item>Help & Support</nord-dropdown-item>
        <nord-dropdown-item>API</nord-dropdown-item>
      </nord-dropdown-group>
      <nord-dropdown-item>
        Sign out
        <nord-icon slot="end" name="interface-logout"></nord-icon>
      </nord-dropdown-item>
    </nord-dropdown>
  </nord-navigation>
  <nord-header slot="header">
    <h2 class="n:text-l">@Container driven responsive design</h2>
    <nord-button variant="primary" slot="end">
      <nord-icon slot="start" name="interface-add-small"></nord-icon>
      Create new
    </nord-button>
    <nord-tooltip id="export" position="block-end"> Export data as Spreadsheet </nord-tooltip>
  </nord-header>
  <nord-stack gap="l">
    <!-- Responsive Grid: n:@container + n:@{breakpoint}:grid-cols-{n} -->
    <nord-card>
      <h3 slot="header">Responsive Grid</h3>
      <p class="n:mb-m n:text-s n:text-weak">
        <code>n:@container</code> defines the query context. <code>n:@s:grid-cols-2</code> and
        <code>n:@l:grid-cols-3</code> adjust columns based on container width.
      </p>
      <div class="n:@container">
        <div class="n:grid n:grid-cols-1 n:gap-m n:@s:grid-cols-2 n:@l:grid-cols-3">
          <div class="n:flex-1 n:rounded-s n:bg-surface-raised n:p-m">
            <h4 slot="header">Revenue</h4>
          </div>
          <div class="n:flex-1 n:rounded-s n:bg-surface-raised n:p-m">
            <h4 slot="header">Appointments</h4>
          </div>
          <div class="n:flex-1 n:rounded-s n:bg-surface-raised n:p-m">
            <h4 slot="header">New Patients</h4>
          </div>
        </div>
      </div>
    </nord-card>

    <!-- Stacking to Horizontal: n:@{breakpoint}:flex-row -->
    <nord-card>
      <h3 slot="header">Stack to Horizontal Layout</h3>
      <p class="n:mb-m n:text-s n:text-weak">
        <code>n:flex-col</code> stacks items vertically by default. <code>n:@s:flex-row</code> switches to horizontal
        when container is wide enough.
      </p>
      <div class="n:@container">
        <div class="n:flex n:flex-col n:gap-m n:@s:flex-row">
          <div class="n:flex-1 n:rounded-s n:bg-surface-raised n:p-m">
            <p class="n:text-s n:font-heading">Left Panel</p>
            <p class="n:text-xs n:text-weak">Stacks on narrow containers</p>
          </div>
          <div class="n:flex-1 n:rounded-s n:bg-surface-raised n:p-m">
            <p class="n:text-s n:font-heading">Right Panel</p>
            <p class="n:text-xs n:text-weak">Side-by-side when wider</p>
          </div>
        </div>
      </div>
    </nord-card>

    <!-- Show/Hide Elements: n:hidden + n:@{breakpoint}:block -->
    <nord-card>
      <h3 slot="header">Conditional Visibility</h3>
      <p class="n:mb-m n:text-s n:text-weak">
        <code>n:hidden n:@m:block</code> hides content on small containers, shows on medium+.
        <code>n:@m:hidden</code> does the opposite.
      </p>
      <div class="n:@container">
        <div class="n:flex n:items-center n:gap-m">
          <div class="n:hidden n:rounded-s n:bg-status-success n:p-s n:text-s n:text-on-accent n:@m:block">
            Visible on medium+ containers
          </div>
          <div class="n:rounded-s n:bg-status-warning n:p-s n:text-s n:text-on-accent n:@m:hidden">
            Visible on small containers only
          </div>
          <div class="n:rounded-s n:bg-surface-raised n:p-s n:text-s">Always visible</div>
        </div>
      </div>
    </nord-card>

    <!-- Typography Changes: n:@{breakpoint}:text-{size} -->
    <nord-card>
      <h3 slot="header">Responsive Typography</h3>
      <p class="n:mb-m n:text-s n:text-weak">
        <code>n:text-l n:@m:text-xl n:@l:text-2xl</code> scales text size based on container width.
      </p>
      <div class="n:@container">
        <p class="n:@l:text-2xl n:text-l n:font-heading n:@m:text-xl">This heading grows with the container</p>
        <p class="n:text-xs n:text-weak n:@s:text-s n:@m:text-m">Body text can also adapt to available space</p>
      </div>
    </nord-card>

    <!-- Named Containers: n:@container/{name} + n:@{breakpoint}/{name}:* -->
    <nord-card>
      <h3 slot="header">Named Containers</h3>
      <p class="n:mb-m n:text-s n:text-weak">
        <code>n:@container/card</code> creates a named container. <code>n:@s/card:flex-row</code> targets that specific
        container.
      </p>
      <div class="n:grid n:grid-cols-1 n:gap-m n:@s:grid-cols-2">
        <div class="n:@container/card n:rounded-s n:bg-surface-raised n:p-m">
          <div class="n:flex n:flex-col n:items-center n:gap-s n:@s/card:flex-row">
            <nord-avatar name="Card A" size="l"></nord-avatar>
            <div>
              <p class="n:font-heading">Card A</p>
              <p class="n:text-xs n:text-weak">Responds to its own container</p>
            </div>
          </div>
        </div>
        <div class="n:@container/card n:rounded-s n:bg-surface-raised n:p-m">
          <div class="n:flex n:flex-col n:items-center n:gap-s n:@s/card:flex-row">
            <nord-avatar name="Card B" size="l"></nord-avatar>
            <div>
              <p class="n:font-heading">Card B</p>
              <p class="n:text-xs n:text-weak">Independent of sibling containers</p>
            </div>
          </div>
        </div>
      </div>
    </nord-card>
  </nord-stack>
</nord-layout>
```

\[View container query examples]\(/tailwind/examples/container-queries/)

---

## States (Hover, Focus, etc.)

Apply styles on hover, focus, and other interactive states. The `n:` prefix comes first, followed by the state:

```html
<!-- Pattern: n:[state]:[utility] -->
<button class="n:bg-surface n:hover:bg-accent">Hover me</button>
<input class="n:border-default n:focus:border-accent" />
```

You can combine states with breakpoints:

```html
<!-- Pattern: n:[state]:[breakpoint]:[utility] or n:[breakpoint]:[state]:[utility] -->
<button class="n:hover:m:bg-accent">Hover effect only on medium+ screens</button>
```

```html
<!-- Hover states -->
<div class="n:flex n:flex-col n:gap-m">
  <div class="n:rounded-default n:bg-surface-raised n:p-m">
    <p class="n:mb-s n:font-heading">Hover states</p>
    <div class="n:flex n:flex-wrap n:gap-s">
      <button
        class="n:cursor-pointer n:rounded-default n:border n:border-default n:bg-surface n:px-m n:py-s n:hover:bg-accent n:hover:text-on-accent"
      >
        n:hover:bg-accent
      </button>
      <button
        class="n:cursor-pointer n:rounded-default n:border n:border-default n:px-m n:py-s n:text-default n:hover:text-accent"
      >
        n:hover:text-accent
      </button>
      <button class="n:cursor-pointer n:rounded-default n:border n:border-default n:px-m n:py-s n:hover:border-accent">
        n:hover:border-accent
      </button>
    </div>
  </div>

  <div class="n:rounded-default n:bg-surface-raised n:p-m">
    <p class="n:mb-s n:font-heading">Focus states</p>
    <div class="n:flex n:flex-wrap n:gap-s">
      <input class="n:input n:focus:border-accent" type="text" placeholder="n:focus:border-accent" />
      <input class="n:input n:focus:ring-2 n:focus:ring-accent" type="text" placeholder="n:focus:ring-accent" />
    </div>
  </div>

  <div class="n:rounded-default n:bg-surface-raised n:p-m">
    <p class="n:mb-s n:font-heading">Active states</p>
    <div class="n:flex n:flex-wrap n:gap-s">
      <button
        class="n:cursor-pointer n:rounded-default n:bg-accent n:px-m n:py-s n:text-on-accent n:active:bg-accent-secondary"
      >
        n:active:bg-accent-secondary
      </button>
    </div>
  </div>

  <div class="n:rounded-default n:bg-surface-raised n:p-m">
    <p class="n:mb-s n:font-heading">Disabled states</p>
    <div class="n:flex n:flex-wrap n:items-center n:gap-s">
      <nord-button class="n:disabled:cursor-not-allowed n:disabled:opacity-50" disabled>
        n:disabled:opacity-50
      </nord-button>
      <nord-input
        class="n:disabled:cursor-not-allowed n:disabled:opacity-50"
        type="text"
        placeholder="n:disabled:opacity-50"
        disabled
        hide-label
      />
    </div>
  </div>

  <div class="n:rounded-default n:bg-surface-raised n:p-m">
    <p class="n:mb-s n:font-heading">Group hover</p>
    <div
      class="n:group n:cursor-pointer n:rounded-default n:border n:border-default n:bg-surface n:p-m n:hover:bg-accent"
    >
      <p class="n:text-default n:group-hover:text-on-accent">
        Hover the card to change this text color (n:group-hover:text-on-accent)
      </p>
    </div>
  </div>
</div>
```

\[View state examples]\(/tailwind/examples/states/)

---

## ESLint Plugin

We provide an ESLint plugin to help enforce Nord CSS best practices and assist with migration from legacy classes.

\[View ESLint Plugin documentation]\(/docs/developer/eslint/)

---

## Extending the Theme

You can extend the theme with your own customizations:

```css
@import "@nordhealth/css/tailwind";

@theme {
  --color-custom: #123456;
  --spacing-custom: 100px;
}
```

### Customizing Breakpoints

Nord provides these default breakpoints:

| Breakpoint | Value    | Pixels (at 16px base) |
| ---------- | -------- | --------------------- |
| `xxs`      | 25rem    | 400px                 |
| `xs`       | 31.25rem | 500px                 |
| `s`        | 38.75rem | 620px                 |
| `m`        | 52.5rem  | 840px                 |
| `l`        | 62.5rem  | 1000px                |
| `xl`       | 150rem   | 2400px                |

To override a breakpoint or add new ones, define them in your own `@theme` block:

```css
@import "@nordhealth/css/tailwind";

@theme {
  /* Override existing breakpoint */
  --breakpoint-m: 48rem; /* 768px */

  /* Add new breakpoints */
  --breakpoint-2xl: 96rem; /* 1536px */
  --breakpoint-3xl: 120rem; /* 1920px */
}
```

Use your custom breakpoints like any other:

```html
<div class="n:hidden n:2xl:block">Only visible on 2xl screens</div>
```

\> \[!NOTE]
\> \*\*Why rem?\*\* Breakpoints use rem units so they scale with the user's browser font size settings, improving accessibility.

---

## Getting support

Need help with Tailwind CSS integration? Please head over to the [Support page](https://nordhealth.design/resources/support/) for more information and ways to contact us.


# CSS Framework

\*Nord Design System's original CSS Framework with shorthand utility classes.\*

\> \[!WARNING]
\> This is our original CSS framework. For new projects, we recommend using \[Tailwind CSS]\(/core/css/tailwind/) instead.

## Installation

Before moving further, please make sure you have [Node.js](https://nodejs.org/en/){rel="&#x22;nofollow&#x22;"} 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](https://www.npmjs.com){rel="&#x22;nofollow&#x22;"}, you'll have to first create a [package.json](https://docs.npmjs.com/files/package.json){rel="&#x22;nofollow&#x22;"} 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):

```bash
npm install @nordhealth/css
```

### Install using Yarn

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

```bash
yarn add @nordhealth/css
```

### CDN usage

The CSS Framework can be directly used via [Nord CDN](https://nordhealth.design/docs/developer/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:

```html
<link rel="stylesheet" href="https://nordcdn.net/ds/css/3.3.0/nord.min.css" />
```

### Browser support

Nord's CSS Framework is tested in the latest two versions of the following browsers. Our team addresses critical [bug fixes](https://nordhealth.design/resources/support/) 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.

---

## 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:

```html
<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](https://nordhealth.design/docs/developer/webfonts/#usage). 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:

```scss
// 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:

```scss
// 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:

- `.n-border`: Application of a 1 pixel solid border from our Design Tokens
- `.n-border-strong`: The same border style but the strong color from our [Design Tokens](https://nordhealth.design/core/tokens/)
- `.n-border-strong-i`: The same border style again but applying it to the `inline` sides of the element (left and right sides converted to [logical properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties){rel="&#x22;nofollow&#x22;"})
- `.n-border-strong-ie`: The same again but applying it to the `inline-end` side of the element (the right side)

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](https://nordhealth.design/core/tokens/), using [our t-shirt sizing](https://nordhealth.design/design/foundations/naming/#sizes) 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.

```html
<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 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>
      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 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]\(/css/examples/reset/)

---

## 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](https://nordhealth.design/core/tokens/) for [font size](https://nordhealth.design/core/tokens/#font-size), [weight](https://nordhealth.design/core/tokens/#font) and [spacing](https://nordhealth.design/core/tokens/#line-height), without the need to create CSS of your own.

```html
<!-- 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]\(/css/examples/typescale/)

---

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.

```html
<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 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>
      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 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]\(/css/examples/typeset/)

---

## Description list utility

Description lists are ideal for presenting key / value pair data. While the `.n-reset` utility helper resets all typographic elements to a manageable default the `.n-dl` utility will style description lists into a much more presentable format.

```html
<dl class="n-dl">
  <dt>Status</dt>
  <dd><mark>Success</mark></dd>
  <dt>Date</dt>
  <dd>Value 2</dd>
  <dt>Amount</dt>
  <dd>50,00&thinsp;€</dd>
  <dt>Payment fee</dt>
  <dd>1,75&thinsp;</dd>
  <dt>Method</dt>
  <dd>Card</dd>
  <dt>Identifier</dt>
  <dd><code>PAY38DL19710O</code></dd>
  <dt>Description</dt>
  <dd>
    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Earum adipisci cupiditate deleniti sed perferendis placeat
    nesciunt soluta impedit, animi nisi atque sit at aliquid rem quaerat voluptas excepturi quo qui.
  </dd>
</dl>
```

\[View description list example]\(/css/examples/descriptionlist/)

---

## Font size utilities

Nord [defines its sizing](https://nordhealth.design/design/foundations/naming/#sizes) 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](https://nordhealth.design/core/tokens/#font-size).

```html
<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]\(/css/examples/fontsize/)

---

## 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.

```html
<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]\(/css/examples/fontweight/)

---

## Color utilities

Nord CSS Framework provides not only access to the colors within our [Design Tokens](https://nordhealth.design/core/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`.

```html
<!-- 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]\(/css/examples/accentcolors/)

---

## Text color utilities

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

```html
<!-- 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-success">The quick brown fox</span>
<span class="n-color-text-error">The quick brown fox</span>
<span class="n-color-text-danger">The quick brown fox</span>
<span class="n-color-text-neutral">The quick brown fox</span>
<span class="n-color-text-neutral-strong">The quick brown fox</span>
<span class="n-color-text-warning">The quick brown fox</span>
<span class="n-color-text-warning-strong">The quick brown fox</span>
<span class="n-color-text-highlight">The quick brown fox</span>

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

\[View text color examples]\(/css/examples/textcolors/)

---

## 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:

```html
<!-- Status colors -->
<span class="n-color-status-neutral">.n-color-status-neutral</span>
<span class="n-color-status-warning">.n-color-status-warning</span>
<span class="n-color-status-highlight n-color-text-on-accent">.n-color-status-highlight</span>
<span class="n-color-status-danger n-color-text-on-accent">.n-color-status-danger</span>
<span class="n-color-status-success n-color-text-on-accent">.n-color-status-success</span>
<span class="n-color-status-info n-color-text-on-accent">.n-color-status-info</span>
<span class="n-color-status-notification n-color-text-on-accent">.n-color-status-notification</span>

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

<!-- 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-surface-lowered">.n-color-surface-lowered</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]\(/css/examples/surfaces/)

---

## Border utilities

Borders have been wrapped up into a series of utility helpers that make use of [logical properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties){rel="&#x22;nofollow&#x22;"}, 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:

- `-is`: Short for `inline-start`, which is the left side
- `-ie`: Short for `inline-end`, which is the right side
- `-bs`: Short for `block-start`, which is the top side
- `-be`: Short for `block-end`, which is the bottom side
- `-i`: Short for `inline`, which is the left and right sides
- `-b`: Short for `block`, which is the top and bottom side

```html
<!-- 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]\(/css/examples/borders/)

---

## Border radius utilities

Border radius tokens are available as utility helpers to apply rounded corners to elements. If you require more precise control over rounded corners, such as applying them to specific corners, we recommend making use of [our border radius design tokens](https://nordhealth.design/core/tokens/#border-radius) directly.

```html
<div class="n-padding-m n-border-radius-sharp">.n-border-radius-sharp</div>
<div class="n-padding-m n-border-radius-s">.n-border-radius-s</div>
<div class="n-padding-m n-border-radius">.n-border-radius</div>
<div class="n-padding-m n-border-radius-pill">.n-border-radius-pill</div>
<div
  class="n-padding-m n-stack-horizontal n-border-radius-circle"
  style="max-inline-size: max-content; aspect-ratio: 1"
>
  <span class="n-center">.n-border-radius-circle</span>
</div>
```

\[View border radius examples]\(/css/examples/borderradius/)

---

## Box shadow utilities

Box shadow tokens are designed to help reflect the elevation of a component or element. Larger shadows show that the element is higher and smaller shadows (or no shadow) show that the element is lower. Box shadow utility helpers have been named to reflect their intended purpose, please refer to our [box shadow design tokens](https://nordhealth.design/core/tokens/#box-shadow) for further information.

```html
<div class="n-padding-m n-color-surface n-box-shadow">.n-box-shadow</div>
<div class="n-padding-m n-color-surface n-box-shadow-header">.n-box-shadow-header</div>
<div class="n-padding-m n-color-surface n-box-shadow-card">.n-box-shadow-card</div>
<div class="n-padding-m n-color-surface n-box-shadow-nav">.n-box-shadow-nav</div>
<div class="n-padding-m n-color-surface n-box-shadow-popout">.n-box-shadow-popout</div>
<div class="n-padding-m n-color-surface n-box-shadow-modal">.n-box-shadow-modal</div>
```

\[View box shadow examples]\(/css/examples/boxshadow/)

---

## 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.

```html
<!-- 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]\(/css/examples/icons/)

---

## Stack utilities

The [Stack component](https://nordhealth.design/components/stack/) manages layout of immediate children along the vertical or horizontal axis with adjustable 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 default child spacing is set to `--n-space-m` but can be adjusted using [our gap utilities](https://nordhealth.design/#gap-utilities). By default, the stack utility helpers wrap (as opposed to the Stack component), but this can be disabled by adding the `.n-stack-no-wrap` utility helper.

As with the [border utilities](https://nordhealth.design/#border-utilities), the shorthand utility modifiers use logical properties. However the Stack utilities are only interested in vertical alignment. They follow this convention:

- `-s`: `start`, which is the top alignment
- `-e`: `end`, which is the bottom alignment

For more fine-grained positioning, you can adjust the `justify-content` property by using one of these utility classes:

- `.n-justify-center`: `justify-content: center;`
- `.n-justify-start`: `justify-content: flex-start;`
- `.n-justify-end`: `justify-content: flex-end;`
- `.n-justify-between`: `justify-content: space-between;`
- `.n-justify-evenly`: `justify-content: space-evenly;`
- `.n-justify-around`: `justify-content: space-around;`

Plus, you can adjust the `align-items` property by using one of these utility classes:

- `.n-items-center`: `align-items: center;`
- `.n-items-start`: `align-items: flex-start;`
- `.n-items-end`: `align-items: flex-end;`
- `.n-items-baseline`: `align-items: baseline;`
- `.n-items-stretch`: `align-items: stretch;`

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

<hr />

<!-- Vertical stack with XS size gap -->
<section class="n-stack n-gap-xs">
  <div>.n-stack .n-gap-xs</div>
  <div>.n-stack .n-gap-xs</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 (the default) -->
<section class="n-stack">
  <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 />

<!-- Vertical stack with no gap -->
<section class="n-stack n-gap-none">
  <div>.n-stack .n-gap-none</div>
  <div>.n-stack .n-gap-none</div>
</section>

<hr />

<!-- Horizontal stack with vertical centering (the default) -->
<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 XS size gap -->
<section class="n-stack-horizontal n-gap-xs">
  <div>.n-stack-horizontal .n-gap-s</div>
  <div>.n-stack-horizontal .n-gap-s</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 (the default) -->
<section class="n-stack-horizontal">
  <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>

<!-- Horizontal stack with no gap -->
<section class="n-stack-horizontal n-gap-none">
  <div>.n-stack-horizontal .n-gap-none</div>
  <div>.n-stack-horizontal .n-gap-none</div>
</section>

<hr />

<!-- Horizontal stack with no wrap -->
<section class="n-stack-horizontal n-stack-no-wrap">
  <div>.n-stack-horizontal .n-stack-no-wrap</div>
  <div>.n-stack-horizontal .n-stack-no-wrap</div>
</section>

<hr />

<!-- Horizontal stack that is horizontally aligned to center -->

<section class="n-stack-horizontal n-justify-center">
  <div>.n-stack-horizontal .n-justify-center</div>
  <div>.n-stack-horizontal .n-justify-center</div>
</section>

<!-- Horizontal stack that is horizontally aligned to end -->

<section class="n-stack-horizontal n-justify-end">
  <div>.n-stack-horizontal .n-justify-end</div>
  <div>.n-stack-horizontal .n-justify-end</div>
</section>

<!-- Horizontal stack that is horizontally spaced between -->

<section class="n-stack-horizontal n-justify-between">
  <div>.n-stack-horizontal .n-justify-between</div>
  <div>.n-stack-horizontal .n-justify-between</div>
</section>

<!-- Horizontal stack that is horizontally spaced evenly -->

<section class="n-stack-horizontal n-justify-evenly">
  <div>.n-stack-horizontal .n-justify-evenly</div>
  <div>.n-stack-horizontal .n-justify-evenly</div>
</section>

<!-- Horizontal stack that is horizontally spaced around -->

<section class="n-stack-horizontal n-justify-around">
  <div>.n-stack-horizontal .n-justify-around</div>
  <div>.n-stack-horizontal .n-justify-around</div>
</section>

<hr />

<!-- Horizontal stack that is vertically aligned to the baseline -->
<section class="n-stack-horizontal n-items-baseline">
  <div class="n-font-size-s">.n-stack-horizontal .n-items-baseline</div>
  <div>.n-stack-horizontal .n-items-baseline<br />.n-stack-horizontal .n-items-baseline</div>
</section>

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

<hr />

<!-- Vertical stack that is vertically aligned to center -->
<section class="n-stack n-justify-center" style="block-size: calc(var(--n-size-icon-xxl) * 3)">
  <div>.n-stack .n-justify-center</div>
  <div>.n-stack .n-justify-center</div>
</section>

<!-- Vertical stack that is vertically aligned to end -->
<section class="n-stack n-justify-end" style="block-size: calc(var(--n-size-icon-xxl) * 3)">
  <div>.n-stack .n-justify-end</div>
  <div>.n-stack .n-justify-end</div>
</section>

<!-- Vertical stack that is vertically spaced between -->

<section class="n-stack n-justify-between" style="block-size: calc(var(--n-size-icon-xxl) * 3)">
  <div>.n-stack .n-justify-between</div>
  <div>.n-stack .n-justify-between</div>
</section>

<!-- Vertical stack that is vertically spaced evenly -->

<section class="n-stack n-justify-evenly" style="block-size: calc(var(--n-size-icon-xxl) * 3)">
  <div>.n-stack .n-justify-evenly</div>
  <div>.n-stack .n-justify-evenly</div>
</section>

<!-- Vertical stack that is vertically spaced around -->

<section class="n-stack n-justify-around" style="block-size: calc(var(--n-size-icon-xxl) * 3)">
  <div>.n-stack .n-justify-around</div>
  <div>.n-stack .n-justify-around</div>
</section>

<hr />

<!-- Vertical stack that is horizontally aligned to start -->
<section class="n-stack n-items-start">
  <div>.n-stack .n-items-start</div>
  <div>.n-stack .n-items-start</div>
</section>

<!-- Vertical stack that is horizontally aligned to end -->
<section class="n-stack n-items-end">
  <div>.n-stack .n-items-end</div>
  <div>.n-stack .n-items-end</div>
</section>

<hr />

<!-- Horizontal stack that is horizontally spaced around and vertically aligned to end -->

<section class="n-stack-horizontal n-justify-around n-items-end" style="block-size: calc(var(--n-size-icon-xxl) * 3)">
  <div>.n-stack-horizontal .n-justify-around .n-items-end</div>
  <div>.n-stack-horizontal .n-justify-around .n-items-end</div>
</section>

<hr />

<!-- Horizontal stack with items that are flexed to 1 -->
<section class="n-stack-horizontal">
  <div class="n-flex-1">.n-flex-1</div>
  <div class="n-flex-1">.n-flex-1</div>
</section>

<hr />

<!-- Horizontal stack with items that are flexed to auto -->
<section class="n-stack-horizontal">
  <div class="n-flex-auto">.n-flex-auto</div>
  <div class="n-flex-auto">.n-flex-auto (with very long content)</div>
</section>
```

\[View stack examples]\(/css/examples/stack/)

---

## Grid and container utilities

Grid and container helper classes are for creating layouts that follow our recommended [grid layouts as shown in our Toolkit](https://nordhealth.design/design/foundations/grid/). The grid utilities can be used alongside the `.n-container` utilities to constrain containers to a desired width. The default child spacing in a grid is set to `--n-space-m` but can be adjusted using [our gap utilities](https://nordhealth.design/#gap-utilities).

- `.n-grid`: Provides a set column structure for items to fall into. Items can then be adjusted to fill more grid 'cells' with style properties `grid-column: span 2` or `grid-row: span 2`. In addition there are helpers to align grid items horizontally, vertically or both (`.n-grid-center`). See examples below for all available grid item options
- `.n-container`: Used to contain elements to a fixed width as the browser width grows. These help with [readable line length](https://nordhealth.design/design/foundations/typography/#line-length) as well as providing focus to pages with reduced content. See examples below for all available container width options.

```html
<!-- Default 12 column grid -->
<section class="n-grid">
  <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>

<hr />

<!-- Grid with 8 columns -->
<section class="n-grid-8">
  <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>

<hr />

<!-- Grid with 6 columns -->
<section class="n-grid-6">
  <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>

<hr />

<!-- Grid with 4 columns -->
<section class="n-grid-4">
  <div>.n-grid-4</div>
  <div>.n-grid-4</div>
  <div>.n-grid-4</div>
  <div>.n-grid-4</div>
</section>

<hr />

<!-- Grid with 3 columns -->
<section class="n-grid-3">
  <div>.n-grid-3</div>
  <div>.n-grid-3</div>
  <div>.n-grid-3</div>
</section>

<hr />

<!-- Grid with 2 columns -->
<section class="n-grid-2">
  <div>.n-grid-2</div>
  <div>.n-grid-2</div>
</section>

<hr />

<!-- Grid with XS size gap -->
<section class="n-grid-2 n-gap-xs">
  <div>.n-grid-2 .n-gap-xs</div>
  <div>.n-grid-2 .n-gap-xs</div>
</section>

<hr />

<!-- Grid with S size gap -->
<section class="n-grid-2 n-gap-s">
  <div>.n-grid-2 .n-gap-s</div>
  <div>.n-grid-2 .n-gap-s</div>
</section>

<hr />

<!-- Grid with M size gap (the default) -->
<section class="n-grid-2">
  <div>.n-grid-2</div>
  <div>.n-grid-2</div>
</section>

<hr />

<!-- Grid with L size gap -->
<section class="n-grid-2 n-gap-l">
  <div>.n-grid-2 .n-gap-l</div>
  <div>.n-grid-2 .n-gap-l</div>
</section>

<hr />

<!-- Grid with XL size gap -->
<section class="n-grid-2 n-gap-xl">
  <div>.n-grid-2 .n-gap-xl</div>
  <div>.n-grid-2 .n-gap-xl</div>
</section>

<hr />

<!-- Grid with XXL size gap -->
<section class="n-grid-2 n-gap-xxl">
  <div>.n-grid-2 .n-gap-xxl</div>
  <div>.n-grid-2 .n-gap-xxl</div>
</section>

<hr />

<!-- Grid with no gap -->
<section class="n-grid-2 n-gap-none">
  <div>.n-grid-none .n-gap-none</div>
  <div>.n-grid-none .n-gap-none</div>
</section>

<hr />

<!-- Grid with XL container -->
<section class="n-grid-3 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>

<hr />

<!-- Grid with L container (the default) -->
<section class="n-grid-3 n-container">
  <div>.n-grid-3 .n-container</div>
  <div>.n-grid-3 .n-container</div>
  <div>.n-grid-3 .n-container</div>
</section>

<hr />

<!-- Grid with M container -->
<section class="n-grid-3 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>

<hr />

<!-- Grid with S container -->
<section class="n-grid-3 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>

<hr />

<!-- Grid with XS container -->
<section class="n-grid-3 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>

<hr />

<!-- Grid with XXS container -->
<section class="n-grid-3 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>

<hr />

<!-- Grid with custom container -->
<section class="n-grid-3" 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]\(/css/examples/grid/)

---

## Gap utilities

By default both the stack and grid utilities have their child spacing set to [`--n-space-m`](https://nordhealth.design/core/tokens/#space) to mirror the [Stack component's](https://nordhealth.design/components/stack/) default behaviour. However this can be adjusted using `n-gap-xxl`, `n-gap-xl`, `n-gap-l`, `n-gap-s` or `n-gap-xs` which applies [our spacing tokens](https://nordhealth.design/core/tokens/#space) as gaps. Using `n-gap-none` will remove the gap entirely.

\[View gap examples with stack utilities]\(/css/examples/stack/)

\[View gap examples with grid utilities]\(/css/examples/grid/)

---

## Spacing utilities

Our [spacing tokens](https://nordhealth.design/core/tokens/#space) are accessible via the CSS Framework as margin and padding. These are all applied using [logical properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties){rel="&#x22;nofollow&#x22;"}, so that your styles continue to work when your application changes languages. These also follow the [t-shirt sizing convention](https://nordhealth.design/design/foundations/naming/#sizes).

![Diagram depicting how classnames are broken down](https://nordhealth.design/img/logical-property-diagram-classnaming.svg)

As with the [border utilities](https://nordhealth.design/#border-utilities), the shorthand utility modifiers use logical properties. They follow this convention:

- `-is`: Short for `inline-start`, which is the left side
- `-ie`: Short for `inline-end`, which is the right side
- `-bs`: Short for `block-start`, which is the top side
- `-be`: Short for `block-end`, which is the bottom side
- `-i`: Short for `inline`, which is the left and right sides
- `-b`: Short for `block`, which is the top and bottom side

![Diagram depicting how logical properties correspond to sides of an element](https://nordhealth.design/img/logical-property-diagram-sides.svg)

### Margin

In addition to the [spacing tokens](https://nordhealth.design/core/tokens/#space) the margin helpers come with "auto" margins. These can be useful for pushing an element to the start or end of a [stack](https://nordhealth.design/#stack-utilities) or [grid](https://nordhealth.design/#grid-and-container-utilities) as well as centering en element horizontally as well as vertically.

```html
<!-- Margin inline start (left) -->
<div class="n-margin-is-xs">.n-margin-is-xs</div>
<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-xs">.n-margin-ie-xs</div>
<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-xs">.n-margin-bs-xs</div>
<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-xs">.n-margin-be-xs</div>
<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-xs">.n-margin-i-xs</div>
<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-xs">.n-margin-b-xs</div>
<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-xs">.n-margin-xs</div>
<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]\(/css/examples/margin/)

### Padding

```html
<!-- Padding inline start (left) -->
<div class="n-padding-is-xs">.n-padding-is-xs</div>
<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-xs">.n-padding-ie-xs</div>
<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-xs">.n-padding-bs-xs</div>
<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-xs">.n-padding-be-xs</div>
<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-xs">.n-padding-i-xs</div>
<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-xs">.n-padding-b-xs</div>
<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-xs">.n-padding-xs</div>
<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]\(/css/examples/padding/)

---

## 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](https://caniuse.com/?search=line-clamp){rel="&#x22;nofollow&#x22;"} before using.

```html
<!-- Navigation header 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-clinic-icon-color: var(--n-color-status-success)">O</span>
  <span class="n-clinic-icon" style="--n-clinic-icon-color: var(--n-color-status-highlight)">R</span>
  <span class="n-clinic-icon" style="--n-clinic-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>

<!-- Sometimes you need to style a wrapper element around an <input> e.g. when using 3rd party libraries -->
<!-- In those cases you can add `n-input` to the wrapper, and use `n-input-invalid` to style the field as invalid -->
<div class="n-stack n-gap-s">
  <label class="n-label" for="input3">Label</label>
  <div class="n-input n-input-invalid">
    <input
      id="input3"
      aria-invalid="true"
      aria-describedby="error3"
      value="Value"
      style="border: none; background: transparent; outline: none; display: block; width: 100%"
    />
  </div>
  <div class="n-error" id="error3" role="alert">This field is required</div>
</div>

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

<!-- Counter -->
<div class="n-stack n-stack-horizontal n-gap-s n-color-accent n-color-text-on-accent n-padding-s n-border-radius">
  <span>Label</span>
  <span class="n-counter">12</span>
</div>

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

<!-- Single 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>

<!-- Text alignment start -->
<p class="n-align-start">.n-align-start</p>

<!-- Text alignment center -->
<p class="n-align-center">.n-align-center</p>

<!-- Text alignment end -->
<p class="n-align-end">.n-align-end</p>

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

<!-- Inline size full -->
<!-- Useful when you need an element to fill its container's width, especially inside constrained containers or flex layouts -->
<div
  style="
    max-width: 400px;
    border: 1px solid var(--n-color-border);
    padding: var(--n-space-m);
    border-radius: var(--n-border-radius-s);
    box-sizing: border-box;
  "
>
  <label class="n-label" for="input4">Input without full width</label>
  <input
    id="input4"
    class="n-input n-margin-bs-s n-margin-be-m"
    placeholder="Default width"
    style="box-sizing: border-box"
  />

  <label class="n-label" for="input5">Input with .n-inline-size-full</label>
  <input
    id="input5"
    class="n-input n-inline-size-full n-margin-bs-s"
    placeholder="Fills container width"
    style="box-sizing: border-box"
  />
</div>
```

\[View misc examples]\(/css/examples/misc/)

---

## 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](https://nordhealth.design/core/tokens/).

An example use case could be that you wish to use [our spacing tokens](https://nordhealth.design/core/tokens/#space) to add margin around an element:

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

Another use case could be that you want to apply a [color token](https://nordhealth.design/core/tokens/#color) to a highlighted piece of text:

```css
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](https://nordhealth.design/design/themes/).

\[View all design tokens]\(/core/tokens/)

---

## Getting support

Need help with our CSS Framework? Please head over to the [Support page](https://nordhealth.design/resources/support/) for more information and ways to contact us.


# Templates

\*Templates exist to document the layout and user interface patterns and work as examples on how to combine the different parts of Nord to build complete application views.\*

\- \[Application Template]\(/templates/application)
\- \[Profile Template]\(/templates/profile) (draft)
\- \[Right-to-left Template]\(/templates/rtl)
\- \[Settings Template]\(/templates/settings) (draft)
\- \[Sign In Template]\(/templates/sign-in)
\- \[Tabs Template]\(/templates/tabs)
\- \[Theming Template]\(/templates/theming) (draft)
\- \[Top Bar Template]\(/templates/top-bar) (draft)


# Nordicons

\*\*arrow:\*\* \`arrow-down\`, \`arrow-down-double\`, \`arrow-down-long\`, \`arrow-down-small\`, \`arrow-expand-down-small\`, \`arrow-expand-right-small\`, \`arrow-left\`, \`arrow-left-double\`, \`arrow-left-long\`, \`arrow-left-small\`, \`arrow-refresh\`, \`arrow-replace\`, \`arrow-right\`, \`arrow-right-double\`, \`arrow-right-long\`, \`arrow-right-small\`, \`arrow-undo\`, \`arrow-up\`, \`arrow-up-double\`, \`arrow-up-down-long\`, \`arrow-up-long\`, \`arrow-up-small\`
\*\*file:\*\* \`file-code\`, \`file-generic\`, \`file-invoice\`, \`file-multiple\`, \`file-notepad\`, \`file-notes\`, \`file-patient-records\`, \`file-picture\`, \`file-script\`, \`file-treatment-plan\`
\*\*generic:\*\* \`generic-ambulance\`, \`generic-amphibia\`, \`generic-arachnida\`, \`generic-bank\`, \`generic-bar-code\`, \`generic-birds\`, \`generic-bug\`, \`generic-building\`, \`generic-cable\`, \`generic-calculator\`, \`generic-canine\`, \`generic-car\`, \`generic-cattle\`, \`generic-chip\`, \`generic-cloud\`, \`generic-company\`, \`generic-computer\`, \`generic-consent-agreed\`, \`generic-consent-declined\`, \`generic-consent-expired\`, \`generic-consent-not-asked\`, \`generic-credit-card\`, \`generic-cube\`, \`generic-database\`, \`generic-emoji\`, \`generic-equidae\`, \`generic-farm\`, \`generic-farm-2\`, \`generic-feline\`, \`generic-fish\`, \`generic-gift\`, \`generic-github\`, \`generic-hospital\`, \`generic-keyboard\`, \`generic-laptop\`, \`generic-leporidae\`, \`generic-location\`, \`generic-mail\`, \`generic-module\`, \`generic-passport\`, \`generic-pet-food\`, \`generic-pet-paw\`, \`generic-port\`, \`generic-qr-code\`, \`generic-reptilia\`, \`generic-rodents\`, \`generic-server\`, \`generic-sheep\`, \`generic-shipping\`, \`generic-signal\`, \`generic-slack\`, \`generic-storage\`, \`generic-suidae\`, \`generic-telephone\`, \`generic-truck\`, \`generic-unchipped\`
\*\*graph:\*\* \`graph-bars\`, \`graph-line\`, \`graph-pie-chart\`, \`graph-trend-down\`, \`graph-trend-up\`
\*\*interface:\*\* \`interface-add\`, \`interface-add-small\`, \`interface-ai\`, \`interface-alarm\`, \`interface-archive\`, \`interface-attachment\`, \`interface-bookmark\`, \`interface-bookmark-filled\`, \`interface-calendar\`, \`interface-calendar-checked-in\`, \`interface-cancelled-small\`, \`interface-chat\`, \`interface-checked\`, \`interface-checked-circle\`, \`interface-checked-small\`, \`interface-circle\`, \`interface-clipboard\`, \`interface-close\`, \`interface-close-small\`, \`interface-complete-small\`, \`interface-container\`, \`interface-content-book\`, \`interface-copy\`, \`interface-cpr-acpr\`, \`interface-cpr-unknown\`, \`interface-customer-support\`, \`interface-delete\`, \`interface-dislike\`, \`interface-dislike-filled\`, \`interface-dnr\`, \`interface-download\`, \`interface-dropdown-small\`, \`interface-duplicate\`, \`interface-edit\`, \`interface-edit-2\`, \`interface-edit-off\`, \`interface-edit-on\`, \`interface-email\`, \`interface-emoji-happy\`, \`interface-emoji-neutral\`, \`interface-emoji-sad\`, \`interface-error\`, \`interface-expand\`, \`interface-eyedropper\`, \`interface-face-id\`, \`interface-fast-forward\`, \`interface-fast-forward-2\`, \`interface-favorite\`, \`interface-favorite-filled\`, \`interface-filter\`, \`interface-fit-screen\`, \`interface-fit-screen-small\`, \`interface-folder\`, \`interface-globe\`, \`interface-grabber\`, \`interface-grid\`, \`interface-help\`, \`interface-history\`, \`interface-home\`, \`interface-horizontal-adjust\`, \`interface-inbox\`, \`interface-incomplete-small\`, \`interface-info\`, \`interface-key\`, \`interface-layers\`, \`interface-like\`, \`interface-like-filled\`, \`interface-link\`, \`interface-loading\`, \`interface-location-off\`, \`interface-location-on\`, \`interface-lock\`, \`interface-login\`, \`interface-logout\`, \`interface-menu-small\`, \`interface-microphone\`, \`interface-mode-dark\`, \`interface-mode-light\`, \`interface-new-window\`, \`interface-new-window-small\`, \`interface-partially-complete-small\`, \`interface-password\`, \`interface-pause\`, \`interface-payment-terminal\`, \`interface-play\`, \`interface-presentation-mode\`, \`interface-print\`, \`interface-record\`, \`interface-remove\`, \`interface-remove-small\`, \`interface-rewind\`, \`interface-rewind-2\`, \`interface-send\`, \`interface-setting-slider\`, \`interface-share\`, \`interface-shield\`, \`interface-shopping-cart\`, \`interface-sort-down-small\`, \`interface-sort-small\`, \`interface-sort-up-small\`, \`interface-spinner\`, \`interface-star\`, \`interface-star-filled\`, \`interface-stop\`, \`interface-stop-filled\`, \`interface-table\`, \`interface-tag\`, \`interface-tag-filled\`, \`interface-thumb\`, \`interface-time\`, \`interface-time-reset\`, \`interface-unlink\`, \`interface-unlock\`, \`interface-upload\`, \`interface-video\`, \`interface-voice-id\`, \`interface-volume\`, \`interface-volume-off\`, \`interface-warning\`, \`interface-warning-small\`, \`interface-whiteboard\`, \`interface-zoom-in\`, \`interface-zoom-out\`
\*\*keyboard:\*\* \`keyboard-arrow-down\`, \`keyboard-arrow-left\`, \`keyboard-arrow-right\`, \`keyboard-arrow-up\`, \`keyboard-arrow-up-down\`, \`keyboard-backspace\`, \`keyboard-command\`, \`keyboard-option\`, \`keyboard-return\`, \`keyboard-shift\`
\*\*medical:\*\* \`medical-bandage\`, \`medical-birthday\`, \`medical-blood\`, \`medical-death\`, \`medical-disability\`, \`medical-drip\`, \`medical-female\`, \`medical-flask\`, \`medical-heart-rate\`, \`medical-heart-rate-2\`, \`medical-heart-rate-3\`, \`medical-instrument-stethoscope\`, \`medical-insurance\`, \`medical-insurance-2\`, \`medical-male\`, \`medical-neutered\`, \`medical-pill\`, \`medical-prescription\`, \`medical-radio-active\`, \`medical-radiology-scan\`, \`medical-ribbon\`, \`medical-spayed\`, \`medical-storage-device\`, \`medical-surgery\`, \`medical-syringe\`, \`medical-temperature\`, \`medical-temperature-cold\`, \`medical-temperature-hot\`, \`medical-test-tube\`
\*\*navigation:\*\* \`navigation-catalog\`, \`navigation-dashboard\`, \`navigation-drawer-left-collapse\`, \`navigation-drawer-left-expand\`, \`navigation-drawer-right-collapse\`, \`navigation-drawer-right-expand\`, \`navigation-finances\`, \`navigation-notifications\`, \`navigation-payments\`, \`navigation-reports\`, \`navigation-reports-2\`, \`navigation-scheduling\`, \`navigation-search\`, \`navigation-settings\`, \`navigation-tasks\`, \`navigation-timeline\`, \`navigation-toggle\`, \`navigation-toggle-lock\`
\*\*text:\*\* \`text-bold\`, \`text-center\`, \`text-font-size\`, \`text-heading-1\`, \`text-heading-2\`, \`text-heading-3\`, \`text-indent-decrease\`, \`text-indent-increase\`, \`text-italic\`, \`text-justified\`, \`text-left-align\`, \`text-list\`, \`text-ordered-list\`, \`text-paragraph\`, \`text-quote\`, \`text-right-align\`, \`text-strike-through\`, \`text-to-speech\`, \`text-translate\`, \`text-underline\`
\*\*user:\*\* \`user-add\`, \`user-block\`, \`user-checked\`, \`user-delete\`, \`user-edit\`, \`user-multiple\`, \`user-single\`

## Installation

Before moving further, please make sure you have [Node.js](https://nodejs.org/en/){rel="&#x22;nofollow&#x22;"} installed on your machine.

### Install using NPM

Run in your project or website root directory:

```bash
npm install @nordhealth/icons
```

### Install using Yarn

```bash
yarn add @nordhealth/icons
```

**Note:** In most cases you will want to install our [Web Components](https://nordhealth.design/docs/developer/web-components/) instead of Nordicons package directly. Nord's Web Components offer a dedicated Icon component that allows you to use all our icons and set their size and color according to our design tokens.

---

## Usage

Nordicons package ships both SVG and JavaScript formats. Once you have the NPM package installed, you can import Nordicons in JavaScript format:

```js
import nordicons from '@nordhealth/icons'

console.log(nordicons['arrow-right'])
```

Alternatively you can import the icons you need individually. This is useful if you are compiling your code with Webpack and need to be mindful of package size:

```js
import icon from '@nordhealth/icons/lib/assets/arrow-right.js'

console.log(icon)
```

Or using require:

```js
const icon = require('@nordhealth/icons/lib/assets/arrow-right.js')

console.log(icon)
```

---

## Icon Component

The easiest and recommended way to use Nordicons is via our dedicated [Icon Web Component](https://nordhealth.design/components/icon/) that allows you to use all our icons and set their size and color according to our design tokens.

```html
<nord-stack direction="horizontal" align-items="center">
  <nord-icon size="s" name="interface-star-filled" color="var(--n-color-status-success)"></nord-icon>
  <nord-icon size="m" name="interface-star-filled" color="var(--n-color-status-danger)"></nord-icon>
  <nord-icon size="l" name="interface-star-filled" color="var(--n-color-status-warning)"></nord-icon>
  <nord-icon size="xl" name="interface-star-filled" color="var(--n-color-status-highlight)"></nord-icon>
</nord-stack>
```

[View Icon component](https://nordhealth.design/components/icon/)

---

## Changing Icon Color

You can customize the color of an icon using our [design tokens](https://nordhealth.design/core/tokens/):

```jsx
import nordicons from '@nordhealth/icons'

function MyIcon() {
  return (
    <div className="m-b-icon" dangerouslySetInnerHTML={{ __html: nordicons['arrow-right'].svg }} />
  )
}
```

To style the icon:

```css
.my-icon svg {
  color: var(--n-color-icon);
  width: var(--n-space-m);
  height: var(--n-space-m);
}
```

---

## CDN Usage

Icons can also be directly downloaded and served from Nord CDN:

```html
<img height="24" width="24" src="https://nordcdn.net/ds/icons/3.x.x/assets/[ICON NAME].svg" />
```

---

## Importing SVG

While the most straightforward way to use the icons is by importing them through JavaScript, it's also possible to copy and use the basic SVG files. To get started, install `copyfiles` NPM package:

```bash
npm install copyfiles --save-dev
```

Once installed, add the following script to your package.json that copies the icons from Nordicons into a location you've specified:

```json
"scripts": {
  "copy:icons": "copyfiles --flat node_modules/@nordhealth/icons/lib/* src/SPECIFY_YOUR_PATH"
}
```

You can then call this script while starting up your app to make sure you've always got the latest icons copied over. If you're using a UNIX-like environment, you can use `&` as the separator:

```json
"start": "copy:icons & dev"
```

---

## Figma Usage

The easiest way to use Nordicons in Figma is through our Web interface:

1. Click on an icon that you want to use in Figma
2. Click "Copy file" button in the details panel
3. Switch to Figma, open a design file, and paste the vector file

### Resizing Icons in Figma

Most Nordicons are drawn using a stroke. When you resize this type of icon using the **Move** tool in Figma, the stroke won't scale with the icon.

To overcome this issue, use the **Scale** tool instead. You can either click the Move tool's dropdown icon or use the "K" shortcut.

---

## Icon Categories

- **Generic** - General purpose icons
- **Arrows** - Directional arrows
- **File formats** - Document and file type icons
- **Graphs** - Charts and data visualization
- **Interface** - UI element icons
- **Keyboard** - Key and keyboard icons
- **Medical** - Healthcare related icons
- **Navigation** - Menu and navigation icons
- **Text editor** - Formatting and text icons
- **Users** - People and user icons

---

## Can I Use Nordicons in My Own Project?

Nord Design System is solely meant for building digital products and experiences for [Nordhealth](https://nordhealth.com){rel="&#x22;nofollow&#x22;"}. Please see the [terms of use](https://nordhealth.design/resources/terms/) for full license details.

## Need a New Icon?

All new icons should be added to Nordicons first. Please see [Support page](https://nordhealth.design/resources/support/) for more information on how to contact us.

## Designing New Icons

Please see our [Iconography documentation](https://nordhealth.design/design/foundations/iconography/) for guidelines, base grid, keyshapes, and more.

## Getting Support

Need help with Nordicons? Please head over to the [Support page](https://nordhealth.design/resources/support/) for more guidelines and ways to contact us.


# Themes

\*Nord Design System's parts are themable using CSS Custom Properties. We ship pre-made themes for dark and light mode in addition to providing high contrast variants for each theme.\*

![Nord Themes](https://nordhealth.design/img/themes.svg){height="640" width="1280"}

Integrating Nord's themes into your project is straightforward. To get started, add one of the following link tags to the `<head>` of your application:

\*\*Therapy brand:\*\*
\- Light theme (default): \`\<link rel="stylesheet" href="https\://nordcdn.net/ds/themes/{version}/nord.css" />\`
\- Dark theme: \`\<link rel="stylesheet" href="https\://nordcdn.net/ds/themes/{version}/nord-dark.css" />\`
\- Light high contrast theme: \`\<link rel="stylesheet" href="https\://nordcdn.net/ds/themes/{version}/nord-high-contrast.css" />\`
\- Dark high contrast theme: \`\<link rel="stylesheet" href="https\://nordcdn.net/ds/themes/{version}/nord-dark-high-contrast.css" />\`
\*\*Veterinary brand:\*\*
\- Light theme (default): \`\<link rel="stylesheet" href="https\://nordcdn.net/ds/themes/{version}/vet.css" />\`
\- Dark theme: \`\<link rel="stylesheet" href="https\://nordcdn.net/ds/themes/{version}/vet-dark.css" />\`
\- Light high contrast theme: \`\<link rel="stylesheet" href="https\://nordcdn.net/ds/themes/{version}/vet-high-contrast.css" />\`
\- Dark high contrast theme: \`\<link rel="stylesheet" href="https\://nordcdn.net/ds/themes/{version}/vet-dark-high-contrast.css" />\`
Replace \`{version}\` with the installed \`@nordhealth/themes\` version.

When using Nord's themes, it's required to include our CSS Framework *before* the theme link tag to get access to properties such as margin, padding, font sizes, and similar which are not bundled into each theme:

```html
<link href="https://nordcdn.net/ds/css/4.2.0/nord.min.css" rel="stylesheet" />
```

Please note that the \*\*Light Default Theme\*\* is bundled into our \[CSS framework]\(/core/css/), meaning there is no need to add this theme if you already have the CSS Framework installed and it's the only theme you wish to use.

---

## Installation

While usage through Nord CDN is the fastest way to get started, we also support installing any of the themes locally using npm. Before you move further with this approach, please make sure you have [Node.js](https://nodejs.org/en/){rel="&#x22;nofollow&#x22;"} installed on your machine. You can install the latest version through their website.

If you're planning on using Nord Themes in a project that doesn't yet use [npm](https://www.npmjs.com/){rel="&#x22;nofollow&#x22;"}, you'll first need to create a [package.json](https://docs.npmjs.com/files/package.json){rel="&#x22;nofollow&#x22;"} file. To do this, run `npm init` and follow the steps provided. Once finished, you can continue the Nord Themes installation by following the instructions below.

### Install using npm

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

```bash
npm install @nordhealth/themes @nordhealth/css --save
```

### Importing a theme locally

Once you've installed our npm packages, you can then import any of Nord's themes into your project as CSS, SCSS, Sass or Less:

\*\*Therapy brand:\*\*
\- Light theme (default): bundled in \`@nordhealth/css/lib/nord.min.css\`
\- Dark theme: \`@import "\~@nordhealth/themes/lib/nord-dark.css";\`
\- Light high contrast theme: \`@import "\~@nordhealth/themes/lib/nord-high-contrast.css";\`
\- Dark high contrast theme: \`@import "\~@nordhealth/themes/lib/nord-dark-high-contrast.css";\`
\*\*Veterinary brand:\*\*
\- Light theme (default): \`@import "\~@nordhealth/themes/lib/vet.css";\`
\- Dark theme: \`@import "\~@nordhealth/themes/lib/vet-dark.css";\`
\- Light high contrast theme: \`@import "\~@nordhealth/themes/lib/vet-high-contrast.css";\`
\- Dark high contrast theme: \`@import "\~@nordhealth/themes/lib/vet-dark-high-contrast.css";\`
Always import the CSS framework first: \`@import "\~@nordhealth/css/lib/nord.min.css";\`

If you're not using [Webpack](https://webpack.github.io/){rel="&#x22;nofollow&#x22;"} or a similar tool for your build process, you may have to provide the full paths to Node Modules:

```scss
@import "/node_modules/@nordhealth/css/lib/nord.min.css";
@import "/node_modules/@nordhealth/themes/lib/nord-dark.css";
```

---

## Available themes

Below you can find a list of available themes and paths to them inside our Node.js package:

\- \*\*Light (default):\*\* \`@nordhealth/themes/lib/nord.css\`
\- \*\*Light high contrast:\*\* \`@nordhealth/themes/lib/nord-high-contrast.css\`
\- \*\*Dark:\*\* \`@nordhealth/themes/lib/nord-dark.css\`
\- \*\*Dark high contrast:\*\* \`@nordhealth/themes/lib/nord-dark-high-contrast.css\`

\- \*\*Light (default):\*\* \`@nordhealth/themes/lib/vet.css\`
\- \*\*Light high contrast:\*\* \`@nordhealth/themes/lib/vet-high-contrast.css\`
\- \*\*Dark:\*\* \`@nordhealth/themes/lib/vet-dark.css\`
\- \*\*Dark high contrast:\*\* \`@nordhealth/themes/lib/vet-dark-high-contrast.css\`

### Themes on Nord CDN

\`\`\`html
\<!-- Light theme (default) -->
\<link href="https\://nordcdn.net/ds/themes/9.0.0/nord.css" rel="stylesheet" />
\<!-- Light high contrast theme -->
\<link href="https\://nordcdn.net/ds/themes/9.0.0/nord-high-contrast.css" rel="stylesheet" />
\<!-- Dark theme -->
\<link href="https\://nordcdn.net/ds/themes/9.0.0/nord-dark.css" rel="stylesheet" />
\<!-- Dark high contrast theme -->
\<link href="https\://nordcdn.net/ds/themes/9.0.0/nord-dark-high-contrast.css" rel="stylesheet" />
\`\`\`

\`\`\`html
\<!-- Light theme (default) -->
\<link href="https\://nordcdn.net/ds/themes/9.0.0/vet.css" rel="stylesheet" />
\<!-- Light high contrast theme -->
\<link href="https\://nordcdn.net/ds/themes/9.0.0/vet-high-contrast.css" rel="stylesheet" />
\<!-- Dark theme -->
\<link href="https\://nordcdn.net/ds/themes/9.0.0/vet-dark.css" rel="stylesheet" />
\<!-- Dark high contrast theme -->
\<link href="https\://nordcdn.net/ds/themes/9.0.0/vet-dark-high-contrast.css" rel="stylesheet" />
\`\`\`

---

## Examples

- Try [theme builder](https://nordhealth.design/theme-builder/) to better understand how our themes work.
- For more examples, [view our templates](https://nordhealth.design/templates/) and try adjusting the active theme in the documentation and then refreshing the template viewed.
- You can switch the active theme inside any of our [component examples](https://nordhealth.design/components/button/).
- You can switch the active theme in our [Design Tokens documentation](https://nordhealth.design/core/tokens/).
- Finally, our [Figma Toolkit](https://nordhealth.design/design/foundations/figma/#theming) supports theming directly in Figma.

![Nord Themes](https://nordhealth.design/img/themes.png){height="443" width="1500"}

---

## Dark mode

Dark mode is a user interface mode that displays light text on a dark background. Dark mode is helpful for those viewing device screens at night, in dark environments or find darker UI more accessible. The reduced brightness can reduce eye strain in low light conditions.

A typical scenario is that we already have a light theme in an application, and want to build support for a darker counterpart. When building this support, one of the themes has to be defined as the default that users get on their first visit. This should always be the light theme, although we can let the user's browser make that choice for us.

When building dark mode support in an application, we should always provide a manual way for the user to switch to the other theme in the platform's settings. This setting should include at least the following options:

Light theme
Dark theme
Auto (system preference)

Most of the time, we also recommend you to provide the capability for the user to choose one of our high contrast themes:

Light theme (default)
Light high contrast theme
Dark theme
Dark high contrast theme
Auto (system preference)

### Changing mode based on user preference

Since Nord offers its themes as separate stylesheets, we can toggle between these stylesheets for each mode. By default, we should have the light stylesheet in the `<head>` section of the application:

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Nord dark theme -->
    <link href="https://nordcdn.net/ds/css/4.2.0/nord.min.css" rel="stylesheet" />
    <link href="https://nordcdn.net/ds/themes/9.0.0/nord-dark.css" rel="stylesheet" />
  </head>
  <body>
    <nord-select label="Interface theme">
      <option value="light">Light theme</option>
      <option value="dark">Dark theme</option>
      <option value="auto">Auto (system preference)</option>
    </nord-select>
  </body>
</html>
```

When the user switches the mode, we can toggle between these stylesheets:

```js
// Select the menu
const menu = document.querySelector('nord-select')

// Listen for a change event on the menu
menu.addEventListener('change', (event) => {
  // If the selected mode is dark, change to dark theme
  if (event.target.value === 'dark') {
    alert('Change theme to dark')

  // Otherwise, change to light theme
  }
  else {
    alert('Change theme to light')
  }
})
```

### Building support for OS dark mode

Many operating systems let users choose between light and dark mode directly in the system settings. The goal of `'Auto (system preference)'` is to allow this type of usage. To support this, we can use a little bit of JavaScript to detect the user's preference:

```js
// Detect operating system dark mode
const darkMode = window.matchMedia('(prefers-color-scheme: dark)')

// If the OS uses dark mode currently, change to dark theme
if (darkMode.matches) {
  alert('Change theme to dark')

  // Otherwise, change to light theme
}
else {
  alert('Change theme to light')
}
```

### Storing user's preference

Ultimately, we also need to carry over this functionality when the user either visits another view in your application or reloads the current view.

To achieve this, we need to save the user's preference so that it will be applied consistently throughout the application and on subsequent visits. To do that, we can save the preference to `localStorage`:

```js
// Get current mode from localStorage
const currentMode = localStorage.getItem('mode')

// If current mode is "dark", change to dark theme
if (currentMode === 'dark') {
  alert('Change theme to dark')
}

// Listen for a change event on the mode menu
menu.addEventListener('change', (event) => {
  let mode = 'light'

  // If the selected mode is dark, change to dark theme
  if (event.target.value === 'dark') {
    alert('Change theme to dark')
    mode = 'dark'

  // Otherwise, change to light theme
  }
  else {
    alert('Change theme to light')
  }

  // Finally, save the choice into localStorage
  localStorage.setItem('mode', mode)
})
```

---

## Creating themes

Nord uses CSS Custom Properties (sometimes referred to as CSS variables) to make its parts themable. CSS Custom Properties allow us to have our values stored in one place, then referenced in multiple other places.

While we could argue that you shouldn't create new themes yourself as you lose the built-in [accessibility](https://nordhealth.design/design/foundations/accessibility-checklist/), break the connection with the underlying [brand architecture](https://nordhealth.design/design/foundations/brand/), and lose backwards compatibility, you could still technically do so. Hence our thinking is that it's better to document this than leave it up for our users to guess.

To create a complete theme, you need a new CSS file with a `:root` CSS pseudo-class which declares global colors, gradients, box-shadows, and color aliases for the theme. This file needs to be referenced after our [CSS Framework](https://nordhealth.design/docs/developer/css-framework/) in the `<head>` of your app:

```scss
:root {
  /* Tell the browser whether it's a light or dark theme
     so that it uses things like light/dark scrollbars: */
  color-scheme: light;

  /* ACCENT COLOR */
  --n-color-accent: {color};

  /* TEXT COLORS */
  --n-color-text: {color};
  --n-color-text-link: {color};
  --n-color-text-weak: {color};
  --n-color-text-weaker: {color};
  --n-color-text-weakest: {color};
  --n-color-text-on-accent: {color};
  --n-color-text-error: {color};
  --n-color-text-danger: {color};
  --n-color-text-success: {color};
  --n-color-text-neutral: {color};
  --n-color-text-neutral-strong: {color};
  --n-color-text-warning: {color};
  --n-color-text-warning-strong: {color};
  --n-color-text-highlight: {color};
  --n-color-text-info: {color};
  --n-color-text-progress: {color};

  /* NAVIGATION COLORS */
  --n-color-nav-surface: {color};
  --n-color-nav-heading: {color};
  --n-color-nav-hover: {color};

  /* BORDER COLORS */
  --n-color-border: {color};
  --n-color-border-strong: {color};
  --n-color-border-neutral: {color};
  --n-color-border-warning: {color};
  --n-color-border-highlight: {color};
  --n-color-border-danger: {color};
  --n-color-border-success: {color};
  --n-color-border-info: {color};
  --n-color-border-progress: {color};

  /* SKIN COLORS */
  --n-color-surface: {color};
  --n-color-background: {color};
  --n-color-surface-raised: {color};
  --n-color-surface-lowered: {color};
  --n-color-overlay: {color};

  /* STATUS COLORS */
  --n-color-status-neutral: {color};
  --n-color-status-warning: {color};
  --n-color-status-highlight: {color};
  --n-color-status-danger: {color};
  --n-color-status-success: {color};
  --n-color-status-info: {color};
  --n-color-status-progress: {color};
  --n-color-status-notification: {color};

  /* STATUS WEAK COLORS */
  --n-color-status-neutral-weak: {color};
  --n-color-status-warning-weak: {color};
  --n-color-status-highlight-weak: {color};
  --n-color-status-danger-weak: {color};
  --n-color-status-success-weak: {color};
  --n-color-status-info-weak: {color};
  --n-color-status-progress-weak: {color};

  /* BOX SHADOW COLORS */
  --n-box-shadow: {box-shadow};
  --n-box-shadow-card: {box-shadow};
  --n-box-shadow-header: {box-shadow};
  --n-box-shadow-modal: {box-shadow};
  --n-box-shadow-popout: {box-shadow};
  --n-box-shadow-nav: {box-shadow};
}
```

The above example assumes that you will replace any instance of `{color}`, `{gradient}` and `{box-shadow}` with your own values.

\> \[!WARNING]
\> Please \[reach out to Nord team]\(/resources/support/) before creating a custom theme to discuss about the use case and better understand the limitations. We recommend the usage of "accent color" instead. For more details, continue reading.

### Example theme

Below is an example theme that you can use as the foundation for building your own custom themes:

```css
:root {
  /* Tell the browser whether it's a light or dark theme
     so that it uses things like light/dark scrollbars: */
  color-scheme: light;

  /* ACCENT COLOR */
  --n-color-accent: rgb(53, 89, 199);

  /* TEXT COLORS */
  --n-color-text: rgb(12, 26, 61);
  --n-color-text-link: rgb(53, 89, 199);
  --n-color-text-weak: rgb(54, 67, 74);
  --n-color-text-weaker: rgb(102, 118, 128);
  --n-color-text-weakest: rgb(178, 186, 191);
  --n-color-text-on-accent: rgb(255, 255, 255);
  --n-color-text-error: rgb(210, 64, 35);
  --n-color-text-danger: rgb(178, 48, 21);
  --n-color-text-success: rgb(17, 118, 39);
  --n-color-text-neutral: rgb(85, 89, 93);
  --n-color-text-neutral-strong: rgb(17, 24, 28);
  --n-color-text-warning: rgb(148, 105, 0);
  --n-color-text-warning-strong: rgb(51, 40, 16);
  --n-color-text-highlight: rgb(121, 58, 175);
  --n-color-text-info: rgb(52, 81, 178);
  --n-color-text-progress: rgb(1, 109, 131);

  /* NAVIGATION COLORS */
  --n-color-nav-surface: rgb(255, 255, 255);
  --n-color-nav-heading: rgb(143, 161, 170);
  --n-color-nav-hover: rgb(246, 248, 248);

  /* BORDER COLORS */
  --n-color-border: rgb(216, 222, 228);
  --n-color-border-strong: rgb(188, 197, 204);
  --n-color-border-neutral: rgb(215, 220, 224);
  --n-color-border-warning: rgb(248, 216, 124);
  --n-color-border-highlight: rgb(227, 204, 244);
  --n-color-border-danger: rgb(250, 199, 190);
  --n-color-border-success: rgb(183, 223, 186);
  --n-color-border-info: rgb(198, 212, 249);
  --n-color-border-progress: rgb(176, 229, 238);

  /* SKIN COLORS */
  --n-color-surface: rgb(255, 255, 255);
  --n-color-background: rgb(250, 251, 251);
  --n-color-surface-raised: rgb(250, 251, 251);
  --n-color-surface-lowered: rgb(230, 232, 235);
  --n-color-overlay: rgba(144, 152, 152, 0.4);

  /* STATUS COLORS */
  --n-color-status-neutral: rgb(255, 255, 255);
  --n-color-status-warning: rgb(246, 205, 90);
  --n-color-status-highlight: rgb(142, 78, 198);
  --n-color-status-danger: rgb(210, 64, 35);
  --n-color-status-success: rgb(29, 134, 51);
  --n-color-status-info: rgb(62, 99, 221);
  --n-color-status-progress: rgb(0, 127, 153);
  --n-color-status-notification: rgb(231, 84, 54);

  /* STATUS WEAK COLORS */
  --n-color-status-neutral-weak: rgb(241, 243, 245);
  --n-color-status-warning-weak: rgb(255, 250, 225);
  --n-color-status-highlight-weak: rgb(249, 241, 254);
  --n-color-status-danger-weak: rgb(255, 240, 238);
  --n-color-status-success-weak: rgb(235, 249, 235);
  --n-color-status-info-weak: rgb(240, 244, 255);
  --n-color-status-progress-weak: rgb(231, 249, 251);

  /* BOX SHADOW COLORS */
  --n-box-shadow: 0 1px 3px rgba(12, 12, 12, 0.09);
  --n-box-shadow-card: 0 0 0 1px var(--n-color-border), 0 1px 5px rgba(12, 12, 12, 0.05), 0 0 40px rgba(12, 12, 12, 0.015);
  --n-box-shadow-header: 0 1px 5px rgba(12, 12, 12, 0.05);
  --n-box-shadow-modal: 0 24px 38px 3px rgba(12, 12, 12, 0.16), 0 9px 86px 8px rgba(12, 12, 12, 0.1), 0 11px 15px -7px rgba(12, 12, 12, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.05);
  --n-box-shadow-popout: 0 4px 12px rgba(12, 12, 12, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05);
  --n-box-shadow-nav: 0 0 0 1px var(--n-color-border), 0 5px 17px rgba(12, 12, 12, 0.14);
}
```

---

## Accent color

Most of the time you shouldn't create a complete theme, but instead provide a slightly branded experience for your users. This can be helpful when offering for example customer portals that our client's client would have access to.

For this, Nord provides a concept called `accent color` that supports both Nord light and Nord dark themes. We've created [a tool called Theme Builder](https://nordhealth.design/theme-builder/) that shows how this works.

To get started with using accent color, first remove all themes from the `<head>` section of the application and only leave [CSS Framework](https://nordhealth.design/docs/developer/css-framework/) which includes the default light theme that we'll use as a basis:

```html
<!-- CSS Framework that comes with light default theme -->
<link href="https://nordcdn.net/ds/css/4.2.0/nord.min.css" rel="stylesheet" />
```

Next, after the CSS Framework, add the following styles and replace `{accent-color}` with a custom hex value and `{text-on-accent-color}` with a hex value that offers the necessary 4.5:1 contrast ratio for text that sits on top of the accent color:

```html
<style>
  :root {
    /* CUSTOM ACCENT COLORS */
    --n-color-accent: {accent-color};
    --n-color-text-on-accent: {text-on-accent-color};
  }
</style>
```

We recommend you to set the text as `#0c1a3d` for light accent colors and `#fff` for dark accent colors so that they match the default Nord light and dark themes.

If you're working on an interface that allows the user to pick the accent color themselves, we recommend programmatically picking the right text color, instead of leaving this to the user. You can use the `getTextColor` utility function found from `@nordhealth/color` package to do this:

```js
import { getTextColor } from '@nordhealth/color'

const textColor = getTextColor('#fafafa')
```

The above utility function can also be utilized on a regular HTML page by importing the color package directly. In the below example, we set the new theme colors into `:root` CSS pseudo-class whenever the color input value changes:

```html
<label for="color">Accent color</label>
<input id="color" type="color" value="#3559c7" />

<script src="@nordhealth/color/lib/index.min.js"></script>
<script>
  const input = document.querySelector("#color")
  const root = document.documentElement

  input.addEventListener("input", () => {
    const color = input.value
    const textColor = NordColor.getTextColor(color)

    root.style.setProperty("--n-color-accent", color)
    root.style.setProperty("--n-color-text-on-accent", textColor)
  })
</script>
```

You can try the above example in our [theme builder](https://nordhealth.design/theme-builder/).

\[Try in theme builder]\(/theme-builder/)

\> \[!WARNING]
\> Please note that in most cases, it is a good idea to offer a predefined palette of colors that provide sufficient contrast with the content. In this case, you don't have to calculate the text color with JavaScript.

---

## Top Bar theming

For applications that utilize the [Top Bar component](https://nordhealth.design/components/top-bar/), Nord provides slightly more control over the visual appearance. For this purpose, we have a CSS Custom Property named `var(--n-color-accent-secondary)`. This token can be used to customize the background color of the top bar and navigation header:

![Nord theme](https://nordhealth.design/img/migrations/theming.png){height="1776" loading="lazy" width="2536"}

To get started using this feature, add the following styles and replace `{color}` with a custom hex value that offers at least 4.5:1 contrast ratio against white text:

```html
<style>
  :root {
    /* CUSTOM SECONDARY ACCENT COLOR */
    --n-color-accent-secondary: {color};
  }
</style>
```

Please note that the text and interface elements inside the top bar and navigation header always use white text. For this reason, it is a good idea to always make `var(--n-color-accent-secondary)` slightly darker than `var(--n-color-accent)`. An example:

```html
<style>
  :root {
    /* CUSTOM ACCENT COLORS */
    --n-color-accent: #793aaf;
    --n-color-accent-secondary: #3b0075;
  }
</style>
```

You can view the above example in our [Layout component docs](https://nordhealth.design/components/layout/?example=theming).

\> \[!WARNING]
\> \*\*Good to know:\*\* By default, the \`var(--n-color-accent-secondary)\` aliases \`var(--n-color-accent)\` to provide good defaults for those who want to keep the theming simple.

---

## Logo usage

Showing a custom logo can be helpful when you want to provide more ways for your users to customize their experience in addition to [accent color](https://nordhealth.design/#accent-color). We support two different styles for displaying a logo in the header of an application.

The primary style is to display a logo in a square format inside the navigation header in the top left corner of the app. The required minimum size for the image is 64×64px. We call this style unambiguously the &#x2A;*square logo:**

![Square logo](https://nordhealth.design/img/square-logo.png){height="190" style="max-width:468px;" width="468"}

The secondary style replaces the dropdown in the header completely and shows only the logo. We call this style the &#x2A;*standalone logo:**

![Standalone logo](https://nordhealth.design/img/standalone-logo.png){height="190" style="max-width:468px;" width="468"}

This style can be helpful when offering customer portals that our client's client would have access to. We don't recommend this style for any other use case. The required minimum width for an image in this case is 360px and you should aim to use a horizontal logo given the limited space.

You can try both of these styles by uploading a logo in a correct format using our [theme builder](https://nordhealth.design/theme-builder/) which provides a setting for changing between these two logo styles.

\[Try in theme builder]\(/theme-builder/)

---

## Theming in Figma

[Nord Figma Toolkit](https://nordhealth.design/design/foundations/figma/) supports theming natively in Figma using Figma Variables. To get started with theming, follow the below instructions.

1. In the right sidebar, click the "Apply variable mode" button (swatch icon).
2. Select the "Tokens" variable collection.
3. Choose your desired theme from the dropdown.

\*\[Video: /img/figma/nord-figma-toolkit-v4-theme-switching.mp4]\*

---

## Theme Builder

Try [theme builder](https://nordhealth.design/theme-builder/) to better understand how our themes work.

\*\*\[Nord Theme Builder]\(/theme-builder/)\*\* - Updated 17.10.2022

---

## Can I use themes in my own project?

Nord Design System is solely meant for building digital products and experiences for [Nordhealth](https://nordhealth.com){rel="&#x22;nofollow&#x22;"}. Please see the [terms of use](https://nordhealth.design/resources/terms/) for full license details.

---

## Getting support

Need help with our themes? Please head over to the [Support page](https://nordhealth.design/resources/support/) for more guidelines and ways to contact us.


# Color Utilities Changelog

\*Nord Design System’s parts are versioned and released using Node Package Manager. NPM’s \[organization page]\(https\://www\.npmjs.com/org/nordhealth) lists all packages available and their most recent versions.\*

## Color Utilities

### 3.0.18 `New`

- Updates Nord dependencies to the latest.
- Release date 2.7.2026.

### 3.0.17

- Updates Nord dependencies to the latest.
- Release date 16.6.2026.

### 3.0.3 → 3.0.16

- Updates Nord dependencies to the latest.

### 3.0.2

- Updates Nord dependencies to the latest.
- Release date 4.11.2025.

### 3.0.1

- Updates Nord dependencies to the latest.
- Release date 19.5.2025.

### 3.0.0

- **New major release that unifies the two design system platforms into a one platform that can serve all of Nordhealth. This change allows us to better support the next generation of apps and generative AI experiences at Nordhealth.** ✨
- This new version ships with two distinctive brands, [therapy](https://nordhealth.design/?theme=nord) and [veterinary](https://nordhealth.design/?theme=vet). You can choose the currently active brand from the top left corner of this documentation website. Once chosen, you will get content that is tailored specifically for the brand and the business unit you’re working in. [Read more](https://nordhealth.design/migrations/4.0.0/).
- This release doesn’t include breaking changes for the existing users of Nord Design System.
- For detailed description of all changes and the steps required for migration, please see the [Migration Guide](https://nordhealth.design/migrations/4.0.0/).
- Release date 6.5.2025.

### 2.1.2

- Updates Nord dependencies to the latest.
- Release date 29.1.2025.

### 2.1.1

- Migrates the monorepo to use [pnpm workspaces](https://pnpm.io/workspaces){rel="&#x22;nofollow&#x22;"} instead.
- Release date 24.9.2024.

### 2.1.0

- Updates all package dependencies to latest.
- Release date 17.9.2024.

### 2.0.14

- Updates readme document details.
- Release date 14.6.2024.

### 2.0.13

- Updates Nord dependencies to the latest.
- Release date 11.4.2024.

### 2.0.12

- Remove unnecessary dependency on `@nordhealth/components`.
- Release date 30.11.2023.

### 2.0.11

- Updates Nord dependencies to the latest.
- Release date 01.11.2023.

### 2.0.10

- Updates Nord dependencies to the latest.
- Release date 18.10.2023.

### 2.0.9

- Updates Nord dependencies to the latest.
- Release date 17.10.2023.

### 2.0.8

- Updates Nord dependencies to the latest.
- Release date 14.9.2023.

### 2.0.7

- Updates Nord dependencies to the latest.
- Release date 12.9.2023.

### 2.0.6

- Updates Nord dependencies to the latest.
- Release date 4.9.2023.

### 2.0.5

- Updates Nord dependencies to the latest.
- Release date 22.8.2023.

### 2.0.4

- Updates Nord dependencies to the latest.
- Release date 9.8.2023.

### 2.0.3

- Updates Nord dependencies to the latest.
- Release date 5.7.2023.

### 2.0.2

- Updates Nord dependencies to the latest.
- Release date 14.6.2023.

### 2.0.1

- Updates Nord dependencies to the latest.
- Release date 31.5.2023.

### 2.0.0

- **New major release that brings [various improvements and bug fixes](https://nordhealth.design/migrations/3.0.0/)!!** ✨🥳
- For detailed description of all changes, please see [Migration guide](https://nordhealth.design/migrations/3.0.0/).
- Release date 19.5.2023.

\[Migration guide]\(/migrations/3.0.0/)

### 1.0.14

- Updates Nord dependencies to the latest.
- Release date 10.5.2022.

### 1.0.13

- Updates Nord dependencies to the latest.
- Release date 29.3.2022.

### 1.0.12

- Updates Nord dependencies to the latest.
- Release date 20.3.2022.

### 1.0.11

- Updates Nord dependencies to the latest.
- Release date 23.2.2022.

### 1.0.10

- Updates Nord dependencies to the latest.
- Release date 14.2.2022.

### 1.0.9

- Updates Nord dependencies to the latest.
- Release date 9.2.2022.

### 1.0.8

- Updates Nord dependencies to the latest.
- Release date 25.1.2022.

### 1.0.7

- Updates Nord dependencies to the latest.
- Release date 19.1.2022.

### 1.0.6

- Updates Nord dependencies to the latest.
- Release date 15.1.2022.

### 1.0.5

- Updates Nord dependencies to the latest.
- Release date 29.11.2022.

### 1.0.4

- Updates Nord dependencies to the latest.
- Release date 17.11.2022.

### 1.0.3

- Updates Nord dependencies to the latest.
- Release date 15.11.2022.

### 1.0.1

- Updates Nord dependencies to the latest.
- Release date 25.10.2022.

### 1.0.0

- Initial release of Nord Color Utilities.
- See [color utilities documentation](https://nordhealth.design/design/foundations/color-utilities/) for more details.
- Release date 24.10.2022.


# CSS Framework Changelog

\*Nord Design System’s parts are versioned and released using Node Package Manager. NPM’s \[organization page]\(https\://www\.npmjs.com/org/nordhealth) lists all packages available and their most recent versions.\*

## CSS Framework

### 5.2.0 `New`

- Generates `n-` utility classes and Tailwind `bg-*` mappings for the new navigation and surface color tokens (`surface-canvas`, `surface-background`, `nav-selected`) from the NDS-180 color refresh. (#670)
- Release date 2.7.2026.

### 5.1.0

- Exposes a new `text-xxs` Tailwind utility class and `n-font-size-xxs` CSS class backed by the `--n-font-size-xxs` design token (10px / 0.625rem), used by the `counter` utility and small badge labels in [Web Components](https://nordhealth.design/components/).
- Release date 16.6.2026.

### 5.0.8 → 5.0.9

- Coupled version bump alongside the main monorepo release; no CSS framework source changes.

### 5.0.7

- Fixes the default background of the `.n-input` utility class and the Tailwind `@utility input` from `--n-color-active` to `--n-color-surface`.
- Adds explicit disabled state background (`--n-color-active`) and readonly state background (`--n-color-active`) with preserved text color to both `.n-input` and the Tailwind `@utility input`.
- Release date 6.5.2026.

### 5.0.6

- Updates all package dependencies to latest.

### 5.0.5

- Updates all package dependencies to latest.

### 5.0.4

- Includes Nord design token CSS custom properties (`tokens.custom-properties.css`) in the Tailwind CSS bundle, ensuring theme variables are available when using the CSS framework standalone.
- Release date 23.3.2026.

### 5.0.2 `New`

- Adds `@nordhealth/fonts` as an optional peer dependency. This helps package managers surface the recommended font package without requiring it.
- Release date 27.2.2026.

### 5.0.1

- Fixes the `.n:reset` component to correctly apply the theme configured font-family, font-weight, font-feature-settings, text color, and accent color.
- Release date 24.2.2026.

### 5.0.0

- **New major release that replaces our custom logical property utilities with Tailwind CSS v4's [built-in logical property support](https://github.com/tailwindlabs/tailwindcss/releases/tag/v4.2.0). This aligns our CSS framework with the Tailwind ecosystem and reduces custom code maintenance.** ✨
- **BREAKING:**&#x52;emoves custom logical property utilities that are now provided by Tailwind CSS v4 built-ins.
  - **Padding:** `p-is-*`, `p-ie-*`, `p-bs-*`, `p-be-*`, `p-i-*`, `p-b-*` → use TW4's `ps-*`, `pe-*`, `pbs-*`, `pbe-*`, `px-*`, `py-*`
  - **Margin:** `m-is-*`, `m-ie-*`, `m-bs-*`, `m-be-*`, `m-i-*`, `m-b-*` (including negative and auto variants) → use TW4's `ms-*`, `me-*`, `mbs-*`, `mbe-*`, `mx-*`, `my-*`
  - **Sizing:** `is-*`, `bs-*`, `min-is-*`, `max-is-*`, `min-bs-*`, `max-bs-*` → use TW4's `inline-*`, `block-*`, `min-inline-*`, `max-inline-*`, `min-block-*`, `max-block-*`
  - **Insets:** `inset-bs-*`, `inset-be-*`, `-inset-bs-*`, `-inset-be-*` → use TW4's built-in equivalents (same names)
  - **Borders:** `border-is`, `border-ie`, `border-bs`, `border-be`, `border-block`, `border-inline` (Nord-styled) → removed due to naming conflict with TW4's `border-bs`/`border-be` width utilities. Use TW4 border width + `border-default` for color.
  - **Space between:** `space-i-*`, `space-b-*` → use TW4's `space-x-*`, `space-y-*` (now use logical CSS)
- **Removed:** `resize-block/inline`, `overscroll-b/i-*`, `rounded-bs/be-*` custom utilities (expected to be added in future TW4 releases).
- **Kept:** `container-*` (no TW4 equivalent).
- Release date 19.2.2026.

### 4.4.1

- Renames `shadow` to `shadow-default` Tailwind utility for consistency with other default-suffixed tokens (e.g., `rounded-default`, `border-default`).
- Release date 18.2.2026.

### 4.4.0

- Adds negative logical margin utilities for all directions: inline-start, inline-end, block-start, block-end, inline, and block (e.g., `n:-m-is-m`, `n:-m-b-l`).
- Adds negative logical inset utilities for block-start and block-end (e.g., `n:-block-start-s`).
- Release date 11.2.2026.

### 4.3.1

- Fixes radius configuration to correctly support `n:rounded` as the default border radius value.
- Release date 6.2.2026.

### 4.3.0

- **Adds [Tailwind CSS v4 integration](https://nordhealth.design/core/css/tailwind/)** - a new entry point (`@nordhealth/css/tailwind`) that maps all Nord Design Tokens to Tailwind theme variables.
- All utilities use the `n:` prefix (variant syntax) to prevent collisions with other frameworks.
- Includes Nord components as Tailwind utilities: `.n:reset`, `.n:typeset`, `.n:dl`, and form utilities.
- Adds logical property utilities for RTL/LTR support (`n:p-is-m`, `n:m-ie-l`, etc.).
- See the [Tailwind CSS documentation](https://nordhealth.design/core/css/tailwind/) for usage details.
- See the [Migration Guide](https://nordhealth.design/migrations/tailwind/) for migrating from legacy CSS.
- Release date 3.2.2026.

### 4.2.0

- Adds new `.n-inline-size-full` [utility helper](https://nordhealth.design/docs/developer/css-framework/#miscellaneous-utilities) for setting the inline size of an element to 100%.
- Adds new `.n-flex-1` and `.n-flex-auto` [stack utility helpers](https://nordhealth.design/docs/developer/css-framework/#stack-utilities) for setting the `flex` property of an element to `1` or `auto`.
- Release date 4.11.2025.

### 4.1.0

- Adds type definition file with an ambient module declaration. This prevents a TypeScript error when you have `noUncheckedSideEffectImports` enabled and try to `import "@nordhealth/css"` in TypeScript.
- Release date 19.5.2025.

### 4.0.0

- **New major release that unifies the two design system platforms into a one platform that can serve all of Nordhealth. This change allows us to better support the next generation of apps and generative AI experiences at Nordhealth.** ✨
- This new version ships with two distinctive brands, [therapy](https://nordhealth.design/?theme=nord) and [veterinary](https://nordhealth.design/?theme=vet). You can choose the currently active brand from the top left corner of this documentation website. Once chosen, you will get content that is tailored specifically for the brand and the business unit you’re working in. [Read more](https://nordhealth.design/migrations/4.0.0/).
- This release doesn’t include breaking changes for the existing users of Nord Design System.
- For detailed description of all changes and the steps required for migration, please see the [Migration Guide](https://nordhealth.design/migrations/4.0.0/).
- Release date 6.5.2025.

### 3.4.0

- Expands the [stack utility helpers](https://nordhealth.design/docs/developer/css-framework/#stack-utilities) for more fine-grained positioning, by having a way to directly set `justify-content` and `align-items`.
- Adds a `.n-stack-no-wrap` utility helper to remove the default wrapping of the [stack utility helpers](https://nordhealth.design/docs/developer/css-framework/#stack-utilities).
- Release date 29.1.2025.

### 3.3.1

- Migrates the monorepo to use [pnpm workspaces](https://pnpm.io/workspaces){rel="&#x22;nofollow&#x22;"} instead.
- Release date 24.9.2024.

### 3.3.0

- Updates all package dependencies to latest.
- Release date 17.9.2024.

### 3.2.1

- Updates readme document details.
- Release date 14.6.2024.

### 3.2.0

- Adds new `var(--n-size-top-bar)` [sizing token](https://nordhealth.design/core/tokens/#size) that is used for setting the default height of the [Top Bar component](https://nordhealth.design/components/top-bar/).
- Release date 11.4.2024.

### 3.1.1

- Remove redundant `overscroll-behavior-block: none;` from CSS Framework.
- Release date 18.10.2023.

### 3.1.0

- This release adds a new [Counter utility](https://nordhealth.design/docs/developer/css-framework/#miscellaneous-utilities) that can be used for showing the unread messages count in the [Top Bar component](https://nordhealth.design/components/top-bar/?example=advanced).
- Release date 31.5.2023.

### 3.0.0

- **New major release that brings [various improvements and bug fixes](https://nordhealth.design/migrations/3.0.0/)!!** ✨🥳
- `.n-stack` and `.n-gap` now has a gap of [`--n-space-m`](https://nordhealth.design/core/tokens/#space) by default instead of none, to mirror the [Stack component’s](https://nordhealth.design/components/stack/) default behaviour.
- We’ve introduced the following new color variables:
  - []{.n:border.n:border-strong.n:rounded style="display:inline-block;width:20px;height:20px;background:var(--n-color-text-danger);"} `var(--n-color-text-danger)`
  - []{.n:border.n:border-strong.n:rounded style="display:inline-block;width:20px;height:20px;background:var(--n-color-text-highlight);"} `var(--n-color-text-highlight)`
  - []{.n:border.n:border-strong.n:rounded style="display:inline-block;width:20px;height:20px;background:var(--n-color-text-info);"} `var(--n-color-text-info)`
  - []{.n:border.n:border-strong.n:rounded style="display:inline-block;width:20px;height:20px;background:var(--n-color-text-neutral);"} `var(--n-color-text-neutral)`
  - []{.n:border.n:border-strong.n:rounded style="display:inline-block;width:20px;height:20px;background:var(--n-color-text-neutral-strong);"} `var(--n-color-text-neutral-strong)`
  - []{.n:border.n:border-strong.n:rounded style="display:inline-block;width:20px;height:20px;background:var(--n-color-text-progress);"} `var(--n-color-text-progress)`
  - []{.n:border.n:border-strong.n:rounded style="display:inline-block;width:20px;height:20px;background:var(--n-color-text-warning);"} `var(--n-color-text-warning)`
  - []{.n:border.n:border-strong.n:rounded style="display:inline-block;width:20px;height:20px;background:var(--n-color-text-warning-strong);"} `var(--n-color-text-warning-strong)`
  - []{.n:border.n:border-strong.n:rounded style="display:inline-block;width:20px;height:20px;background:var(--n-color-border-danger);"} `var(--n-color-border-danger)`
  - []{.n:border.n:border-strong.n:rounded style="display:inline-block;width:20px;height:20px;background:var(--n-color-border-highlight);"} `var(--n-color-border-highlight)`
  - []{.n:border.n:border-strong.n:rounded style="display:inline-block;width:20px;height:20px;background:var(--n-color-border-info);"} `var(--n-color-border-info)`
  - []{.n:border.n:border-strong.n:rounded style="display:inline-block;width:20px;height:20px;background:var(--n-color-border-neutral);"} `var(--n-color-border-neutral)`
  - []{.n:border.n:border-strong.n:rounded style="display:inline-block;width:20px;height:20px;background:var(--n-color-border-progress);"} `var(--n-color-border-progress)`
  - []{.n:border.n:border-strong.n:rounded style="display:inline-block;width:20px;height:20px;background:var(--n-color-border-success);"} `var(--n-color-border-success)`
  - []{.n:border.n:border-strong.n:rounded style="display:inline-block;width:20px;height:20px;background:var(--n-color-border-warning);"} `var(--n-color-border-warning)`
  - []{.n:border.n:border-strong.n:rounded style="display:inline-block;width:20px;height:20px;background:var(--n-color-surface-lowered);"} `var(--n-color-surface-lowered)`
  - []{.n:border.n:border-strong.n:rounded style="display:inline-block;width:20px;height:20px;background:var(--n-color-status-notification);"} `var(--n-color-status-notification)`
  - []{.n:border.n:border-strong.n:rounded style="display:inline-block;width:20px;height:20px;background:var(--n-color-accent-secondary);"} `var(--n-color-accent-secondary)`
- For detailed description of all changes, please see [Migration guide](https://nordhealth.design/migrations/3.0.0/).
- Breaking changes are also covered in the [migration guide](https://nordhealth.design/migrations/3.0.0/).
- Release date 19.5.2023.

\[Migration guide]\(/migrations/3.0.0/)

### 2.5.1

- Add support for using `n-input` class on wrapper elements.
- Add accompanying `n-input-invalid` class.
- Improves documentation for misc utilities in [CSS Framework](https://nordhealth.design/docs/developer/css-framework/).
- Improves documentation for border utilities in [CSS Framework](https://nordhealth.design/docs/developer/css-framework/).
- Release date 10.5.2023.

### 2.5.0

- Adds new `var(--n-space-xs)` space token.
- Adds new `xs` space utilities and missing alignment helpers to [CSS Framework](https://nordhealth.design/docs/developer/css-framework/).
- Release date 29.3.2023.

### 2.4.1

- Updates Nord Design Tokens to the latest version.
- Release date 24.10.2022.

### 2.4.0

- Adds [Description List utility helper](https://nordhealth.design/docs/developer/css-framework/#description-list-utility) to the CSS Framework.
- See updated [usage examples for Drawer component](https://nordhealth.design/components/drawer/?example=complex).
- Release date 28.9.2022.

### 2.3.0

- Adds new `xs` (10px) and `xxs` (8px) icon sizes which are replacements for the old `xs` size. This is a non-breaking change so no actions are required from your side.
- This is done to improve the rendering of our smallest icons since they now align with the [pixel grid used for icons](https://nordhealth.design/design/foundations/iconography/).
- Release date 16.9.2022.

### 2.2.1

- Improves documentation and examples for new status colors.
- Release date 15.9.2022.

### 2.2.0

- The small icon dimensions are changed from `11px` to `12px`.
- Release date 9.9.2022.

### 2.1.0

- Adds border radius tokens as utility helpers to apply rounded corners to elements.
- Adds box shadow utility helpers to help reflect the elevation of a component or element.
- Release date 9.9.2022.

### 2.0.0

- We’ve redesigned the underlying color system to make it more extensible and better cover the use cases of our different products. For more details, please see [migration guidelines](https://nordhealth.design/migrations/2.0.0/).
- Release date 7.9.2022.

\[Migration guidelines]\(/migrations/2.0.0/)

### 1.4.1

- Converts `var(--n-size-icon-s)` token from 12px to 11px, so that it looks visually more balanced inside buttons and similar elements.
- Updates all Node.js dependencies to latest.
- Release date 17.8.2022.

### 1.4.0

- Adds margin auto helpers so elements can be centered vertically, horizontally, and both.
- Adds grid item helpers to do the same within a grid.
- Updates demos so that stack and grid helpers are more clearly presented.
- Updates demos to show new helpers.
- Updates docs to explain new helpers.
- Release date 10.8.2022.

### 1.3.5

- Deprecates `n-index-header` and `n-index-dropdown` tokens.
- Adds new `n-index-nav` design token.
- Release date 4.8.2022.

### 1.3.4

- Bugfix: Missing borders and colors in CSS Framework.
- Release date 27.6.2022.

### 1.3.3

- Adds two new high contrast [Nord themes](https://nordhealth.design/design/themes/).
- Release date 20.6.2022.

### 1.3.2

- Small bug fixed and performance improvements.
- Release date 17.6.2022.

### 1.3.1

- We’ve removed skeleton related gradients from CSS Framework, since the new [Skeleton component](https://nordhealth.design/components/skeleton/) does not use them anymore.
- Release date 16.6.2022.

### 1.3.0

- Switches to using REM based font-sizes instead of pixels for better accessibility.
- Adds new `n-color-overlay` design token that allows you to distinguish a modal layer from the layer underneath.
- Release date 14.6.2022.

### 1.2.1

- Updates to documentation and examples.
- Release date 24.5.2022.

### 1.2.0

- Adds new `.n-clinic-icon` helper class to generate clinic icons for Navigation and Dropdown components.
- Updates documentation for misc helpers to include examples of new clinic icons.
- Release date 20.5.2022.

### 1.1.2

- Adds new accent color styles into `.n-reset` utility class.
- Adds prepare script to fill gaps in `npm run bootstrap` so that components pkg is ready to start immediately after.
- Release date 20.5.2022.

### 1.1.1

- Adds web server for easier local development of the CSS Framework.
- Add new grid helpers and usage example, please see the [documentation](https://nordhealth.design/docs/developer/css-framework/#grid-and-container-utilities).
- Release date 11.5.2022.

### 1.0.5

- Adjust the specificity level of typescale styles to allow margin helpers to apply when using typescale classes.
- Adds `n-typecale-m` helper back into CSS Framework.
- Darkens the `color-nav-surface` in vet light theme to provide better contrast.
- Release date 2.5.2022.

### 1.0.3

- Adds even stronger border color styles for all light themes.
- Adds new card shadow styles with raised surfaces.
- Release date 11.4.2022.

### 1.0.2

- Converts [border colors in default Nord theme](https://nordhealth.design/core/tokens/?theme=nord) to be stronger to match [Veterinary theme](https://nordhealth.design/core/tokens/?theme=vet) better.
- Adds new less prominent default, card and header [box shadows](https://nordhealth.design/core/tokens/#box-shadow) for all themes.
- Release date 10.4.2022.

### 1.0.0

- Initial release of `@nordhealth/css`.
- For documentation and usage guidelines, please see [CSS Framework](https://nordhealth.design/docs/developer/css-framework/).
- Release date 30.3.2022.

### 1.0.0-beta.1

- Remove margins from `.n-typescale` helpers in CSS Framework.
- Only apply margins to typography elements when they’re inside the `.n-typeset` helper.
- Reduce specificity on `.n-typescale` helpers.
- Opt out of typeset on the typescale example to demonstrate the lack of margins on them.
- Adjust typescale helpers to be more powerful selectors.
- Release date 30.3.2022.

### 1.0.0-beta.0

- Full rewrite of CSS Framework with bug fixes and performance improvements.
- Adds new form utility classes `.n-input`, `.n-label`, `.n-hint`, `.n-error` and related states for building custom form fields.
- Adds new `.n-caption` text utility class.
- Adds new `.n-color-accent` background color utility class.
- Adds new `.n-color-status-*` utility classes for applying status background colors.
- Adds new `.n-color-status-*-weak` utility classes for applying weak status background colors.
- Adds new `.n-color-text-success` utility class for applying success text color.
- Release date 19.3.2022.

### 1.0.0-alpha.26

- Adds new `color-text-success` token.
- Release date 17.3.2022.

### 1.0.0-alpha.25

- We’re renaming `color-primary` to `color-accent` to better support our [themes](https://nordhealth.design/design/themes/).
- We’re renaming `color-text-inverse` to `color-text-on-accent` to better support our [themes](https://nordhealth.design/design/themes/) and better explain where the color should be used.
- Release date 14.3.2022.

### 1.0.0-alpha.24

- We’re removing `color-primary-strong` token from the system as it was only referenced in one location.
- Release date 12.3.2022.

### 1.0.0-alpha.23

- Adds new `.n-divider` helper utility class.
- Release date 7.3.2022.

### 1.0.0-alpha.22

- Adds new weak status colors into tokens.
- Release date 5.3.2022.

### 1.0.0-alpha.21

- Redesigned dark gray shades for Vet and Nord dark themes.
- Release date 5.3.2022.

### 1.0.0-alpha.19

- Add anchor styles into reset.
- Add general typography into reset.
- Adjusts typography helpers to use `:where()` to reduce specificity.
- Adjusts reset to use `:where()` to reduce specificity.
- Switch to using token variables rather than static values.
- Release date 26.2.2022.

### 1.0.0-alpha.18

- Updates licensing and package.json details.
- Release date 24.2.2022.

### 1.0.0-alpha.17

- Adds new text align utilities.
- Release date 23.2.2022.

### 1.0.0-alpha.16

- We’ve created new typographic helpers for our CSS Framework.
- These make it easier to apply an HTML class to a containing element to get the basic type styles you’d expect to present content as clearly and efficiently as possible.
- Release date 18.2.2022.

### 1.0.0-alpha.15

- Updates all library dependencies and migrates to Stylelint 14.
- Release date 11.2.2022.

### 1.0.0-alpha.14

- CSS Framework package does not depend on design tokens package anymore.
- We’ve removed font CSS from the Webfonts package and moved it into this package instead.
- CSS Framework now comes with a base theme (Nord), so that it can be used standalone.
- We’ve updated the CSS Framework utils to generate margin and padding helpers with sizes at the end to improve readability.
- We’ve added diagrams to the documentation to explain how logical properties apply to different sides of an element.
- Release date 8.2.2022.

### 1.0.0-alpha.13

- Brings in latest changes from Design Tokens v2.0.3.
- Release date 13.1.2022.

### 1.0.0-alpha.12

- Complete rewrite of our CSS Framework.
- Provides a method of styling elements with as little friction as possible.
- Makes it possible to use our Design Tokens through memorable CSS based utility classes.
- We’ve tried to strike a balance between readable but brief class names in this release.
- We’ve also made sure that applying tokens using the CSS Framework comes with a reduced risk of error, to e.g. ensure you’re using our colors as they were intended to be used.
- Release date 23.12.2021.

### 1.0.0-alpha.11

- Now only includes the base tokens and relies on theming package for theming.
- Previously output file size was 21.27 KB, now is only 5.62 KB.
- Not ready for production usage.
- Release date 9.12.2021.


# ESLint Plugin Changelog

\*Nord Design System's parts are versioned and released using Node Package Manager. NPM's \[organization page]\(https\://www\.npmjs.com/org/nordhealth) lists all packages available and their most recent versions.\*

## ESLint Plugin

### 1.1.0 `New`

- Updates Nord dependencies to the latest.
- Release date 2.7.2026.

### 1.0.6

- Adds `n-font-size-xxs` to the set of recognised valid legacy classes, mirroring the new `--n-font-size-xxs` design token.
- Release date 16.6.2026.

### 1.0.4 → 1.0.5

- Coupled version bump alongside the main monorepo release; no plugin source changes.

### 1.0.3

- **`n-stack` legacy class: Fix incorrect autofix output.** The autofix now includes `n:flex-wrap`, which was previously missing from the generated replacement classes.
- Release date 24.3.2026.

### 1.0.2

- **`no-legacy-classes`: Fixes background color migration mapping.** The `n-color-background` legacy class now correctly migrates to `n:bg-default` instead of `n:bg-background`.
- Release date 27.2.2026.

### 1.0.0

- **New major release that updates all ESLint rules to use Tailwind CSS v4's [built-in logical property utilities](https://github.com/tailwindlabs/tailwindcss/releases/tag/v4.2.0), replacing our previous custom utility names.** ✨
- **BREAKING:** `logical-selectors`rule now uses Tailwind CSS v4 built-in utility names:
  - Padding: `pt` → `pbs` (was `p-bs`), `pl` → `ps` (was `p-is`), etc.
  - Margin: `mt` → `mbs` (was `m-bs`), `ml` → `ms` (was `m-is`), etc.
  - Border: `border-l` → `border-s` (was `border-is`), `border-r` → `border-e` (was `border-ie`)
  - Size: `w` → `inline` (was `is`), `h` → `block` (was `bs`)
  - Scroll: `scroll-mt` → `scroll-mbs` (was `scroll-m-bs`), etc.
  - Removed `py`/`px`, `my`/`mx`, `border-x`/`border-y` mappings — TW4 already uses logical CSS.
  - Removed `space-x`/`space-y` mappings — TW4 already uses logical CSS (`margin-inline`/`margin-block`).
  - Removed `divide-x`/`divide-y` mappings — no custom divide utilities existed.
- **BREAKING:** `no-legacy-classes`rule now outputs TW4 utility names for spacing, border, and size migrations:
  - `n-margin-is-m` → `n:ms-m` (was `n:m-is-m`)
  - `n-border-is` → `n:border-s` (was `n:border-is`)
  - `n-inline-size-full` → `n:inline-full` (was `n:is-full`)
- Release date 19.2.2026.

### 0.3.1

- **`no-legacy-classes`: Updates shadow migration mapping.** The `n-box-shadow` legacy class now migrates to `n:shadow-default` instead of `n:shadow`.
- Release date 18.2.2026.

### 0.3.0

- **`logical-selectors`: Updated rule to handle negative value patterns.** The rule now correctly detects and auto-fixes negative logical utilities (e.g., `n:-ml-m` → `n:-m-is-m`).
- **`logical-selectors`: Improved variant prefix matching.** Now supports arbitrary value variants like `max-[1299px]:` in addition to standard variants like `hover:` and `n:`.
- Release date 11.2.2026.

### 0.2.2

- **`no-legacy-classes`: Simplify replacement mappings.** Removes redundant mappings and consolidates the legacy class to Tailwind class conversion logic.
- Release date 6.2.2026.

### 0.2.1

- **`no-legacy-classes`: Add conflict detection for compound class replacements.** When replacing classes like `n-stack` or `n-grid` that expand to multiple Tailwind classes, the rule now detects conflicting utilities (e.g., `n:gap-m` vs `n:gap-l`) and resolves them intelligently:
  - Explicit single-output classes (e.g., `n-gap-l`) take priority over compound defaults.
  - Existing `n:*` classes take priority over compound defaults.
  - For compound vs compound conflicts, the rightmost class wins.
- Fixes duplicate `n-grid` mapping that was incorrectly overwriting the layout version.

### 0.2.0

- **Initial release of `@nordhealth/eslint-plugin`** - ESLint plugin for Nord Design System.
- Adds `@nordhealth/logical-selectors` rule to enforce logical CSS properties (e.g., `n:p-is-m` instead of `n:pl-m`) for better RTL/LTR support. Auto-fixable.
- Adds `@nordhealth/no-unknown-legacy-classes` rule to catch typos and invalid `n-*` legacy classes.
- Adds `@nordhealth/no-legacy-classes` rule to migrate deprecated `n-*` classes to Tailwind `n:*` equivalents. Auto-fixable. Off by default.
- Includes `recommended` and `vue` preset configurations with integrated [better-tailwindcss](https://www.npmjs.com/package/eslint-plugin-better-tailwindcss){rel="&#x22;nofollow&#x22;"} rules.
- Supports multiple frameworks: React, Vue, Svelte, Angular, and Astro.
- Detects classes in utility functions: `clsx`, `cn`, `cva`, `tv`, `twMerge`, and more.
- See [ESLint Plugin documentation](https://nordhealth.design/docs/developer/eslint/) for usage details.
- Release date 3.2.2026.


# Figma Toolkit Changelog

\*Nord Design System’s parts are versioned and released using Node Package Manager. NPM’s \[organization page]\(https\://www\.npmjs.com/org/nordhealth) lists all packages available and their most recent versions.\*

## Figma Toolkit

### 4.0.0 `New`

- **New major release that introduces a new theming system using Figma Variables!!** ✨🥳
- For detailed description of all changes and the steps required for migration, please see [Migration to 4.0.0 Figma Toolkit](https://nordhealth.design/migrations/figma-4.0.0/).
- Migrates from previous library-based theming system to [Figma Variables](https://resources/support/.figma.com/hc/en-us/articles/15339657135383-Guide-to-variables-in-Figma){rel="&#x22;nofollow&#x22;"} for improved theme management.
- Reduces manual steps required for theme switching and eliminates the need to manage multiple separate libraries for theming.
- Enables automatic theme application when dragging components from the asset panel.
- Allows multiple themes on one page by applying different themes to individual frames.
- Expands theme support to include comprehensive coverage for both therapy and veterinary brands, with all themes available for both brands.
- Theme switching is simplified through the Tokens variable collection mode selector, with no manual library swapping required.
- Color Styles are now linked with Figma Variables and should be removed in a future update in favor of Variables.
- Removes the Number Input component, as it never had a coded component counterpart. Use the [Input component with stepper functionality](https://www.figma.com/design/yarhTRV8eFffff0BIpevi6/-v4-WIP--Nord-Figma-Toolkit?node-id=7020-56569&t=hTn0MV3alhmLVqgI-0){rel="&#x22;nofollow&#x22;"} instead to maintain design-code parity.
- Release date 14.11.2025.

### 3.2.0 `New`

- Adds 4 new icons to [Nordicons](https://nordhealth.design/icons/): `interface-dnr`, `interface-cpr-acpr`, `interface-cpr-unknown` and `interface-ai`.
- Release date 22.5.2024.

### 3.1.0

- Updates Banner `Info` variant color from `text-link` to `text-info`
- Adds nested `Header` properties to Card component
- Renames `medical / nertered` to `medical / neutered-male` and adds `medical / birthday` and `interface / duplicate` icon to the Nordicons library
- Adds Header property with S and L size variants to the Drawer
- Adds Breadcrumbs as a subcomponent for the Header component
- Release date 29.8.2023.

### 3.0.0

- **New major release that brings various improvements and bug fixes!!** ✨🥳
- For detailed migration guide, please see [Migration to 3.0.0 Figma Toolkit](https://nordhealth.design/migrations/figma-3.0.0/).
- Below is a summary of included changes:

#### Design Tokens

- Updates name from `Radius` to `Border Radius`
- Updates [Space](https://www.figma.com/file/u32okMUqi5BlWsG2k1JZgH/Nord-Figma-Toolkit?type=design&node-id=7569%3A186879&mode=design&t=G8eh8tQNx2AZl2PE-1){rel="&#x22;nofollow&#x22;"} component with improved label and `Position` property

#### Button

- Adds ability to show and hide slots through new properties for `Start slot` and `End slot`
- Adds nested instances of the Icon component which can be swapped with any Nordicon
- Adds [Button examples](https://www.figma.com/file/u32okMUqi5BlWsG2k1JZgH/Nord-Figma-Toolkit?type=design&node-id=7192%3A64450&mode=design&t=mKWcjiVkWfEqbcaH-1){rel="&#x22;nofollow&#x22;"} to demonstrate the Button variants and properties
- Adds [Button interactions](https://www.figma.com/proto/u32okMUqi5BlWsG2k1JZgH/Nord-Figma-Toolkit?page-id=1645%3A129904&type=design&node-id=7192-64450&viewport=1613%2C143%2C0.43&t=TacEQmXTGy41MDhk-1&scaling=min-zoom&starting-point-node-id=7192%3A64450&show-proto-sidebar=1&mode=design){rel="&#x22;nofollow&#x22;"} such as hover, mouse down, and active states
- Adds `Loading` as a state property for the Button component which includes animation
- Removes `Icon position` property which has been replaced with the new `Start slot` and `End slot` properties
- Updates height of small button from 26px to 28px

#### Button Group

- Adds `Start slot` and `End slot` to the [Button Group](https://www.figma.com/file/u32okMUqi5BlWsG2k1JZgH/Nord-Figma-Toolkit?type=design&node-id=7381%3A185025&mode=design&t=mKWcjiVkWfEqbcaH-1){rel="&#x22;nofollow&#x22;"} slots which allows for adding icons
- Adds `Vertical` property toggle to the Button Group
- Adds `Slot` property toggles to adjust the number of Buttons in the Button Group
- Adds nested overrides for adjusting individual button content such as `Icon` and `Button text`. This allows all properties for the Button Group to be adjusted from a single properties panel
- Adds [Button Group examples](https://www.figma.com/file/u32okMUqi5BlWsG2k1JZgH/Nord-Figma-Toolkit?type=design&node-id=7381%3A185029&mode=design&t=mKWcjiVkWfEqbcaH-1){rel="&#x22;nofollow&#x22;"}
- Removes the `Content` property from the Button Group and which has been replaced with the `Slot` property
- Renames state property from `Selected` to `Active`

#### Command Menu

- Adds `No results text` property to [Command Menu](https://www.figma.com/file/u32okMUqi5BlWsG2k1JZgH/Nord-Figma-Toolkit?type=design&node-id=7423%3A192167&mode=design&t=mKWcjiVkWfEqbcaH-1){rel="&#x22;nofollow&#x22;"} component with an empty state
- Adds `Section text`, `Text`, and `Shortcut` text properties to the Command Menu
- Adds hover state to the [Command Menu interactions](https://www.figma.com/proto/u32okMUqi5BlWsG2k1JZgH/Nord-Figma-Toolkit?page-id=1645%3A129904&type=design&node-id=7423-192171&viewport=1613%2C143%2C0.43&t=TacEQmXTGy41MDhk-1&scaling=min-zoom&starting-point-node-id=7423%3A192171&show-proto-sidebar=1&mode=design){rel="&#x22;nofollow&#x22;"}
- Adds `Placeholder text` and `Input text` properties to search input field of Command Menu
- Adds `Slot` property which can be used to add and remove Command Menu items
- Adds `Section` property which can be used to group Command Menu items
- Adds [Command Menu examples](https://www.figma.com/file/u32okMUqi5BlWsG2k1JZgH/Nord-Figma-Toolkit?type=design&node-id=7423%3A192171&mode=design&t=mKWcjiVkWfEqbcaH-1){rel="&#x22;nofollow&#x22;"}

#### Dropdown

- Separates this component into 3 subcomponents to align with the [Dropdown Item](https://nordhealth.design/components/dropdown-item/){rel="&#x22;nofollow&#x22;"}, [Dropdown Group](https://nordhealth.design/components/dropdown-group/){rel="&#x22;nofollow&#x22;"}, and [Dropdown](https://nordhealth.design/components/dropdown/){rel="&#x22;nofollow&#x22;"} component
- Adds `S`, `M`, and `L` size variants
- Adds [Dropdown Header](https://www.figma.com/file/u32okMUqi5BlWsG2k1JZgH/Nord-Figma-Toolkit?type=design&node-id=7294%3A86243&mode=design&t=mKWcjiVkWfEqbcaH-1){rel="&#x22;nofollow&#x22;"} subcomponent with `Text` property, `Header end` slot for buttons, and [Profile](https://www.figma.com/file/u32okMUqi5BlWsG2k1JZgH/Nord-Figma-Toolkit?type=design&node-id=7294%3A86243&mode=design&t=mKWcjiVkWfEqbcaH-1){rel="&#x22;nofollow&#x22;"} variant
- Adds toggle to show or hide the dropdown header
- Adds toggles to customize the number of Dropdown Groups in the Dropdown component
- Adds nested instances of [Dropdown Group](https://www.figma.com/file/u32okMUqi5BlWsG2k1JZgH/Nord-Figma-Toolkit?type=design&node-id=7294%3A85912&mode=design&t=mKWcjiVkWfEqbcaH-1){rel="&#x22;nofollow&#x22;"} and [Dropdown Item](https://www.figma.com/file/u32okMUqi5BlWsG2k1JZgH/Nord-Figma-Toolkit?type=design&node-id=7294%3A83510&mode=design&t=mKWcjiVkWfEqbcaH-1){rel="&#x22;nofollow&#x22;"} in the top level properties panel for the Dropdown
- Adds swap instance property to the Dropdown Group which allows for swapping a Dropdown Group with other content. For example, you can swap dropdowns with messages to create a [Notification dropdown](https://www.figma.com/file/u32okMUqi5BlWsG2k1JZgH/Nord-Figma-Toolkit?type=design&node-id=7356%3A148959&mode=design&t=mKWcjiVkWfEqbcaH-1){rel="&#x22;nofollow&#x22;"} within Nord
- Adds [Dropdown examples](https://www.figma.com/proto/u32okMUqi5BlWsG2k1JZgH/Nord-Figma-Toolkit?page-id=1645%3A129904&type=design&node-id=7294-86243&viewport=-455%2C288%2C0.25&t=4OflHi0EuOqZiYzf-1&scaling=min-zoom&starting-point-node-id=7294%3A86243&show-proto-sidebar=1&mode=design){rel="&#x22;nofollow&#x22;"} which also highlight the new interactivity added to the Dropdown component

#### Dropdown Item

- Adds [Dropdown Item](https://www.figma.com/file/u32okMUqi5BlWsG2k1JZgH/Nord-Figma-Toolkit?type=design&node-id=7294%3A83510&mode=design&t=mKWcjiVkWfEqbcaH-1){rel="&#x22;nofollow&#x22;"} as a new component
- Removes `Icon` property and replaces with `Start slot` property which supports icons, avatars and prefix text and an `End slot` property which supports icons and prefix text
- Adds [Dropdown Item interactions](https://www.figma.com/proto/u32okMUqi5BlWsG2k1JZgH/Nord-Figma-Toolkit?page-id=1645%3A129904&type=design&node-id=7294-83514&viewport=-455%2C288%2C0.25&t=4OflHi0EuOqZiYzf-1&scaling=min-zoom&starting-point-node-id=7294%3A83514&show-proto-sidebar=1&mode=design){rel="&#x22;nofollow&#x22;"}
- Adds `Default text` property
- Adds [Dropdown Item examples](https://www.figma.com/file/u32okMUqi5BlWsG2k1JZgH/Nord-Figma-Toolkit?type=design&node-id=7294%3A83514&mode=design&t=mKWcjiVkWfEqbcaH-1){rel="&#x22;nofollow&#x22;"}

#### Dropdown Group

- Adds [Dropdown Group](https://www.figma.com/file/u32okMUqi5BlWsG2k1JZgH/Nord-Figma-Toolkit?type=design&node-id=7294%3A85912&mode=design&t=mKWcjiVkWfEqbcaH-1){rel="&#x22;nofollow&#x22;"} and [Dropdown Item](https://www.figma.com/file/u32okMUqi5BlWsG2k1JZgH/Nord-Figma-Toolkit?type=design&node-id=7294%3A83510&mode=design&t=mKWcjiVkWfEqbcaH-1){rel="&#x22;nofollow&#x22;"} as a new component
- Adds a `Heading` property and `Heading text` property which allows you to toggle and edit Dropdown Group headers
- Adds autolayout between Dropdown Items nested in the Dropdown Group
- Adds `Slot` property for customizing the number of items in a Dropdown Group. Each item uses nested instances of the Dropdown Item
- Adds [Dropdown Group examples](https://www.figma.com/file/u32okMUqi5BlWsG2k1JZgH/Nord-Figma-Toolkit?type=design&node-id=7294%3A85916&mode=design&t=mKWcjiVkWfEqbcaH-1){rel="&#x22;nofollow&#x22;"}

#### Calendar

- Adds `Surface` property toggle. When this property is toggled off it removes the surface, border, and dropshadow of the [Calendar](https://www.figma.com/file/u32okMUqi5BlWsG2k1JZgH/Nord-Figma-Toolkit?type=design&node-id=7284%3A111497&mode=design&t=mKWcjiVkWfEqbcaH-1){rel="&#x22;nofollow&#x22;"} component
- Renames the property `Show dot` to `Highlight day` for Calendar Day sub-component
- Adds nested overrides for month and year dropdown that include `Hover`, `Active`, `Disabled`, and `State` properties
- Adds variant [Calendar mobile](https://www.figma.com/file/u32okMUqi5BlWsG2k1JZgH/Nord-Figma-Toolkit?type=design&node-id=7284%3A111501&mode=design&t=mKWcjiVkWfEqbcaH-1){rel="&#x22;nofollow&#x22;"} that includes a header and close button. This variant is meant to be used full-width and pinned to the bottom of the viewport
- Adds [Calendar examples](https://www.figma.com/file/u32okMUqi5BlWsG2k1JZgH/Nord-Figma-Toolkit?type=design&node-id=7284%3A111501&mode=design&t=mKWcjiVkWfEqbcaH-1){rel="&#x22;nofollow&#x22;"}

#### Checkbox

- Adds `S` and `L` size variants to the [Checkbox](https://www.figma.com/file/u32okMUqi5BlWsG2k1JZgH/Nord-Figma-Toolkit?type=design&node-id=7113%3A63266&mode=design&t=mKWcjiVkWfEqbcaH-1){rel="&#x22;nofollow&#x22;"}
- Adds property for `Label text`, `Hint text`, and `Error text`
- Updates property name `Checked` to `Selected`
- Updates property name `Focus` to `Focus ring`
- Updates disabled style of unselected checkbox
- Adds [Checkbox examples](https://www.figma.com/file/u32okMUqi5BlWsG2k1JZgH/Nord-Figma-Toolkit?type=design&node-id=7113%3A63270&mode=design&t=mKWcjiVkWfEqbcaH-1){rel="&#x22;nofollow&#x22;"}

#### Checkbox Group

- Adds property for [Checkbox Group](https://www.figma.com/file/u32okMUqi5BlWsG2k1JZgH/Nord-Figma-Toolkit?type=design&node-id=7113%3A63270&mode=design&t=mKWcjiVkWfEqbcaH-1){rel="&#x22;nofollow&#x22;"} `Label` and `Hint`
- Adds `Slot` property for customizing the number of Checkboxes in a Checkbox Group. Each slot now surfaces nested instances of the Checkbox component

#### Date picker

- Adds `S` and `L` size variants for the [Date Picker](https://www.figma.com/file/u32okMUqi5BlWsG2k1JZgH/Nord-Figma-Toolkit?type=design&node-id=7284%3A103993&mode=design&t=eE0iSqwTGxEZRKwF-1){rel="&#x22;nofollow&#x22;"}
- Updates state variants to include `Read-only` and `Disabled` properties
- Moves `Error` property from toggle to state dropdown
- Adds property for `Label Text`, `Hint`, and `Error text`
- Adds `Start slot` which can be used for an icon or a prefix
- Adds `Input Text` and `Placeholder Text` properties
- Adds `End slot` which can be used for an icon or a suffix
- Adds `End button` property which toggles the visibility of the calendar button
- Adds Date Picker interactions
- Adds [Date Picker examples](https://www.figma.com/file/u32okMUqi5BlWsG2k1JZgH/Nord-Figma-Toolkit?type=design&node-id=7284%3A103997&mode=design&t=eE0iSqwTGxEZRKwF-1){rel="&#x22;nofollow&#x22;"}

#### Input

- Adds [Input examples](https://www.figma.com/file/u32okMUqi5BlWsG2k1JZgH/Nord-Figma-Toolkit?type=design&node-id=7020%3A56569&mode=design&t=eE0iSqwTGxEZRKwF-1){rel="&#x22;nofollow&#x22;"}

#### Number input

- Adds new version of the [Number Input](https://www.figma.com/file/u32okMUqi5BlWsG2k1JZgH/Nord-Figma-Toolkit?type=design&node-id=7284%3A99530&mode=design&t=eE0iSqwTGxEZRKwF-1){rel="&#x22;nofollow&#x22;"}
- Adds properties for `Prefix`, `Suffix`, `Start Icon`, `End Icon`
- Adds `S` and `L` sizes
- Updates properties for `Label text`, `Hint text`, and `Error text`
- Adds [Number Input interactivity](https://www.figma.com/proto/u32okMUqi5BlWsG2k1JZgH/Nord-Figma-Toolkit?page-id=1645%3A129905&type=design&node-id=7284-99534&viewport=3021%2C448%2C0.21&t=NIwhMAxoC1ryS1Lk-1&scaling=scale-down&starting-point-node-id=7284%3A99534&mode=design){rel="&#x22;nofollow&#x22;"}

#### Radio

- Adds `S` and `L` size variants for the [Radio](https://www.figma.com/file/u32okMUqi5BlWsG2k1JZgH/Nord-Figma-Toolkit?type=design&node-id=7120%3A61292&mode=design&t=eE0iSqwTGxEZRKwF-1){rel="&#x22;nofollow&#x22;"}
- Updates properties for `Label text`, `Hint text`, and `Error text`
- Updates `Focus ring` to be available for all states and variants
- Renames property `Checked` to `Selected`
- Removes Radio with Border variant
- Updates disabled unselected Radios to now use `Border Neutral` for the border color and `Active` for the fill
- Adds `Slot` property for customizing the number of Radios in a Radio Group. Each slot now surfaces nested instances of the Radio component
- Updates `Disabled` and `Selected Radios` to now use color token `Border Info`
- Adds `Active` fill to `Unselected` Radio variants
- Adds [Radio interactions](https://www.figma.com/proto/u32okMUqi5BlWsG2k1JZgH/Nord-Figma-Toolkit?page-id=1645%3A129905&type=design&node-id=7120-61296&viewport=3021%2C448%2C0.21&t=NIwhMAxoC1ryS1Lk-1&scaling=scale-down&starting-point-node-id=7120%3A61296&show-proto-sidebar=1&mode=design){rel="&#x22;nofollow&#x22;"}
- Adds [Radio examples](https://www.figma.com/file/u32okMUqi5BlWsG2k1JZgH/Nord-Figma-Toolkit?type=design&node-id=7120%3A61296&mode=design&t=eE0iSqwTGxEZRKwF-1){rel="&#x22;nofollow&#x22;"}

#### Select

- Adds Size property with `S`, `M`, and `L` variants
- Adds properties for `Label text`, `Hint text`, and `Error text`
- Adds `Text` property
- Adds `Start slot` for use with icons when needed
- Adds Select dropdown with `Header`, `Slot` for customizing number of dropdown items, and interactions for hover and click
- Adds [Select interactions](https://www.figma.com/proto/u32okMUqi5BlWsG2k1JZgH/Nord-Figma-Toolkit?page-id=1645%3A129905&type=design&node-id=7496-192224&viewport=3021%2C448%2C0.21&t=NIwhMAxoC1ryS1Lk-1&scaling=scale-down&starting-point-node-id=7496%3A192224&show-proto-sidebar=1&mode=design){rel="&#x22;nofollow&#x22;"}
- Adds [Select examples](https://www.figma.com/file/u32okMUqi5BlWsG2k1JZgH/Nord-Figma-Toolkit?type=design&node-id=7496%3A192224&mode=design&t=eE0iSqwTGxEZRKwF-1){rel="&#x22;nofollow&#x22;"}

#### Textarea

- Removes [Textarea](https://www.figma.com/file/u32okMUqi5BlWsG2k1JZgH/Nord-Figma-Toolkit?type=design&node-id=7551%3A201719&mode=design&t=eE0iSqwTGxEZRKwF-1){rel="&#x22;nofollow&#x22;"} base components
- Adds properties for `Label text`, `Hint text`, and `Error text`
- Adds Size property with `S`, `M`, and `L` variants
- Adds [Textarea interactions](https://www.figma.com/proto/u32okMUqi5BlWsG2k1JZgH/Nord-Figma-Toolkit?page-id=1645%3A129905&type=design&node-id=7551-201723&viewport=3021%2C448%2C0.21&t=NIwhMAxoC1ryS1Lk-1&scaling=scale-down&starting-point-node-id=7551%3A201723&show-proto-sidebar=1&mode=design){rel="&#x22;nofollow&#x22;"}
- Adds [Textarea examples](https://www.figma.com/file/u32okMUqi5BlWsG2k1JZgH/Nord-Figma-Toolkit?type=design&node-id=7551%3A201723&mode=design&t=eE0iSqwTGxEZRKwF-1){rel="&#x22;nofollow&#x22;"}

#### Toggle

- Adds Size property with `S`, `M`, and `L` variants
- Adds properties for `Label text`, `Hint text`, and `Error text`
- Updates `Unchecked` variant color from `Border-Strong` to `Border-Hover`
- Updates `Label` property which determines label positioning to now be called `Reverse order`
- Adds [Toggle interactions](https://www.figma.com/proto/u32okMUqi5BlWsG2k1JZgH/Nord-Figma-Toolkit?page-id=1645%3A129905&type=design&node-id=6851-54935&viewport=3021%2C448%2C0.21&t=NIwhMAxoC1ryS1Lk-1&scaling=scale-down&starting-point-node-id=6851%3A54935&show-proto-sidebar=1&mode=design){rel="&#x22;nofollow&#x22;"}
- Adds `Focus ring` property
- Adds [Toggle examples](https://www.figma.com/file/u32okMUqi5BlWsG2k1JZgH/Nord-Figma-Toolkit?type=design&node-id=6851%3A54935&mode=design&t=eE0iSqwTGxEZRKwF-1){rel="&#x22;nofollow&#x22;"}

#### Toggle Group

- Adds properties for `Label text`, `Hint text`, and `Error text`
- Adds `Slot` property for customizing the number of Toggles in a Toggle Group. Each slot now surfaces nested instances of the Toggle component.
- Adds Toggle Group interactions

#### Filter

- Moved to the Provet Product Patterns Figma document

#### Banner

- Updates text and surface colors for the [Banner](https://www.figma.com/file/u32okMUqi5BlWsG2k1JZgH/Nord-Figma-Toolkit?type=design&node-id=7489%3A190206&mode=design&t=eE0iSqwTGxEZRKwF-1){rel="&#x22;nofollow&#x22;"}
- Adds status border color to each variant
- Removes variant with dropshadow
- Adds `Text` property
- Adds [Banner examples](https://www.figma.com/file/u32okMUqi5BlWsG2k1JZgH/Nord-Figma-Toolkit?type=design&node-id=7489%3A190490&mode=design&t=eE0iSqwTGxEZRKwF-1){rel="&#x22;nofollow&#x22;"}

#### Empty State

- Removes `Variant` property
- Adds `Header` and `Text` properties
- Adds `Buttons` property toggle to show or hide buttons
- Adds [Empty State examples](https://www.figma.com/file/u32okMUqi5BlWsG2k1JZgH/Nord-Figma-Toolkit?type=design&node-id=7539%3A194250&mode=design&t=eE0iSqwTGxEZRKwF-1){rel="&#x22;nofollow&#x22;"}

#### Toast

- Adds `Text` property
- Adds `Variant` property which include options for `Default` and `Danger`
- Removes `Button state` property

#### Notification

- Adds new [Notification](https://www.figma.com/file/u32okMUqi5BlWsG2k1JZgH/Nord-Figma-Toolkit?type=design&node-id=6831%3A54201&mode=design&t=eE0iSqwTGxEZRKwF-1){rel="&#x22;nofollow&#x22;"} component

#### Notification Group

- Adds new [Notification Group](https://www.figma.com/file/u32okMUqi5BlWsG2k1JZgH/Nord-Figma-Toolkit?type=design&node-id=7310%3A85081&mode=design&t=eE0iSqwTGxEZRKwF-1){rel="&#x22;nofollow&#x22;"} component

#### Progress Bar

- Adds new [Progress Bar](https://www.figma.com/file/u32okMUqi5BlWsG2k1JZgH/Nord-Figma-Toolkit?type=design&node-id=7480%3A191678&mode=design&t=eE0iSqwTGxEZRKwF-1){rel="&#x22;nofollow&#x22;"} component

#### Spinner

- Adds new [Spinner](https://www.figma.com/file/u32okMUqi5BlWsG2k1JZgH/Nord-Figma-Toolkit?type=design&node-id=7192%3A64986&mode=design&t=eE0iSqwTGxEZRKwF-1){rel="&#x22;nofollow&#x22;"} component

#### Navigation

- Adds `Header slot` which supports the Clinic Switcher
- Adds `Default slot` which contains the main navigation content
- Adds `Bottom slot` to the Navigation component
- Adds [Navigation interactions](https://www.figma.com/proto/u32okMUqi5BlWsG2k1JZgH/Nord-Figma-Toolkit?page-id=1645%3A129909&type=design&node-id=7264-70346&viewport=940%2C1015%2C0.2&t=vNQi1FczHfKJEW1N-1&scaling=scale-down&starting-point-node-id=7264%3A70346&show-proto-sidebar=1&mode=design){rel="&#x22;nofollow&#x22;"}
- Adds toggles to enable `Quick View` and `Top Bar` properties
- Adds support for nested properties to show all properties from the top level of the component
- Adds [Navigation examples](https://www.figma.com/file/u32okMUqi5BlWsG2k1JZgH/Nord-Figma-Toolkit?type=design&node-id=7264%3A70346&mode=design&t=eE0iSqwTGxEZRKwF-1){rel="&#x22;nofollow&#x22;"}

#### Nav Item

- Adds new [Nav Item](https://www.figma.com/file/u32okMUqi5BlWsG2k1JZgH/Nord-Figma-Toolkit?type=design&node-id=7237%3A73854&mode=design&t=eE0iSqwTGxEZRKwF-1){rel="&#x22;nofollow&#x22;"} component

#### Nav Group

- Adds new [Nav Group](https://www.figma.com/file/u32okMUqi5BlWsG2k1JZgH/Nord-Figma-Toolkit?type=design&node-id=7237%3A75164&mode=design&t=eE0iSqwTGxEZRKwF-1){rel="&#x22;nofollow&#x22;"} component

#### Top Bar

- Adds new [Top Bar](https://www.figma.com/file/u32okMUqi5BlWsG2k1JZgH/Nord-Figma-Toolkit?type=design&node-id=7143%3A65291&mode=design&t=eE0iSqwTGxEZRKwF-1){rel="&#x22;nofollow&#x22;"} component
- Adds new Top Bar dropdown for Notifications
- Adds new Top Bar dropdown for My Tasks
- Adds new Top Bar dropdown for Profile

#### Divider

- Adds `Padding` size property which supports `S`, `M`, `L`, `XL`, and `XXL` sizes
- Adds ability to remove padding from one or both sides of the divider
- Adds `Show redlines` property to show or hide padding labels
- Adds [Divider examples](https://www.figma.com/file/u32okMUqi5BlWsG2k1JZgH/Nord-Figma-Toolkit?type=design&node-id=5911%3A41285&mode=design&t=eE0iSqwTGxEZRKwF-1){rel="&#x22;nofollow&#x22;"}

#### Header

- Adds `S` size variant which is appropriate when using the Top Bar component
- Adds a `Default slot` property to the header which includes properties for the Navigation Toggle and Header text. The Default slot can now be swapped with custom local content
- Adds an `End slot` property to the header which can be used for buttons. The End slot can be swapped with custom local content
- Adds nested properties for buttons to the top level of the Header component
- Adds [Header examples](https://www.figma.com/file/u32okMUqi5BlWsG2k1JZgH/Nord-Figma-Toolkit?type=design&node-id=7192%3A63270&mode=design&t=eE0iSqwTGxEZRKwF-1){rel="&#x22;nofollow&#x22;"}

#### Badge

- Removes `Progress` badge variant
- Adds `Strong` variant for each badge status
- Adds ability to add a `Check`, `Cancelled`, or `Warning` icon to the badge component
- Adds [Badge examples](https://www.figma.com/file/u32okMUqi5BlWsG2k1JZgH/Nord-Figma-Toolkit?type=design&node-id=5862%3A40882&mode=design&t=eE0iSqwTGxEZRKwF-1){rel="&#x22;nofollow&#x22;"}

#### Message

- Adds new [Message](https://www.figma.com/file/u32okMUqi5BlWsG2k1JZgH/Nord-Figma-Toolkit?type=design&node-id=7296%3A87689&mode=design&t=eE0iSqwTGxEZRKwF-1){rel="&#x22;nofollow&#x22;"} component

#### Paragraph

- Adds new [Paragraph](https://www.figma.com/file/u32okMUqi5BlWsG2k1JZgH/Nord-Figma-Toolkit?type=design&node-id=6405%3A51697&mode=design&t=eE0iSqwTGxEZRKwF-1){rel="&#x22;nofollow&#x22;"} component

#### Nord Theme

- Adds `accent-secondary`, `text-danger`, `text-neutral`, `text-neutral-strong`, `text-warning`, `text-warning-strong`, `text-highlight`, `text-info`, `text-progress`, `border-neutral`,`border-warning`, `border-highlight`, `border-danger`,`border-success`, `border-info`, `border-progress`,`surface-lowered`, `header`, `status-notification`
- Updates `text-error`, `text-success`, `nav-surface`, `nav-hover`, `background`, `status-neutral`, `status-warning`, `status-highlight`, `status-danger`, `status-success`, `status-info`, `status-progress`, `status-success-weak`, `status-progress-weak`, `status-info-weak`, `status-highlight-weak`, `status-neutral-weak`, `status-warning-weak`, `status-danger-weak`, `button`

#### Release date

- Release date 10.8.2023.

### 2.11.0

- Adds new `file-invoice`, `file-treatment-plan`, `file-patient-records`, `generic-farm`, `generic-hospital`, `generic-company`, `generic-inventory`, `interface-skipped`, `medical-neutered`, `medical-spayed`, `medical-surgery`, `medical-drip` and `navigation-finances` icons.
- Updates `navigation-reports` icon.
- Adds tagging for new Nordicons in Figma Nordicons Library.
- Release date 12.4.2023.

### 2.10.0

- Updates [Avatar component](https://www.figma.com/file/u32okMUqi5BlWsG2k1JZgH/Nord-Figma-Toolkit?node-id=5482%3A41312&t=coA83Ba93g6VuCpM-1){rel="&#x22;nofollow&#x22;"}
- Updates generic avatar colors.
- Adds client, patient, and staff avatar variants.
- Updates avatar sizes.
- Adds XXL avatar size.
- Release date 23.3.2023.

### 2.9.0

- Updates [Card component](https://www.figma.com/file/u32okMUqi5BlWsG2k1JZgH/Nord-Figma-Toolkit?node-id=2943%3A28400){rel="&#x22;nofollow&#x22;"} to use space-L token for horizontal padding.
- Deprecates List component.
- Adds [Description list component](https://www.figma.com/file/u32okMUqi5BlWsG2k1JZgH/Nord-Figma-Toolkit?node-id=2929%3A51539){rel="&#x22;nofollow&#x22;"} and removes padding from base component.
- Updates component name of Sheet component to [Drawer](https://www.figma.com/file/u32okMUqi5BlWsG2k1JZgH/Nord-Figma-Toolkit?node-id=5411%3A37509){rel="&#x22;nofollow&#x22;"}, adds fixed footer, and custom content slots.
- Release date 28.9.2022.

### 2.8.0

- Adds new version of the Input Component. This includes support for prefix, suffix, icons, and sizes for small and large sizes for the Input component.
- Updates the pagination component to enable interactivity and jump to first & last page.
- Adds new xs (10px) and xxs (8px) icon sizes which are replacements for the old xs size. This is a non-breaking change so no actions are required from your side.
- Adds new animal category icons: generic-suidae, generic-sheep, generic-rodents, generic-reptilia, generic-leporidae, generic-fish, generic-feline, generic-equidae, generic-cattle, generic-canine, generic-birds, generic-arachnida, generic-amphibia.
- Changes medical-insurance icon from “a hand holding a plus sign” to represent “a shield.”
- Updates default card radius to default-radius token.
- Updates Button Group component.
- Updates List, Sheet, and Table components to new Badge style.
- Updates Figma Color Styles to the redesigned color system and new status colors: <https://nordhealth.design/tokens/>{rel="&#x22;nofollow&#x22;"}
- Release date 15.9.2022.

### 2.7.0

- Adds new `medical-insurance` icon to Nordicons.
- Release date 24.8.2022.

### 2.6.0

- Adds interactivity to Navigation component and Clinic Switcher.
- Adds Table header sorting with interactivity.
- Updates naming convention to s/m/l for buttons.
- Updates naming convention for Nordicons.
- Adds new `interface-grabber`, `interface-grid`, `interface-sort-small`, `interface-sort-up-small` and `interface-sort-down-small` icons to Nordicons.
- Release date 10.8.2022.

### 2.5.0

- Adds number input component with interactivity.
- Adds interactivity to checkbox and checkbox group.
- Release date 1.7.2022.

### 2.4.0

- Spacing token improvements in Figma including fill horizontal and fill vertical variants.
- Added labels inside of each component.
- Examples of auto-layout with space tokens.
- Removed button base component from library.
- Removed button group atoms from library.
- Release date 27.6.2022.

### 2.3.2

- Adding toast button variants.
- Updated toast component to add danger style & instance swap for close button.
- Release date 22.6.2022.

### 2.2.12

- Bugfix for card header update.
- Generic bug fixes.
- Updated default button placeholder text.
- Added buttons and selection indicator to card header.
- Fixed default instance of checkbox component in table components.
- Release date 16.6.2022.

### 2.2.8

- Removed redundant navigation indicator.
- Reverted to original position for notification indicator.
- Updated notification position in Navigation component.
- Added indeterminate checkbox variant.
- Table cell alignment correction.
- Updated spacing for table component.
- Release date 14.6.2022.

### 2.2.2

- Updated header component to improve sort indicator.
- Added sort indicator to table.
- Removed sort variant from cell columns and moved to atom/cell.
- Generic Bugfixes.
- Added sort icon to Nordicons.
- Release date 9.6.2022.

### 2.1.1

- Updated navigation component to preserve text and color overrides following icon component update.
- Removed instances of deprecated Nordicons component.
- Release date 1.6.2022.

### 2.1.0

- Created a new Icon component to add search and categories to improve icon findability in Figma.
- Previous Icon component has been deprecated and moved to the Nordicons file for reference when migrating to the new component.
- Updated banner component to preserve text overrides.
- Modified the modal component with image to use the default button styling for improved legibility.
- Release date 31.5.2022.

### 2.0.1

- Removed deprecated drop shadow styling to move to updated theme.

### 2.0.0

- Switches to using native theming for Nord dark and light themes, meaning we now use Figma Libraries instead of the previous Themer Plugin.
- We’ve removed separate Healthcare and Veterinary themes and made the Nord light theme the default. Nord dark theme exists still as well. We will next do a similar change in the code based system as well and will release new major versions of all packages that rely on the theming.
- We’ve added new stronger border color styles for the light Nord theme to reflect recent changes in our [design tokens](https://nordhealth.design/core/tokens/).
- We’ve added new card shadow styles with raised surfaces to reflect recent changes in our [design tokens](https://nordhealth.design/core/tokens/).
- Color libraries are moved onto separate files out of the Nord Figma Toolkit.
- Minor bug fixes and cleanup.

### 1.0.3

- Minor changes to tokens to enable native theming in Figma.

### 1.0.2

- Fixed alignment issue with select component expanded state.

### 1.0.1

- Moving Nordicons to a separate file to comply with license requirements.

### 1.0.0

- Initial release of Nord Figma Toolkit.
- Release date 17.3.2022.


# Web Components Changelog

\*Nord Design System’s parts are versioned and released using Node Package Manager. NPM’s \[organization page]\(https\://www\.npmjs.com/org/nordhealth) lists all packages available and their most recent versions.\*

## Web Components

### 5.0.2

- The [Aside Trigger](https://nordhealth.design/components/aside-trigger/) component can now act as a navigation link: set `href` (with optional `target` / `rel`) and the inner button renders a real `<a>`, so middle-click, cmd/ctrl-click, right-click "copy link", and the browser's hover URL preview all work natively. `href` and `drawer` are mutually exclusive — `href` wins, the drawer click handler is skipped, and `aria-controls` / `aria-expanded` are omitted since a link has no expand/collapse semantics; removing `href` restores drawer semantics. (#682)
- The [Button](https://nordhealth.design/components/button/) component gains a `rel` property, forwarded to its anchor in link mode (e.g. `rel="noopener noreferrer"` alongside `target="_blank"`). (#682)
- The [Nav Item](https://nordhealth.design/components/nav-item/) and [Navigation](https://nordhealth.design/components/navigation/) components gain public methods to close rail-mode flyouts: `NavItem.closeFlyout()` closes a single item's flyout and `Navigation.closeAllFlyouts()` sweeps every open one, so consumers no longer reach into the shadow root to call `hide()` on the internal popout. A new opt-in `auto-dismiss-on-select` attribute (on either element, off by default) closes the flyout when a leaf descendant activates; existing flyout behaviour — outside-click dismissal, hover, keyboard, click-to-toggle — is unchanged. (#684)
- Fixes the [Aside](https://nordhealth.design/components/aside/) drawer flashing at its full-screen size for a frame or two when toggling `fullscreen`. The pre-toggle inline sizes are now pinned across the gap between the synchronous attribute flip and the deferred width animation, and stale animation state after a mid-flight reversal or a disconnect during the toggle is cleared. (#683)
- **Breaking change — check your custom padding overrides.** A few components ([Button](https://nordhealth.design/components/button/), [Header](https://nordhealth.design/components/header/), Segmented Control, and the text inputs) let you fine-tune inner spacing through private CSS variables. If you ever gave one of them **two values at once** (e.g. `--_n-input-padding-block: 4px 12px`), the old code pasted both numbers into a single `padding` line, so the second value quietly landed on the wrong side (left/right instead of top/bottom). That's now fixed — each variable feeds its matching longhand, so `-block` always means top-and-bottom and `-inline` always means left-and-right. If your styles leaned on the old behaviour, your spacing will shift after upgrading. &#x2A;*One value = nothing changes; two values = go double-check it.** The variables to search for: `--_n-button-padding-block`, `--_n-button-padding-inline`, `--_n-input-padding-block`, `--_n-input-padding-inline`, `--_n-header-padding-block`, `--_n-header-padding-inline`, and `--_n-segmented-control-item-padding-inline` — plus the public `--n-button-padding-inline` and `--n-header-padding-inline` that feed them. (#680)
- Release date 9.7.2026.

### 5.0.1

- The [Nav Item](https://nordhealth.design/components/nav-item/) component gains `side-offset` and `align-offset` properties, mirroring the [Tooltip](https://nordhealth.design/components/tooltip/) props of the same names and forwarded to the internal rail-mode tooltip. This lets rail-item tooltips line up with neighbouring standalone tooltips without reaching into the shadow root. When unset, the tooltip's own defaults (`8` / `0`) apply. (#678)
- Fixes the [Item](https://nordhealth.design/components/item/) component removing keyboard focus outlines from every anchor in the consuming document. Its injected Light DOM stylesheet contained an unscoped `a:focus-visible { outline: none }` intended only for anchors that wrap an item row (which draw their own accent ring instead); the reset is now scoped to `a:has(> nord-item)`. Because the injected styles are unlayered, the leak also silently overrode any `:focus-visible` utilities consumers had added themselves. (#678)
- Fixes the [Nav Toggle](https://nordhealth.design/components/nav-toggle/) component ignoring `--n-button-background-color` and `--n-button-color` set on the toggle element. The defaults were declared directly on the inner `<nord-button>`, where they beat any value inherited from outside; they now live on the host, so outside styles targeting the toggle win, while values a surrounding region sets for its buttons still lose to the defaults (keeping the toggle transparent on top bars and drawers). This also restores the [Layout](https://nordhealth.design/components/layout/) component's top-bar focus background for the toggle, and the plain `color` knob keeps working unchanged. (#678)
- Fixes the [Nav Item](https://nordhealth.design/components/nav-item/) component emitting `role="listitem"` without a `role="list"` ancestor, an `aria-required-parent` accessibility violation. The role is now emitted only when the item sits inside a [Nav Group](https://nordhealth.design/components/nav-group/) (which exposes `role="list"` and signals it via context); standalone items — for example directly in [Navigation](https://nordhealth.design/components/navigation/) or used as a [Dropdown](https://nordhealth.design/components/dropdown/) toggle — omit it. (#676)
- The [Button](https://nordhealth.design/components/button/) component now forwards `tabindex="-1"` from the host to its internal control, so decorative or `aria-hidden` buttons are removed from the tab order (`delegatesFocus` otherwise keeps the shadow button focusable, failing the `aria-hidden-focus` accessibility rule). Only `-1` is forwarded — zero and positive values are left to `delegatesFocus` as before. (#676)
- The [Layout](https://nordhealth.design/components/layout/) component's nav resize handle now implements the full ARIA window splitter contract. The focusable `role="separator"` was missing its required value attributes (an `aria-required-attr` violation); it now exposes `aria-valuenow` (the current nav width in pixels), `aria-valuemin` / `aria-valuemax` mirroring the `min-nav-width` / `max-nav-width` props, a localized `aria-label` ("Resize navigation"), and `aria-controls` pointing at the nav container. While the nav is collapsed, `aria-valuetext` announces "Navigation collapsed". (#678)
- Release date 7.7.2026.

### 5.0.0

\*Nord 5 is the largest release since the Design System's first major version. It introduces a new component paradigm — \*\*Light DOM\*\* rendering and \*\*composition-first, compound-component APIs\*\* — alongside a broad set of new components spanning forms, filters, disclosure, and data display. Existing component APIs are unchanged, so upgrading needs no code migration — but the refreshed navigation and surface colors shift existing UIs visually, so regenerate your visual-regression baselines.\*

- **New component paradigm — Light DOM.** The new components render into the Light DOM instead of a Shadow DOM root, so their internal markup is regular DOM. Consumer CSS, `@nordhealth/css` utility classes, and global styles reach the internals directly — no `::part` or shadow-piercing needed. Each component injects its own stylesheet on connect, so it still styles correctly out of the box. Existing Shadow DOM components are unchanged. (#656)
- **New component paradigm — composition-first, compound components.** Rather than one monolithic element driven by many props and slots, the new components ship as a family of small, single-purpose parts you assemble to match the anatomy you need — for example the Item family (`Item`, `Item Media`, `Item Content`, `Item Title`, `Item Actions`…), the Field family, Pagination's primitives, and Combobox's `<nord-combobox-option>` / `<nord-combobox-group>`. A ready-made higher-level component is provided where a sensible default helps, so you can drop one element in or compose the parts by hand. (#656)
- Adds a large batch of new components, all built on a shared set of hook-less Lit controllers (`OpenStateController`, `FocusableWhenDisabledController`, `TransitionStatusController`, `CollapseController`, `RovingFocusController`, `ActiveDescendantController`) that mirror Base UI behaviour, so open/close, focus, disabled, and transition logic is implemented once and reused. (#656)
- Introduces the **Item** family — [Item](https://nordhealth.design/components/item/), Item Group, Item Separator, Item Media, Item Content, Item Title, Item Description, Item Actions, Item Header, and Item Footer — a composable primitive set for building rich list rows and cards from a single piece of content such as a person, file, or setting. Wrap an Item in an `<a>` to make the whole row a link. (#656)
- Adds the [Accordion](https://nordhealth.design/components/accordion/) component — a set of stacked, individually expandable sections with single- or multi-open behaviour (seeded via `value`), plus `justify-content` and `icon-gap` customization. (#656)
- Adds the [Collapsible](https://nordhealth.design/components/collapsible/) component — a single show/hide region toggled by its trigger or the `open` property. (#656)
- Adds the [Kbd](https://nordhealth.design/components/kbd/) component — renders a keyboard key or shortcut as a styled key cap, groupable via Kbd Group, with `variant`, `emphasize`, a size scale, and public color/border/shadow Custom Properties. (#656)
- Adds the [Meter](https://nordhealth.design/components/meter/) component — a graphical display of a numeric value within a known range (disk usage, battery level, a score); unlike a progress bar it shows a static measurement rather than task completion. (#656)
- Adds the [Combobox](https://nordhealth.design/components/combobox/) and [Autocomplete](https://nordhealth.design/components/autocomplete/) components with Base UI single-select parity and virtualized lists. Both support declarative `<nord-combobox-option>` / `<nord-combobox-group>` children (self-registering via context) alongside the `.options` array API, auto-add **creatable** entries via a cancelable `create` event (opt-out), `start` / `end` slots for custom icons, and place the selected tick on the left to match the filter dropdown. (#656)
- Adds the [Number Field](https://nordhealth.design/components/number-field/) and [OTP Field](https://nordhealth.design/components/otp-field/) components. Number Field exposes `formatValue` / `parseValue` callbacks to override the default `Intl`-based mask, plus `start` / `end` slots with auto-positioned currency. (#656)
- Introduces the **Field** family — [Field](https://nordhealth.design/components/field/), Fieldset, and Field Group — and a shared Field pattern that synchronises form-control sizing and focus across inputs. (#656)
- Form controls now work **both** standalone and inside a `<nord-field>`. The built-in field props (`label`, `hint`, `hint-below`, `hide-label`, `error`, `hide-required`) are **un-deprecated** and supported on every control; wrapping a control in `<nord-field>` makes the Field take over labelling via `@lit/context` and the control suppresses its built-in field UI. `required` stays owned by the control and is published up so `<nord-field-label>` renders the required indicator automatically. Applies across input, textarea, select, checkbox, radio, toggle, range, number-field, otp-field, date-picker, date-range-picker, time-picker, combobox, and autocomplete. (#656)
- Adds the [Date Range Picker](https://nordhealth.design/components/date-range-picker/) component — a two-month range calendar with inline mode, a custom trigger slot, and the full preset catalogue grouped with dividers. It collapses to a single month based on the picker's own width (container-based, not the viewport), resolved synchronously on open; the collapsed-presets popout matches the trigger width; the built-in label click focuses the trigger rather than opening (Space/Enter opens); and it has proper read-only styling. Adds `isDateDisabled` and `isDateHighlighted` callbacks. (#656)
- Adds a joined-chip **Filter** family — filter bar, input, field, add, and reset primitives; a `nord-filter-dropdown` with built-in options; and a dedicated `filter-date-range`. Filter Input connects its label to the input (`<label for>` + `hide-label`) and adds `start` / `end` slots for custom icons (default search icon). (#656)
- Adds the [Pagination](https://nordhealth.design/components/pagination/) component plus composition-first primitives, with a `loading` prop that dims and disables the control while results load. (#656)
- Adds `round-to-interval` (snaps a typed time to the nearest option) and `hour-format` (`12h` / `24h`) props to the [Time Picker](https://nordhealth.design/components/time-picker/) component. (#656)
- Adds an `always-show-scrollbar` prop to the [Scroll Area](https://nordhealth.design/components/scroll-area/) component. (#656)
- Renders the [Toast](https://nordhealth.design/components/toast/) group in the browser's top layer, above modals. (#656)
- Adds an opt-in controlled mode to the [Popout](https://nordhealth.design/components/popout/) component with a single deterministic open path. (#656)
- Fixes the [Tab Group](https://nordhealth.design/components/tab-group/) component so the first tab is pre-selected when its `<nord-tab>` children are slotted asynchronously by a framework (Vue / React). Previously `selectedTab` could stay unset in that case, leaving no tab active. (#656)
- Refreshes the navigation and surface color system (NDS-180): [Nav Item](https://nordhealth.design/components/nav-item/) keeps the selected background on a collapsed active parent and only defers to the expanded overlay when the parent is open (`aria-expanded="true"`), with text going strong on hover / active; [Aside Trigger](https://nordhealth.design/components/aside-trigger/) matches by strengthening its label and icon color (`--n-color-text`) on hover and while its drawer is active; the [Layout](https://nordhealth.design/components/layout/) component lifts the docked nav above the sticky footer on wide viewports so the resize divider isn't painted over; and the [Aside](https://nordhealth.design/components/aside/) drawer's default shadow softens from `--n-box-shadow-nav` to `--n-box-shadow-card` so it no longer overlaps adjacent surfaces. (#670)
- Fixes the [Tooltip](https://nordhealth.design/components/tooltip/) component flashing behind the layout nav rail during its \~0.2s fade-out. The tooltip now stays in the browser's top layer until the fade-out `transitionend` fires, instead of being demoted in the same tick the hide begins; re-showing mid-fade cancels the pending demotion. (#671)
- Fixes the [Layout](https://nordhealth.design/components/layout/) component so a sticky footer with the nav open aligns its start edge to the live nav width (`var(--_n-layout-nav-width)`) instead of a hardcoded `250px`, keeping the footer flush with the nav when it is resized (220–400px), in rail mode (64px), or given a custom `default-nav-width`. (#673)
- Adds native range selection and multi-month display to the [Calendar](https://nordhealth.design/components/calendar/) component. A new `range` prop switches it to range mode (`range-start` / `range-end` ISO properties for controlled selection), a completed range fires a `range-change` event (`DateRangeSelectEvent`), and in-range days plus a live hover preview are styled as you pick. A `months` prop renders that many consecutive month grids side by side so a span can cross months without paging. Also adds `isDateDisabled` and `isDateHighlighted` callbacks. The existing single-date `value` / `change` API is unchanged. (#656)
- Adds an `actions` slot to the [Banner](https://nordhealth.design/components/banner/) component for trailing action buttons (a call to action and/or a dismiss button). (#656)
- Deprecates the [Fieldset](https://nordhealth.design/components/fieldset/) component (`<nord-fieldset>`) in favour of the new composable Field family. It continues to work, but new code should group related controls with `<nord-field-set>` and the Field parts instead. (#656)
- Release date 2.7.2026.

### 4.26.2

- The [Tooltip](https://nordhealth.design/components/tooltip/), [Popout](https://nordhealth.design/components/popout/), and [Dropdown](https://nordhealth.design/components/dropdown/) components gain `side-offset` / `align-offset` properties (px) that mirror the Radix UI positioning API. The values feed Floating UI's `offset` middleware, so the gap is collision-aware and stays correct after auto-flips. [Truncate](https://nordhealth.design/components/truncate/) forwards both onto its portaled tooltip. `side-offset` defaults to `8` (Nord's established gap), so default rendering is unchanged. **Removes** the `--n-popout-offset-inline` / `--n-popout-offset-block` Custom Properties added in 4.25.0 — they applied a logical-axis nudge after positioning that ignored collision/flip and are superseded by the new props. (#665)
- The [Command Menu](https://nordhealth.design/components/command-menu/) component gains an opt-in `forceShortcut` flag on a command (`ICommandMenuAction`). When `true`, the command calls `event.preventDefault()` so its `shortcut` can reclaim a browser-reserved combination (e.g. `Alt+D`, which normally focuses the address bar). It is off by default, so existing commands keep firing their handler while the browser retains its default action. Combinations the browser/OS intercepts before the page (e.g. `Alt+F4`, `Ctrl+W`) still can't be reclaimed. (#667)
- The [Textarea](https://nordhealth.design/components/textarea/) component adds a public `--n-textarea-max-block-size` Custom Property (default `500px`) that caps growth in `resize="auto"` and `resize="vertical"` modes; `--n-textarea-block-size` is now the **minimum** height. In `resize="auto"`, content that reaches the cap now scrolls (`overflow: auto`) instead of being clipped, and the auto-resize calculation no longer clips the last line on `box-sizing: border-box` textareas. (#663)
- The [Button Group](https://nordhealth.design/components/button-group/) component adds a `--n-button-group-gap` Custom Property to customize the gap between buttons in the spaced variant. (#662)
- The [Popout](https://nordhealth.design/components/popout/) component exposes two public Custom Properties, `--n-popout-background` and `--n-popout-box-shadow`, for restyling its surface. Both fall back to the previous global tokens (`--n-color-surface`, `--n-box-shadow-popout`), so unstyled popouts, dropdowns, and tooltips render unchanged. This also fixes the rail-mode [Navigation](https://nordhealth.design/components/navigation/) flyout rendering with a transparent background. (#664)
- The [Layout](https://nordhealth.design/components/layout/) component, in `collapse-mode="hide"`, now sizes the hover/focus **peek flyout** to its content (`fit-content`) instead of the fixed `default-nav-width`, clamped by `min-nav-width` / `max-nav-width` and the viewport so it can't overflow. The docked opened nav, rail mode, and narrow/mobile viewports are unchanged. (#666)
- Fixes the [Layout](https://nordhealth.design/components/layout/) component so a sticky footer no longer sits underneath the open navigation column on wide viewports; the sticky footer now offsets horizontally to keep its actions reachable. Non-sticky footers are unaffected. (#661)
- Release date 30.6.2026.

### 4.26.1

- `<nord-button>` now delegates focus to its internal control. The host element itself matches `:focus` and `:focus-visible`, so consumer styles such as `nord-button:focus-visible { ... }` apply correctly. As a side effect, the focus ring is now visible when a button receives focus programmatically (e.g. `autofocus` on a button inside a [Modal](https://nordhealth.design/components/modal/)), where it previously was not rendered.
- Scopes the [Navigation](https://nordhealth.design/components/navigation/) header/footer focus and hover ring to direct `<nord-button>` and `<nord-dropdown>` children, and switches the underlying selectors to `:focus-visible`. Wrapper elements such as a `<div slot="footer">` containing multiple buttons no longer match the slot's `::slotted` rules, so the accent border no longer cascades to every wrapped child when only one is hovered or focused. Consumers slotting a single focusable inside a wrapper element will lose the navigation-injected ring and fall back to the button's own `:focus-visible` / `:hover` styling.
- Release date 25.6.2026.

### 4.26.0

- Introduces the new [Aside](https://nordhealth.design/components/aside/) component family (`<nord-aside>`, `<nord-aside-drawer>`, `<nord-aside-trigger>`) — a responsive, collapsible side-panel system that mounts in the [Layout](https://nordhealth.design/components/layout/) component's `drawer` slot. `<nord-aside>` owns the rail, the active-drawer state, drag and keyboard resize, fullscreen sync, narrow-mode state, body-scroll lock, backdrop, and Esc handling.
- `<nord-aside-drawer>` is the state/identity wrapper for a single drawer panel (slot a `<nord-drawer>` or any content inside). Supports per-id width persistence via `localStorage`, `min-width` / `max-width`, an independent `max-fullscreen-width` cap, a WAAPI fullscreen toggle animation, and switches `role` between `region` (docked) and `dialog` + `aria-modal` (floating).
- `<nord-aside-trigger>` is the rail button that activates a drawer by id. Exposes `drawer`, `icon`, `label`, `badge` (forwarded to an inner [Badge](https://nordhealth.design/components/badge/)), `disabled`, and `tooltip` (defaults `true`; renders a [Tooltip](https://nordhealth.design/components/tooltip/) from `label`). Provides a default slot (custom leading content overriding `icon`) and a `tooltip` slot (overrides the tooltip body).
- Adds responsive rail behaviour: at wide viewports (≥768px) the rail is a right-side column (default 48px) with a docked drawer and a draggable resize handle; at narrow viewports (<768px) the *same* rail DOM repositions to a fixed bottom bar (when slotted with rail items) and the drawer becomes a slide-up floating overlay with a backdrop. No re-render or DOM mutation across the breakpoint — slotted triggers keep identity, focus, and ARIA. Independent of the left nav's `collapse-mode`.
- Reflects responsive state as `data-narrow-rail-bottom` / `data-narrow-floating-drawer` on both the aside and its parent layout for consumer CSS hooks.
- Extends the [Layout](https://nordhealth.design/components/layout/) component with live `--n-layout-header-block-size` and `--n-layout-footer-block-size` CSS Custom Properties (published via `ResizeObserver`, distinct from the consumer setters `--n-layout-header-size` / `--n-layout-footer-size`). Adds a new cap/floor token API: `--n-layout-main-min-inline-size` (main-panel floor, `600px` at ≥1240px), `--n-layout-content-inline-end-offset`, `--n-layout-drawer-min-inline-size`, and narrow z-index tokens.
- Adds a `nav-rail-width` property and `collapse-mode="rail"` bottom-bar support to the [Layout](https://nordhealth.design/components/layout/) component. Sticky footers now coexist with docked, fullscreen, and narrow drawers via z-index stacking and live footer-size reads.
- Implements two independent resize caps in the Aside drawer: the docked drag/keyboard path stops at `min(max-width, viewport − rail − nav.right − inlineEndOffset − mainMinFloor)`, reserving the main-panel floor; the fullscreen overlay sizes via CSS `min()` over two private vars (no JS clamp), reserving only the inline-end offset + border so its left edge clears the nav. `fullscreen` is a hard no-op at narrow viewports.
- Changes the default `padding` of the [Drawer](https://nordhealth.design/components/drawer/) component from `m` to `l`, and expands the scale from `m | none` to `l | m | s | none`. This is a global default change — existing `<nord-drawer>` consumers receive more padding by default. Also documents a `--n-drawer-background-color` CSS Custom Property.
- **Breaking change** — on the [Drawer](https://nordhealth.design/components/drawer/) component, `padding="none"` now also removes the horizontal padding of anything in its `header` slot. The slotted header's `--n-header-padding-inline` follows the drawer's padding, so `padding="none"` collapses it to `0`; previously the header kept its own default side padding (`var(--n-space-l)`) regardless of the drawer's `padding`. (The other non-default values behave the same way — `m` / `s` shrink the header's side padding to match — but `none` is the one that removes it entirely.) If you want a flush drawer body but a header that stays padded, set `--n-header-padding-inline` on the header yourself:
  ```html
  <!-- Before 4.26.0: the header kept its side padding automatically -->
  <nord-drawer padding="none">
    <nord-header slot="header">Title</nord-header>
    …
  </nord-drawer>

  <!-- 4.26.0 and later: restore it explicitly -->
  <nord-drawer padding="none">
    <nord-header slot="header" style="--n-header-padding-inline: var(--n-space-l)">Title</nord-header>
    …
  </nord-drawer>
  ```
- Adds an `xs` size to the [Header](https://nordhealth.design/components/header/) component (`size: 'm' | 's' | 'xs'`; 45px block-size, `xs` block padding). Additive — `m` and `s` are unchanged.
- Splits `--n-footer-padding-inline` on the [Footer](https://nordhealth.design/components/footer/) component into `--n-footer-padding-inline-start` and `--n-footer-padding-inline-end` so the layout can pad footer content past the rail. The new tokens fall back to the existing value, so render is unchanged when unset.
- Promotes the transparent button background of the [Nav Toggle](https://nordhealth.design/components/nav-toggle/) component from a layout-only top-bar override to the component default, so the toggle no longer paints a card over surfaces that supply their own background.
- Sets the default `nav-rail-width` on the [Layout](https://nordhealth.design/components/layout/) component to `64`.
- Adds an iOS-safe, ref-counted body-scroll lock helper used by the narrow floating drawer.
- Fixes the React and Vue type generation pipeline so phantom/unnamed events emitted into the custom-elements manifest are dropped before reaching `build-react-types` / `build-vue-types`, preventing the wrapper builds from crashing.
- Adds accessibility tests and a `readme.md` to the [Truncate](https://nordhealth.design/components/truncate/) component.
- Release date 25.6.2026.

### 4.25.2

- Fixes a cross-tab feedback loop in the [Layout](https://nordhealth.design/components/layout/) component's `sync-nav-state` mode where two Safari tabs could ping-pong the sidebar open/closed indefinitely. Broadcasts are now emitted from user-action handlers (toggle click, host click, media query change, nav click, light dismiss) instead of the `navOpen` observer, so incoming messages can no longer re-broadcast. As a consequence, programmatic `layout.navOpen = X` assignments no longer broadcast across tabs — consistent with how `layout.navWidth` has behaved since 4.0. Consumers that need cross-tab sync from a programmatic toggle should dispatch a click on a `<nord-nav-toggle>` instead.
- Release date 18.6.2026.

### 4.25.1

- Introduces four CSS Custom Properties on the [Layout](https://nordhealth.design/components/layout/) component for overriding the drawer (`aside`) shadow and inline-start border: `--n-layout-drawer-box-shadow` (default `var(--n-box-shadow-nav)`, all viewports), `--n-layout-drawer-box-shadow-wide` (default `var(--n-box-shadow-header)`, ≥1240px), `--n-layout-drawer-border-inline-start-width` (default `1px`, ≥1240px), and `--n-layout-drawer-border-inline-start-color` (default `var(--n-color-border)`, ≥1240px). Defaults match the previous hardcoded values exactly, so unstyled consumers are pixel-identical.
- Release date 17.6.2026.

### 4.25.0

- Introduces a new [Truncate](https://nordhealth.design/components/truncate/) component (`<nord-truncate>`) for overflow-aware single-line and multi-line text. Binary-searches the longest prefix of the text that fits in its container, writes the truncated string + ellipsis directly into the DOM, and surfaces the full text via an auto-rendered [Tooltip](https://nordhealth.design/components/tooltip/) on hover. Supports `position`, `delay`, and `line-clamp` attributes.
- Adds a `collapse-mode` attribute (`'hide' | 'rail'`, default `'hide'`) to the [Layout](https://nordhealth.design/components/layout/) component. When set to `'rail'`, the closed sidebar collapses to a narrow 48px icon-only column on wide viewports instead of hiding off-screen. Narrow viewports continue to use the existing off-screen behaviour.
- Adds a `hide-collapse-button` boolean attribute to the [Layout](https://nordhealth.design/components/layout/) component to suppress the built-in lock-icon collapse button.
- Adds a `toggle-on-resize-click` boolean attribute to the [Layout](https://nordhealth.design/components/layout/) component that toggles the sidebar between open and rail/hidden when the resize handle is clicked without dragging.
- Adds a `tooltip-divider` slot to the [Layout](https://nordhealth.design/components/layout/) component for rendering custom tooltip content anchored to the resize handle.
- Adds `size` (`'s' | 'm'`, default `'m'`), `icon-size` (`'xxs' | 'xs' | 's' | 'm' | 'l'`, default `'m'`), and `square` boolean attributes to the [Nav Toggle](https://nordhealth.design/components/nav-toggle/) component.
- Adds an `icon` slot to the [Nav Item](https://nordhealth.design/components/nav-item/) component for projecting a custom leading icon (overrides the `icon` attribute), shown in both expanded nav and rail mode.
- Adds an `end` slot to the [Nav Item](https://nordhealth.design/components/nav-item/) component for trailing content that participates in the flex flow alongside the label. Sibling labels (including any nested `<nord-truncate>`) flex-shrink against the slotted element's real width, so labels ellipsize precisely at the trailing element's leading edge.
- Adds a `rail-tooltip` slot to the [Nav Item](https://nordhealth.design/components/nav-item/) component for overriding the rail-mode tooltip's content. When present, it replaces the default label projection; when absent, the tooltip falls back to the item's default-slot label.
- Renders [Tooltip](https://nordhealth.design/components/tooltip/) in the browser's top layer via the Popover API. Tooltips now escape `overflow: hidden` ancestors and trigger on descendants of the host element (resolved via `closest('[aria-describedby~="…"]')`) instead of only the host itself. Floating-ui positioning is preserved.
- Styles the [Navigation](https://nordhealth.design/components/navigation/) component's main scrollbar as thin and unobtrusive across browsers (Firefox `scrollbar-width: thin`; Chromium/Safari 6px webkit scrollbar).
- Narrows the focus-within ring on slotted nav header/footer elements from any element to `<nord-button>` and `<nord-dropdown>` descendants only. Wrapper elements (e.g. `<div slot="footer">`) no longer receive the inset ring; wrapped focusables continue to use their own `:focus-visible` styling.
- Introduces `--n-layout-resize-color`, `--n-layout-resize-block-size`, `--n-layout-resize-inset-inline-end`, and `--n-layout-nav-rail-width` CSS Custom Properties on the [Layout](https://nordhealth.design/components/layout/) component.
- Promotes `--n-layout-header-size` to a public CSS Custom Property on the [Layout](https://nordhealth.design/components/layout/) component (default `var(--n-space-xxl)`, unchanged). Previously the private `_n-layout-header-size`.
- Introduces `--n-nav-item-icon-gap`, `--n-rail-flyout-background`, `--n-rail-flyout-box-shadow`, `--n-rail-flyout-min-inline-size`, `--n-rail-flyout-padding`, `--n-rail-flyout-offset-inline`, `--n-rail-flyout-offset-block`, `--n-rail-subnav-indicator-color`, and `--n-rail-subnav-indicator-color-active` CSS Custom Properties on the [Nav Item](https://nordhealth.design/components/nav-item/) component.
- Introduces `--n-nav-group-heading-display` CSS Custom Property on the [Nav Group](https://nordhealth.design/components/nav-group/) component (default `block`); set to `none` to hide a group heading inline.
- Introduces `--n-popout-offset-inline` and `--n-popout-offset-block` CSS Custom Properties on the [Popout](https://nordhealth.design/components/popout/) component (default `0`). &#x2A;Removed in 4.26.2 — superseded by the `side-offset` / `align-offset` props on [Tooltip](https://nordhealth.design/components/tooltip/), [Popout](https://nordhealth.design/components/popout/), and [Dropdown](https://nordhealth.design/components/dropdown/).*
- Introduces `--n-button-justify-content` (default `flex-start`) and `--n-button-content-display` (default `block`) CSS Custom Properties on the [Button](https://nordhealth.design/components/button/) component. Setting `--n-button-content-display: none` hides the label, used to centre leading icons in rail-collapsed states.
- Introduces `--n-card-header-end-margin-block-start` and `--n-card-header-end-margin-block-end` CSS Custom Properties on the [Card](https://nordhealth.design/components/card/) component (default `calc(var(--n-space-xs) * -1)`, unchanged). Exposes the previously hardcoded negative margins on `[slot='header-end']` so consumers can opt out.
- Introduces `--n-dropdown-item-white-space` (default `nowrap`) and `--n-dropdown-item-align-items` (default `center`) CSS Custom Properties on the [Dropdown Item](https://nordhealth.design/components/dropdown-item/) component. Setting `--n-dropdown-item-white-space: normal` allows long labels to wrap across multiple lines.
- Switches the [Nav Item](https://nordhealth.design/components/nav-item/) content container from block-with-overflow-ellipsis to flex layout. Single-line ellipsis behaviour is preserved on the label. Consumers relying on absolute positioning of a slotted `[slot="end"]` element can opt back in with `position: absolute` on the slotted element.
- Release date 16.6.2026.

### 4.24.0

- Adds a `nav-resize` event to the [Layout](https://nordhealth.design/components/layout/) component, dispatched whenever the navigation sidebar width changes (drag-resize and programmatic updates). The event's `width` property carries the new width in pixels.
- Release date 9.6.2026.

### 4.23.0

- Extends the [Layout](https://nordhealth.design/components/layout/) component to recognise any descendant `<nord-nav-toggle>`, not just the one in the `nav-toggle` slot. Clicks on a `<nord-nav-toggle>` placed anywhere inside `<nord-layout>` (e.g. inside `<nord-header>`) now toggle the navigation, and hover on such a toggle drives the peek behaviour on wide screens.
- Adds a `hide-default-nav-toggle` boolean attribute to the [Layout](https://nordhealth.design/components/layout/) component to suppress the built-in fallback `<nord-nav-toggle>` when you've placed your own elsewhere inside the layout.
- Adds a `nav-open-change` event to the [Layout](https://nordhealth.design/components/layout/) component, dispatched whenever the navigation open state changes (user toggle, peek, focus, programmatic). The event's `navOpen` property carries the new state.
- Adds `icon` and `icon-active` attributes to the [Nav Toggle](https://nordhealth.design/components/nav-toggle/) component, allowing the resting and hover/focus icons to be customised. Defaults preserve the existing `navigation-toggle` / `navigation-toggle-lock` pair.
- Adds an `auto-hide` boolean attribute to the [Nav Toggle](https://nordhealth.design/components/nav-toggle/) component that mirrors the built-in toggle's behaviour, hiding the toggle on wide viewports while its ancestor `<nord-layout>` has the nav open.
- Introduces `--n-card-background-color` CSS Custom Property on the [Card](https://nordhealth.design/components/card/) component for customising the card background. Defaults to `var(--n-color-surface)`.
- Release date 4.6.2026.

### 4.22.0

- Introduces `--n-layout-nav-border-color` CSS Custom Property on the [Layout](https://nordhealth.design/components/layout/) component, allowing the color of the border between the navigation and the main content area (on wide screens with the nav open) to be customized. Defaults to `var(--n-color-border)`.
- Release date 3.6.2026.

### 4.20.0

- Adds `default-nav-width`, `min-nav-width`, and `max-nav-width` reflected number attributes to the [Layout](https://nordhealth.design/components/layout/) component, allowing consumers to control sidebar width without forking. Defaults preserve current behaviour (`250` / `220` / `400`). `default-nav-width` has re-seed-on-change semantics tracked via a second localStorage key, so apps can roll out a new sidebar default without manual storage migrations; widths are also re-clamped against current min/max on every load.
- Adds a `size` property (`s` | `m`, default `m`) to the [Calendar](https://nordhealth.design/components/calendar/) component. The `s` variant uses 28×28 day cells, smaller fonts, and tighter spacing to match the Figma toolkit spec. The default block padding is now symmetric `--n-space-m` (previously 16px top / 20px bottom).
- Introduces `--n-calendar-padding-block`, `--n-calendar-padding-inline`, and `--n-calendar-nav-gap` CSS Custom Properties on the [Calendar](https://nordhealth.design/components/calendar/) component for layout customization.
- Aligns the default and disabled visual states of the [Select](https://nordhealth.design/components/select/) component with the [Input](https://nordhealth.design/components/input/) component. The default background now reads `var(--n-input-background, var(--n-color-surface))` and drops the button gradient and box-shadow, so the select renders as an input-styled field with a caret. The disabled state uses `var(--n-input-background-inactive, var(--n-color-active))` and dims background, border, label, and toggle icon consistently with `nord-input:disabled`.
- Refines the hover and `aria-expanded` background of the [Dropdown Item](https://nordhealth.design/components/dropdown-item/) component to use `--n-color-active` / `--n-color-text` instead of the louder `--n-color-accent` / `--n-color-text-on-accent` treatment. Hover overrides on the [Message](https://nordhealth.design/components/message/) component (which imports `DropdownItem.css`) are removed accordingly.
- Fixes alignment of [Dropdown Submenu](https://nordhealth.design/components/dropdown-submenu/) when slotted inside a [Dropdown Group](https://nordhealth.design/components/dropdown-group/) so the trigger row sits flush with sibling items.
- Adds 15 component-scoped CSS Custom Properties on `nord-nav-item` (`--n-nav-item-*`) covering base, hover, active, and active-parent (expanded) states — including overlay opacity, overlay filter, padding, border-radius, and line-height — so consumers can customize the [Navigation](https://nordhealth.design/components/navigation/) sidebar items without forking.
- Introduces four new theme tokens — `--n-color-nav-active-background`, `--n-color-nav-active-text`, `--n-color-nav-expanded-background`, and `--n-color-nav-expanded-text` — across all eight themes (nord, nord-dark, nord-high-contrast, nord-dark-high-contrast, vet, vet-dark, vet-high-contrast, vet-dark-high-contrast). These close the gap with the existing `--n-color-nav-hover` / `--n-color-nav-surface` / `--n-color-nav-heading` tokens; active and expanded states previously reused `--n-color-accent` directly. Defaults preserve the current visual output 1:1.
- Release date 19.5.2026.

### 4.19.0

- Fixes the default background color of the [Input](https://nordhealth.design/components/input/), [Textarea](https://nordhealth.design/components/textarea/), [Checkbox](https://nordhealth.design/components/checkbox/), [Radio](https://nordhealth.design/components/radio/), and [Tag](https://nordhealth.design/components/tag/) components from a grey tint (`--n-color-active`) to white (`--n-color-surface`), making the default state visually distinct from disabled.
- Fixes the disabled and readonly states of the [Input](https://nordhealth.design/components/input/) and [Textarea](https://nordhealth.design/components/textarea/) components to use `--n-color-active` as the background, clearly differentiating them from the default state. Readonly preserves the full text color while disabled uses `--n-color-text-weakest`.
- Fixes icon slot colors in the [Input](https://nordhealth.design/components/input/) component to match the text color in disabled (`--n-color-text-weakest`) and readonly (`--n-color-text`) states.
- Introduces `--n-input-background`, `--n-input-background-inactive`, `--n-textarea-background`, and `--n-textarea-background-inactive` CSS Custom Properties for independently customizing input and textarea backgrounds across default and inactive (disabled/readonly) states.
- Fixes an issue in the [Tag Group](https://nordhealth.design/components/tag-group/) component where z-index values for hover and focus-within states were not properly separated.
- Release date 6.5.2026.

### 4.18.0

- Adds `hint-below` property to the [Checkbox](https://nordhealth.design/components/checkbox/), [Date Picker](https://nordhealth.design/components/date-picker/), [Fieldset](https://nordhealth.design/components/fieldset/), [Input](https://nordhealth.design/components/input/), [Radio](https://nordhealth.design/components/radio/), [Range](https://nordhealth.design/components/range/), [Select](https://nordhealth.design/components/select/), [Textarea](https://nordhealth.design/components/textarea/), and [Toggle](https://nordhealth.design/components/toggle/) components, allowing hint text to be rendered below the control and any error.
- Preserves the existing hint placement by default, making the new layout opt-in and non-breaking for current consumers.
- Release date 16.4.2026.

### 4.17.0

- Fixes an issue in the [Date Picker](https://nordhealth.design/components/date-picker/) component where the `hideRequired` property was not working.
- Modifies the [Calendar](https://nordhealth.design/components/calendar/) component’s year selection logic from a 10-year range based on the selected year to a range from `current year - 100` to `current year + 10`.
- Release date 25.3.2026.

### 4.16.1

- Adds new example and improve documentation for [Dropdown Submenu](https://nordhealth.design/components/dropdown-submenu/) component.
- Release date 23.3.2026.

### 4.16.0

- Adds new [Dropdown Submenu](https://nordhealth.design/components/dropdown-submenu/) component that enables nested submenus within [Dropdown](https://nordhealth.design/components/dropdown/) menus, with hover-to-open on desktop and stack navigation on mobile viewports.
- Adds support for partial translation overrides in the localization system. The `registerTranslation` function now accepts partial translations that are deep-merged with existing translations, making it easier to override specific strings without providing a full translation object.
- Fixes an issue in the [Calendar](https://nordhealth.design/components/calendar/) component where aria labels for day cells were off by one day due to UTC formatting inconsistencies.
- Adds keyboard input validation against `min` and `max` date boundaries in the [Date Picker](https://nordhealth.design/components/date-picker/) component, validating on blur.
- Release date 23.3.2026.

### 4.15.0

- Adds `persistent` and `hide-close-button` properties to the [Modal](https://nordhealth.design/components/modal/) component for enhanced customization of modal behavior and appearance.
- Improves [Modal](https://nordhealth.design/components/modal/) component's event handling by exposing the trigger source through enhanced `cancel` and `close` events for better control over different close scenarios.
- Release date 12.3.2026.

### 4.14.0

- Fixes an issue in the [Popout](https://nordhealth.design/components/popout/) and [Dropdown](https://nordhealth.design/components/dropdown/) components where `position: fixed` positioning would break when ancestor elements use CSS container queries or create containing blocks. The components now use the Popover API to promote themselves to the top layer when opened.
- Adds `trigger` property to the [Modal](https://nordhealth.design/components/modal/) component's `cancel` and `close` events, exposing the original event that caused the dismiss or close action. The new `ModalCancelEvent` and `ModalCloseEvent` classes are exported from the package.
- Fixes the Vue and React type definition for the `form` property on form components to correctly accept a `string` value instead of `HTMLFormElement`.
- Fixes missing TypeScript declarations for the `@nordhealth/tokens` package, resolving module resolution errors when importing design tokens in TypeScript projects.
- Adds missing CSS Custom Properties documentation for the [Button](https://nordhealth.design/components/button/), [Card](https://nordhealth.design/components/card/), and [Input](https://nordhealth.design/components/input/) components.
- Release date 6.3.2026.

### 4.13.0

- Adds `inputmode` property to the [Input](https://nordhealth.design/components/input/) component to support the HTML `inputmode` attribute, allowing browsers on mobile devices to display appropriate keyboards (e.g., numeric keypad with `inputmode="numeric"`).
- Adds `footer-divider` boolean property to the [Card](https://nordhealth.design/components/card/) component to render a border above the footer slot, with automatic padding restoration.
- Adds `--n-card-header-flex-grow` CSS Custom Property to the [Card](https://nordhealth.design/components/card/) component to control header slot flex-grow behavior, allowing header slots to expand and fill available space.
- Adds `--n-card-header-padding-block` and `--n-card-header-padding-inline` CSS Custom Properties to the [Card](https://nordhealth.design/components/card/) component for independent control of header padding.
- Adds `--n-card-border-color` CSS Custom Property to the [Card](https://nordhealth.design/components/card/) component to provide card-specific border color control without affecting global `--n-color-border`.
- Improves [Button](https://nordhealth.design/components/button/) component text selectability by allowing `--n-user-select` CSS Custom Property to be applied to button text.
- Fixes an issue in the [Navigation](https://nordhealth.design/components/navigation/) component where sticky footer styling would be applied even when the footer slot renders no content.
- Release date 2.3.2026.

### 4.12.5

- Fixes an issue where the [Card](https://nordhealth.design/components/card/) component's heading font size and font weight could be overridden by a CSS reset.
- Release date 16.2.2026.

### 4.12.0

- Adds new [Progress](https://nordhealth.design/components/progress/) component that displays a circular pie-chart style progress indicator. The component supports multiple sizes, semantic and custom colors, and provides built-in animation when progress changes.
- Release date 30.1.2026.

### 4.11.0

### 4.10.0

- Adds 6 new icons to [Nordicons](https://nordhealth.design/icons/): `arrow-undo`, `generic-emoji`, `generic-farm-2`, `generic-passport`, `generic-truck`, and `interface-calendar-checked-in`.
- Release date 13.1.2026.

### 4.9.0

- Adds new `--n-card-header-background-color` CSS Custom Property for [Card component](https://nordhealth.design/components/card/) to control the background color of the card header.
- Improves vertical alignment of the [Badge](https://nordhealth.design/components/badge/) component when used inline or in a flexbox container. This change may cause minor layout shifts in some cases.
- Adds new [Card with custom header](https://nordhealth.design/components/card/?example=with+custom+header) usage example.
- Adds new [Badge with vertically aligned text](https://nordhealth.design/components/badge/?example=with+vertically+aligned+text) usage example.
- Adds new [stepper](https://nordhealth.design/components/input/?example=stepper) usage example for the [Input](https://nordhealth.design/components/input/) component.
- Release date 4.11.2025.

### 4.8.1

- Fixes an issue in the [Modal](https://nordhealth.design/components/modal/) component where certain dropdowns and popovers from third-party libraries would not extend beyond the Modal.
- Release date 24.10.2025.

### 4.8.0

- Adds new `alwaysFloating` property to the [Popout](https://nordhealth.design/components/popout/) and [Dropdown](https://nordhealth.design/components/dropdown/) components to always display the popout as a floating overlay, even on smaller viewports.
- Adds new [always floating](https://nordhealth.design/components/dropdown/?example=always+floating) usage example for the Dropdown component.
- Adds new [always floating](https://nordhealth.design/components/popout/?example=always+floating) usage example for the Popout component.
- Release date 19.9.2025.

### 4.7.0

- Adds new `externalFiltering` property for the [Command Menu](https://nordhealth.design/components/command-menu/) component to allow for external filtering.
- Adds new `searchQuery` property for the [Command Menu](https://nordhealth.design/components/command-menu/) component to read and control the search query.
- Adds new `exitNestedOnSearch` property for the [Command Menu](https://nordhealth.design/components/command-menu/) component to control if the Command Menu should exit the nested view when searching.
- Documents the `input` event for the [Command Menu](https://nordhealth.design/components/command-menu/) component to allow for external filtering.
- Adds new [external filtering](https://nordhealth.design/components/command-menu/?example=external+filtering) usage example for the Command Menu component.
- Adds new [exit nested on search](https://nordhealth.design/components/command-menu/?example=exit+nested+on+search) usage example for the Command Menu component.
- Fixes an issue in the [Command Menu](https://nordhealth.design/components/command-menu/) component where global search would return nested items with the default internal filtering.
- Release date 1.9.2025.

### 4.6.0

- Slightly decreases the height of the [Badge](https://nordhealth.design/components/badge/) component to fix a vertical alignment issue on low pixel density screens. This change may cause minor layout shifts in some cases.
- Release date 11.8.2025.

### 4.5.0

- Adds new `hideDropdownIcon` property for the [Button](https://nordhealth.design/components/button/) component to hide the dropdown icon when used as a dropdown toggle.
- Adds new [Button with dropdown but hide icon](https://nordhealth.design/components/button/?example=button+with+dropdown+but+hide+icon) example for the Button component.
- Fixes an issue in the [Modal](https://nordhealth.design/components/modal/) component where content would extend beyond the modal's rounded corners in certain layouts.
- Adds new [feature without footer](https://nordhealth.design/components/modal/?example=feature+without+footer) example for the Modal component.
- Release date 17.7.2025.

### 4.4.0

- Improves the [Layout](https://nordhealth.design/components/layout/) component's collapse button behavior to only hide it (unless hovered or focused) on devices with an accurate hover input mechanism, rather than on all devices.
- Improves language handling by observing changes to `lang` attribute when set on components.
- Adds documentation for setting `lang` attribute on individual components to override document language in the [Localization](https://nordhealth.design/docs/developer/localization/) guidelines.
- Fixes an issue in the [Select](https://nordhealth.design/components/select/) component where changes to slotted option content would not be reflected.
- Adds new icon to [Nordicons](https://nordhealth.design/icons/): `generic-pet-food`.
- Release date 2.7.2025.

### 4.3.1

- Fixes an issue in the [Dropdown](https://nordhealth.design/components/dropdown/) and [Popout](https://nordhealth.design/components/popout/) components where the toggle would stop working after being disconnected and reconnected to the DOM, which happens with Vue’s KeepAlive.
- Release date 25.6.2025.

### 4.3.0

- Adds new `today` property for the [Calendar](https://nordhealth.design/components/calendar/) component.
- Adds new [example to change the date that is considered today](https://nordhealth.design/components/calendar/?example=change+today) for the Calendar component.
- Adds new `today` property for the [Date Picker](https://nordhealth.design/components/date-picker/) component.
- Adds new [example to change the date that is considered today](https://nordhealth.design/components/date-picker/?example=change+today) for the Date Picker component.
- Adds new icon to [Nordicons](https://nordhealth.design/icons/): `interface-table`.
- Release date 5.6.2025.

### 4.2.0

- Adds new `--n-dropdown-max-block-size` CSS Custom Property for [Dropdown component](https://nordhealth.design/components/dropdown/) to control the maximum block size, or height, of the dropdown.
- Adds new [maximum block size example](https://nordhealth.design/components/dropdown/?example=maximum+block+size) for the Dropdown component.
- Release date 23.5.2025.

### 4.1.1

- Updates Nord dependencies to the latest.
- Release date 19.5.2025.

### 4.1.0

- Adds 3 new icons to [Nordicons](https://nordhealth.design/icons/): `text-heading-1`, `text-heading-2` and `text-heading-3`.
- Release date 12.5.2025.

### 4.0.1

- Adds new icon to [Nordicons](https://nordhealth.design/icons/): `text-ordered-list`.
- Adds missing ref attribute to React-specific types for Nord components.
- Release date 8.5.2025.

### 4.0.0

- **New major release that unifies the two design system platforms into a one platform that can serve all of Nordhealth. This change allows us to better support the next generation of apps and generative AI experiences at Nordhealth.** ✨
- This new version ships with two distinctive brands, [therapy](https://nordhealth.design/?theme=nord) and [veterinary](https://nordhealth.design/?theme=vet). You can choose the currently active brand from the top left corner of this documentation website. Once chosen, you will get content that is tailored specifically for the brand and the business unit you’re working in. [Read more](https://nordhealth.design/migrations/4.0.0/).
- With the [recent release of React 19](https://react.dev/blog/2024/12/05/react-19#support-for-custom-elements){rel="&#x22;nofollow&#x22;"} and the added support for Custom Elements, we’re deprecating the `@nordhealth/react` package (which includes the Next.js integration).
- To continue having full type checking and auto-completion in your JSX, you can use the new `@nordhealth/components/lib/react.d.ts` type definition file. [Read more](https://nordhealth.design/docs/developer/web-components/#types-and-editor-integration-with-react).
- Additionally, we have made the Vue-specific types for our Web Components part of the `@nordhealth/components` package, instead of needing to import the separate `@nordhealth/vue` package, which we’re deprecating.
- They can now be retrieved from the new `@nordhealth/components/lib/vue.d.ts` type definition file instead of `@nordhealth/vue`. [Read more](https://nordhealth.design/docs/developer/web-components/#types-and-editor-integration-with-vue).
- Updates `@floating-ui/dom` dependency to version `1.6.13`, `lit` dependency to version `3.3.0`, and `qr` dependency to version `0.4.2`.
- This release doesn’t include breaking changes for the existing users of Nord Design System.
- For detailed description of all changes and the steps required for migration, please see [Migration to 4.0.0](https://nordhealth.design/migrations/4.0.0/).
- Release date 6.5.2025.

### 3.22.0

- Improves the support for importing Nord components in non-browser environments.
- Adds new [Server-side rendering (SSR) with React](https://nordhealth.design/web-components/#server-side-rendering-\(ssr\)-with-react) section to the Web Components guidelines.
- Adds new [Server-side rendering (SSR) with Vue](https://nordhealth.design/web-components/#server-side-rendering-\(ssr\)-with-vue) section to the Web Components guidelines.
- Adds new [Card with scrollable content](https://nordhealth.design/components/card/?example=with+scrollable+content) example.
- Adds new [Card with scrollable table](https://nordhealth.design/components/card/?example=with+scrollable+table) example.
- Adds new [Layout with full height table](https://nordhealth.design/components/layout/?example=full+height+table) example.
- Release date 26.3.2025.

### 3.21.0

- Makes the [Modal](https://nordhealth.design/components/modal/) component no longer apply padding to the default slot if it is empty.
- Adds new [feature without body](https://nordhealth.design/components/modal/?example=feature+without+body) example for the Modal component.
- Improves the [Modal](https://nordhealth.design/components/modal/) documentation slightly.
- Adds `auto` as a `position` property value to the [Popout](https://nordhealth.design/components/popout/) and [Dropdown](https://nordhealth.design/components/dropdown/) components, for automatic positioning depending on which side has the most space available.
- Adds new [position auto](https://nordhealth.design/components/popout/?example=position+auto) usage example for the Popout component.
- Expands the [position and alignment](https://nordhealth.design/components/popout/?example=position+and+alignment) usage example for the Popout component to include automatic positioning.
- Expands the [position and alignment](https://nordhealth.design/components/dropdown/?example=position+and+alignment) usage example for the Dropdown component to include automatic positioning.
- Fixes a macOS Safari repaint bug in the [Radio](https://nordhealth.design/components/radio/) component.
- Release date 13.2.2025.

### 3.20.0

- Adds new `disabled` property for the [Dropdown Item](https://nordhealth.design/components/dropdown-item/) component.
- Adds new [disabled example](https://nordhealth.design/components/dropdown-item/?example=disabled) for the Dropdown Item component.
- Removes the `baseline` value for the `justifyContent` property of the [Stack](https://nordhealth.design/components/stack/) component, as it is not a valid CSS value and had no effect.
- Adds the `baseline` value for the `alignItems` property of the [Stack](https://nordhealth.design/components/stack/) component.
- Adds new [using horizontal align baseline example](https://nordhealth.design/components/stack/?example=using+horizontal+align+baseline) for the Stack component.
- Fix accessibility issue reported by automated testing in [Select](https://nordhealth.design/components/select/) component.
- Release date 29.1.2025.

### 3.19.0

- Adds new `var(--n-select-inline-size)` CSS Property for [Select](https://nordhealth.design/components/select/#css-properties) that controls the inline size, or width, of the select.
- Adds new [custom width usage example](https://nordhealth.design/components/select/?example=custom+width) for the Select component.
- Fixes the vertical alignment of an Avatar with initials on low pixel density screens.
- Release date 20.11.2024.

### 3.18.2

- Fixes an issue where Nordicons were being fetched from the CDN with an outdated version.
- Release date 27.9.2024.

### 3.18.1

- Fixes the line-height of the [Radio](https://nordhealth.design/components/radio/) and [Toggle](https://nordhealth.design/components/toggle/) component labels.
- Migrates the monorepo to use [pnpm workspaces](https://pnpm.io/workspaces){rel="&#x22;nofollow&#x22;"} instead.
- Release date 24.9.2024.

### 3.18.0

- Adds new `rawValue` property for the [Date Picker](https://nordhealth.design/components/date-picker/?example=validation) component. This new read-only property allows you to get the raw value of the Input Field without the date formatting.
- Adds new [validation example](https://nordhealth.design/components/date-picker/?example=validation) for the Date Picker component which utilizes the new `rawValue` property.
- Adds new `button` type for the [Input component](https://nordhealth.design/components/input/) for when you want a button styled as a Nord Input.
- Improves the support for non-browser environments and ensures most of our components can be imported and function there as well.
- Improves React developer experience by exporting the component types from the React package. View the updated [React documentation](https://nordhealth.design/docs/developer/web-components/#react).
- Improves the accessibility of the `role="listbox"` element inside the [Command Menu](https://nordhealth.design/components/command-menu/) component.
- Fixes an issue with the [Navigation component’s sticky footer](https://nordhealth.design/components/navigation/?example=sticky+footer) which previously had incorrect colors when viewed in dark mode.
- Fixes an issue with the [Segmented Control Item](https://nordhealth.design/components/segmented-control-item/) and [Radio](https://nordhealth.design/components/radio/) components which in React never “unchecked” themselves when the user chose another option.
- Updates the underlying Lit package from `2.7.4` to the latest `3.2.0` version.
- Updates all other package dependencies to the latest versions as well.
- Release date 17.9.2024.

### 3.17.0

- Makes it possible to control the text color of the label in form components using `var(--n-label-color)`. This change affects Checkbox, Date Picker, Input, Radio, Toggle, Textarea, Select, and Fieldset components. [View an example](https://nordhealth.design/components/input/?example=small+with+custom+label+color).
- Removes `draft` status from the [Segmented Control](https://nordhealth.design/components/segmented-control/), [Segmented Control Item](https://nordhealth.design/components/segmented-control-item/), [Tag](https://nordhealth.design/components/tag/) and [Tag Group](https://nordhealth.design/components/tag-group/) components and marks them as ready for production usage.
- Release date 4.9.2024.

### 3.16.0

- We’ve improved the sizing of labels when using the small variants of form components. This change affects Checkbox, Date Picker, Input, Radio, Toggle, Textarea, Select, and Fieldset components.
- Fixes an issue where the Modal component abruptly closed when the user tried to scroll the contents using the browser’s built-in scrollbar.
- Release date 3.9.2024.

### 3.15.0

- Adds new `small` and `large` size [Radio component](https://nordhealth.design/components/radio/?example=size) variants.
- Fixes an issue where a single Button in a [Button Group](https://nordhealth.design/components/button-group/?example=single) component did not have a border radius in every corner.
- Fixes an issue where a single Tag in a [Tag Group](https://nordhealth.design/components/tag-group/?example=single) component did not have a border radius in every corner.
- Fixes an issue with the [Dropdown Item](https://nordhealth.design/components/dropdown-item/) component where the icon in the start slot got smaller when the content overflowed its container.
- Improves the layout of the [Dropdown Item](https://nordhealth.design/components/dropdown-item/) component. Previously, the default slot of the Dropdown Item did not fill up all available space, which prevented the consumers from adding content in the default slot that needed to span the entire width.
- Release date 2.9.2024.

### 3.14.1

- Fixes an issue that caused the [Message component](https://nordhealth.design/components/message/) to have wrong hover styles.
- Release date 26.6.2024.

### 3.14.0

- Adds text selection props and methods to [Input](https://nordhealth.design/components/input/?example=text+selection) and [Textarea](https://nordhealth.design/components/textarea/?example=text+selection) components.
- Adds new [text selection usage example](https://nordhealth.design/components/input/?example=text+selection) for the Input component.
- Adds new [input mask usage example](https://nordhealth.design/components/input/?example=input+mask) for the Input component.
- Adds new [text selection usage example](https://nordhealth.design/components/textarea/?example=text+selection) for the Textarea component.
- Adds new [documentation](https://nordhealth.design/components/input/?example=input+mask#input-masking) about input masking using [Maskito](https://maskito.dev/){rel="&#x22;nofollow&#x22;"}.
- Improves documentation about events from sub components that bubble up.
- Modifies the [Stack component](https://nordhealth.design/components/stack/) to not apply a default text color.
- Release date 24.6.2024.

### 3.13.0

- Adds new [Popout component example](https://nordhealth.design/components/popout/?example=custom+popout+filter) that shows how to build interactive filter buttons for Provet.
- Adds new `var(--n-dropdown-item-background-color)` CSS Property for [Dropdown Item](https://nordhealth.design/components/dropdown-item/#css-properties) that controls the background color of the item.
- Adds new `var(--n-dropdown-item-color)` CSS Property for [Dropdown Item](https://nordhealth.design/components/dropdown-item/#css-properties) that controls the color of the text within the item.
- Improves the focus styles of the [Button Group](https://nordhealth.design/components/button-group/?example=direction) and the [Tag Group](https://nordhealth.design/components/tag-group/) to be more consistent.
- Adds [new documentation](https://nordhealth.design/docs/developer/web-components/#vue) about `v-model` usage for the Checkbox, Toggle, and Tag components.
- Release date 14.6.2024.

### 3.12.0

- Adds new [Segmented Control](https://nordhealth.design/components/segmented-control/) component that is used to pick one choice from a set of closely related choices, and immediately apply that selection.
- Adds new [Segmented Control Item](https://nordhealth.design/components/segmented-control-item/) component that is used to populate Segmented Control with options.
- Adds new [Tag Group](https://nordhealth.design/components/tag-group/) component that is designed to bring together selectable tags that are of a similar nature. For example categories you can filter by.
- Adds documentation and usage examples for the new [Segmented Control](https://nordhealth.design/components/segmented-control/) component.
- Adds documentation and usage examples for the new [Segmented Control Item](https://nordhealth.design/components/segmented-control-item/) component.
- Adds documentation and usage examples for the new [Tag Group](https://nordhealth.design/components/tag-group/) component.
- Removes `hover` color of the [Select](https://nordhealth.design/components/select/) component’s caret to make it consistent with the [Dropdown](https://nordhealth.design/components/dropdown/) component.
- Adds `expand` property to the [Tag](https://nordhealth.design/components/tag/?example=expanded) component.
- Adds support for `xs` gap in the [Stack](https://nordhealth.design/components/stack/) component.
- Improves the [Button Group](https://nordhealth.design/components/button-group/) documentation slightly.
- Release date 3.6.2024.

### 3.11.1

- Fixes `focus` trap issue when an open [Modal component](https://nordhealth.design/components/modal/) is removed from the DOM.
- Release date 24.5.2024.

### 3.11.0

- Modifies the `L` size of the [Modal component](https://nordhealth.design/components/modal/?example=size) to have a max-width of `940px` instead of the previous `1320px`.
- Adds new `XL` size for the [Modal component](https://nordhealth.design/components/modal/?example=size) that covers the full width of the viewport.
- Adds new `stickyFooter` property for the [Navigation component](https://nordhealth.design/components/navigation/?example=sticky+footer) that controls whether the Navigation’s footer slot has sticky positioning or not.
- Updates the documentation and usage examples of the [Navigation component](https://nordhealth.design/components/navigation/?example=sticky+footer).
- Adds 4 new icons to [Nordicons](https://nordhealth.design/icons/): `interface-dnr`, `interface-cpr-acpr`, `interface-cpr-unknown` and `interface-ai`.
- Updates the disabled styles for the [Checkbox](https://nordhealth.design/components/checkbox/?example=disabled), [Radio](https://nordhealth.design/components/radio/?example=disabled), and [Toggle components](https://nordhealth.design/components/toggle/?example=disabled).
- Improves the icon and font sizing of the [Avatar component](https://nordhealth.design/components/avatar/?example=with+icon).
- Adds new [Avatar usage example](https://nordhealth.design/components/avatar/?example=patients+and+clients) that shows how to display patients and clients in Provet using the Avatar component.
- Adds new [Avatar usage example](https://nordhealth.design/components/avatar/?example=users) that shows how to display users in Provet using the Avatar component.
- Improves the documentation of the [Avatar component](https://nordhealth.design/components/avatar/?example=patients+and+clients).
- Adjusts the `disabled` styles of the [Button component](https://nordhealth.design/components/button/?example=disabled) for better legibility.
- Adds `square` property for icon only buttons. Take a look at the updated [Button component examples](https://nordhealth.design/components/button/?example=icon+only).
- Adds new `spaced` variant for the [Button Group component](https://nordhealth.design/components/button-group/?example=spaced) that makes it easier to create a group of buttons with consistent spacing.
- Adds new `wrap` property for the [Button Group component](https://nordhealth.design/components/button-group/?example=spaced) that allows the buttons to wrap to the next line when the container is too narrow.
- Updates the documentation and usage examples of the [Button Group component](https://nordhealth.design/components/button-group/).
- Release date 22.5.2024.

### 3.10.0

- Adds new [Tag component](https://nordhealth.design/components/tag/) that represent a set of keywords that help label, categorize, and organize objects. Tags are commonly used to signify the attributes of an object.
- Adds documentation and usage examples for the new [Tag component](https://nordhealth.design/components/tag/).
- Nord’s components now reflect most primitive data properties to attributes to follow the [Custom Element best practices](https://web.dev/articles/custom-elements-best-practices){rel="&#x22;nofollow&#x22;"}. This is especially helpful for frameworks like Vue that [try to set properties over attributes](https://vuejs.org/guide/extras/web-components#passing-dom-properties){rel="&#x22;nofollow&#x22;"} for Custom Elements whenever possible.
- Simplifies [Modal component’s](https://nordhealth.design/components/modal/) focus trap logic by using the new [inert attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inert){rel="&#x22;nofollow&#x22;"}. This fixes an issue where users could not select text inside the modal.
- Improves [Modal component’s](https://nordhealth.design/components/modal/) “click outside” logic. With this release, the modal will now no longer close when the `mousedown` event has started from inside the modal and the `mouseup` occurs outside of it. This fixes an issue where users would try to select text inside a modal and then release the mouse outside.
- Release date 8.5.2024.

### 3.9.0

- Adds new [Footer component](https://nordhealth.design/components/footer/) that can be used to provide additional information or actions that are positioned below the main content. Additionally, the Footer can also be used to show actions for stepped workflows.
- Adds documentation and usage examples for the new [Footer component](https://nordhealth.design/components/footer/).
- Implements the new Footer component into the [Modal](https://nordhealth.design/components/modal/) and [Drawer](https://nordhealth.design/components/drawer/) components to replace the old custom implementations.
- Explicitly sets the timezone to UTC when formatting dates with the [Calendar](https://nordhealth.design/components/calendar/) and [Date Picker](https://nordhealth.design/components/date-picker/) components to fix various off-by-one errors.
- Removes `draft` status from the [Message](https://nordhealth.design/components/message/), [Notification](https://nordhealth.design/components/notification/) and [Notification Group](https://nordhealth.design/components/notification-group/) components and marks them as ready for production usage.
- Improves the [Layout component](https://nordhealth.design/components/layout/?example=full+height+content)’s main content area to fill the available vertical space to make it easier to build layouts that need to fill the whole content area.
- Adds new `stickyFooter` property for the [Layout component](https://nordhealth.design/components/layout/?example=footer) to allow users to control whether the Layout's footer slot has sticky positioning.
- Adds new `footer` slot for the [Layout component](https://nordhealth.design/components/layout/?example=footer) that is used for placing content inside the footer section.
- Adds new `var(--n-size-top-bar)` [sizing token](https://nordhealth.design/core/tokens/#size) that is used for setting the default height of the [Top Bar component](https://nordhealth.design/components/top-bar/).
- Adds new [Footer usage example](https://nordhealth.design/components/layout/?example=footer) for the Layout component.
- Adds new [Layout usage example](https://nordhealth.design/components/layout/?example=full+height+content) to demonstrate how to fill the available height of the Layout component’s main content area.
- Improves the [kitchen sink example](https://nordhealth.design/components/layout/?example=kitchen+sink) for the Layout component to include more variations.
- Release date 11.4.2024.

### 3.8.0

- Avatar component now has a public `--n-avatar-text-color` CSS Custom Property to control the color of the avatar’s text and icon, using [color tokens](https://nordhealth.design/core/tokens/#color).
- Release date 19.2.2024.

### 3.7.0

- Adds `interface-archive`, `interface-error`, `medical-birthday` and `navigation-catalog` icons to [Nordicons](https://nordhealth.design/icons/).
- Release date 14.2.2024.

### 3.6.2

- Fix [Button group](https://nordhealth.design/components/button-group) border-radius in right-to-left languages.
- Release date 30.11.2023.

### 3.6.1

- Fix issue where [Radio](https://nordhealth.design/components/radio/) ended up in a broken state if disconnected/reconnected to the DOM.
- Release date 01.11.2023.

### 3.6.0

- Makes the [Top Bar](https://nordhealth.design/components/top-bar/) use fixed position when used inside the [Layout](https://nordhealth.design/components/layout/?example=top+bar).
- This change allows the [Layout’s](https://nordhealth.design/components/layout/?example=top+bar) main content area to have more natural horizontal overflow where necessary without breaking the rest of the application layout.
- Remove redundant `overscroll-behavior-block: none;` from CSS Framework.
- Release date 18.10.2023.

### 3.5.0

- Adds `interface-whiteboard`, `interface-payment-terminal` and `generic-unchipped` icons to [Nordicons](https://nordhealth.design/icons/).
- Allow [Nav Items](https://nordhealth.design/components/nav-item/) to default to `open`, even when a Nav Item is `active`. [View an example](https://nordhealth.design/components/navigation/?example=initially+open+nav+item).
- Fixes [Spinner component](https://nordhealth.design/components/spinner/) in RTL mode.
- Adds `--n-spinner-color` custom property to control [Spinner](https://nordhealth.design/components/spinner/) color.
- Release date 17.10.2023.

### 3.4.1

- Only broadcast Navigation width change on user interaction, to prevent infinite loops.
- Fixes issue where Dropdown Item with a `href` can have incorrect font-weight when used in Top Bar.
- Release date 14.9.2023.

### 3.4.0

- Publishes the [Top bar component](https://nordhealth.design/components/top-bar/) and removes the `draft` status from it.
- Adds `persist-nav-state` property for [Layout component](https://nordhealth.design/components/layout/) to persist nav open/closed state in `localStorage`.
- Adds `sync-nav-state` property for [Layout component](https://nordhealth.design/components/layout/) to sync nav state between tabs/windows.
- Improves the dropdown menu hover colors for [Top bar component](https://nordhealth.design/components/top-bar/).
- Improves padding of [Navigation component](https://nordhealth.design/components/navigation/) when no heading is provided for first Nav Group.
- Removes black transparent overlay from the [Avatar component](https://nordhealth.design/components/avatar/).
- Improves the visibility of Avatar on various Top Bar color themes.
- Improves the style of an active [Navigation item](https://nordhealth.design/components/nav-item/) in the sidebar.
- Release date 12.9.2023.

### 3.3.0

- Adds `hide-label` property to [Fieldset component](https://nordhealth.design/components/fieldset/).
- Adds `text-wrap: balance` to [Empty state component](https://nordhealth.design/components/empty-state/) as a progressive enhancement.
- Improves positioning of buttons/inputs/etc placed inside the `header-end` slot of the [Card component](https://nordhealth.design/components/card/).
- Release date 4.9.2023.

### 3.2.0

- Adds new `target` property for [Dropdown Item component](https://nordhealth.design/components/dropdown-item/). When provided together with a `href` property, determines where to open the linked URL.
- Release date 22.8.2023.

### 3.1.3

- Adds new `interface-duplicate` icon into [Nordicons](https://nordhealth.design/icons/).
- Release date 9.8.2023.

### 3.1.2

- Add some additional safety guards in popout component.
- Improve handling of `form` attribute in form components.
- Release date 5.7.2023.

### 3.1.1

- Fix theming issues when slotting search input in top-bar component.
- Fix issue where popout component did not handle `id` being changed.
- Release date 14.6.2023.

### 3.1.0

- This release adds a new [Message component](https://nordhealth.design/components/message/) that represents a specific item within a collection, such as notifications, tasks or conversations. Message can be placed directly inside the [Dropdown component](https://nordhealth.design/components/dropdown/?example=with+messages).
- The [Input Component’s](https://nordhealth.design/components/input/?example=with+a+prefix+or+suffix) `start` and `end` slot now support content of any width.
- Adds a new example for the [Select component](https://nordhealth.design/components/select/?example=custom+button+style) that shows how to customize the Select to look like an input.
- Improves theming and the usage of `var(--n-color-accent)`.
- Fixes transitions for all textfields to match with buttons.
- Fixes a [Command Menu](https://nordhealth.design/components/command-menu/) issue where arrow keys navigated commands out of visual order.
- Adds new `--n-button-overflow` CSS Custom Property for [Button component](https://nordhealth.design/components/button/) to control the overflow.
- Switches to using `:focus-visible` in Button component to improve use cases such as the dropdown headers in the [Top Bar component](https://nordhealth.design/components/top-bar/?example=advanced).
- Fixes `min-block-size` for [small buttons](https://nordhealth.design/components/button/?example=small+buttons). This used to be slightly incorrect.
- Adds new simple [search example](https://nordhealth.design/components/input/?example=search) under the Input component.
- Improves the [Nav Toggle](https://nordhealth.design/components/nav-toggle/) positioning in the [Layout component](https://nordhealth.design/components/layout/).
- Updates all [Top Bar examples](https://nordhealth.design/components/top-bar/?example=advanced) to have notifications, tasks and user menu.
- Adds styles for slotted Buttons inside the [Top Bar component](https://nordhealth.design/components/top-bar/?example=advanced).
- Improves the [Top Bar](https://nordhealth.design/components/top-bar/) spacing overall for both mobile and desktop devices.
- Adds two new templates: [Top Bar](https://nordhealth.design/templates/) and [Theming](https://nordhealth.design/templates/).
- Improves `var(--n-color-nav-hover)` to be more consistent with other colors in the light high contrast theme.
- Switches to using the same icon for hiding and showing the [Navigation](https://nordhealth.design/components/navigation/) in the [Layout component](https://nordhealth.design/components/layout/).
- Makes it possible to style the [Input component](https://nordhealth.design/components/input/?example=search) according to the new [Top Bar design](https://nordhealth.design/components/top-bar/?example=advanced).
- Fixes a bug that caused the Input placeholder text to be too light in Firefox.
- Adds a new `header` slot into the Dropdown component, [view an example](https://nordhealth.design/components/dropdown/?example=with+header).
- Makes it possible to display messages inside the Dropdown component, [view an example](https://nordhealth.design/components/dropdown/?example=with+messages).
- Replaces the old `navigation-tasks` icon with a new larger one.
- Improves the disabled styles for the [Input component](https://nordhealth.design/components/input/).
- Release date 31.5.2023.

### 3.0.0

- **New major release that brings [various improvements and bug fixes](https://nordhealth.design/migrations/3.0.0/)!!** ✨🥳
- The main difference is the introduction of a new [Layout](https://nordhealth.design/components/layout/?example=theming) and [Top Bar component](https://nordhealth.design/components/top-bar/) which now allow functionality such as search and contextual menus to be placed at the top of the interface instead of the Navigation menu.
- We’ve also improved the underlying [color system](https://nordhealth.design/core/tokens/) to make it more extensible and better cover the use cases of our different products. This release utilizes the new color system and brings many new styles and variants to components such as [Badge](https://nordhealth.design/components/badge/) and [Banner](https://nordhealth.design/components/banner/).
- Most changes have been kept backwards compatible, and we still support the [old style layout](https://nordhealth.design/components/layout/?example=custom+surface+and+background) as well. Not all of our products need the additional top bar or more advanced utilities, so you can keep using the current layout that your users are already familiar with.
- For detailed description of all changes, please see [Migration to 3.0.0](https://nordhealth.design/migrations/3.0.0/).
- Breaking changes are also covered in the [migration guide](https://nordhealth.design/migrations/3.0.0/).
- Release date 19.5.2023.

[![Comparison of changes in the release](https://nordhealth.design/img/migrations/diff.png){height="1037" style="margin-bottom: 0;" width="2809"}](https://nordhealth.design/migrations/3.0.0/)

\[Migration guide to 3.0.0]\(/migrations/3.0.0/)

### 2.17.1

- Improve error logic of Date Picker component. This fixes an issue where sometimes the visual error state would not get removed.
- Release date 10.5.2023.

### 2.17.0

- Adds new [Notification](https://nordhealth.design/components/notification/) component. ✨
- Adds new [Notification Group](https://nordhealth.design/components/notification-group/) component. ✨
- To improve the developer experience for Vue.js developers, we now offer experimental `@nordhealth/vue` package. This package only contains types and no code. To learn how to integrate this into your project, [view Vue.js documentation](https://nordhealth.design/docs/developer/web-components/#vue). ✨
- Extracts `NotificationMixin` that contains common functionality between [Toast](https://nordhealth.design/components/toast/) and [Notification](https://nordhealth.design/components/notification/) components.
- Adds new `var(--n-space-xs)` space token.
- Adds new `size` property to [Header component](https://nordhealth.design/components/header/) which controls the header sizing, [view an example](https://nordhealth.design/components/header/?example=size).
- Makes [Nav Group component](https://nordhealth.design/components/nav-group/) styles more robust and adjusts the Nav Group heading size to be smaller. [View an example](https://nordhealth.design/components/navigation/).
- Hide [Navigation component](https://nordhealth.design/components/navigation/) header and footer slots when they have no content.
- Adds new `xs` space utilities and missing alignment helpers to [CSS Framework](https://nordhealth.design/docs/developer/css-framework/).
- Adds `unit` as a type property value to the [Input component](https://nordhealth.design/components/input/?example=units), for monospaced characters. [View an example](https://nordhealth.design/components/input/?example=units).
- Adds `--n-input-text-align` as a public CSS custom property to the [Input component](https://nordhealth.design/components/input/?example=units), to align the input text directly. [View an example](https://nordhealth.design/components/input/?example=units).
- Ensure we don’t show “localization” section in the component’s documentation when it doesn’t need this.
- Release date 29.3.2023.

### 2.16.1

- Use disabled text color for start and end slots in [disabled input](https://nordhealth.design/components/input/?example=disabled).
- Reflect [Skeleton component](https://nordhealth.design/components/skeleton/) `effect` prop, drop `none` default.
- Override the margins being reset by the `.n-reset` helper with the input slot margin styles.
- Fixes [header component](https://nordhealth.design/components/header/) wrapping. Previously if the header component had a piece of content that is really long, the end slot would be pushed underneath. With this change the header end slot no longer wraps underneath and the [usage examples](https://nordhealth.design/components/drawer/) have been updated to show the use of the `.n-truncate` helper to prevent some longer pieces of text from causing layout shift.
- Release date 20.3.2023.

### 2.16.0

- Add fallback `icon` to [Avatar component](https://nordhealth.design/components/avatar/), [view an example](https://nordhealth.design/components/avatar/?example=with+icon).
- Add `xxxl` size to [Avatar component](https://nordhealth.design/components/avatar/) and adjusts overall component sizing.
- Adjust [Avatar component](https://nordhealth.design/components/avatar/) background colors.
- Release date 23.2.2023.

### 2.15.2

- Popout now supports dynamically re-positioning if its `anchor` is updated whilst open.
- Fix spelling mistake in destructive modal example name.
- Release date 14.2.2023.

### 2.15.1

- Observe changes to Popout’s `anchor` property and updates cached element accordingly, whilst ensuring to cleanup after itself.
- Release date 9.2.2023.

### 2.15.0

- **Updates all existing [Nordicons with a new design style](https://nordhealth.design/icons/)!!!** ❤️🥰🥳
- This update moves our icon style closer to the Nordhealth brand. All icons now closely follow the brand guidelines and have strong affiliation with our logomark and design language.
- With this update we’re overcoming issues with the old icon style which was somewhat limiting our creativity and possibilities.
- This update allows us to get rid of licensing issues with the previous iconset as it prevented us from sharing any of our work in Figma community or GitHub.
- Adds new `medical-prescription`, `interface-send`, `interface-login`, `interface-like-filled`, `interface-favorite-filled`, `interface-globe`, `interface-dislike-filled`, and `interface-bookmark-filled` icons.
- Make SVG Lint config more strict about the size of the icons which should always be 20 × 20px.
- Removes `keyboard-alt` and `interface-help-2` icons from Nordicons. If you’re using `interface-help-2`, please replace with more universal `interface-help` icon.
- Fixes the order of icons metadata to be consistent for all icons.
- Updates all screenshot diff tests for icons and components.
- Updates [iconography documentation](https://nordhealth.design/design/foundations/iconography/) to match the new style and guidelines.
- Release date 25.1.2023.

### 2.14.1

- Return promise from `show/hide` methods in Dropdown and Popout which resolve when the open/close animation is complete.
- Add [example of programmatically closing the Layout’s nav](https://nordhealth.design/components/layout/?example=programmatically+close+nav).
- Adds unique IDs to each property/method/etc of a component to allow direct linking.
- Release date 19.1.2023.

### 2.14.0

- We’ve modified the [Layout component](https://nordhealth.design/components/layout/) to close navigation on mobile if a leaf nav-item is clicked.
- Improves [Icon component](https://nordhealth.design/components/icon/) performance by adding caching to icons so that an icon is never requested more than once.
- Deprecates `variant="switch"` on the [Button component](https://nordhealth.design/components/button/).
- Removes switch buttons from usage examples.
- Cleans up legacy custom styles for buttons inside [Navigation](https://nordhealth.design/components/navigation/).
- Gracefully handle missing translation keys by showing fallback of `en-us`.
- Log warning to console if either entire component’s translation is missing, or specific keys for a component.
- Adds support for custom `@localization` jsdoc tag, allowing for name and description.
- Gets all expected translation keys from `fi-fi.ts` example translation.
- Ensure all known translation keys are fully documented.
- Expose [localization details in docs](https://nordhealth.design/components/calendar/#localization){rel="&#x22;nofollow&#x22;"}.
- Release date 15.1.2023.

### 2.13.0

- Adds `maxLength` property for Textarea component. [See an example](https://nordhealth.design/components/textarea/?example=character+counter).
- Adds ability to show character counter with Textarea component. [See an example](https://nordhealth.design/components/textarea/?example=character+counter).
- Removes `text-transform: uppercase` from Calendar month/year select elements since it introduced an inconsistency between month names shown.
- Adds dropdown icon as default slot content when button is used in a dropdown. This is backwards compatible, and can be overridden in exceptional circumstances.
- Removes reflection for button's `target` attribute.
- Adds proper `displayName` to React wrapper components, so that the React dev tools become useful again.
- Be more selective about when to add nav toggle gutter to header. This prevents issues where header is slotted in other places in layout.
- Removes default value of `"m"` in icon's `size` property.
- Adds smart default sizing to icons when used in buttons, inputs, dropdown items, tooltips. This is backwards compatible, and can be overridden in exceptional circumstances.
- Greatly simplify many usage examples by leaning on the new default icon sizing behaviour throughout.
- Release date 29.11.2022.

### 2.12.0

- Adds `isDateHighlighted` property to Calendar and Date Picker. [See example](https://nordhealth.design/components/calendar/?example=highlighting+days).
- We’ve cleaned up and simplified Calendar component code.
- We’ve moved tests from Date Picker to Calendar where appropriate.
- Adds new tests for Calendar and Date picker.
- Improves some Date Picker visual tests to actually capture what is being shown in the example.
- Adds tests for Tab Group and Toast Group.
- Add auto-generated list pages to Web Components dev server.
- Release date 17.11.2022.

### 2.11.0

- Adds new [Button Group](https://nordhealth.design/components/button-group/) component which is designed to bring together button controls that are of a similar nature.
- Adds overlay for open navigation on small screens to improve the user experience.
- Use flexbox to push down the footer slot in Card component so they line up when used in a Stack or flexbox container. [See an example](https://nordhealth.design/components/card/?example=with+aligned+footers).
- Add `sticky` header functionality to Layout component which allows you to make the header fixed.
- Improves small checkbox alignment within Stack.
- Release date 15.11.2022.

### 2.10.0

- Simplifies [Date Picker](https://nordhealth.design/components/date-picker/) by using Nord components ([Popout](https://nordhealth.design/components/popout/), [Input](https://nordhealth.design/components/input/), [Button](https://nordhealth.design/components/button/), etc).
- Input component can now have slotted buttons in `start` and `end` slots (only icon buttons for now), [view an example](https://nordhealth.design/components/input/?example=custom+button).
- `disallow-pattern` property added to input component, for disallowing certain characters using regex patterns, [view an example](https://nordhealth.design/components/input/?example=disallow+pattern).
- Adds required indicator for form fields whenever `required` property is used, [view an example](https://nordhealth.design/components/input/?example=required).
- Adds new `hide-required` property for opting out of the indicator when needed and when it just adds visual noise ([useful for login forms and similar](https://nordhealth.design/templates/sign-in/)).
- Adds [new usage examples](https://nordhealth.design/components/input/?example=custom+width) about various width possibilities for Input component.
- We’ve added more clear [guidelines on the icon usage inside buttons](https://nordhealth.design/components/button/#icon-usage-in-button) as there’s been lots of questions about this and we’ve noticed inconsistent use of icons and how they’re positioned.
- We’ve added a new [error Toast usage example](https://nordhealth.design/components/toast/?example=error).
- Bug fix: We now reset the option element text color inside [Select](https://nordhealth.design/components/select/) so that it reverts to native settings on all browsers.
- Bug fix: We’ve fixed a bug where scrollbar controller did not properly clean up after itself if multiple modals were open.
- Release date 31.10.2022.

### 2.9.0

- Adds new [Range component](https://nordhealth.design/components/range), documentation and examples.
- Makes `FormAssociatedMixin` support additional content inside label.
- Release date 26.10.2022.

### 2.8.2

- Makes it possible to adjust the background color of Layout component via CSS Custom Properties.
- Fixes the Nav Toggle container positioning in Layout component.
- Release date 24.10.2022.

### 2.8.1

- Adds new `navigation-timeline` icon to [Nordicons](https://nordhealth.design/icons/).
- Add a new CSS Custom Property to adjust the max size of a tooltip. [See demo](https://nordhealth.design/components/tooltip/?example=tooltip+with+custom+size).
- Adds new icon usage guidelines for [button component](https://nordhealth.design/components/button/#icon-usage-in-button).
- Add flex-wrap to card header and header-end slot.
- Adds new [card example with header actions](https://nordhealth.design/components/card/?example=with+header+actions).
- Improves documentation for `ToastGroup.addToast` helper function.
- Adds usage guidelines about not nesting cards inside cards or drawers.
- Fix slot controller to only consider direct descendants when deciding whether a slot has content or not.
- Release date 20.10.2022.

### 2.8.0

- Adds support for multiple [modals open at once](https://nordhealth.design/components/modal/?example=multiple+modals).
- Creates a stack of open modals, ensuring focus is trapped in the topmost modal.
- Makes it possible to add a custom icon into the [Select component](https://nordhealth.design/components/select/?example=custom+icon) before the current value label.
- We now hide the [switch button variant](https://nordhealth.design/components/button/?example=clinic+switcher) dropdown icon if a `href` has been set on the button.
- We’ve adjusted the initials text size in [Avatar component](https://nordhealth.design/components/avatar/) to better fit the characters in.
- Updates the [Avatar component](https://nordhealth.design/components/avatar/) examples, the smallest version with initials shouldn’t use two letters.
- Release date 4.10.2022.

### 2.7.0

- Adds new [Nav Toggle component](https://nordhealth.design/components/nav-toggle/), examples and related documentation.
- Adds new `nav-toggle` slot to [Layout component](https://nordhealth.design/components/layout/).
- **Deprecates** `nav-toggle` attribute on [Layout component](https://nordhealth.design/components/layout/) while maintaining backwards compatibility for now.
- [Layout component](https://nordhealth.design/components/layout/) will now render its own Nav Toggle internally *unless*:
  - Old `nav-toggle` attribute is supplied.
  - Something is slotted into the new `nav-toggle` slot.
- We’ve further improved position of icons in [Button component](https://nordhealth.design/components/button/).
- Adds new `anchor` property to the [Popout](https://nordhealth.design/components/popout/), which takes the string of the ID you want the popout or dropdown to position against. Ideal for complex component groups.
- Adds `variant` property with `square` as a new option for [Avatar component](https://nordhealth.design/components/avatar/).
- Adds `s` size option to `size` property for [Avatar component](https://nordhealth.design/components/avatar/).
- Allows for initials to be added into the main slot of [Avatar component](https://nordhealth.design/components/avatar/?example=square+with+initials), which replaces the fallback icon when set.
- Adds public and private custom properties to allow for more fine tune control over the [Avatar component](https://nordhealth.design/components/avatar/).
- Adds public custom property for adding color to the [Avatar component](https://nordhealth.design/components/avatar/) fallback, `--n-avatar-color`.
- Replaced instances of the `n-clinic-icon` usage with the new square [Avatar component](https://nordhealth.design/components/avatar/).
- Updates the Switch Button variant so it comes with the dropdown icon by default in the end slot.
- Release date 4.10.2022.

### 2.6.1

- Simplify [Drawer component](https://nordhealth.design/components/drawer/) usage examples.
- Release date 28.9.2022.

### 2.6.0

- Adds new [Drawer component](https://nordhealth.design/components/drawer/), documentation, and examples.
- At small screen sizes, the Drawer component opens on top of the content. At larger screen sizes, the component pushes the content towards left. The current breakpoint for this behaviour is 1240px.
- Layout component gets a [new example](https://nordhealth.design/components/layout/?example=drawer) that shows how to integrate the Drawer component.
- [Popout component](https://nordhealth.design/components/popout/) gets a new overlay in this release for smaller screens so that it’s easier to close by tapping outside.
- [Popout component](https://nordhealth.design/components/popout/) gets a new `open` property that controls whether the popout is open or not.
- We’ve improved Popout’s performance by avoiding doing work if popout is closed.
- We’ve improved the positioning of `xs` sized icons inside [Button component](https://nordhealth.design/components/button/).
- Navigation sidebar is now hidden in the [Layout component](https://nordhealth.design/components/layout/) if nothing is passed into the slot.
- [Tooltip component](https://nordhealth.design/components/tooltip/) has been improved and now closes more reliably after a click.
- Release date 27.9.2022.

### 2.5.0

- Adds new `--n-button-background-color` CSS Custom Property for the Button component that allows developers to control the [background color of the button](https://nordhealth.design/components/button/?example=custom+background&theme=nord), using [color tokens](https://nordhealth.design/core/tokens/).
- Release date 27.9.2022.

### 2.4.0

- Adds new `xs` (10px) and `xxs` (8px) icon sizes which are replacements for the old `xs` size. This is a non-breaking change so no actions are required from your side.
- This is done to improve the rendering of our smallest icons since they now align with the [pixel grid used for icons](https://nordhealth.design/design/foundations/iconography/).
- Release date 16.9.2022.

### 2.3.0

- Adds support for `small` and `large` sizes for the [Input component](https://nordhealth.design/components/input/?example=size&theme=nord).
- Adds support for `small` and `large` sizes for the [Textarea component](https://nordhealth.design/components/textarea/?example=size&theme=nord).
- Adds support for `small` and `large` sizes for the [Checkbox component](https://nordhealth.design/components/checkbox/?example=size&theme=nord).
- Adds support for `small` and `large` sizes for the [Date Picker component](https://nordhealth.design/components/date-picker/?example=size&theme=nord).
- Adds support for `small` and `large` sizes for the [Select component](https://nordhealth.design/components/select/?example=size&theme=nord).
- Adds new usage examples for all components with new `size` property.
- Updates [row selection table example](https://nordhealth.design/components/table/?example=row+selection&theme=nord) to use correct size Checboxes (small).
- Release date 15.9.2022.

### 2.2.0

- Adds new examples in both Vue and React showing how to combine Tanstack Table and AG Grid with Nord Design System, in order to build a table with sorting, resizable columns, draggable and re-orderable columns, plus sticky/pinned columns. See the updated [Table component](https://nordhealth.design/components/table/) docs and examples.
- Improves [Table component](https://nordhealth.design/components/table/) CSS injection so it works inside Shadow DOM.
- Improves [Table component](https://nordhealth.design/components/table/) styles when used in a Card component without a header.
- Adds column sorting styles to [Table component](https://nordhealth.design/components/table/).
- Adds documentation for more advanced [Table component](https://nordhealth.design/components/table/) use cases.
- Removes our `deprecated` CEM plugin since it’s now natively supported.
- Makes it possible to have external examples for components.
- We’ve created a new [GitHub repository](https://github.com/nordhealth/advanced-table-examples){rel="&#x22;nofollow&#x22;"} with Vue and React table examples.
- Release date 13.9.2022.

### 2.1.0

- Adds new animal category icons: `generic-suidae`, `generic-sheep`, `generic-rodents`, `generic-reptilia`, `generic-leporidae`, `generic-fish`, `generic-feline`, `generic-equidae`, `generic-cattle`, `generic-canine`, `generic-birds`, `generic-arachnida`, `generic-amphibia`.
- Changes `medical-insurance` icon from “a hand holding a plus sign” to represent “a shield.”
- Improves `interface-dropdown-small` icon positioning.
- The small icon dimensions are changed from `11px` to `12px`.
- Release date 9.9.2022.

### 2.0.2

- Fixes an issue which caused the new `success` style of [Badge component](https://nordhealth.design/components/badge/) to disappear.
- Improves visual screenshot diff tests and their accuracy.
- Release date 9.9.2022.

### 2.0.0

- With the new `2.0.0` release, all Nord’s Web Components are out of `draft` status and production ready.
- Our Web Components now offer CSS custom property API to allow for fine grained control over their presentation. These aren’t offered as an alternative to [properties](https://nordhealth.design/docs/developer/web-components/#properties), you should use properties whenever possible, but more as an “escape hatch” for when a component needs to meet an edge case. For more details, please see [migration guidelines](https://nordhealth.design/migrations/2.0.0/).
- We’ve redesigned the underlying color system to make it more extensible and better cover the use cases of our different products. For more details, please see [migration guidelines](https://nordhealth.design/migrations/2.0.0/).
- This release changes the way our Badge component works. The main difference is that we’ve switched away from white badges with tiny circular indicators to more noticeable badge style with colored background. For more details, please see [migration guidelines](https://nordhealth.design/migrations/2.0.0/).
- [Button component](https://nordhealth.design/components/button/) now automatically sets the correct icon color for each style variant so that you don’t have to do this manually anymore. We’ve done this to improve the developer experience and simplify the usage. This is a non-breaking change and requires no changes from your side.
- Makes [Table component](https://nordhealth.design/components/table/) have slightly tighter spacing by default to fit more data into view.
- We’ve switched to using the new status colors in [Avatar component](https://nordhealth.design/components/avatar/).
- Adds new `neutral` and `progress` styles for [Badge component](https://nordhealth.design/components/badge/) and makes “neutral” the new default style.
- Adds many new [Badge component](https://nordhealth.design/components/badge/) examples.
- Adds new visual style for [Banner component](https://nordhealth.design/components/banner/).
- Updates all component usage examples to use correct new color styles.
- Adds 4 new progress icons for use with [Badge component](https://nordhealth.design/components/badge/).
- Adds support for showing progress in [Badge component](https://nordhealth.design/components/badge/).
- All component CSS Custom Properties have been updated to follow a “private” syntax.
- Any of those properties we want exposed have been opened up with a “public” property.
- Public properties have been documented and exposed in our docs site.
- Component styles have been updated to account for these changes.
- Tests adjusted from refactoring and custom property updates.
- Examples adjusted to account for new custom property names.
- Some refactoring in various components.
- Release date 7.9.2022.
- **For migration guidelines, please see [Migration to 2.0.0](https://nordhealth.design/migrations/2.0.0/).**

\[Migration guide to 2.0.0]\(/migrations/2.0.0/)

### 1.14.3

- Handles case where Layout’s `nav-toggle` element may get replaced in SPA contexts due to route changes.
- Improves z-index stacking for active Nav Items to avoid overlap.
- Remove `MediaQueryListener`, merge functionality into `EventListener`.
- Small clean up to use `EventListener` in Popout and Layout components.
- Switch to using Icon component internally in Select component.
- Adds try/catch to our storage utility to avoid issues where `localStorage` is not available.
- Adds new [Card component example with sections](https://nordhealth.design/components/card/?example=with+sections).
- Release date 29.8.2022.

### 1.14.2

- Fixes a bug in the [Button component](https://nordhealth.design/components/button/) that in some cases could cause an infinite loop.
- Adds new `medical-insurance` icon.
- Release date 24.8.2022.

### 1.14.0

- Adds new `size` option for Dropdown component with new optional `s`, `m` and `l` sizes. [See an example](https://nordhealth.design/components/dropdown/?example=size).
- Makes Dropdown component better support varying content lengths by defining sensible min and max widths.
- Remove unnecessary min-inline-sizes from all [Dropdown Groups](https://nordhealth.design/components/dropdown-group/) across the docs and examples.
- Adds new [Button with Dropdown](https://nordhealth.design/components/button/?example=button+with+dropdown) example under Button component.
- Make [Banner component](https://nordhealth.design/components/banner/) respect CSS Framework’s spacing utilities.
- Improve [Dropdown component examples](https://nordhealth.design/components/dropdown/?example=size) to include correct dropdown icons in toggles.
- Switch to using correct size tokens for Select component icon instead of random values.
- Updates all Node.js dependencies including Lit to the latest versions.
- Release date 17.8.2022.

### 1.13.1

- Adds support for `null` as parent value in [Command Menu](https://nordhealth.design/components/command-menu/).
- Release date 12.8.2022.

### 1.13.0

- Adds new property to control `loading` state for Button. [See example](https://nordhealth.design/components/button/?example=loading).
- Adds two new examples for Button to show [how loading state works](https://nordhealth.design/components/button/?example=loading) and [how to utilize it](https://nordhealth.design/components/button/?example=loading+interactivity).
- Removes old Spinner Button examples and creates [new updated examples](https://nordhealth.design/components/button/?example=loading) under the Button itself.
- Improves [Popout component’s examples](https://nordhealth.design/components/popout/?example=tabs+in+popout).
- Improves [Spinner component’s](https://nordhealth.design/components/spinner/) positioning. Spinner doesn’t anymore try to absolute position itself inside a container. With this change, we’ve also added a new example which shows you how to achieve the old positioning behaviour if you need it: [view an example](https://nordhealth.design/components/spinner/?example=position).
- Release date 11.8.2022.

### 1.12.0

- Adds new [row selection example](https://nordhealth.design/components/table/?example=row+selection) for the Table component with the capability to select/deselect all rows via a global checkbox selection.
- Adds new [striped style variant](https://nordhealth.design/components/table/?example=striped) for the Table component.
- Improves Table component’s responsive behavior. Overflow behaviour has been moved from Card component to Table component and we’ve tweaked the padding of each table cell to fit more content and align better with surrounding elements.
- Adds new [scroll snap feature](https://nordhealth.design/components/table/?example=scroll+snapping) for the Table component.
- Adds new `header-end` slot to [Card component](https://nordhealth.design/components/card/).
- Adds `interface-grabber`, `interface-grid`, `interface-sort-small`, `interface-sort-up-small` and `interface-sort-down-small` icons.
- Release date 10.8.2022.

### 1.11.1

- Adds `indeterminate` state to [Checkbox component](https://nordhealth.design/components/checkbox/?example=indeterminate).
- Improves and simplifies the usage of z-index design tokens across all components.
- Release date 4.8.2022.

### 1.10.0

- Adds new [QR Code component](https://nordhealth.design/components/qrcode/) and documentation.
- Adds `readonly` property to `input` and `textarea` components.
- Adds `autocomplete` property to `input`, `textarea`, and `select` components.
- Improves table component’s documentation and examples.
- Release date 2.8.2022.

### 1.9.1

- Fixes [Select component](https://nordhealth.design/components/select/?example=disabled) disabled style to match [Input component](https://nordhealth.design/components/input/?example=disabled) disabled style.
- Release date 30.6.2022.

### 1.9.0

- Adds new [Toast component](https://nordhealth.design/components/toast/) and documentation.
- Adds new [Toast Group component](https://nordhealth.design/components/toast-group/) and documentation.
- Adds new [Divider component](https://nordhealth.design/components/divider/) and documentation.
- Improves how [Badge component](https://nordhealth.design/components/badge/) wraps in Chrome browser.
- Changes [Layout component](https://nordhealth.design/components/layout/) to not use absolute positioning.
- Fixes [Modal component](https://nordhealth.design/components/modal/) z-index issue.
- Improves [Modal component’s](https://nordhealth.design/components/modal/) body/scrollbar lock behaviour.
- Adds `show()` / `hide()` methods to [Dropdown component](https://nordhealth.design/components/dropdown/).
- Adds improvements to [Application template](https://nordhealth.design/templates/application/):
  - Adds confirm modal for delete actions in table.
  - Uses toasts throughout for messaging.
- Removes `expand`property from the following components which didn’t utilize it:
  - Toggle
  - Checkbox
  - Radio
- Release date 30.6.2022.

### 1.8.3

- Fixes React/Vue issue whereby updating the text of Button component after first render causes the proxy button to be removed (this is due to aggressive DOM reconciliation by the frameworks).
- Make sure users can use the scroll the [Navigation component](https://nordhealth.design/components/navigation/) contents while the nav resize toggle is present (we’ve moved this more towards right while removing overflow hidden to allow the user to hover this outside of the edges a little).
- Makes resizing of Navigation sidebar easier as you don’t have to be so exact anymore.
- Makes sure badges show up when text does not fit into the [Nav Item component](https://nordhealth.design/components/nav-item/?example=with+badge). Previously if an item’s text didn’t fit into the Nav Item, the badge got pushed out of the screen and did not show at all.
- Fixes an issue which caused the [Layout component](https://nordhealth.design/components/layout/) resize functionality to break the layout in Safari when using keyboard only.
- Removes custom scrollbar and unnecessary shared component styles from [Navigation component](https://nordhealth.design/components/navigation/).
- Refactors the [Tab Group](https://nordhealth.design/components/tab-group/) list overflow scrolling shadow effect and fixes support for right to left scrolling.
- Account for flex gap in [Tab Group](https://nordhealth.design/components/tab-group/) overflow shadows.
- Use box shadows instead of gradients to reveal overflow shadows in [Tab Group](https://nordhealth.design/components/tab-group/).
- Fixes the [Tab Group](https://nordhealth.design/components/tab-group/) component sticky header background.
- Minor adjustments to the [Tab Group](https://nordhealth.design/components/tab-group/) shadow positioning, and accounting for scrollbar.
- Fixes right to left support for [Tab Group](https://nordhealth.design/components/tab-group/).
- Release date 27.6.2022.

### 1.8.2

- Adds two new high contrast [Nord themes](https://nordhealth.design/design/themes/).
- Hide `overflow-y` in Tab Group, prevent scrollbar on mousedown.
- Fix issue with Select component where wrong item would be selected in Safari.
- Release date 21.6.2022.

### 1.8.0

- Adds new padding property and examples for [Layout component](https://nordhealth.design/components/layout/).
- Adds new [Tabs template](https://nordhealth.design/templates/) to demonstrate how the tabs can be used in an application view.
- Adds more [Tab Group component](https://nordhealth.design/components/tab-group/) usage examples.
- Adds more [Layout component](https://nordhealth.design/components/layout/) usage examples.
- Improves the padding property of [Tab Group component](https://nordhealth.design/components/tab-group/).
- Improves the sticky property of [Tab Group component](https://nordhealth.design/components/tab-group/).
- Makes it possible to use tabs inside of [Layout component](https://nordhealth.design/components/layout/) without extra space.
- Release date 17.6.2022.

### 1.7.0

- Adds new [Tab Group component](https://nordhealth.design/components/tab-group/) and related examples.
- Adds new [Tab component](https://nordhealth.design/components/tab/) and related examples.
- Adds new [Tab Panel component](https://nordhealth.design/components/tab-panel/) and related examples.
- Adds new [Skeleton component](https://nordhealth.design/components/skeleton/) and related examples.
- Nav Item badges have a new redesigned position and it’s now possible to have a badge in any item, including ones with sub items. [View an example](https://nordhealth.design/components/nav-item/?example=with+badge){rel="&#x22;nofollow&#x22;"}.
- Updates all component package dependencies including Lit and Floating UI Dom.
- Makes sure all `:host` elements have `box-sizing: border-box` set by default.
- Fixes Dropdown import of the Popout component.
- Release date 16.6.2022.

### 1.6.1

- Fixes font-sizing in [Nav Group component](https://nordhealth.design/components/nav-group/).
- Release date 14.6.2022.

### 1.6.0

- Adds new [Modal component](https://nordhealth.design/components/modal/) and related examples.
- Adds new prefix and suffix support for [Input component](https://nordhealth.design/components/input/?example=with+a+prefix+or+suffix).
- Adds new re-designed destructive style for [Button component](https://nordhealth.design/components/button/).
- Adds support for `form` attribute in Button and other form components.
- Switches to using REM based font-sizes instead of pixels for better accessibility.
- Moves [Toggle component](https://nordhealth.design/components/toggle/) out of draft status.
- Moves common font-size rules from components to shared CSS.
- Improves “enter to submit” behaviour in [Input component](https://nordhealth.design/components/input/).
- Refines Button’s transition styles to only include what is necessary rather than all.
- And other performance improvements and bug fixes.
- Release date 14.6.2022.

### 1.5.1

- Currently there is some friction when using our components in a Next.js app. It’s possible to overcome these issues yourself, but to make the process easier this version now offers specialized integration for Next.js. Please see [updated usage guidelines for React](https://nordhealth.design/web-components/#disabling-server-side-rendering-within-next.js){rel="&#x22;nofollow&#x22;"}.
- Restructures `@nordhealth/react` build process.
- Release date 6.6.2022.

### 1.5.0

- Adds new [Toggle component](https://nordhealth.design/components/toggle/), updated examples, and new documentation.
- Release date 24.5.2022.

### 1.4.0

- Adds new `switch` Button component style variant which is reserved for the clinic switcher in the top left corner of an application.
- Simplifies all Button, Navigation and Layout component examples by removing all custom CSS.
- Simplifies all templates by removing most custom CSS.
- Moves previous custom clinic icons from components into the CSS Framework.
- Release date 20.5.2022.

### 1.3.0

- We’re deprecating `health-light`, `health-dark`, `vet-light` and `vet-dark` themes to simplify and unify Nordhealth’s branding for all digital products.
- The components have now been tested on React 18 as well, so we’ve extended the React peer dependency range to `>= 17`.
- Support for right-to-left languages has been improved.
- [Navigation](https://nordhealth.design/components/navigation/) can now be resized and the size is saved to `localStorage` for the user, no need for your team to do any work to support this, it’ll remember the settings itself.
- [Navigation](https://nordhealth.design/components/navigation/) and [Layout](https://nordhealth.design/components/layout/)components now support resizing and hiding/showing with multiple different methods which should provide a lot of flexibility for our users in the future:
  - Using mouse/touch gesture to drag it to hidden state and hover to reveal for quick access and tap/click to show permanently.
  - Using keyboard `tab` + `arrow left` and `arrow right` keys users can resize which improves accessibility. Also supports `home` and `end` keys to minimize/maximize the width via keyboard.
  - Using the command menu you can set a hotkey for toggling the navigation menu.
  - Using keyboard shortcut to show and hide it.
  - On smallest viewports it’s hidden by default and can be revealed via the hamburger menu by tapping it.
  - You can try all these things in our [Application example template](https://nordhealth.design/templates/application/).
- Fixes coverage report not being generated from Docker container.
- Improves focus styles for Clinic Switcher in all examples.
- Improves the usage examples for Navigation component and templates.
- Layout component has a new `navOpen` property for controlling whether the navigation is hidden off-screen or not. Defaults to `true` for wide viewports, and `false` otherwise.
- Layout component has a new `navToggle` property that is used reference an element that should toggle the navigation.
- Adds `drag(start, end)` command to existing mouse plugin for tests.
- Adds `MediaQueryController` for hooking easy integration of `matchMedia` plus listeners into component.
- Adds truncation to heading text in Nav Group component.
- Adds custom scrollbar styling for Navigation component.
- Provides `:focus` fallback for environments where `:focus-visible` is not supported.
- Fixes warning logged by Command Menu, no need to treat any action as selected if command menu is not open.
- Includes also small generic performance and bug fixes.
- Release date 20.5.2022.

### 1.2.0

- You can now control the breakpoint of a responsive [Stack component](https://nordhealth.design/components/stack/).
- We’ve deprecated Stack component’s previous `responsive` property and will remove it in a future version. We recommend using standard [CSS media queries](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries){rel="&#x22;nofollow&#x22;"} over this old property. Please see the [updated usage example](https://nordhealth.design/components/stack/?example=using+responsive+media+query).
- We’ve switched to using `matchMedia` instead of `ResizeObserver` to check the viewport size in Popout component.
- Changes `x` and `y` properties in Popout to have convention prefix and clearer names.
- Updates visual presentation of deprecated component properties in docs.
- We now show vertical scrollbar in Dropdown component only when the content requires it (if it does not fit into the available vertical space).
- Release date 12.5.2022.

### 1.1.2

- Introduces new style for dropdowns and popouts on small viewports where they slide out from the bottom of the viewport.
- Moves all visual diff tests to run inside a Docker container.
- Sets a specific width to text inputs for consistency across browsers.
- Uses box-sizing to make the Date Picker input the same size on Chrome and Safari.
- Switch to using `esnext` esbuild config.
- Release date 12.5.2022.

### 1.0.1

- Makes `condensed` table style more condensed.
- Fix issue in `getMonthNames` that caused February to disappear from month dropdown.
- Update dependencies to remove workaround for TS files in test/dev servers.
- Use `cond` directive instead of `ifDefined`.
- Improve typing for fsm, now TypeScript will complain about any incorrect states.
- Adds observe decorator to simplify reacting to property changes.
- Removes redundant assignments from class constructors.
- Release date 2.5.2022.

### 1.0.0

- Official production release of `@nordhealth/components` and `@nordhealth/react`!!! 🎉
- **For migration guidelines, please see [Migration to 1.0.0](https://nordhealth.design/migrations/1.0.0/).**
- **For documentation and usage guidelines, please see [Web Components](https://nordhealth.design/docs/developer/web-components/).**
- **For documentation about localization, please see [Localization guidelines](https://nordhealth.design/docs/developer/localization/).**
- Comes with many new production ready components such as: [Progress Bar](https://nordhealth.design/components/progress-bar/), [Dropdown](https://nordhealth.design/components/dropdown/), [Dropdown Group](https://nordhealth.design/components/dropdown-group/), [Dropdown Item](https://nordhealth.design/components/dropdown-item/), [Popout](https://nordhealth.design/components/popout/) and [Header](https://nordhealth.design/components/header/).
- We’ve renamed `action` slot in header to `end` to match the naming conventions we use elsewhere.
- We’ve set `stretch` as the default `align-items` option for Stack component.
- We’ve added `baseline`, `space-between`, `space-around` and `space-evenly` options for `justify-content` property in Stack component.
- Make sure the `align-items` property always defaults to `stretch` for [Stack component](https://nordhealth.design/components/stack/).
- Make sure [Dropdown Item](https://nordhealth.design/components/dropdown-item/) contents stay on one line and get truncated if too long to fit into the available space.
- Improve [Dropdown component’s](https://nordhealth.design/components/dropdown/) close-on-blur behavior in Safari.
- Marks `shadowRootOptions` in Dropdown as internal to hide it from the public docs.
- Make sure we properly handle unknown icon names in [Icon component](https://nordhealth.design/components/icon/) when loading from CDN.
- Removes gradients from primary buttons across all themes.
- Make sure disabled [Input component](https://nordhealth.design/components/input/) always has the correct border color, no matter which element is hovered.
- Adds new `xxl` size for [Avatar component](https://nordhealth.design/components/avatar/).
- Makes [Card component](https://nordhealth.design/components/card/) better support Stack where cards have the same size.
- Adds support for `space-between`, `space-around` and `space-evenly` justification for [Stack component](https://nordhealth.design/components/stack/).
- Adds new `responsive` property for [Stack](https://nordhealth.design/components/stack/) which allows you to stack contents automatically when the viewport goes under certain threshold.
- Adds new `wrap` property for [Stack](https://nordhealth.design/components/stack/) which defines whether the Stack items are forced in a single line or can be flowed into multiple lines.
- Adds many new [Stack usage examples](https://nordhealth.design/components/stack/).
- Fixes icon component’s sizing when used inside a flex container.
- Adds new [Profile template](https://nordhealth.design/templates/) into documentation.
- Make sure the heading in Dropdown Group stays on one line and gets shortened if really long.
- Converts [border colors in all themes](https://nordhealth.design/core/tokens/?theme=nord) to be stronger to create a more finished look.
- Adds new less prominent default, card and header [box shadows](https://nordhealth.design/core/tokens/#box-shadow) for all themes and additionally improves their legibility by adding a surrounding gray surface area.
- Adds call `toString()` on [Select component’s](https://nordhealth.design/components/select/) value, for convenience when options are numbers.
- Adds `LocalizeController` for use in components.
- Exposes `registerTranslation` function for use in apps.
- Extracts all localized strings from components and gathers them in a translation file.
- Adds new [Localization guidelines](https://nordhealth.design/docs/developer/localization/) into docs under “guidelines” section.
- When using our [React components](https://nordhealth.design/docs/developer/web-components/#react), the types for event handlers no longer need to be defined like this:
  ```tsx
  // TS complained unless you had a union of both types
  function handleChange(e: FormEvent | Event) {}
  <Input onChange={handleChange} />
  ```
  Now you can define them as:

  ```tsx
  function handleChange(e: Event) {}
  <Input onChange={handleChange} />
  ```
- Fixes positioning of [Popout component](https://nordhealth.design/components/popout/) when nested.
- Fixes positioning of [Tooltip component](https://nordhealth.design/components/tooltip/) when nested.
- Fixes Popout component positioning when opening for the first time.
- Removes empty space when Popout component is added into a view.
- Hides Dropdown if focus moves elsewhere (improving keyboard accessibility).
- We now hide [Tooltip component](https://nordhealth.design/components/tooltip/) on click.
- Tweaks tooltip timings: longer delay to activate, shorter transition times.
- Add new dropdown examples to [application template](https://nordhealth.design/templates/application/).
- Prevent auto scrolling when returning focus to [Popout component](https://nordhealth.design/components/popout/) trigger.
- Prevent Popout hide/show logic if already in closed or open state.
- Use `:focus-visible` to [Navigation](https://nordhealth.design/components/navigation/) component to improve mouse user experience.
- Adds better disabled day styles for [Calendar](https://nordhealth.design/components/calendar/) component.
- Adds new `expand` property for [Calendar](https://nordhealth.design/components/calendar/) component.
- Adds various new usage examples for [Calendar](https://nordhealth.design/components/calendar/) component.
- Adds better [Navigation](https://nordhealth.design/components/navigation/) component examples to documentation.
- Removes extra spacing from [Select](https://nordhealth.design/components/select/) component icons since these are no longer needed.
- Adds new [clinic switcher](https://nordhealth.design/components/dropdown/?example=clinic+switcher) example for Dropdown component.
- Makes sure hover text color is always correct for slotted contents in [Dropdown Item](https://nordhealth.design/components/dropdown-item/) component.
- Adds performance improvements to [Popout](https://nordhealth.design/components/popout/) component by only running `autoUpdate` functionality when the popous is open.
- Improves [Popout](https://nordhealth.design/components/popout/) component’s automated tests.
- Fixes [Command Menu](https://nordhealth.design/components/command-menu/) font-size bug which caused icons to show in a wrong position.
- Release date 13.4.2022.

  \[Migration guide to 1.0.0]\(/migrations/1.0.0/)

### 1.0.0-rc.1

- Initial release candidate of `@nordhealth/components`.
- For documentation and usage guidelines, please see [Web Components](https://nordhealth.design/docs/developer/web-components/).
- Comes with 5 new components: [Progress Bar](https://nordhealth.design/components/progress-bar/), [Dropdown](https://nordhealth.design/components/dropdown/), [Dropdown Group](https://nordhealth.design/components/dropdown-group/), [Dropdown Item](https://nordhealth.design/components/dropdown-item/), and [Popout](https://nordhealth.design/components/popout/).
- We now map logical to physical properties in tooltip and popout, ensuring correct animations in RTL mode.
- We now use correct chevron icon in command menu in RTL mode.
- Tooltip now uses logical positions to better support RTL mode.
- Adds support for `aria-expanded` to button component.
- Adds support for `aria-haspopup` to button component.
- Release date 31.3.2022.

### 1.0.0-beta.24

- Allow multiple elements to use the same tooltip component.
- Fixes event targets to allow removal of event listeners.
- Restructures mouse command API and adds hover command.
- Fixes to automated test suite.
- Updates Nord CSS Framework to latest.
- Release date 30.3.2022.

### 1.0.0-beta.21

- Renames `before` and `after` slots to `start` and `end` in each component.
- Fixes a CSS bug with Input component slotted icons.
- Fixes an issue caused by `rollup-plugin-summary` npm package.
- Release date 29.3.2022.

### 1.0.0-beta.20

- Adds new Progress Bar component and related documentation.
- Bug fixes to Radio component’s styles.
- Moves Spinner component out of draft state.
- Adds fixes to visual regression tests.
- Release date 29.3.2022.

### 1.0.0-beta.19

- Adds new `line-height-caption` token.
- Release date 19.3.2022.

### 1.0.0-beta.18

- Adds new `color-text-success` token.
- Release date 17.3.2022.

### 1.0.0-beta.17

- Rename Calendar's `nord-select` event to `change`.
- Add `nord-focus-date` event to calendar.
- Ensure documentation for calendar and date picker is correct.

### 1.0.0-beta.16

- Fixes an issue which prevented programmatically unchecking a checkbox after it was manually checked.
- Release date 15.3.2022.

### 1.0.0-beta.15

- We’re renaming `color-primary` to `color-accent` to better support our [themes](https://nordhealth.design/design/themes/).
- We’re renaming `color-text-inverse` to `color-text-on-accent` to better support our [themes](https://nordhealth.design/design/themes/) and better explain where the color should be used.
- Release date 14.3.2022.

### 1.0.0-beta.14

- Adds new “justify-content” property for Stack component.
- Fixes the expand sizing for Select and Input components to respect 100% width.
- To improve usability, make the placeholders have more contrast against actual text content.
- Make sure Nord’s CSS Framework reset utility helper doesn’t break Radio component styles.
- Improve Avatar component’s theming support.
- Improve Tooltip component’s theming support.
- Release date 13.3.2022.

### 1.0.0-beta.13

- We’re removing `color-primary-strong` token from the system as it was only referenced in one location.
- Release date 12.3.2022.

### 1.0.0-beta.12

- Fix all button component hover styles.
- Adds the ability to prevent command menu opening.
- Release date 11.3.2022.

### 1.0.0-beta.11

- Updates correct statuses for all components to reflect their working state.
- Improves Date Picker component test automation.
- Improve behavior of button when placed in stack.
- Make sure we only show button hover styles when actual button is hovered.
- Release date 10.3.2022.

### 1.0.0-beta.8

- Adds new Avatar component.
- We fixed a bug related to form events where the user might’ve previously got double events: the native one, and the one we dispatch ourselves. This is now fixed.
- Adds two new icons into Nordicons: `interface-info` and `interface-warning`.
- Release date 9.3.2022.

### 1.0.0-beta.6

- Adds support for no shadow variant in Banner component.
- Adds responsive functionality into Layout component.
- Fix icon import in Checkbox component.
- Various bug fixes and performance improvements.
- Release date 7.3.2022.

### 1.0.0-beta.4

- Fixes Banner component layout bugs.
- Release date 5.3.2022.

### 1.0.0-beta.3

- Adds new Banner component.
- Adds new `interface-info` icon.
- Adds new weak status colors into tokens.
- Release date 5.3.2022.

### 1.0.0-beta.2

- Adds new Empty State component.
- Release date 5.3.2022.

### 1.0.0-beta.1

- Adds new draft Layout component.
- Adds links styles into base components.
- Release date 5.3.2022.

### 1.0.0-beta.0

- Make sure Radio component styles work with Provet.
- Make sure Checkbox component styles work with Provet.
- Make sure common FormField component styles work with Provet.
- Fix all style issues discovered in Diarium testing.
- Fixes an issue which caused nested stacks to not respect default medium space.
- Release date 4.3.2022.

### 1.0.0-alpha.59

- Redesigned dark gray shades for Vet and Nord dark themes.
- Updates `medical-bandage`, `medical-blood`, `medical-instrument-stethoscope`, `medical-pill` and `medical-radiology-scan` to match the style of the rest of the icons.
- Adds new `interface-content-book` icon.
- Release date 3.3.2022.

### 1.0.0-alpha.57

- Add a single file output for Web Components to be used on documentation website.
- Release date 1.3.2022.

### 1.0.0-alpha.56

- Adds bug fixed to Tooltip component’s styles.
- Release date 26.2.2022.

### 1.0.0-alpha.55

- Adds new `@nordhealth/react` output that contains auto-generated React wrappers for the web components found in `@nordhealth/components`.
- The versioning of our new React components follow the same versioning as Web Components (this package).
- Updates licensing and package.json details.
- Release date 24.2.2022.

### 1.0.0-alpha.54

- Adds new [Navigation](https://nordhealth.design/components/navigation/) component that is used to display the primary navigation in the sidebar of an application.
- Adds new [Navigation Group](https://nordhealth.design/components/nav-group/) component that is used for grouping navigation items into related categories.
- Adds new [Navigation Item](https://nordhealth.design/components/nav-item/) component that populates sidebar navigation with links.
- Adds tweaks to Tooltip component:
  - Improve accessibility when tooltip is “attached” to focusable web component.
  - Ensure only one tooltip shown at a time.
  - Fix z-index issues with tooltip.
  - Adds ability to dismiss tooltip with Esc.
- Header component now has a min-height to match the navigation sidebar.
- When button is used as a disabled link, it’s now removed from tab order and correctly reported as disabled to screen readers.
- We’ve improved the primary button variant focus styles.
- Adds support for button component to customize the background gradient via CSS custom properties.
- Improve Tooltip component text wrapping.
- Release date 23.2.2022.

### 1.0.0-alpha.51

- Ensure we always see slotchange events.
- Use common component styles for all input components, remove redundant styles from FormField.css.
- Release date 18.2.2022.

### 1.0.0-alpha.49

- Changes Command Menu `hotkeys` property to `shortcuts`.
- Add font size and color to header component.
- Improves margin handling for Fieldset component.
- Fixes Checkbox component to use correct border radius.
- Updates all components to use common component CSS reset.
- Various other bug fixes and performance improvements.
- Release date 17.2.2022.

### 1.0.0-alpha.48

- Adds new [Header](https://nordhealth.design/components/header/) component that provides designated space for labelling the currently viewed context as well as providing primary actions.
- Add labels to icons in Button component usage examples.
- Updates all library dependencies and migrates to Stylelint 14.
- Release date 11.2.2022.

### 1.0.0-alpha.47

- Adds new [Radio](https://nordhealth.design/components/radio/) component that allow user to choose only one option from a predefined set of mutually exclusive options.
- Adds new [Fieldset](https://nordhealth.design/components/fieldset/) component that is used for grouping sets of input components.
- Adds new [Tooltip](https://nordhealth.design/components/tooltip/) component that is used for displaying additional information for the currently focused element.
- Improves button components default and disabled styles.
- Improves date picker’s default and disabled styles.
- Fixes text color for current date in date picker.
- Improves checkbox component’s cursor styles.
- Makes it possible to also click on an empty area between checkbox and label to toggle checked state.
- We now use repeat directive to properly handle re-ordering of years in Calendar.
- We’ve fixed a bug in form components to ensure disabled styles are always correctly applied.
- We’ve fixed a bug with font-families in certain form components like date picker and checkbox.
- We’ve made components documentation support usage and content guidelines.
- We’ve tweaked styles to properly handle default prop values where attr is missing.
- We’ve improved Checkbox component’s disabled styles in this release.
- Release date 8.2.2022.

### 1.0.0-alpha.46

- Adds new [Checkbox](https://nordhealth.design/components/checkbox/) component that allows user to choose one or more options from a limited set of options.
- Release date 14.1.2022.

### 1.0.0-alpha.45

- Adds new [Calendar](https://nordhealth.design/components/calendar/) component that allows user to pick a date.
- Adds new [Date Picker](https://nordhealth.design/components/date-picker/) component that allows user to enter a date either through text input, or by choosing a date from the calendar.
- Adds reusable swipe controller.
- Adds reusable language direction controller.
- Release date 13.1.2022.

### 1.0.0-alpha.43

- Add input event for all form components.
- Improve how proxy button is added to DOM (now uses Lit’s renderer, rather than imperative code).
- Add support for submitting form by hitting enter key in input field.
- Improve card `with-form` example to use submit event.
- Release date 13.12.2021.

### 1.0.0-alpha.42

- We’ve moved labels closer to form elements to make forms more legible.
- Adds new [card component form usage examples](https://nordhealth.design/components/card/?example=with+form).
- Adds new [example about form validation](https://nordhealth.design/components/card/?example=with+form).
- Fixed background color tokens used in docs examples.
- Release date 11.12.2021.

### 1.0.0-alpha.41

- Adds new spinner component and related examples.
- Fixes select component’s appearance in Firefox.
- Release date 10.12.2021.

### 1.0.0-alpha.39

- Prevents spellcheck in Input.
- Fixes an issue which caused textarea to animate size.
- Adds new icon usage example for button component.
- Fixes icon hover colors for button component.
- Release date 10.12.2021.

### 1.0.0-alpha.38

- Adds new textarea component.
- Adds new common form component utilities.
- Release date 9.12.2021.

### 1.0.0-alpha.37

- Improved usage examples for all components.
- New large button size introduced.
- New danger button variation introduced.
- Generic CSS fixes to components.
- Release date 9.12.2021.

### 1.0.0-alpha.36

- Adds new command menu component.
- Adds `all: initial` for all components.
- Makes sure components don’t break because of CSS cascade.
- Release date 7.12.2021.

### 1.0.0-alpha.32

- Adds new input component and related functionality.
- We now warn in console if you try to use draft components in production environment.
- Adds custom gap option for Stack component.
- Removes default pointer cursor from table styles
- Adds custom focus outline to select and button components.
- Adds input hint to Select.
- Spacing between different form components is made consistent.
- Adds new align-items property for Stack.
- Release date 1.12.2021.

### 1.0.0-alpha.31

- Adds new Table, Badge and Card components.
- Adds new `target` property for Button component.
- Not ready for production usage.
- Release date 20.10.2021.

### 1.0.0-alpha.29

- Updates Nord package dependencies to latest.
- Changes select component to use official Nordicon icons.
- Makes button component support `download` attribute when it is used as a link.
- Makes button component support the new `currentColor` functionality in Nordicons.
- Not ready for production usage.
- Release date 17.10.2021.


# Nordicons Changelog

\*Nord Design System’s parts are versioned and released using Node Package Manager. NPM’s \[organization page]\(https\://www\.npmjs.com/org/nordhealth) lists all packages available and their most recent versions.\*

## Nordicons

### 3.17.0 `New`

- Removes 4 icons from [Nordicons](https://nordhealth.design/icons/) that duplicated existing ones: `arrow-skip-back` and `interface-fast-backward` (duplicates of `interface-rewind`), `interface-help-circle` (duplicate of `interface-help`), and `interface-sign-in` (visually identical to `interface-logout` — consumers can flip the survivor with `transform: scaleX(-1)` for the sign-in direction).
- Merges keywords from the removed icons into surviving ones so search still surfaces them: `interface-rewind` now matches `back`, `previous`, `media`, `player`, `step backward`, and `fast`; `interface-help` now matches `tooltip` and `info`.
- Release date 16.6.2026.

### 3.16.2

- Replaces hardcoded black fill with `currentColor` on `navigation-drawer-left-collapse`, `navigation-drawer-left-expand`, `navigation-drawer-right-collapse`, `navigation-drawer-right-expand`, and `navigation-scheduling` so the icons inherit text color.
- Release date 11.6.2026.

### 3.16.1

- Adds 3 new icons to [Nordicons](https://nordhealth.design/icons/): `interface-expand`, `interface-stop-filled`, and `navigation-scheduling`.
- Release date 11.6.2026.

### 3.16.0

- Adds 28 new icons to [Nordicons](https://nordhealth.design/icons/): `arrow-down-double`, `arrow-skip-back`, `arrow-up-double`, `generic-ambulance`, `generic-calculator`, `generic-car`, `generic-cube`, `generic-gift`, `generic-signal`, `interface-circle`, `interface-clipboard`, `interface-container`, `interface-emoji-happy`, `interface-emoji-neutral`, `interface-emoji-sad`, `interface-eyedropper`, `interface-fast-backward`, `interface-help-circle`, `interface-inbox`, `interface-key`, `interface-loading`, `interface-sign-in`, `interface-spinner`, `interface-tag-filled`, `navigation-drawer-left-collapse`, `navigation-drawer-left-expand`, `navigation-drawer-right-collapse`, and `navigation-drawer-right-expand`.
- Adds legacy keyword aliases to icon tags so renamed icons remain searchable by their previous names.
- Syncs reskinned icons with the centering offsets defined in the mapping page.
- Release date 9.6.2026.

### 3.15.0

- Adds new icon to [Nordicons](https://nordhealth.design/icons/): `arrow-replace`.
- Release date 11.2.2026.

### 3.11.0

- Adds new icon to [Nordicons](https://nordhealth.design/icons/): `generic-pet-food`.
- Release date 2.7.2025.

### 3.10.0

- Adds new icon to [Nordicons](https://nordhealth.design/icons/): `interface-table`.
- Release date 5.6.2025.

### 3.9.0

- Adds 3 new icons to [Nordicons](https://nordhealth.design/icons/): `text-heading-1`, `text-heading-2` and `text-heading-3`.
- Release date 12.5.2025.

### 3.8.0

- Adds new icon to [Nordicons](https://nordhealth.design/icons/): `text-ordered-list`.
- Release date 8.5.2025.

### 3.7.1

- Updates readme document details.
- Release date 6.5.2025.

### 3.7.0

- Adds 4 new icons to [Nordicons](https://nordhealth.design/icons/): `generic-consent-agreed`, `generic-consent-declined`, `generic-consent-expired` and `generic-consent-not-asked`.
- Release date 13.2.2025.

### 3.6.0

- Adds `arrow-right-double` and `arrow-left-double` icons to [Nordicons](https://nordhealth.design/icons/).
- Release date 29.1.2025.

### 3.5.2

- Fixes an issue where the components package was loading an outdated version of the Nordicons from the CDN.
- Release date 27.9.2024.

### 3.5.1

- Migrates the monorepo to use [pnpm workspaces](https://pnpm.io/workspaces){rel="&#x22;nofollow&#x22;"} instead.
- Release date 24.9.2024.

### 3.5.0

- Updates all package dependencies to latest.
- Release date 17.9.2024.

### 3.4.0

- Adds 4 new icons to [Nordicons](https://nordhealth.design/icons/): `interface-dnr`, `interface-cpr-acpr`, `interface-cpr-unknown` and `interface-ai`.
- Release date 22.5.2024.

### 3.3.0

- Adds `interface-archive`, `interface-error`, `medical-birthday` and `navigation-catalog` icons to [Nordicons](https://nordhealth.design/icons/).
- Release date 14.2.2024.

### 3.2.0

- Adds `interface-whiteboard`, `interface-payment-terminal` and `generic-unchipped` icons to [Nordicons](https://nordhealth.design/icons/).
- Release date 17.10.2023.

### 3.1.0

- Adds new `interface-duplicate` icon into [Nordicons](https://nordhealth.design/icons/).
- Release date 9.8.2023.

### 3.0.1

- Replaces the old `navigation-tasks` icon with a new larger one.
- Release date 31.5.2023.

### 3.0.0

- **New major release that brings [various improvements and bug fixes](https://nordhealth.design/migrations/3.0.0/)!!** ✨🥳
- This release introduces 13 new icons called `interface-warning-small`, `file-invoice`, `file-patient-records`, `file-treatment-plan`, `generic-company`, `generic-farm`, `generic-hospital`, `medical-drip`, `medical-neutered`, `medical-spayed`, `medical-surgery`, `navigation-finances`, `navigation-reports-2`.
- For detailed description of all changes, please see [Migration guide](https://nordhealth.design/migrations/3.0.0/).
- Release date 19.5.2023.

\[Migration guide]\(/migrations/3.0.0/)

### 2.0.1

- Updates the documentation for the package.
- Release date 29.3.2023.

### 2.0.0

- New major release, updates all existing [Nordicons with a new design style](https://nordhealth.design/icons/)!
- This update moves our icon style closer to the Nordhealth brand. All icons now closely follow the brand guidelines and have strong affiliation with our logomark and design language.
- With this update we’re overcoming issues with the old icon style which was somewhat limiting our creativity and possibilities.
- This update allows us to get rid of licensing issues with the previous iconset as it prevented us from sharing any of our work in Figma community or GitHub.
- Adds new `medical-prescription`, `interface-send`, `interface-login`, `interface-like-filled`, `interface-favorite-filled`, `interface-globe`, `interface-dislike-filled`, and `interface-bookmark-filled` icons.
- Make SVG Lint config more strict about the size of the icons which should always be 20 × 20px.
- Removes `keyboard-alt` and `interface-help-2` icons from Nordicons. If you’re using `interface-help-2`, please replace with more universal `interface-help` icon.
- Fixes the order of icons metadata to be consistent for all icons.
- Updates all screenshot diff tests for icons and components.
- Updates [iconography documentation](https://nordhealth.design/design/foundations/iconography/) to match the new style and guidelines.
- Release date 25.2.2023.

### 1.8.0

- Adds new `navigation-timeline` icon to [Nordicons](https://nordhealth.design/icons/).
- Release date 4.10.2022.

### 1.7.0

- Adds new animal category icons: `generic-suidae`, `generic-sheep`, `generic-rodents`, `generic-reptilia`, `generic-leporidae`, `generic-fish`, `generic-feline`, `generic-equidae`, `generic-cattle`, `generic-canine`, `generic-birds`, `generic-arachnida`, `generic-amphibia`.
- Changes `medical-insurance` icon from “a hand holding a plus sign” to represent “a shield.”
- The small icon dimensions are changed from `11px` to `12px`.
- Improves `interface-dropdown-small` icon positioning.
- Release date 9.9.2022.

### 1.6.0

- Adds new `interface-cancelled-small`, `interface-complete-small`, `interface-incomplete-small`, and `interface-partially-complete-small` icons.
- Release date 7.9.2022.

### 1.5.0

- Adds new `medical-insurance` icon.
- Updates tags for `medical-heart-rate` icon to cover usage with health plans.
- Release date 24.8.2022.

### 1.4.0

- Adds new `interface-grabber`, `interface-grid`, `interface-sort-small`, `interface-sort-up-small` and `interface-sort-down-small` icons.
- Release date 10.8.2022.

### 1.3.9

- Fixes potential security vulnerability in the dependencies.
- Release date 14.6.2022.

### 1.3.8

- Adds prepare script to fill gaps in `npm run bootstrap` so that components pkg is ready to start immediately after.
- Release date 20.5.2022.

### 1.3.7

- Adds two new icons into Nordicons: `interface-info` and `interface-warning`.
- Release date 10.3.2022.

### 1.3.5

- Adds new `interface-checked-circle` icon.
- Release date 7.3.2022.

### 1.3.4

- Adds new `interface-info` icon.
- Release date 5.3.2022.

### 1.3.3

- Updates `medical-bandage`, `medical-blood`, `medical-instrument-stethoscope`, `medical-pill` and `medical-radiology-scan` to match the style of the rest of the icons.
- Adds new `interface-content-book` icon.
- Release date 3.3.2022.

### 1.3.2

- Updates licensing and package.json details.
- Release date 24.2.2022.

### 1.3.1

- Outputs all icons as ES Modules now.
- Simplifies the build logic behind the scenes.
- Release date 4.12.2021

### 1.2.2

- Adds three new icons into the library: `generic-bug`, `generic-github` and `generic-slack`.
- Release date 20.10.2021

### 1.2.0

- We updates [Nordicons](https://nordhealth.design/icons/) interface to support downloading icons in addition to directly copying the vectors to a Figma file.
- We manually fixed 42 icons to work in Figma when you use the copy paste functionality.
- Release date 17.10.2021

### 1.1.2

- Fix currentColor definitions in 14 icons. An issue that prevented changing color of these icons.
- Updates all tags in Nordicons package to make them more consistent.
- Release date 16.10.2021

### 1.0.1

- Improves the meta data of icons and tagging.
- Updates Nord package dependencies to latest.
- Release date 15.10.2021.

### 1.0.0

- Initial release of `@nordhealth/icons`.
- Comes with 188 carefully hand picked and designed icons.
- For documentation and usage guidelines, please see [Nordicons](https://nordhealth.design/icons/).
- Release date 14.10.2021.


# Themes Changelog

\*Nord Design System’s parts are versioned and released using Node Package Manager. NPM’s \[organization page]\(https\://www\.npmjs.com/org/nordhealth) lists all packages available and their most recent versions.\*

## Themes

### 10.0.0 `New`

- Wires the new navigation and surface color tokens (`surface-canvas`, `surface-background`, `nav-selected`, refreshed `nav-hover` / `surface-lowered`, and `background` → `surface-raised`) and the Nordhealth-aligned Veterinary accent into all 8 theme SCSS files (NDS-180). (#670)
- The compiled color values change, so existing UIs shift visually — this is a major release. No custom-property names were removed, so no code changes are required, but consumers should regenerate their visual-regression baselines.
- Release date 2.7.2026.

### 9.0.9

- Updates all package dependencies to latest.
- Release date 16.6.2026.

### 9.0.7 → 9.0.8

- Updates all package dependencies to latest.

### 9.0.6

- Updates `nord-dark` and `vet-dark` themes to override input and textarea background colors so that the default state uses `--n-color-active` (slightly elevated) and the inactive (disabled/readonly) state uses `--n-color-surface` (receded), maintaining correct visual hierarchy in dark mode.
- Release date 6.5.2026.

### 9.0.5

- Updates all package dependencies to latest.

### 9.0.4

- Updates all package dependencies to latest.

### 9.0.3

- Updates all package dependencies to latest.

### 9.0.2

- Updates all package dependencies to latest.

### 9.0.1

- Updates all package dependencies to latest.

### 9.0.0

- **New major release that unifies the two design system platforms into a one platform that can serve all of Nordhealth. This change allows us to better support the next generation of apps and generative AI experiences at Nordhealth.** ✨
- This new version ships with two distinctive brands, [therapy](https://nordhealth.design/?theme=nord) and [veterinary](https://nordhealth.design/?theme=vet). You can choose the currently active brand from the top left corner of this documentation website. Once chosen, you will get content that is tailored specifically for the brand and the business unit you’re working in. [Read more](https://nordhealth.design/migrations/4.0.0/).
- The Themes package now includes four additional themes: `vet`, `vet-dark`, `vet-high-contrast`, and `vet-dark-high-contrast`.
- This release doesn’t include breaking changes for the existing users of Nord Design System.
- For detailed description of all changes and the steps required for migration, please see the [Migration Guide](https://nordhealth.design/migrations/4.0.0/).
- See also the updated [theming guidelines](https://nordhealth.design/design/themes/) which now adapt the contents depending on which brand is chosen.
- Release date 6.5.2025.

### 8.1.1

- Migrates the monorepo to use [pnpm workspaces](https://pnpm.io/workspaces){rel="&#x22;nofollow&#x22;"} instead.
- Release date 24.9.2024.

### 8.1.0

- Updates all package dependencies to latest.
- Release date 17.9.2024.

### 8.0.3

- Updates readme document details.
- Release date 14.6.2024.

### 8.0.2

- Updates Nord Design Tokens to the latest version.
- Release date 11.4.2024.

### 8.0.1

- Improves `var(--n-color-nav-hover)` to be more consistent with other colors in the light high contrast theme.
- Release date 31.5.2023.

### 8.0.0

- **New major release that brings [various improvements and bug fixes](https://nordhealth.design/migrations/3.0.0/)!!** ✨🥳
- We’ve improved the underlying [color system](https://nordhealth.design/core/tokens/) to make it more extensible and better cover the use cases of our different products.
- We’ve introduced the following new colors into each theme:
  - []{.n:border.n:border-strong.n:rounded style="display:inline-block;width:20px;height:20px;background:var(--n-color-text-danger);"} `var(--n-color-text-danger)`
  - []{.n:border.n:border-strong.n:rounded style="display:inline-block;width:20px;height:20px;background:var(--n-color-text-highlight);"} `var(--n-color-text-highlight)`
  - []{.n:border.n:border-strong.n:rounded style="display:inline-block;width:20px;height:20px;background:var(--n-color-text-info);"} `var(--n-color-text-info)`
  - []{.n:border.n:border-strong.n:rounded style="display:inline-block;width:20px;height:20px;background:var(--n-color-text-neutral);"} `var(--n-color-text-neutral)`
  - []{.n:border.n:border-strong.n:rounded style="display:inline-block;width:20px;height:20px;background:var(--n-color-text-neutral-strong);"} `var(--n-color-text-neutral-strong)`
  - []{.n:border.n:border-strong.n:rounded style="display:inline-block;width:20px;height:20px;background:var(--n-color-text-progress);"} `var(--n-color-text-progress)`
  - []{.n:border.n:border-strong.n:rounded style="display:inline-block;width:20px;height:20px;background:var(--n-color-text-warning);"} `var(--n-color-text-warning)`
  - []{.n:border.n:border-strong.n:rounded style="display:inline-block;width:20px;height:20px;background:var(--n-color-text-warning-strong);"} `var(--n-color-text-warning-strong)`
  - []{.n:border.n:border-strong.n:rounded style="display:inline-block;width:20px;height:20px;background:var(--n-color-border-danger);"} `var(--n-color-border-danger)`
  - []{.n:border.n:border-strong.n:rounded style="display:inline-block;width:20px;height:20px;background:var(--n-color-border-highlight);"} `var(--n-color-border-highlight)`
  - []{.n:border.n:border-strong.n:rounded style="display:inline-block;width:20px;height:20px;background:var(--n-color-border-info);"} `var(--n-color-border-info)`
  - []{.n:border.n:border-strong.n:rounded style="display:inline-block;width:20px;height:20px;background:var(--n-color-border-neutral);"} `var(--n-color-border-neutral)`
  - []{.n:border.n:border-strong.n:rounded style="display:inline-block;width:20px;height:20px;background:var(--n-color-border-progress);"} `var(--n-color-border-progress)`
  - []{.n:border.n:border-strong.n:rounded style="display:inline-block;width:20px;height:20px;background:var(--n-color-border-success);"} `var(--n-color-border-success)`
  - []{.n:border.n:border-strong.n:rounded style="display:inline-block;width:20px;height:20px;background:var(--n-color-border-warning);"} `var(--n-color-border-warning)`
  - []{.n:border.n:border-strong.n:rounded style="display:inline-block;width:20px;height:20px;background:var(--n-color-surface-lowered);"} `var(--n-color-surface-lowered)`
  - []{.n:border.n:border-strong.n:rounded style="display:inline-block;width:20px;height:20px;background:var(--n-color-status-notification);"} `var(--n-color-status-notification)`
  - []{.n:border.n:border-strong.n:rounded style="display:inline-block;width:20px;height:20px;background:var(--n-color-accent-secondary);"} `var(--n-color-accent-secondary)`
- For detailed description of all changes, please see [Migration guide](https://nordhealth.design/migrations/3.0.0/).
- Breaking changes are also covered in the [migration guide](https://nordhealth.design/migrations/3.0.0/).
- Release date 19.5.2023.

\[Migration guide]\(/migrations/3.0.0/)

### 7.0.4

- Updates Nord Design Tokens to the latest version.
- Release date 29.3.2023.

### 7.0.3

- Updates Nord Design Tokens to the latest version.
- Release date 24.10.2022.

### 7.0.2

- Updates Nord Design Tokens to the latest version.
- Release date 16.9.2022.

### 7.0.0

- We’ve redesigned the underlying [color system](https://nordhealth.design/core/tokens/) to make it more extensible and better cover the use cases of our different products.
- The latest version of [Themes](https://nordhealth.design/design/themes/) introduces a few fundamental changes to the way Nord’s status colors work.
- For more details, please see [migration guidelines](https://nordhealth.design/migrations/2.0.0/).
- Release date 7.9.2022.

\[Migration guidelines]\(/migrations/2.0.0/)

### 6.3.2

- Updates all Node.js dependencies to latest.
- Release date 17.8.2022.

### 6.3.1

- Updates themes to use the latest Nord Design Tokens.
- Release date 4.8.2022.

### 6.3.0

- Adds new `nord-high-contrast` theme.
- Adds new `nord-dark-high-contrast` theme.
- Release date 20.6.2022.

### 6.2.1

- Small bug fixed and performance improvements.
- Release date 17.6.2022.

### 6.2.0

- We’ve removed skeleton related gradients from themes, since the new [Skeleton component](https://nordhealth.design/components/skeleton/) does not need them.
- Release date 16.6.2022.

### 6.1.0

- Adds new `n-color-overlay` design token that allows you to distinguish a modal layer from the layer underneath.
- Adds `color-scheme: light/dark;` into themes so that the browser uses correct theme for native elements such as scroll bars.
- Release date 14.6.2022.

### 6.0.0

- We’re deprecating `health-light`, `health-dark`, `vet-light` and `vet-dark` themes to simplify and unify Nordhealth’s branding for all digital products.
- Release date 20.5.2022.

### 5.1.8

- Adds new `transition-mobile` token for mobile menu transitions. Used in mobile versions of Popout and Dropdown components.
- Release date 11.5.2022.

### 5.1.6

- Darkens the `color-nav-surface` in vet light theme to provide better contrast.
- Release date 2.5.2022.

### 5.1.5

- Adds even stronger border color styles for all light themes.
- Adds new card shadow styles with raised surfaces.
- Release date 12.4.2022.

### 5.1.3

- Converts [border colors in default Nord theme](https://nordhealth.design/core/tokens/?theme=nord) to be stronger to match [Veterinary theme](https://nordhealth.design/core/tokens/?theme=vet) better.
- Adds new less prominent default, card and header [box shadows](https://nordhealth.design/core/tokens/#box-shadow) for all themes.
- Release date 10.4.2022.

### 5.1.1

- Brings in latest changes from Design Tokens v4.2.0.
- Release date 19.3.2022.

### 5.1.0

- Adds new `color-text-success` token.
- Release date 17.3.2022.

### 5.0.0

- We’re renaming `color-primary` to `color-accent` to better support our [themes](https://nordhealth.design/design/themes/).
- We’re renaming `color-text-inverse` to `color-text-on-accent` to better support our [themes](https://nordhealth.design/design/themes/) and better explain where the color should be used.
- We’re removing `color-primary-strong` token from the system as it was only referenced in one location.
- This color is now replaced with CSS filters inside the system which darken the existing `color-primary`.
- Hence all of these are breaking changes, we’re releasing a new major version.
- Release date 14.3.2022.

### 3.2.1

- Updates previous weak status colors with new dark variants.
- Release date 7.3.2022.

### 3.2.0

- Adds new weak status colors into themes.
- Release date 5.3.2022.

### 3.1.0

- Redesigned dark gray shades for Vet and Nord dark themes.
- Release date 3.3.2022.

### 3.0.6

- Updates licensing and package.json details.
- Release date 24.2.2022.

### 3.0.5

- Simplifies test framework for themes package.
- Release date 23.2.2022.

### 3.0.4

- Brings in latest changes from Design Tokens v2.0.4.
- Release date 8.2.2022.

### 3.0.3

- Brings in latest changes from Design Tokens v2.0.3.
- Release date 13.1.2022.

### 3.0.2

- Brings in latest changes from Design Tokens v2.0.2.
- Release date 9.12.2021.

### 3.0.1

- Brings in latest changes from Design Tokens v2.0.1.
- Release date 4.12.2021.

### 2.0.8

- Adds new `color-surface-raised` style into theming.
- Release date 20.10.2021.

### 2.0.6

- Small bug fixes and feature improvements.
- Updates Nord package dependencies to latest.
- Release date 17.10.2021.

### 2.0.0

- Themes package reaches stable state and is now ready for production usage.
- We’ve reworked all the colors from the ground up.
- Additionally there’re new gradients and box-shadows added.
- We’ve added new dark themes as well, so in total there are now 6 themes included in the package: `nord light`, `nord dark`, `veterinary light`, `veterinary dark`, `healthcare light`, and `healthcare dark`.
- Please see the updated [Themes documentation](https://nordhealth.design/design/themes/) for more details.
- Release date 12.10.2021.

### 1.4.1

- Adds new `box-shadow`, `box-shadow-modal`, `box-shadow-tooltip`, `box-shadow-nav` and `box-shadow-card` tokens.
- Modifies `color-border` and `color-background` and adds new `color-border-dark` for each theme.
- Adds new `color-overlay` token for modal overlays.
- Removes `color-active-menu` token and deprecates it.
- Release date 10.8.2021.

### 1.2.1

- Modifies dark primary color shades.
- Updates all package dependencies to latest.
- Release date 10.6.2021.

### 1.2.0

- This release refactors and renames the different color themes to be `nord`, `health`, and `vet`.
- Simplifies the overall naming for colors.
- Adds Subresource Integrity support (SRI).
- Release date 5.6.2021.

### 1.1.0

- Adds new Nordhealth theme.
- Renames all CSS custom properties to follow new design token structure.
- Release date 15.5.2021.

### 1.0.2

- Adds readme and license into the package.

### 1.0.0

- Initial release of `@nordhealth/themes` which includes **Provet** and **Diarium** themes. For documentation and usage guidelines, please see [themes](https://nordhealth.design/design/themes/).
- Release date 22.2.2021.


# Design Tokens Changelog

\*Nord Design System’s parts are versioned and released using Node Package Manager. NPM’s \[organization page]\(https\://www\.npmjs.com/org/nordhealth) lists all packages available and their most recent versions.\*

## Design Tokens

### 9.0.0 `New`

- Refreshes the navigation and surface color system (NDS-180). Adds `surface-canvas`, `surface-background`, and `nav-selected` tokens; refreshes `nav-hover` and `surface-lowered`; and points `background` at `surface-raised`. Aligns the Veterinary `color-accent` with Nordhealth (light `#3559c7`, dark `#2a469d`, high-contrast `#1d50f7`). Applies across all 8 variants (nord / vet × light / dark / high-contrast / dark-high-contrast). (#670)
- Adds a new `--n-line-height-tightest` token (`1`) that sets line height equal to the font size (no extra leading, equivalent to 100%) — tighter than `--n-line-height-tight`. (#656)
- These changed token values shift existing UIs visually, so this is a major release. No token names were removed, so no code changes are required, but consumers should regenerate their visual-regression baselines.
- Release date 2.7.2026.

### 8.1.0

- Adds a new `--n-font-size-xxs` design token (10px / 0.625rem) for tightly-spaced UI elements such as counters and small badges.
- Release date 16.6.2026.

### 8.0.4 → 8.0.5

- Coupled version bump alongside the main monorepo release; no token source changes.

### 8.0.3

- Fixes the z-index stacking order so that toast messages (`--n-index-toast: 1000`) stack above modals (`--n-index-modal: 900`), ensuring toast notifications remain visible when a modal is open.
- Release date 23.3.2026.

### 8.0.2

- Adds missing TypeScript declaration files (`.d.ts`) for token modules, enabling proper type checking and auto-completion when importing tokens in TypeScript projects.
- Release date 6.3.2026.

### 8.0.0

- **New major release that unifies the two design system platforms into a one platform that can serve all of Nordhealth. This change allows us to better support the next generation of apps and generative AI experiences at Nordhealth.** ✨
- This new version ships with two distinctive brands, [therapy](https://nordhealth.design/?theme=nord) and [veterinary](https://nordhealth.design/?theme=vet). You can choose the currently active brand from the top left corner of this documentation website. Once chosen, you will get content that is tailored specifically for the brand and the business unit you’re working in. [Read more](https://nordhealth.design/migrations/4.0.0/).
- The Design Tokens package now includes veterinary brand colors.
- This release doesn’t include breaking changes for the existing users of Nord Design System.
- For detailed description of all changes and the steps required for migration, please see the [Migration Guide](https://nordhealth.design/migrations/4.0.0/).
- See also the updated [brand theme guidelines](https://nordhealth.design/core/tokens/#accessing-brand-themes-in-javascript-and-sass) in the Design Tokens documentation page.
- Release date 6.5.2025.

### 7.1.2

- Migrates the monorepo to use [pnpm workspaces](https://pnpm.io/workspaces){rel="&#x22;nofollow&#x22;"} instead.
- Release date 24.9.2024.

### 7.1.1

- Updates readme document details.
- Release date 14.6.2024.

### 7.1.0

- Adds new `var(--n-size-top-bar)` [sizing token](https://nordhealth.design/core/tokens/#size) that is used for setting the default height of the [Top Bar component](https://nordhealth.design/components/top-bar/).
- Release date 11.4.2024.

### 7.0.1

- Improves `var(--n-color-nav-hover)` to be more consistent with other colors in the light high contrast theme.
- Release date 31.5.2023.

### 7.0.0

- **New major release that brings [various improvements and bug fixes](https://nordhealth.design/migrations/3.0.0/)!!** ✨🥳
- We’ve improved the underlying [color system](https://nordhealth.design/core/tokens/) to make it more extensible and better cover the use cases of our different products.
- We’ve introduced the following new color tokens:
  - []{.n:border.n:border-strong.n:rounded style="display:inline-block;width:20px;height:20px;background:var(--n-color-text-danger);"} `var(--n-color-text-danger)`
  - []{.n:border.n:border-strong.n:rounded style="display:inline-block;width:20px;height:20px;background:var(--n-color-text-highlight);"} `var(--n-color-text-highlight)`
  - []{.n:border.n:border-strong.n:rounded style="display:inline-block;width:20px;height:20px;background:var(--n-color-text-info);"} `var(--n-color-text-info)`
  - []{.n:border.n:border-strong.n:rounded style="display:inline-block;width:20px;height:20px;background:var(--n-color-text-neutral);"} `var(--n-color-text-neutral)`
  - []{.n:border.n:border-strong.n:rounded style="display:inline-block;width:20px;height:20px;background:var(--n-color-text-neutral-strong);"} `var(--n-color-text-neutral-strong)`
  - []{.n:border.n:border-strong.n:rounded style="display:inline-block;width:20px;height:20px;background:var(--n-color-text-progress);"} `var(--n-color-text-progress)`
  - []{.n:border.n:border-strong.n:rounded style="display:inline-block;width:20px;height:20px;background:var(--n-color-text-warning);"} `var(--n-color-text-warning)`
  - []{.n:border.n:border-strong.n:rounded style="display:inline-block;width:20px;height:20px;background:var(--n-color-text-warning-strong);"} `var(--n-color-text-warning-strong)`
  - []{.n:border.n:border-strong.n:rounded style="display:inline-block;width:20px;height:20px;background:var(--n-color-border-danger);"} `var(--n-color-border-danger)`
  - []{.n:border.n:border-strong.n:rounded style="display:inline-block;width:20px;height:20px;background:var(--n-color-border-highlight);"} `var(--n-color-border-highlight)`
  - []{.n:border.n:border-strong.n:rounded style="display:inline-block;width:20px;height:20px;background:var(--n-color-border-info);"} `var(--n-color-border-info)`
  - []{.n:border.n:border-strong.n:rounded style="display:inline-block;width:20px;height:20px;background:var(--n-color-border-neutral);"} `var(--n-color-border-neutral)`
  - []{.n:border.n:border-strong.n:rounded style="display:inline-block;width:20px;height:20px;background:var(--n-color-border-progress);"} `var(--n-color-border-progress)`
  - []{.n:border.n:border-strong.n:rounded style="display:inline-block;width:20px;height:20px;background:var(--n-color-border-success);"} `var(--n-color-border-success)`
  - []{.n:border.n:border-strong.n:rounded style="display:inline-block;width:20px;height:20px;background:var(--n-color-border-warning);"} `var(--n-color-border-warning)`
  - []{.n:border.n:border-strong.n:rounded style="display:inline-block;width:20px;height:20px;background:var(--n-color-surface-lowered);"} `var(--n-color-surface-lowered)`
  - []{.n:border.n:border-strong.n:rounded style="display:inline-block;width:20px;height:20px;background:var(--n-color-status-notification);"} `var(--n-color-status-notification)`
  - []{.n:border.n:border-strong.n:rounded style="display:inline-block;width:20px;height:20px;background:var(--n-color-accent-secondary);"} `var(--n-color-accent-secondary)`
- For detailed description of all changes, please see [Migration guide](https://nordhealth.design/migrations/3.0.0/).
- Breaking changes are also covered in the [migration guide](https://nordhealth.design/migrations/3.0.0/).
- Release date 19.5.2023.

\[Migration guide]\(/migrations/3.0.0/)

### 6.4.0

- Adds new `var(--n-space-xs)` space token.
- See updated [documentation](https://nordhealth.design/core/tokens/).
- Release date 24.10.2022.

### 6.3.0

- We now export design tokens as ES modules for easier usage and better tree shaking.
- See updated [usage documentation](https://nordhealth.design/core/tokens/#usage).
- Release date 24.10.2022.

### 6.2.0

- Adds new `xs` (10px) and `xxs` (8px) icon sizes which are replacements for the old `xs` size. This is a non-breaking change so no actions are required from your side.
- This is done to improve the rendering of our smallest icons since they now align with the [pixel grid used for icons](https://nordhealth.design/design/foundations/iconography/).
- Release date 16.9.2022.

### 6.1.0

- The small icon dimensions are changed from `11px` to `12px`.
- Release date 9.9.2022.

### 6.0.0

- We’ve redesigned the underlying [color system](https://nordhealth.design/core/tokens/) to make it more extensible and better cover the use cases of our different products.
- The latest version of [Design Tokens](https://nordhealth.design/core/tokens/) introduces a few fundamental changes to the way Nord’s status colors work.
- For more details, please see [migration guidelines](https://nordhealth.design/migrations/2.0.0/).
- Release date 7.9.2022.

\[Migration guidelines]\(/migrations/2.0.0/)

### 5.4.1

- Improves documentation for [Size Design Tokens](https://nordhealth.design/core/tokens/#size).
- Converts `var(--n-size-icon-s)` token from 12px to 11px, so that it looks visually more balanced inside buttons and similar elements.
- Updates all Node.js dependencies to latest.
- Release date 17.8.2022.

### 5.4.0

- Deprecates `n-index-header` and `n-index-dropdown` tokens.
- Adds new `n-index-nav` design token.
- Release date 4.8.2022.

### 5.3.0

- Adds new `nord-high-contrast` theme and related design tokens.
- Adds new `nord-dark-high-contrast` theme and related design tokens.
- Removes old `ui` properties and replaces them with `theme` properties instead.
- Release date 20.6.2022.

### 5.2.1

- Small bug fixed and performance improvements.
- Release date 17.6.2022.

### 5.2.0

- We’ve removed gradients section and skeleton colors, since the new [Skeleton component](https://nordhealth.design/components/skeleton/) does not utilize these anymore.
- Release date 16.6.2022.

### 5.1.0

- Switches to using REM based font-sizes instead of pixels for better accessibility.
- Adds new `n-color-overlay` design token that allows you to distinguish a modal layer from the layer underneath.
- Release date 14.6.2022.

### 5.0.0

- We’re deprecating `health-light`, `health-dark`, `vet-light` and `vet-dark` themes to simplify and unify Nordhealth’s branding for all digital products.
- Release date 20.5.2022.

### 4.2.7

- Adds new `transition-mobile` token for mobile menu transitions. Used in mobile versions of Popout and Dropdown components.
- Release date 11.5.2022.

### 4.2.5

- Darkens the `color-nav-surface` in vet light theme to provide better contrast.
- Release date 2.5.2022.

### 4.2.4

- Adds even stronger border color styles for all light themes.
- Adds new card shadow styles with raised surfaces.
- Release date 12.4.2022.

### 4.2.2

- Converts [border colors in default Nord theme](https://nordhealth.design/core/tokens/?theme=nord) to be stronger to match [Veterinary theme](https://nordhealth.design/core/tokens/?theme=vet) better.
- Adds new less prominent default, card and header [box shadows](https://nordhealth.design/core/tokens/#box-shadow) for all themes.
- Release date 10.4.2022.

### 4.2.0

- Adds new `line-height-caption` token.
- Release date 19.3.2022.

### 4.1.0

- Adds new `color-text-success` token.
- Improves underlying token aliasing.
- Release date 17.3.2022.

### 4.0.0

- We’re renaming `color-primary` to `color-accent` to better support our [themes](https://nordhealth.design/design/themes/).
- We’re renaming `color-text-inverse` to `color-text-on-accent` to better support our [themes](https://nordhealth.design/design/themes/) and better explain where the color should be used.
- We’re removing `color-primary-strong` token from the system as it was only referenced in one location.
- This color is now replaced with CSS filters inside the system which darken the existing `color-primary`.
- Hence all of these are breaking changes, we’re releasing a new major version.
- Release date 14.3.2022.

### 2.2.1

- Updates previous weak status colors with new dark variants.
- Release date 7.3.2022.

### 2.2.0

- Adds new weak status colors into design tokens.
- Release date 5.3.2022.

### 2.1.0

- Redesigned dark gray shades for Vet and Nord dark themes.
- Release date 3.3.2022.

### 2.0.5

- Updates licensing and package.json details.
- Release date 24.2.2022.

### 2.0.4

- We’ve changed tokens output to only include nord light theme, and produce additional tokens output for alternative themes to simplify usage.
- Release date 8.2.2022.

### 2.0.3

- Modifies `color-border-strong` for Nord light theme to match the rest of the themes better.
- Release date 13.1.2022.

### 2.0.2

- Removes `size-icon-input` design token.
- Release date 9.12.2021.

### 2.0.1

- Adds completely new redesigned and more accessible status colors.
- Adds new text weakest color tokens.
- Adds new text error color token.
- Better automatic sorting for tokens behind the scenes.
- Release date 4.12.2021.

### 1.0.8

- Adds new `n-color-surface-raised`, `n-color-surface-raised-dark`, `n-color-surface-raised-vet`, `n-color-surface-raised-vet-dark`, `n-color-surface-raised-health`, `n-color-surface-raised-health-dark` design tokens.
- Fixes order meta data on color tokens.
- Release date 20.10.2021.

### 1.0.6

- Converts z-index and transition design tokens to use more consistent naming.
- Small bug fixes and feature improvements.
- Updates Nord package dependencies to latest.
- Release date 17.10.2021.

### 1.0.0

- Design Tokens package reaches stable state and is now ready for production usage.
- We’ve worked on adding extensive [usage documentation](https://nordhealth.design/core/tokens/#usage) for the design tokens.
- Additionally, we’ve added new z-index, transition, and gradient categories.
- All color themes have been re-designed form the ground up to support dark UI.
- All dropshadows have been re-designed.
- Please see the update [Design Tokens documentation](https://nordhealth.design/core/tokens/) for more details.
- Release date 12.10.2021.

### 1.0.0-alpha.13

- Adds new `box-shadow`, `box-shadow-modal`, `box-shadow-tooltip`, `box-shadow-nav` and `box-shadow-card` tokens.
- Modifies `color-border` and `color-background` and adds new `color-border-dark` for each theme.
- Renames `border-radius-small` to `border-radius-s`.
- Changes default border-radius from 8px to 5px.
- Adds new `color-overlay` token for modal overlays.
- Release date 10.8.2021.

### 1.0.0-alpha.10

- Modifies dark primary color shades.
- Updates all package dependencies to latest.
- Release date 10.6.2021.


# Webfonts Changelog

\*Nord Design System’s parts are versioned and released using Node Package Manager. NPM’s \[organization page]\(https\://www\.npmjs.com/org/nordhealth) lists all packages available and their most recent versions.\*

## Webfonts

### 3.0.3 `New`

- Updates readme document details.
- Release date 6.5.2025.

### 3.0.2

- Migrates the monorepo to use [pnpm workspaces](https://pnpm.io/workspaces){rel="&#x22;nofollow&#x22;"} instead.
- Release date 24.9.2024.

### 3.0.1

- Updates readme document details.
- Release date 14.6.2024.

### 3.0.0

- **New major release that brings [various improvements and bug fixes](https://nordhealth.design/migrations/3.0.0/)!!** ✨🥳
- For detailed description of all changes, please see [Migration guide](https://nordhealth.design/migrations/3.0.0/).
- Release date 19.5.2023.

\[Migration guide]\(/migrations/3.0.0/)

### 2.0.15

- Updates all Node.js dependencies to latest.
- Release date 17.8.2022.

### 2.0.14

- Adds prepare script to fill gaps in `npm run bootstrap` so that components pkg is ready to start immediately after.
- Release date 20.5.2022.

### 2.0.13

- Updates licensing and package.json details.
- Release date 24.2.2022.

### 2.0.12

- Cleans up build dir before build to prevent accidentally publishing old files.
- Release date 23.2.2022.

### 2.0.11

- Updates all library dependencies and migrates to Stylelint 14.
- Release date 11.2.2022.

### 2.0.10

- We’ve removed font CSS from the package, but left the font-face definitions.
- Font CSS is now the responsibility of Nord’s CSS Framework.
- Webfonts package does not depend on design tokens anymore.
- Release date 8.2.2022.

### 2.0.9

- Small bug fixes and feature improvements.
- Release date 4.12.2021.

### 2.0.7

- Small bug fixes and feature improvements.
- Updates Nord package dependencies to latest.
- Release date 20.10.2021.

### 2.0.0

- Webfonts package reaches stable state and is now ready for production usage.
- Please see the updated [Webfonts documentation](https://nordhealth.design/docs/developer/webfonts/) for more details.
- Release date 12.10.2021.

### 1.1.3

- Updates all internal design system package dependencies to latest.
- Release date 10.8.2021.

### 1.1.0

- Unifies the naming of assets and simplifies the package overall.
- Adds base font-feature-settings for different heading levels.
- Adds Subresource Integrity support (SRI).
- Release date 5.6.2021.

### 1.0.4

- Internal improvements and bug fixes.
- Release date 15.5.2021.

### 1.0.3

- Makes `@nordhealth/fonts` package completely independent from `@nordhealth/tokens`.
- Can now be used standalone without any other package from Nord.
- Adds readme and license into the package.
- Release date 11.2.2021.

### 1.0.0

- Initial release of `@nordhealth/fonts` which includes **Nordhealth Sans** and &#x2A;*Nordhealth Mono.**
- For documentation and usage guidelines, please see [Webfonts](https://nordhealth.design/docs/developer/webfonts/).
- Release date 11.2.2021.


# Migration to 1.0.0 Web Components

\*This guide will help you understand how to transition an existing project from using a beta version of Nord Web Components to using the official 1.0.0 production version.\*

### Updating package.json and dependencies

The first step towards migrating to the latest Nord Web Components is to update `package.json` with the necessary dependencies. You should:

- Update existing `@nordhealth/components` to `1.0.0`.
- If using React, update `@nordhealth/react` to `1.0.0`.
- Install the latest `@nordhealth/css` package.

Here’s an example `package.json`:

```json
{
  "dependencies": {
    "@nordhealth/components": "^1.0.0",
    "@nordhealth/css": "^1.0.4"
  }
}
```

### Localizing the components

Nord now provides a lightweight solution for localizing its components. Not all components need localizing, as for the most part snippets of text are set per instance. For example, the label on an [Input](https://nordhealth.design/components/input) will likely be changed every time you use it. Those cases are an app-level concern.

However, some components have text which has no reason to change per instance. For example, the usage instructions in the footer of the [Command menu](https://nordhealth.design/components/command-menu/), or the accessible labels for next/previous month buttons of the [Calendar](https://nordhealth.design/components/calendar/).

For the latter cases, we provide a new [localization mechanism](https://nordhealth.design/docs/developer/localization/). It is not possible or feasible for Nord to anticipate every locale in which the components might be consumed, so we rely on individual teams and applications to translate and configure localization. To ensure Nord components work out of the box, we bundle translations for `en-US`.

\[Localization guidelines]\(/docs/developer/localization/)

### Removing unnecessary localization

We now utilize browser’s built-in localizations for [Calendar](https://nordhealth.design/components/calendar/) and [Date Picker](https://nordhealth.design/components/nord/) in Nord so there’s no need to translate the month, day, and similar names anymore. If you were previously using code similar to this to translate the Date Picker:

```js
datePicker.localization = {
  buttonLabel: 'Valitse päivämäärä',
  selectedDateMessage: 'Valittu päivämäärä on',
  prevMonthLabel: 'Edellinen kuukausi',
  nextMonthLabel: 'Seuraava kuukausi',
  monthSelectLabel: 'Kuukausi',
  yearSelectLabel: 'Vuosi',
  closeLabel: 'Sulje ikkuna',
  calendarHeading: 'Valitse päivämäärä',
  dayNames: ['Sunnuntai', 'Maanantai', 'Tiistai', 'Keskiviikko', 'Torstai', 'Perjantai', 'Lauantai'],
  monthNames: [
    'Tammikuu',
    'Helmikuu',
    'Maaliskuu',
    'Huhtikuu',
    'Toukokuu',
    'Kesäkuu',
    'Heinäkuu',
    'Elokuu',
    'Syyskuu',
    'Lokakuu',
    'Marraskuu',
    'Joulukuu',
  ],
  monthNamesShort: [
    'Tammi',
    'Helmi',
    'Maalis',
    'Huhti',
    'Touko',
    'Kesä',
    'Heinä',
    'Elo',
    'Syys',
    'Loka',
    'Marras',
    'Joulu',
  ],
  locale: 'fi-FI',
}
```

You can now remove it and follow our [localization guidelines](https://nordhealth.design/docs/developer/localization/) instead to create the necessary translations for Calendar and Date Picker:

```js
export default {
  '$lang': 'fi',
  '$name': 'Suomi',
  '$dir': 'ltr',

  'nord-calendar': {
    prevMonthLabel: 'Edellinen kuukausi',
    nextMonthLabel: 'Seuraava kuukausi',
    monthSelectLabel: 'Kuukausi',
    yearSelectLabel: 'Vuosi',
  },

  'nord-date-picker': {
    modalHeading: 'Valitse päivämäärä',
    closeLabel: 'Sulje ikkuna',
    buttonLabel: 'Valitse päivämäärä',
    selectedDateMessage: 'Valittu päivämäärä on',
  },
}
```

### Defining types for event handlers

If you’re using our [React components](https://nordhealth.design/docs/developer/web-components/#react), the types for event handlers no longer need to be defined like this:

```tsx
// TS complained unless you had a union of both types
function handleChange(e: FormEvent | Event) {}

<Input onChange={handleChange} />
```

In the latest `1.0.0` version, you can define them as:

```tsx
function handleChange(e: Event) {}

<Input onChange={handleChange} />
```

### Using new named slots

Our team has worked on unifying the naming of properties, slots, and similar in the system and some of these changes are not backwards compatible. If you were previously using the `action` slot in Header component, it has now been renamed to `end` to match the naming conventions we use elsewhere. So if you previously had this:

```html
<nord-header>
  <nord-button slot="action">Export</nord-button>
</nord-header>
```

You should now rename the `action` slot to `end` instead:

```html
<nord-header>
  <nord-button slot="end">Export</nord-button>
</nord-header>
```

Similarly, any slots that were previously called `before` and `after`, are now renamed to `start` and `end` in each component.

### Stack component wrapping

We’ve improved the [Stack component](https://nordhealth.design/components/stack/) in the latest release, and with this, comes one breaking change. Previously, Stack would automatically allow its items to flow into multiple lines, but we’ve changed this to be opt-in instead to give a finer level of control to our users.

If you previously had this and wanted the items to wrap automatically depending on the viewport size:

```html
<nord-stack>
  <div></div>
  <div></div>
</nord-stack>
```

You need to now explicitly use a property called `wrap` to enable the same behaviour:

```html
<nord-stack wrap>
  <div></div>
  <div></div>
</nord-stack>
```

---

## Getting support

Have a question about migration? Please head over to the [Support page](https://nordhealth.design/resources/support/) for more guidelines and ways to contact us.


# Migration to 2.0.0 Web Components

\*This guide will help you understand how to transition an existing project from using an older version of Nord Web Components to using the latest 2.0.0 version.\*

### Updating package.json and dependencies

The first step towards migrating to the latest Nord packages is to update `package.json` with the necessary dependencies. You should:

- Update existing `@nordhealth/css` to `2.0.0`.
- Update existing `@nordhealth/themes` to `7.0.0`.
- If using Design Tokens directly, update `@nordhealth/tokens` to `6.0.0`.
- If using Web Components, update `@nordhealth/components` to `2.0.0`.
- If using React Components, update `@nordhealth/react` to `2.0.0`.

Here’s an example `package.json`:

```json
{
  "dependencies": {
    "@nordhealth/css": "^2.0.0",
    "@nordhealth/themes": "^7.0.0",
    "@nordhealth/components": "^2.0.0"
  }
}
```

---

## Changes to status colors

We’ve redesigned the underlying [color system](https://nordhealth.design/core/tokens/) to make it more extensible and better cover the use cases of our different products. The latest version of [Design Tokens](https://nordhealth.design/core/tokens/) introduces a few fundamental changes to the way Nord’s status colors work. If you were previously using any of the following design tokens directly:

- **Color Status Warning:** `var(--n-color-status-warning)`
- **Color Status Highlight:** `var(--n-color-status-highlight)`
- **Color Status Info:** `var(--n-color-status-info)`

You may now need to replace them with:

- **Color Status Warning:** The orange color doesn’t exist anymore since it didn’t provide enough contrast between the yellow and red we already use. For this reason, we’ve replaced the old `var(--n-color-status-warning)` with yellow color. No changes are required from your team, but you might have to communicate to your users about the status color changes in the [Badge component](https://nordhealth.design/components/badge/). The previous hex code for the orange was `#f9821a`.
- **Color Status Highlight:** This functional highlight color has been changed from yellow to purple. If you’re using `var(--n-color-status-highlight)` for illustrative purposes and your product relies on it being yellow, you should search and replace all instances of `var(--n-color-status-highlight)` with `var(--n-color-status-warning)`. On the other hand, if you’re using this color to indicate status in the product, no change is needed in addition to updating the package. Please note that you should communicate to your users about the status color changes in the [Badge component](https://nordhealth.design/components/badge/).
- **Color Status Info:** This functional info color has been changed from purple to our accent blue. If you’re using `var(--n-color-status-info)` for illustrative purposes and your product relies on it being purple, you should search and replace all instances of `var(--n-color-status-info)` with `var(--n-color-status-highlight)`. On the other hand, if you’re using this color to indicate status in the product, no change is needed in addition to updating the package. Please note that you should communicate to your users about the status color changes in the [Badge component](https://nordhealth.design/components/badge/).

![Status colors](https://nordhealth.design/img/colors/6.png){.n:border loading="lazy" style="border-radius: var(--n-border-radius)"}

---

## Changes to Badge component

This release changes the way our [Badge component](https://nordhealth.design/components/badge) works and may require you to communicate to your users about the status color changes and what is expected. The main difference is that we’ve switched away from white badges with tiny circular indicators to more noticeable badge style with colored background. The main differences are:

- There’s now a much more clear scale for positive and negative Badge statuses that [can be seen here](https://nordhealth.design/components/badge/?example=scale).
- Badge component’s default style has been changed from `info` to `neutral`. If you rely on the default badge style being blue, please add `type="info"` to each instance of the component.
- Highlight color is now purple instead of the slightly negative yellow it used to be. If you need the yellow style, use `type="warning"` instead.
- The redesigned Badge component also introduces a new way to indicate progress in addition to status. [Please see an example](https://nordhealth.design/components/badge/?example=progress).
- Overall, we’ve done this change to make the badges more prominent and to provide more options for our product teams to indicate status in addition to progress.

![Badge component](https://nordhealth.design/img/updates/badges.png){.n:border loading="lazy" style="max-width: 188px; border-radius: var(--n-border-radius)"}

---

## Changes to Button component

Nord’s [Button component](https://nordhealth.design/components/button/) now automatically sets the correct icon color for each style variant so that you don’t have to do this manually anymore. We’ve done this to improve the developer experience and simplify the usage. This is a non-breaking change and requires no changes from your side.

![Button component](https://nordhealth.design/img/updates/buttons.png){.n:border loading="lazy" style="max-width: 587px; border-radius: var(--n-border-radius)"}

---

## Introducing CSS Custom Properties API

Our Web Components now offer CSS custom properties to allow for fine grained control over their presentation. These aren’t offered as an alternative to [properties](https://nordhealth.design/docs/developer/web-components/#properties), you should use properties whenever possible, but more as an “escape hatch” for when a component needs to meet an edge case.

Component custom properties are prefixed with `--n-` followed by the name of the component and the property in question. For example consider this `nord-banner` component that we want to add a `box-shadow` to:

\> \[!WARNING]
\> Default banner presentation
\> \[!WARNING]
\> Banner with the box-shadow added

Custom properties are inheritable as well which means they can be applied to any parent, or even the `:root` element, and their respective component will inherit the value(s).

\> \[!NOTE]
\> Example banner
\> \[!WARNING]
\> Example banner
\> \[!WARNING]
\> Example banner

You can see all the available custom properties for the banner component on [its respective docs page](https://nordhealth.design/components/banner/?example=inside+card#css-properties). Custom properties differ from component to component, refer to the component’s documentation for a complete list of available custom properties.

\> \[!WARNING]
\> Always use a component's properties over a CSS custom property wherever possible. CSS Custom properties are built with a counterpart "private" property, prefixed with \`--\_n-\`. Please refrain from using private properties as they are always subject to change and intended for internal component use only.

---

## Getting support

Have a question about migration? Please head over to the [Support page](https://nordhealth.design/resources/support/) for more guidelines and ways to contact us.


# Migration to 3.0.0 Web Components

\*This guide will help you understand how to transition an existing project from using an older version of Nord Web Components to using the latest 3.0.0 version.\*

## What’s changing?

This release brings major changes and improvements to [Nord Design System](https://nordhealth.design) to better support the needs of feature teams and various products using Nord. The main difference is the introduction of a new [Layout](https://nordhealth.design/components/layout/) and [Top Bar](https://nordhealth.design/components/top-bar/) component which now allow functionality such as search and contextual menus to be placed at the top of the interface instead of the [Navigation menu](https://nordhealth.design/components/navigation/).

We’ve also improved the underlying [color system](https://nordhealth.design/core/tokens/) to make it more extensible and better cover the use cases of our different products. This release utilizes the new color system and brings many new styles and variants to components such as [Badge](https://nordhealth.design/components/badge/) and [Banner](https://nordhealth.design/components/banner/).

While the color system updates introduce some breaking changes, we’ve covered those further down on this page. Most other changes have been kept backwards compatible, and we still support the old style layout as well. Not all of our products need the additional top bar or more advanced utilities, so you can keep using the current layout that your users are already familiar with.

![Comparison of changes in the release](https://nordhealth.design/img/migrations/diff.png){height="1037" style="margin-bottom: 0;" width="2809"}

---

## Breaking changes

Below you can find an overview of the breaking changes in this major release. You can view more details about each specific change further down this page, or by clicking one of the “more details” links.

### @nordhealth/components

- #### Badge:
  - We've deprecated the `type` property, replacing it with a new `variant` property, [more details](https://nordhealth.design/#changes-to-badge-component).
  - The `progress` property has been removed, [more details](https://nordhealth.design/#changes-to-badge-component).
- #### Button:
  - Variant `switch` has been removed, [more details](https://nordhealth.design/#deprecated-features-being-removed).
- #### Layout:
  - `navToggle` property has been removed, [more details](https://nordhealth.design/#deprecated-features-being-removed).
  - Background color has been changed from white to gray, [more details](https://nordhealth.design/#changes-to-background-colors).
- #### Stack:
  - `responsive` property has been removed, [more details](https://nordhealth.design/#deprecated-features-being-removed).

### @nordhealth/tokens

- All status colors have been modified, [more details](https://nordhealth.design/#changes-to-design-tokens).
- `var(--n-color-background)`, `var(--n-color-nav-surface)` and `var(--n-color-nav-hover)` have been modified, [more details](https://nordhealth.design/#changes-to-design-tokens).

### @nordhealth/css

- All status colors have been modified, [more details](https://nordhealth.design/#changes-to-design-tokens).
- `var(--n-color-background)`, `var(--n-color-nav-surface)` and `var(--n-color-nav-hover)` have been modified, [more details](https://nordhealth.design/#changes-to-design-tokens).
- `.n-stack` and `.n-gap` now have a gap of `var(--n-space-m)`, [more details](https://nordhealth.design/#changes-to-css-framework).

### @nordhealth/themes

- All status colors have been modified, [more details](https://nordhealth.design/#changes-to-design-tokens).
- `var(--n-color-background)`, `var(--n-color-nav-surface)` and `var(--n-color-nav-hover)` have been modified, [more details](https://nordhealth.design/#changes-to-design-tokens).

---

## Updating package.json and dependencies

The first step towards migrating to the latest Nord packages is to update `package.json` with the necessary dependencies. You should:

- Update existing `@nordhealth/css` to `3.0.0`.
- Update existing `@nordhealth/themes` to `8.0.0`.
- If using Design Tokens directly, update `@nordhealth/tokens` to `7.0.0`.
- If using Nordicons directly, update `@nordhealth/icons` to `3.0.0`.
- If using Web Components, update `@nordhealth/components` to `3.0.0`.
- If using React Components, update `@nordhealth/react` to `3.0.0`.
- If using Vue, install the latest `@nordhealth/vue` for improved TypeScript support. [Read more about this experimental feature](https://nordhealth.design/#new-vue-types-and-editor-integration).

Here’s an example `package.json`:

```json
{
  "dependencies": {
    "@nordhealth/css": "^3.0.0",
    "@nordhealth/themes": "^8.0.0",
    "@nordhealth/components": "^3.0.0"
  }
}
```

---

## New internal color scales

Each internal color scale in Nord now has 12 steps. Each step was designed with a specific use case in mind. It is worth noting that the table below is a simplified overview of the most common use cases we have internally in the system. Most of the colors listed below aren’t surfaced directly in our [Design Tokens API](https://nordhealth.design/core/tokens/), as we want to keep the usage of color tied to specific color roles to keep this simple for the consumers of the system.

<table class="small">
  <thead>
    <tr>
      <th width="10%">Step</th>
      <th>Use case</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Surface: App background</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Surface: Subtle background</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Component: UI element background</td>
    </tr>
    <tr>
      <td>4</td>
      <td>Component: Hovered UI element background</td>
    </tr>
    <tr>
      <td>5</td>
      <td>Component: Active / Selected UI element background</td>
    </tr>
    <tr>
      <td>6</td>
      <td>Border: Subtle borders and separators</td>
    </tr>
    <tr>
      <td>7</td>
      <td>Border: UI element border and focus rings</td>
    </tr>
    <tr>
      <td>8</td>
      <td>Border: Hovered UI element border</td>
    </tr>
    <tr>
      <td>9</td>
      <td>Fill: Solid backgrounds</td>
    </tr>
    <tr>
      <td>10</td>
      <td>Fill: Hovered solid backgrounds</td>
    </tr>
    <tr>
      <td>11</td>
      <td>Text: Low-contrast text</td>
    </tr>
    <tr>
      <td>12</td>
      <td>Text: High-contrast text</td>
    </tr>
  </tbody>
</table>

![Light theme](https://nordhealth.design/img/migrations/light-theme.png){height="1008" style="margin-bottom: 0;" width="1890"}

---

## Improvements to theming

For applications that utilize the new [Top Bar component](https://nordhealth.design/components/top-bar/), Nord now provides slightly more control over the visual appearance. In addition to the existing `var(--n-color-accent)`, we now also provide a new secondary supporting color named `var(--n-color-accent-secondary)`. This token can be used to customize the background color of the top bar and navigation header:

![Nord theme](https://nordhealth.design/img/migrations/theming.png){height="1776" width="2536"}

To get started using this feature, add the following styles and replace `{color}` with custom hex values that provide at least 4.5:1 contrast ratio against white text:

```html
<style>
  :root {
    /* CUSTOM ACCENT COLORS */
    --n-color-accent: {color};
    --n-color-accent-secondary: {color};
  }
</style>
```

You can view a live example in our [Layout component docs](https://nordhealth.design/components/layout/?example=theming). To get more control over the theming and text colors, [please see themes documentation](https://nordhealth.design/design/themes).

\> \[!WARNING]
\> \*\*Good to know:\*\* By default, the \`var(--n-color-accent-secondary)\` aliases \`var(--n-color-accent)\` to provide good defaults for those who want to keep the theming simple.

\[View documentation]\(/design/themes/)

---

## Changes to design tokens

We’ve improved the underlying [color system](https://nordhealth.design/core/tokens/) to make it more extensible and better cover the use cases of our different products. If you were previously using any of the following design tokens directly:

- []{.n:border.n:border-strong.n:rounded style="display:inline-block;width:20px;height:20px;background:var(--n-color-background);"} &#x2A;*Color Background:** `var(--n-color-background)`
- []{.n:border.n:border-strong.n:rounded style="display:inline-block;width:20px;height:20px;background:var(--n-color-nav-surface);"} &#x2A;*Color Nav Surface:** `var(--n-color-nav-surface)`
- []{.n:border.n:border-strong.n:rounded style="display:inline-block;width:20px;height:20px;background:var(--n-color-nav-hover);"} &#x2A;*Color Nav Hover:** `var(--n-color-nav-hover)`
- []{.n:border.n:border-strong.n:rounded style="display:inline-block;width:20px;height:20px;background:var(--n-color-status-neutral);"} &#x2A;*Color Status Neutral:** `var(--n-color-status-neutral)`
- []{.n:border.n:border-strong.n:rounded style="display:inline-block;width:20px;height:20px;background:var(--n-color-status-neutral-weak);"} &#x2A;*Color Status Neutral Weak:** `var(--n-color-status-neutral-weak)`
- []{.n:border.n:border-strong.n:rounded style="display:inline-block;width:20px;height:20px;background:var(--n-color-status-warning-weak);"} &#x2A;*Color Status Warning Weak:** `var(--n-color-status-warning-weak)`
- []{.n:border.n:border-strong.n:rounded style="display:inline-block;width:20px;height:20px;background:var(--n-color-status-highlight-weak);"} &#x2A;*Color Status Highlight Weak:** `var(--n-color-status-highlight-weak)`
- []{.n:border.n:border-strong.n:rounded style="display:inline-block;width:20px;height:20px;background:var(--n-color-status-danger-weak);"} &#x2A;*Color Status Danger Weak:** `var(--n-color-status-danger-weak)`
- []{.n:border.n:border-strong.n:rounded style="display:inline-block;width:20px;height:20px;background:var(--n-color-status-success-weak);"} &#x2A;*Color Status Success Weak:** `var(--n-color-status-success-weak)`
- []{.n:border.n:border-strong.n:rounded style="display:inline-block;width:20px;height:20px;background:var(--n-color-status-info-weak);"} &#x2A;*Color Status Info Weak:** `var(--n-color-status-info-weak)`
- []{.n:border.n:border-strong.n:rounded style="display:inline-block;width:20px;height:20px;background:var(--n-color-status-progress-weak);"} &#x2A;*Color Status Progress Weak:** `var(--n-color-status-progress-weak)`

**You now might need to replace them with:**

- []{.n:border.n:border-strong.n:rounded style="display:inline-block;width:20px;height:20px;background:var(--n-color-background);"} &#x2A;*Color Background:** This color has been changed to gray instead of white. If you rely on it being white, you should search and replace all instances of `var(--n-color-background)` with `var(--n-color-surface)`. To make sure you don't break the theming of the app, please consult the design system team first before doing this change.
- []{.n:border.n:border-strong.n:rounded style="display:inline-block;width:20px;height:20px;background:var(--n-color-nav-surface);"} &#x2A;*Color Nav Surface:** This color has been changed to white instead of gray. If you rely on it being gray, you should search and replace all instances of `var(--n-color-nav-surface)` with `var(--n-color-background)`. To make sure you don't break the theming of the app, please consult the design system team first before doing this change.
- []{.n:border.n:border-strong.n:rounded style="display:inline-block;width:20px;height:20px;background:var(--n-color-nav-hover);"} &#x2A;*Color Nav Hover:** This color has been changed to a less prominent gray. If the contrast is an issue, you should search and replace all instances of `var(--n-color-nav-hover)` with `var(--n-color-surface-lowered)`.
- []{.n:border.n:border-strong.n:rounded style="display:inline-block;width:20px;height:20px;background:var(--n-color-status-neutral);"} &#x2A;*Color Status Neutral:** Please note that this color has been changed from mid gray to white.
- []{.n:border.n:border-strong.n:rounded style="display:inline-block;width:20px;height:20px;background:var(--n-color-status-neutral-weak);"} &#x2A;*Color Status Neutral Weak:** This color has been changed to a less prominent color. If the contrast is an issue, you should search and replace all instances of `var(--n-color-status-neutral-weak)` with `var(--n-color-border-neutral)`.
- []{.n:border.n:border-strong.n:rounded style="display:inline-block;width:20px;height:20px;background:var(--n-color-status-warning-weak);"} &#x2A;*Color Status Warning Weak:** This color has been changed to a less prominent color. If the contrast is an issue, you should search and replace all instances of `var(--n-color-status-warning-weak)` with `var(--n-color-border-warning)`.
- []{.n:border.n:border-strong.n:rounded style="display:inline-block;width:20px;height:20px;background:var(--n-color-status-highlight-weak);"} &#x2A;*Color Status Highlight Weak:** This color has been changed to a less prominent color. If the contrast is an issue, you should search and replace all instances of `var(--n-color-status-highlight-weak)` with `var(--n-color-border-highlight)`.
- []{.n:border.n:border-strong.n:rounded style="display:inline-block;width:20px;height:20px;background:var(--n-color-status-danger-weak);"} &#x2A;*Color Status Danger Weak:** This color has been changed to a less prominent color. If the contrast is an issue, you should search and replace all instances of `var(--n-color-status-danger-weak)` with `var(--n-color-border-danger)`.
- []{.n:border.n:border-strong.n:rounded style="display:inline-block;width:20px;height:20px;background:var(--n-color-status-success-weak);"} &#x2A;*Color Status Success Weak:** This color has been changed to a less prominent color. If the contrast is an issue, you should search and replace all instances of `var(--n-color-status-success-weak)` with `var(--n-color-border-success)`.
- []{.n:border.n:border-strong.n:rounded style="display:inline-block;width:20px;height:20px;background:var(--n-color-status-info-weak);"} &#x2A;*Color Status Info Weak:** This color has been changed to a less prominent color. If the contrast is an issue, you should search and replace all instances of `var(--n-color-status-info-weak)` with `var(--n-color-border-info)`.
- []{.n:border.n:border-strong.n:rounded style="display:inline-block;width:20px;height:20px;background:var(--n-color-status-progress-weak);"} &#x2A;*Color Status Progress Weak:** This color has been changed to a less prominent color. If the contrast is an issue, you should search and replace all instances of `var(--n-color-status-progress-weak)` with `var(--n-color-border-progress)`.

---

## New color tokens in CSS Framework

We’ve introduced the following new color tokens into [Design Tokens](https://nordhealth.design/core/tokens/) and [CSS Framework](https://nordhealth.design/docs/developer/css-framework/):

- []{.n:border.n:border-strong.n:rounded style="display:inline-block;width:20px;height:20px;background:var(--n-color-text-danger);"} `var(--n-color-text-danger)`
- []{.n:border.n:border-strong.n:rounded style="display:inline-block;width:20px;height:20px;background:var(--n-color-text-highlight);"} `var(--n-color-text-highlight)`
- []{.n:border.n:border-strong.n:rounded style="display:inline-block;width:20px;height:20px;background:var(--n-color-text-info);"} `var(--n-color-text-info)`
- []{.n:border.n:border-strong.n:rounded style="display:inline-block;width:20px;height:20px;background:var(--n-color-text-neutral);"} `var(--n-color-text-neutral)`
- []{.n:border.n:border-strong.n:rounded style="display:inline-block;width:20px;height:20px;background:var(--n-color-text-neutral-strong);"} `var(--n-color-text-neutral-strong)`
- []{.n:border.n:border-strong.n:rounded style="display:inline-block;width:20px;height:20px;background:var(--n-color-text-progress);"} `var(--n-color-text-progress)`
- []{.n:border.n:border-strong.n:rounded style="display:inline-block;width:20px;height:20px;background:var(--n-color-text-warning);"} `var(--n-color-text-warning)`
- []{.n:border.n:border-strong.n:rounded style="display:inline-block;width:20px;height:20px;background:var(--n-color-text-warning-strong);"} `var(--n-color-text-warning-strong)`
- []{.n:border.n:border-strong.n:rounded style="display:inline-block;width:20px;height:20px;background:var(--n-color-border-danger);"} `var(--n-color-border-danger)`
- []{.n:border.n:border-strong.n:rounded style="display:inline-block;width:20px;height:20px;background:var(--n-color-border-highlight);"} `var(--n-color-border-highlight)`
- []{.n:border.n:border-strong.n:rounded style="display:inline-block;width:20px;height:20px;background:var(--n-color-border-info);"} `var(--n-color-border-info)`
- []{.n:border.n:border-strong.n:rounded style="display:inline-block;width:20px;height:20px;background:var(--n-color-border-neutral);"} `var(--n-color-border-neutral)`
- []{.n:border.n:border-strong.n:rounded style="display:inline-block;width:20px;height:20px;background:var(--n-color-border-progress);"} `var(--n-color-border-progress)`
- []{.n:border.n:border-strong.n:rounded style="display:inline-block;width:20px;height:20px;background:var(--n-color-border-success);"} `var(--n-color-border-success)`
- []{.n:border.n:border-strong.n:rounded style="display:inline-block;width:20px;height:20px;background:var(--n-color-border-warning);"} `var(--n-color-border-warning)`
- []{.n:border.n:border-strong.n:rounded style="display:inline-block;width:20px;height:20px;background:var(--n-color-surface-lowered);"} `var(--n-color-surface-lowered)`
- []{.n:border.n:border-strong.n:rounded style="display:inline-block;width:20px;height:20px;background:var(--n-color-status-notification);"} `var(--n-color-status-notification)`
- []{.n:border.n:border-strong.n:rounded style="display:inline-block;width:20px;height:20px;background:var(--n-color-accent-secondary);"} `var(--n-color-accent-secondary)`

---

## Changes to CSS Framework

`.n-stack` and `.n-gap` now have a gap of `var(--n-space-m)` by default instead of `none`, to mirror the [Stack component’s](https://nordhealth.design/components/stack/) default behaviour.

![Stack utilities](https://nordhealth.design/img/migrations/stack.png){height="244" style="max-width:677px;margin-bottom:0;" width="1354"}

\[View documentation]\(/core/css/)

---

## Changes to Badge component

This release changes the way our [Badge component](https://nordhealth.design/components/badge) works and may require you to communicate to your users about the changes and what is expected:

- We've deprecated the `type` property. This will be removed entirely in a future version.
- We've introduced a new `variant` property as a replacement for `type`. This makes the Badge component more consistent with other components.
- We’ve removed the `progress` style variant to simplify usage. Please replace with `info` variant instead where needed.
- The `progress` property has been removed. Please use icons directly inside badge’s new `icon` slot instead for this purpose. [View an example](https://nordhealth.design/components/badge/?example=progress).
- Badge component now allows any icons inside of it. There is a new slot called `icon` for this purpose. Please note though that you should only use the small variants of icons. [View an example](https://nordhealth.design/components/badge/?example=with+icon).
- Badge component has a new `strong` style that can be used with any badge variant. [View an example](https://nordhealth.design/components/badge/?example=strong).

\`Neutral\`
\`Danger\`
\`Warning\`
\`Success\`
\`Info\`
\`Highlight\`

---

## Changes to Banner component

Nord’s [Banner component](https://nordhealth.design/components/button/) has an improved visual style which uses the newly introduced design tokens and status colors. This is a non-breaking change and requires no changes from your side. New style looks like this:

\> \[!NOTE]
\> We’ve updated your plan, make sure you know how these changes affect it.
\> \[Learn more]\(#).
\> \[!WARNING]
\> We’re experiencing an incident. Please see our \[status page]\(#) for more details.
\> \[!WARNING]
\> Payment details missing. To stay on your current plan, \[add payment details]\(#).
\> \[!TIP]
\> Your order has been shipped and will arrive on May 27th. \[Track order]\(#).

---

## Changes to Navigation component

We’ve updated [Navigation component’s](https://nordhealth.design/components/navigation/?example=complex) styles and [theming functionality](https://nordhealth.design/theme-builder/) to match new designs and added a new “auto-collapsing” behavior: When a [Nav Item](https://nordhealth.design/components/nav-item/) is marked as `active`, its ancestors are opened, and any others are closed.

- **Example 1:** [Navigation component docs](https://nordhealth.design/components/navigation/?example=complex)
- **Example 2:** [Application template](https://nordhealth.design/templates/application/)

![Nord navigation](https://nordhealth.design/img/migrations/navigation.png){height="1768" style="max-width:425px" width="850"}

Additionally, this release includes:

- Adds new custom property `--n-navigation-background-color` to control the background color of the navigation element.

---

## Changes to Layout component

There are multiple changes to the Layout component:

- The Layout component now has a new `top-bar` slot for the new [Top Bar component](https://nordhealth.design/components/top-bar/). Please note this is still in draft stage, and we will be soon introducing more features such as search, notifications and tasks functionality to fully utilize this component.
- Adds new collapse button to make collapsing nav easier and more obvious.
- Adds new `var(--n-color-accent-secondary)` token to control the top bar and navigation header color, [view an example](https://nordhealth.design/components/layout/?example=theming). Please note that by default, this token aliases the `var(--n-color-accent)`.
- We’ve removed the deprecated `nav-toggle` property.
- Border radius is now correctly removed from Tab Group when sticky.
- Improvements to mobile navigation and desktop “peek navigation” mode.
- Improved theming capabilities, which allow you to separately set accent and top bar colors.

![Nord theme](https://nordhealth.design/img/migrations/theming.png){height="1776" width="2536"}

---

## Changes to Avatar component

Nord’s [Avatar component](https://nordhealth.design/components/layout/) has an improved visual style, which uses a slightly cooler gray instead of the previous warm gray. This release also adds a new custom property `--n-avatar-box-shadow` to the Avatar component that allows developers to control the box-shadow around the avatar.

---

## Changes to Button and Input components

We’ve adjusted the small size of Nord’s [Button component](https://nordhealth.design/components/button/), [Input component](https://nordhealth.design/components/input/) and [Select component](https://nordhealth.design/components/select/) to better match with the latest visual changes and the new [Top Bar component](https://nordhealth.design/components/top-bar/). The new height for these components is `28px`:

Default
Primary
Danger
Filter
Plain
Disabled

Additionally, this release includes:

- Fixes issues where some custom properties on the Button component would not be inherited correctly.
- Adds new custom property `--n-button-toggle-icon-color` to the Button component to control toggle icon color.

---

## Changes to background colors

Nord’s [Layout component](https://nordhealth.design/components/layout/) has an improved visual style, which uses gray instead of white as the background color for the main content area. This change was introduced to provide better visual separation between blocks of content. This change also prepares the design system parts for new upcoming components such as the Top Bar:

- If your app relies heavily on the sidebar navigation being gray and the background being white, we’ve added an example on how to keep the existing behavior: [View an example](https://nordhealth.design/components/layout/?example=custom+surface+and+background).

![Nord layout theming example](https://nordhealth.design/img/migrations/layout.png){height="1758" width="2470"}

---

## Changes to Error states

Nord’s [error states](https://nordhealth.design/components/dropdown/?example=badge+as+toggle) have an improved visual style which use much more prominent and vibrant error colors:

---

## Badge as dropdown toggle

We’ve [added a new example](https://nordhealth.design/components/dropdown/?example=badge+as+toggle) which demonstrates how to use a badge inside a dropdown toggle to allow the user to change the status of an object:

\`Discharged\`
Waiting for consultation
Consultation
Arrived
Upcoming
Cancelled

---

## New icons

This release introduces 13 new icons called `interface-warning-small`, `file-invoice`, `file-patient-records`, `file-treatment-plan`, `generic-company`, `generic-farm`, `generic-hospital`, `medical-drip`, `medical-neutered`, `medical-spayed`, `medical-surgery`, `navigation-finances`, `navigation-reports-2`:

---

## New Top Bar component

This release introduces a new [Top Bar component](https://nordhealth.design/components/top-bar/). Please note this is still in draft stage, and we will be soon introducing more features such as search, notifications and tasks functionality to fully utilize this component.

![Nord top bar component](https://nordhealth.design/img/migrations/top-bar.png){height="1776" width="2734"}

---

## New notification color

We’ve changed the notification indicator color from yellow to red:

![Nord notification](https://nordhealth.design/img/migrations/notification.png){height="112" style="max-width: 277px;" width="554"}

---

## Update themes

We’ve reworked and updated each [Nord theme](https://nordhealth.design/design/themes/) with new colors:

- Nord light theme (default)
- Nord dark theme
- Nord high contrast light theme
- Nord high contrast dark theme

![Nord Themes](https://nordhealth.design/img/themes.png){height="1433" width="2269"}

---

## New Vue types and editor integration

Nord's components work out of the box with Vue, but they don't provide any TypeScript support or editor integration. To improve the developer experience, we now offer the `@nordhealth/vue` package. This package *only* contains types and no code.

To integrate these into your project, install `@nordhealth/components` as you normally would, along with `@nordhealth/vue`. Then add the following to your `tsconfig.json` in a TypeScript project, or `jsconfig.json` in a JavaScript project:

```json
{
  "compilerOptions": {
    "types": ["@nordhealth/vue"]
  }
}
```

Now you will get full type checking and auto-completion in your Vue templates.

\> \[!WARNING]
\> Note: to use components you should still import from the \`@nordhealth/components\` package.

---

## Changes to Command Menu

We’ve moved the `placeholder` prop to a localization string instead. This change was done to simplify translation for this component, as the rest of translations are set through localization strings. There is a new example added which shows how you can integrate the Nord translations with a localization framework by writing a wrapper around it.

\[View localization docs]\(/docs/developer/localization/#localization-framework-integration)

---

## Updated dependencies

We’ve updated all Nord Design System package dependencies to the latest versions, including the following:

- [Lit](https://www.npmjs.com/package/lit){rel="&#x22;nofollow&#x22;"}: updated to version `2.7.4`
- [@lit-labs/react](https://www.npmjs.com/package/@lit-labs/react){rel="&#x22;nofollow&#x22;"}: updated to version `1.1.1`
- [@floating-ui/dom](https://www.npmjs.com/package/@floating-ui/dom){rel="&#x22;nofollow&#x22;"}: updated to version `1.2.7`
- [TypeScript](https://www.npmjs.com/package/typescript){rel="&#x22;nofollow&#x22;"}: updated to version `5.0.4`

---

## Getting support

Have a question about migration to `3.0.0`? Please head over to the [Support page](https://nordhealth.design/resources/support/) for more guidelines and ways to contact us.


# Migration to 4.0.0 Web Components

\*This guide will help you understand how to transition an existing project from using an older version of Nord Web Components to using the latest 4.0.0 version.\*

## What’s changing?

The latest version of [Nord Design System](https://nordhealth.design) now ships with two distinctive brands, [therapy](https://nordhealth.design/?theme=nord) and [veterinary](https://nordhealth.design/?theme=vet). You can choose the currently active brand from the top left corner of this documentation website. Once chosen, you will get content that is tailored specifically for the brand and the business unit you’re working in.

We’re introducing these changes to unify the two design system platforms we have into one platform that can serve all of [Nordhealth](https://nordhealth.com){rel="&#x22;nofollow&#x22;"}. This is necessary so that we can better support the next generation of apps and generative AI experiences at Nordhealth.

While this is a major change for our underlying architecture, we’ve kept it as backwards compatible as possible so that the upgrade path would stay straight­forward. We’ll explain the required steps further down on this page.

Introducing this new layer of abstraction into Nord Design System’s theming architecture means that it now consists of the following four layers:

- **[Foundations](https://nordhealth.design):**&#x54;he foundations for building the next generation of apps and generative AI experiences at Nordhealth.
  - **[Brands](https://nordhealth.design/docs/developer/):**&#x41;ny business unit specific customizations.
    - **[Interface Mode Themes](https://nordhealth.design/design/themes/):**&#x4C;ight, dark, and high contrast themes.
      - **[Accent Color](https://nordhealth.design/design/themes/#accent-color):** For when apps need easy user level theming.

\> \[!TIP]
\> This release doesn't include breaking changes for the existing users of Nord Design System.

---

## Updating package.json and dependencies

To migrate your application to use the latest [Nord Design System](https://nordhealth.design) packages, update `package.json` with the necessary dependencies. You should:

- Update existing `@nordhealth/components` to version `4.0.0`.
- Update existing `@nordhealth/css` to version `4.0.0`.
- Update existing `@nordhealth/themes` to version `9.0.0`.
- If using Design Tokens directly, update `@nordhealth/tokens` to version `8.0.0`.
- If using our React wrappers (`@nordhealth/react`), consider switching to `@nordhealth/components` instead as React 19 now supports Web Components and we’ve deprecated this package ([more information](https://nordhealth.design/#deprecating-react-wrappers)).
- If using our Web Component Vue Types (`@nordhealth/vue`), consider switching to `@nordhealth/components/lib/vue.d.ts` instead as we’ve deprecated this package ([more information](https://nordhealth.design/#deprecating-vue-package)).

Here’s an example `package.json`:

```json
{
  "dependencies": {
    "@nordhealth/components": "^4.0.0",
    "@nordhealth/css": "^4.0.0",
    "@nordhealth/themes": "^9.0.0"
  }
}
```

---

## Deprecating React wrappers

With the recent [release of React 19](https://react.dev/blog/2024/12/05/react-19#support-for-custom-elements){rel="&#x22;nofollow&#x22;"} and the added support for Custom Elements, we’re deprecating the `@nordhealth/react` package (which includes the Next.js integration) and will be removing it in the next major release.

For now, `@nordhealth/react` will continue to receive updates as its build is fully automated, but you should start planning on utilizing the `@nordhealth/components` package directly where possible.

To continue having full type checking and auto-completion in your JSX, you can use [the new `@nordhealth/components/lib/react.d.ts` type definition file](https://nordhealth.design/docs/developer/web-components/#types-and-editor-integration-with-react).

---

## Deprecating Vue package

We decided to make the Vue-specific types for our components part of the `@nordhealth/components` package, instead of needing a separate `@nordhealth/vue` package.

They can now be retrieved from the new `@nordhealth/components/lib/vue.d.ts` type definition file instead of `@nordhealth/vue`.

Because of this, we’re deprecating the `@nordhealth/vue` package (which *only* contains the same types and no code) and will be removing it in the next major release.

For now, `@nordhealth/vue` will continue to receive updates as its build is fully automated, but you should start planning on utilizing [the new type definition file](https://nordhealth.design/docs/developer/web-components/#types-and-editor-integration-with-vue) directly where possible.

---

## Getting support

Have a question about migration to `4.0.0`? Please head over to the [Support page](https://nordhealth.design/resources/support/) for more guidelines and ways to contact us.

---

\> \[!WARNING]
\> Please note that the contents in this section (and below it) are only relevant when you're migrating from Provet Design System to Nord Design System.

## Migrating from Provet Design System

If you’re migrating from Provet Design System to Nord Design System, we’ve collected below an overview of changes to take into account. You can view more details about each specific change further down this page.

### @provetcloud/web-components

- We are deprecating and ending support for the `@provetcloud/web-components` package. The package itself will continue to function, but when time permits, you should migrate to using the `@nordhealth/components` package that now supports both therapy and veterinary brands.
- All Web Components now use `<nord-` namespace. If your app is currently using for example `<provet-button>`, they need to be renamed to `<nord-button>`.

### @provetcloud/web-components-vue-types

- We are deprecating and ending support for the `@provetcloud/web-components-vue-types` package. The package itself will continue to function, but when time permits, you should migrate to using the new `@nordhealth/components/lib/vue.d.ts` type definition file that supports both therapy and veterinary brands.

### @provetcloud/css

- We are deprecating and ending support for the `@provetcloud/css` package. The package itself will continue to function, but when time permits, you should migrate to using the `@nordhealth/css` package that now supports both therapy and veterinary brands.

### @provetcloud/tokens

- We are deprecating and ending support for the `@provetcloud/tokens` package. The package itself will continue to function, but when time permits, you should migrate to using the `@nordhealth/tokens` package that now supports both therapy and veterinary brands.
- While the CSS Custom Properties we ship continue to work independent of the brand that is chosen, we have introduced an appendix for the **veterinary** specific design tokens when you use them in e.g. Sass or JavaScript formats. To access for example the veterinary specific accent color, you’d use `$n-color-accent-vet` in Sass or `tokens.nColorAccentVet` in JavaScript.

### @provetcloud/themes

- We are deprecating and ending support for the `@provetcloud/themes` package. The package itself will continue to function, but when time permits, you should migrate to using the `@nordhealth/themes` package that now supports both therapy and veterinary brands.
- This package now includes four additional themes; `vet`, `vet-dark`, `vet-high-contrast`, and `vet-dark-high-contrast`.

---

## Updating references

If you’re migrating from Provet Design System, you should update the following references to the Provet packages in your project to point to the Nord packages instead. This includes updating the following:

- Update any references from `@provetcloud/web-components` to `@nordhealth/components`. For example: `import type { Layout } from '@provetcloud/web-components'` to `import type { Layout } from '@nordhealth/components'`.
- Update any references from `@provetcloud/css` to `@nordhealth/css`.
- Update any references from `@provetcloud/themes` to `@nordhealth/themes`.
- Update any references from `@provetcloud/web-components-vue-types` to `@nordhealth/components/lib/vue.d.ts`. For example: `"types": ["@provetcloud/web-components-vue-types"]` to `"types": ["@nordhealth/components/lib/vue.d.ts"]`.
- Update any references from `@provetcloud/tokens` to `@nordhealth/tokens`.
- Update any CSS overrides from `provet-` to `nord-`.
- Update any Sass or JavaScript references to the Design Tokens to include the `vet` appendix. For example: `$n-color-accent` to `$n-color-accent-vet` in Sass, or `tokens.nColorAccent` to `tokens.nColorAccentVet` in JavaScript.
- Updat any references from `@import "@provetcloud/tokens/lib/tokens.scss";` to `@import "@nordhealth/tokens/lib/color-vet.scss";`.
- Update `provet` theme to the new `vet` theme, `provet-high-contrast` to `vet-high-contrast` theme, etc.
- Switch from `provet-` namespace to `nord-` namespace instead (for example in Playwright tests, `page.locator('nord-top-bar')`).

---

## Renaming components

While Nord Design System ships with the same set of Web Components as Provet Design System, we use a different namespace for them. Instead of a `<provet-button></provet-button>` we have a `<nord-button></nord-button>` and so forth. You will need to use find and replace on your whole project to update the component names:

- Replace all instances of `<provet-` with `<nord-`.
- Replace all instances of `</provet-` with `</nord-`.

---

## Updating CDN URLs

If you’re migrating from Provet Design System and load any of the below listed packages via the Provet CDN, you’ll have to update the URLs to point to the Nord CDN instead:

- **[Web Components](https://nordhealth.design/components/)**
- **[Design Tokens](https://nordhealth.design/core/tokens/)**
- **[Themes](https://nordhealth.design/design/themes/)**
- **[CSS Framework](https://nordhealth.design/docs/developer/css-framework/)**

For the latest available packages, please use the following URLs instead to migrate to the Nord CDN:

### Design Tokens

```html
<link rel="stylesheet" href="https://nordcdn.net/ds/tokens/9.0.0/tokens.custom-properties.css" />
```

### Web Components

```html
<script type="module" src="https://nordcdn.net/ds/components/5.0.0/index.js"></script>
```

### CSS Framework

```html
<link rel="stylesheet" href="https://nordcdn.net/ds/css/5.2.0/nord.min.css" />
```

### Themes

---

## Updating themes

If you’re migrating from Provet Design System, switch to using the newly added veterinary themes in the updated `@nordhealth/themes` package:

- **Light (default):** `@nordhealth/themes/lib/vet.css`
- **Light high contrast:** `@nordhealth/themes/lib/vet-high-contrast.css`
- **Dark:** `@nordhealth/themes/lib/vet-dark.css`
- **Dark high contrast:** `@nordhealth/themes/lib/vet-dark-high-contrast.css`

\> \[!NOTE]
\> Please note that the default light veterinary theme is no longer part of the CSS Framework. Instead, it needs to be imported separately for the correct look & feel. See \[theming documentation]\(/design/themes/) for more details.

---

## Updating Design Tokens

If you’re migrating from Provet Design System and using the [Design Tokens](https://nordhealth.design/core/tokens/) in Sass or JavaScript, you will need to use the new brand specific `vet` appendix.

**When using Sass:**

```scss
.example {
  // To access veterinary brand colors, use -vet appendix
  color: $n-color-accent-vet;

  // To access therapy brand colors (default), no appendix is needed
  color: $n-color-accent;
}
```

**When using the Common.js module:**

```js
// To access veterinary brand colors, use Vet appendix
console.log(tokens.nColorAccentVet)

// To access therapy brand colors (default), no appendix is needed
console.log(tokens.nColorAccent)
```

---

## Updating Localization Framework Integration

If you’re migrating from Provet Design System and using the [Localization Framework Integration](https://nordhealth.design/docs/developer/localization/#localization-framework-integration), you will need to update the integration by following the updated guidelines:

\[View Guidelines]\(/docs/developer/localization/#localization-framework-integration)


# Migration to 3.0.0 Figma Toolkit

\*This guide will help you understand how to transition an existing project from using an older version of Nord Figma Toolkit to using the latest 3.0.0 version.\*

## What’s changing?

This Figma Toolkit update follows the changes deployed in code for the [3.0.0 release of Nord](https://nordhealth.design/migrations/3.0.0/){rel="&#x22;nofollow&#x22;"}. The major differences include the addition of the [Top Bar](https://www.figma.com/file/u32okMUqi5BlWsG2k1JZgH/Nord-Figma-Toolkit?type=design&node-id=7143%3A65291&t=J3Qw2e6LJhLHoSqu-1){rel="&#x22;nofollow&#x22;"} & [Notification](https://www.figma.com/file/u32okMUqi5BlWsG2k1JZgH/Nord-Figma-Toolkit?type=design&node-id=7310%3A85081&t=J3Qw2e6LJhLHoSqu-1){rel="&#x22;nofollow&#x22;"} components. Plus, updates to the [Navigation](https://www.figma.com/file/u32okMUqi5BlWsG2k1JZgH/Nord-Figma-Toolkit?type=design&node-id=7264%3A70342&t=J3Qw2e6LJhLHoSqu-1){rel="&#x22;nofollow&#x22;"} component, which now supports [Notifications](https://www.figma.com/file/u32okMUqi5BlWsG2k1JZgH/Nord-Figma-Toolkit?type=design&node-id=7367%3A169940&t=J3Qw2e6LJhLHoSqu-1){rel="&#x22;nofollow&#x22;"}, [My Tasks](https://www.figma.com/file/u32okMUqi5BlWsG2k1JZgH/Nord-Figma-Toolkit?type=design&node-id=7367%3A179409&t=J3Qw2e6LJhLHoSqu-1){rel="&#x22;nofollow&#x22;"}, and [Profile](https://www.figma.com/file/u32okMUqi5BlWsG2k1JZgH/Nord-Figma-Toolkit?type=design&node-id=7367%3A184114&t=J3Qw2e6LJhLHoSqu-1){rel="&#x22;nofollow&#x22;"} functionality.

The color system for the Nord Light Theme and Nord Dark Theme have been updated in the Nord Figma Toolkit which extends the color system to better support our use cases. These color changes bring new styles and variants to the Nord Figma Toolkit and are most noticeable in components such as the [Badge](https://www.figma.com/file/u32okMUqi5BlWsG2k1JZgH/Nord-Figma-Toolkit?type=design&node-id=5862%3A40882&t=J3Qw2e6LJhLHoSqu-1){rel="&#x22;nofollow&#x22;"}, and [Banner](https://www.figma.com/file/u32okMUqi5BlWsG2k1JZgH/Nord-Figma-Toolkit?type=design&node-id=7489%3A190206&t=J3Qw2e6LJhLHoSqu-1){rel="&#x22;nofollow&#x22;"}.

The new color system introduces changes to the design tokens which will include breaking changes. For more information take a look at the [changes to the design tokens](https://nordhealth.design/migrations/3.0.0/#changes-to-design-tokens) in the Migration to 3.0.0 Web Components document.

---

## What should I do?

### 1. Duplicate your current design file

In order to avoid disruptions to your workflow, it is recommended that you [duplicate](https://resources/support/.figma.com/hc/en-us/articles/360038511533-Duplicate-or-copy-files){rel="&#x22;nofollow&#x22;"} your project files before accepting this update. This allows you to migrate to the latest Nord Figma Toolkit while maintaining a reference to your original file.

![Duplicate your current design file](https://nordhealth.design/img/migrations/figma-migration-1.png){.n:border height="475" style="border-radius: var(--n-border-radius); margin-bottom: 0;" width="800"}

### 2. Update your duplicate with the latest 3.0.0 Cover Image

Use [this Figma Template](https://www.figma.com/file/le5n5hH9G7rcEvNOsMnZR9/Figma-template-\(product-design\)?type=design&node-id=0%3A1&t=AM9swKNtAc4glbXW-1){rel="&#x22;nofollow&#x22;"} to create a cover image for your new file which will be updated to the 3.0.0 Nord Figma Toolkit.

![Update your duplicate with the latest 3.0.0 Cover Image](https://nordhealth.design/img/migrations/figma-migration-2.png){.n:border height="475" style="border-radius: var(--n-border-radius); margin-bottom: 0;" width="800"}

### 3. Review and accept updates

In your duplicate file, review and accept the Nord Figma Toolkit library updates. You will see updates to three libraries which include the [Nord Figma Toolkit](https://www.figma.com/file/u32okMUqi5BlWsG2k1JZgH/Nord-Figma-Toolkit?type=design&node-id=1645%3A129905&t=A2tdfWus6EvDNtIz-1){rel="&#x22;nofollow&#x22;"}, [Nord Light Theme](https://www.figma.com/file/Bk4HaOsbRzp1gyoEZJMeG1/Nord-Light-Theme?type=design&node-id=1696%3A298217&t=otCTzNrAhntZXK2r-1){rel="&#x22;nofollow&#x22;"}, and [Nord Dark Theme](https://www.figma.com/file/CEv0wTXRONi30bZglrYzEm/Nord-Dark-Theme?type=design&node-id=1696%3A298217&t=DviBkLXcsVdvyGnt-1){rel="&#x22;nofollow&#x22;"}.

![Review and accept updates](https://nordhealth.design/img/migrations/figma-migration-3.png){.n:border height="475" style="border-radius: var(--n-border-radius); margin-bottom: 0;" width="800"}

### 4. Update colors

In your duplicate file, you might need to replace some colors. You can [follow this guide](https://nordhealth.design/migrations/3.0.0/#changes-to-design-tokens) to see how colors might need to be updated.

### 5. Update components & content

This update includes breaking changes to components and may require that you update content in components with breaking changes.

\> \[!NOTE]
\> Review the \[Nord Figma Toolkit 3.0.0 changelog]\(/changelogs/figma) to get more information about these changes, new features, and improvements.

---

## How do I add the Provet theme?

If you’d like to add the new [Provet Light Theme](https://www.figma.com/file/aZDrttmLqVMrO1lQXk8Mbn/Provet-Light-Theme?type=design&node-id=0%3A1&mode=design&t=9QRU9QfiAhn8x9O1-1){rel="&#x22;nofollow&#x22;"} in your designs you can follow this guide. Before you get started, make sure that you’ve updated to the Nord Figma Toolkit 3.0.0.

Open the assets panel and find the [Nord Light Theme](https://www.figma.com/file/aZDrttmLqVMrO1lQXk8Mbn/%E2%9D%8C-Provet-Theme?type=design&node-id=0%3A1&mode=design&t=9QRU9QfiAhn8x9O1-1){rel="&#x22;nofollow&#x22;"}. Next, click Swap library.

![Updating Provet theme](https://nordhealth.design/img/migrations/figma-migration-4.png){.n:border height="475" style="border-radius: var(--n-border-radius); margin-bottom: 0;" width="800"}

Choose `Provet Light Theme` from the options. You should see that the color tokens for `accent`, `accent-secondary`, and `text-link` have matching color styles. Click Swap library to apply the Provet Theme to your design.

![Updating Provet theme](https://nordhealth.design/img/migrations/figma-migration-5.png){.n:border height="475" style="border-radius: var(--n-border-radius); margin-bottom: 0;" width="800"}

---

## What if I accepted this update without duplicating my design file?

You can use Figma’s version history feature to [restore the previous version](https://resources/support/.figma.com/hc/en-us/articles/360038006754-View-a-file-s-version-history#Restore_a_previous_version){rel="&#x22;nofollow&#x22;"} of your design file. After you’ve restored the previous version you can duplicate your original design file.

---

## Getting support

Have a question about migration to `3.0.0`? Please head over to the [Support page](https://nordhealth.design/resources/support/) for more guidelines and ways to contact us.


# Migration to 4.0.0 Figma Toolkit

\*This guide will help you understand how to transition an existing project from using an older version of Nord Figma Toolkit to using the latest 4.0.0 version.\*

## What's changing?

This [Figma Toolkit](https://nordhealth.design/design/foundations/figma/) update follows the theming architecture changes deployed in code for the [4.0.0 release of Nord](https://nordhealth.design/migrations/4.0.0/){rel="&#x22;nofollow&#x22;"}. In the Figma Toolkit, the major improvement is the migration from the previous theming system to [Figma Variables](https://resources/support/.figma.com/hc/en-us/articles/15339657135383-Guide-to-variables-in-Figma){rel="&#x22;nofollow&#x22;"}.

### Improved theming system

The previous Figma Toolkit allowed theming through separate Figma Libraries, but it required manual steps like swapping libraries and checking boxes to preserve theming. The new system leverages **Figma Variables**, which:

- **Reduces manual steps**: Theme switching is now more streamlined and intuitive.
- **Eliminates library juggling**: You no longer need to manage multiple separate libraries for theming.
- **Automatic theme application**: When you drag a component from the asset panel, it will immediately have the theme of your page or frame applied, eliminating the need to swap libraries after inserting components.
- **Multiple themes on one page**: You can apply different themes to individual frames, allowing you to view and compare multiple themes side by side within the same page.
- **Future-proofs the toolkit**: Variables provide a more robust foundation for future updates.
- **Enables better tooling**: Supports improved code generation and AI tooling integration.

### Expanded theme and brand support

The 4.0.0 Figma Toolkit now includes comprehensive theme support for both the therapy and veterinary brands. All themes are available for both brands. With Figma Variables, switching between these themes is as simple as selecting a different mode from the Tokens variable collection, without any manual library swapping.

\*\[Video: /img/figma/nord-figma-toolkit-v4-theme-switching.mp4]\*

---

## What should I do?

### 1. Duplicate your current design file

Before migrating, [duplicate](https://resources/support/.figma.com/hc/en-us/articles/360038511533-Duplicate-or-copy-files){rel="&#x22;nofollow&#x22;"} your project files to avoid disruptions to your workflow. This allows you to migrate to the latest Nord Figma Toolkit while maintaining a reference to your original file.

### 2. Swap to the new library

In your duplicate file, [swap the following libraries](https://resources/support/.figma.com/hc/en-us/articles/4404856784663-Swap-style-and-component-libraries){rel="&#x22;nofollow&#x22;"} to "Nord Figma Toolkit v4" (if applicable):

- **Nord Light Theme** → Nord Figma Toolkit v4
- **Nord Dark Theme** → Nord Figma Toolkit v4
- **Provet Light Theme** → Nord Figma Toolkit v4
- **Nord Figma Toolkit** → Nord Figma Toolkit v4

### 3. Apply theme

With the new variable-based system, you'll need to select which theme to apply to your pages or frames:

1. To apply a theme to an entire page, deselect everything on the canvas. To apply a theme to a specific frame only, select that frame.
2. In the right sidebar, click the "Apply variable mode" button (swatch icon).
3. Select the "Tokens" variable collection.
4. Choose your desired theme from the dropdown.

\> \[!WARNING]
\> Variable modes are applied per page or frame, not per file. For files with many pages, you can use the \[Apply Variable Modes to All Pages plugin]\(https\://www\.figma.com/community/plugin/1450499516821653817/apply-variable-modes-to-all-pages) to streamline this process.

\> \[!NOTE]
\> When creating new pages, Figma automatically applies the variable mode from your current page. Consider creating a Figma template with your preferred theme already applied to use as a starting point for new files.

### 4. Migrate to Variables over Styles

To make this migration possible, the new Figma Toolkit still includes Color Styles, but they are now linked with Figma Variables. These Color Styles should be removed in a future update, so it's recommended to migrate to using Variables over Color Styles where possible. You can easily do this by [detaching the Color Styles](https://resources/support/.figma.com/hc/en-us/articles/360040316193-Apply-styles-to-layers-and-objects#01H8Q2P6WP355JETEAP0C2QRP6){rel="&#x22;nofollow&#x22;"}.

### 5. Replace Number Input with Input component

The Number Input component has been removed from the Figma Toolkit in this release, as it never had a coded component counterpart. To maintain design-code parity and ensure what you design can be implemented, use the **Input component with stepper functionality** instead.

If you have existing Number Input instances in your designs:

1. Replace them with the Input component.
2. Use the start and end slots to add increase and decrease buttons.
3. Reference the [Stepper example in the Figma Toolkit](https://www.figma.com/design/yarhTRV8eFffff0BIpevi6/-v4-WIP--Nord-Figma-Toolkit?node-id=7020-56569&t=hTn0MV3alhmLVqgI-0){rel="&#x22;nofollow&#x22;"} for the correct implementation.
4. Review the [coded Stepper example](https://nordhealth.design/components/input/?example=stepper) to understand how it works in implementation.

### 6. Verify your migration

After completing the migration:

- Test theme switching by changing the variable mode and confirming colors update correctly.
- Check that all components display as expected.
- Verify any custom overrides are preserved.

---

## Getting support

Have a question about migration to `4.0.0`? Please head over to the [Support page](https://nordhealth.design/resources/support/) for more guidelines and ways to contact us.


# Migration Guides

\*These guides will help you understand how to transition an existing project from using an older version of Nord to using the latest version.\*

\*\*\[Tailwind CSS Migration]\(/migrations/tailwind)\*\* - Migrate your project to use Tailwind CSS with Nord Design System.

\*\*\[4.0.0 Figma Toolkit]\(/migrations/figma-4.0.0)\*\* - Update your Figma designs to the latest 4.0.0 toolkit.

\*\*\[4.0.0 Web Components]\(/migrations/4.0.0)\*\* - Migrate your web components to version 4.0.0.

\*\*\[3.0.0 Figma Toolkit]\(/migrations/figma-3.0.0)\*\* - Update your Figma designs to the 3.0.0 toolkit.

\*\*\[3.0.0 Web Components]\(/migrations/3.0.0)\*\* - Migrate your web components to version 3.0.0.

\*\*\[2.0.0 Web Components]\(/migrations/2.0.0)\*\* - Migrate your web components to version 2.0.0.

\*\*\[1.0.0 Web Components]\(/migrations/1.0.0)\*\* - Migrate your web components to version 1.0.0.


# Migration to Tailwind CSS

\*This guide will help you migrate from the legacy CSS framework to the new Tailwind CSS integration.\*

## Why migrate?

The new Tailwind CSS integration offers several advantages:

- **Smaller bundle sizes** through automatic purging of unused styles
- **Better developer experience** with IDE support, linting and autocompletion
- **Industry standard** utilities and patterns
- **Modern tooling** with Tailwind CSS v4

::div
---
::

## Compatibility

The legacy CSS framework and Tailwind CSS can be used together. You can migrate incrementally, adopting Tailwind utilities in new code while keeping existing legacy classes.

\> \[!WARNING]
\> \*\*
\> Required change:
\> \*\*
\> You must replace
\> \`
\> .n-reset
\> \`
\> with
\> \`
\> .n\:reset
\> \`
\> to ensure Tailwind utilities can override styles correctly.

::div
---
::

## Installation

First, ensure you have [Tailwind CSS v4 installed](https://tailwindcss.com/docs/installation) in your project.

\> \[!NOTE]
\> \*\*
\> Side-by-side support:
\> \*\*
\> Use both Tailwind and the legacy CSS framework simultaneously. You can migrate incrementally while both systems coexist in your codebase.

Then update your CSS import:

```css
/* Before (legacy) */
@import "@nordhealth/css";

/* After (Tailwind) */
@import "@nordhealth/css/tailwind";
```

\> \[!NOTE]
\> \*\*
\> Automate your migration!
\> \*\*
\> Use our
\> \[
\> ESLint plugin
\> ]\(#automated-migration-with-eslint)
\> to automatically convert legacy classes to Tailwind equivalents with
\> \`
\> --fix
\> \`
\> .

::div
---
::

## Required changes

### Reset class

The reset class **must** be updated to use the Tailwind prefix syntax:

```html
<!-- Before -->
<html class="n-reset">

<!-- After -->
<html class="n:reset">
```

This is required because the colon syntax ensures proper CSS specificity, allowing Tailwind utilities to override the reset styles.

::div
---
::

## Optional changes

The following classes can be migrated gradually. Legacy classes will continue to work alongside Tailwind utilities.

### Component classes

| Legacy CSS   | Tailwind CSS                        |
| ------------ | ----------------------------------- |
| `.n-reset`   | `.n:reset&#x60; &#x2A;*(required)** |
| `.n-typeset` | `.n:typeset`                        |
| `.n-dl`      | `.n:dl`                             |
| `.n-label`   | `.n:label`                          |
| `.n-hint`    | `.n:hint`                           |
| `.n-error`   | `.n:error`                          |
| `.n-input`   | `.n:input`                          |

### Utility classes

For new code, prefer Tailwind utilities over legacy classes:

| Legacy CSS             | Tailwind CSS           |
| ---------------------- | ---------------------- |
| `.n-padding-m`         | `.n:p-m`               |
| `.n-margin-m`          | `.n:m-m`               |
| `.n-color-text`        | `.n:text-default`      |
| `.n-color-text-weak`   | `.n:text-weak`         |
| `.n-color-accent`      | `.n:text-accent`       |
| `.n-bg-surface`        | `.n:bg-surface`        |
| `.n-bg-status-success` | `.n:bg-status-success` |
| `.n-border-color`      | `.n:border-default`    |
| `.n-font-size-l`       | `.n:text-l`            |

::div
---
::

## Automated migration with ESLint

The `@nordhealth/eslint-plugin` provides an auto-fixable rule to help migrate legacy classes to Tailwind equivalents.

### Installation

```bash
pnpm add -D @nordhealth/eslint-plugin
```

### Configuration

The migration rules are included in the recommended config but **off by default**. Enable them during migration:

```javascript
// eslint.config.mjs
import nordPlugin from '@nordhealth/eslint-plugin'

export default [
  nordPlugin.configs.recommended,
  {
    rules: {
      // Enable migration rules - disable after migration is complete
      '@nordhealth/no-legacy-classes': 'warn'
    }
  }
]
```

### Incremental migration

To migrate gradually, enable only specific categories:

```javascript
rules: {
  // Start with spacing and colors, add more categories over time
  "@nordhealth/no-legacy-classes": ["warn", {
    categories: ["spacing", "colors"]
  }]
}
```

Available categories:

| Category     | Classes migrated                                                |
| ------------ | --------------------------------------------------------------- |
| `spacing`    | Margin, padding, gap (`n-margin-*`, `n-padding-*`, `n-gap-*`)   |
| `borders`    | Border styles, colors, radius (`n-border-*`)                    |
| `typography` | Font sizes, weights, line heights (`n-font-*`, `n-typescale-*`) |
| `colors`     | Text, background, status colors (`n-color-*`)                   |
| `layout`     | Flex, grid, alignment (`n-stack-*`, `n-grid-*`, `n-justify-*`)  |
| `components` | Form elements, icons (`n-label`, `n-input`, `n-size-icon-*`)    |
| `utilities`  | Shadows, z-index, misc (`n-box-shadow-*`, `n-index-*`)          |

### Running the fix

Once configured, run ESLint with the `--fix` flag to automatically migrate classes:

```bash
pnpm eslint --fix "src/**/*.{ts,tsx,vue,html}"
```

\> \[!NOTE]
\> The rule will report each deprecated class and automatically replace it with the Tailwind equivalent when you run
\> \`
\> --fix
\> \`
\> .

::div
---
::

## Getting support

Have questions about migrating to Tailwind CSS? Please head over to the [Support page](https://nordhealth.design/resources/support/) for more guidelines and ways to contact us.


# Brand assets

\*Downloadable assets shared here will help you to design and build more coherent digital products and experiences.\*

In addition to the assets provided here we also offer additional design resources in our Figma workspace. [Contact our support](https://nordhealth.design/resources/support/) if you need access to Figma. Looking for interactive tools? See [Tools](https://nordhealth.design/design/tools/).

## Brand assets

\*\*\[Provet brand guidelines]\(https\://www\.notion.so/nordhealth/Provet-Cloud-Brand-3e3c9156e75d45f1b16399932fa8499f?pvs=4)\*\* - Updated 28.4.2025
\*\*\[Provet brand typeface]\(https\://drive.google.com/file/d/1pkgxdEF8SVtw-gNvAXwwOzpu49PnL0F9/view?usp=sharing)\*\* - Updated 28.4.2025
\*\*\[Provet logo]\(/assets/provet/provet-logo.zip)\*\* - Updated 14.11.2025
\*\*\[Provet icons]\(/icons/)\*\* - Updated 28.4.2025
\*\*\[Provet favicons]\(/assets/provet/provet-favicons.zip)\*\* - Updated 28.4.2025

\*\*\[Nordhealth brand typeface]\(https\://drive.google.com/file/d/1pkgxdEF8SVtw-gNvAXwwOzpu49PnL0F9/view?usp=sharing)\*\* - Updated 28.4.2025
\*\*\[Nordhealth logo]\(/assets/nordhealth/nordhealth-logo.zip)\*\* - Updated 28.4.2025
\*\*\[Diarium logo]\(/assets/diarium/diarium-logo.zip)\*\* - Updated 28.4.2025
\*\*\[From Nordhealth logo]\(/assets/nordhealth/from-nordhealth-logo.zip)\*\* - Updated 28.4.2025
\*\*\[Nordhealth logo for clothes]\(/assets/nordhealth/nordhealth-clothes-logo.zip)\*\* - Updated 28.4.2025
\*\*\[Nordhealth illustrations]\(/assets/nordhealth/nordhealth-illustrations.zip)\*\* - Updated 28.4.2025
\*\*\[Nordhealth icons]\(/icons/)\*\* - Updated 28.4.2025
\*\*\[Nordhealth favicons]\(/assets/nordhealth/nordhealth-favicons.zip)\*\* - Updated 28.4.2025
\*\*\[Nordhealth social media assets]\(/assets/nordhealth/nordhealth-social-media.zip)\*\* - Updated 28.4.2025
\*\*\[Nordhealth motion assets]\(/assets/nordhealth/nordhealth-motion.zip)\*\* - Updated 28.4.2025

---

## UI Assets

::div{.n-downloads}
\*\*\[Typeface for apps]\(/assets/nordhealth/nord-ui-typeface.zip)\*\* - Updated 28.4.2025

\*\*\[User interface icons]\(/icons/)\*\* - Updated 28.4.2025
::

---

## Print templates

\*\*\[Nordhealth Word template]\(/assets/nordhealth/nordhealth-word.zip)\*\* - Updated 28.4.2025
\*\*\[Nordhealth Google Docs template]\(https\://docs.google.com/document/u/1/?tgif=d\&ftv=1)\*\* - Updated 28.4.2025
\*\*\[Diarium Google Docs template]\(https\://docs.google.com/document/u/1/?tgif=d\&ftv=1)\*\* - Updated 28.4.2025
\*\*\[Nordhealth Business Card template]\(/assets/nordhealth/nordhealth-business-card-v4.zip)\*\* - Updated 28.4.2025
\*\*\[Nordhealth A5 Booklet template]\(/assets/nordhealth/nordhealth-a5-booklet.zip)\*\* - Updated 28.4.2025
\*\*\[Nordhealth Letterhead template]\(/assets/nordhealth/nordhealth-letterhead.zip)\*\* - Updated 28.4.2025
\*\*\[Nordhealth A3 Poster template]\(/assets/nordhealth/nordhealth-a3-poster.zip)\*\* - Updated 28.4.2025
\*\*\[Nordhealth InDesign template]\(/assets/nordhealth/nordhealth-indesign-template.zip)\*\* - Updated 28.4.2025
\*\*\[Nordhealth InDesign form template]\(/assets/nordhealth/nordhealth-onboarding-form.zip)\*\* - Updated 28.4.2025

\*\*\[Provet Google Docs template]\(https\://docs.google.com/document/u/1/?tgif=d\&ftv=1)\*\* - Updated 28.4.2025

---

## Presentations

\*\*\[Nordhealth Google Slides template]\(https\://docs.google.com/presentation/u/1/?tgif=d\&ftv=1)\*\* - Updated 28.4.2025
\*\*\[Nordhealth PowerPoint template]\(/assets/nordhealth/nordhealth-powerpoint.zip)\*\* - Updated 28.4.2025
\*\*\[Nordhealth Keynote template]\(/assets/nordhealth/nordhealth-keynote.zip)\*\* - Updated 28.4.2025

\*\*\[Provet Google Slides template]\(https\://docs.google.com/presentation/u/1/?tgif=d\&ftv=1)\*\* - Updated 28.4.2025

---

## Figma templates

\*\*\[Nord Figma Toolkit project]\(https\://www\.figma.com/design/yarhTRV8eFffff0BIpevi6/Nord-Figma-Toolkit-v4?node-id=1696-298217)\*\* - Updated 14.11.2025
\*\*\[Nordicons Figma project]\(https\://www\.figma.com/file/2uz2VbPlyMR5QHi9eGDMFf/Nordicons?node-id=2%3A36)\*\* - Updated 28.4.2025
\*\*\[Nord Interface Templates]\(https\://www\.figma.com/design/G6E9A44lTA7aOFcNXosKCR/Interface-Templates-v4?node-id=2-9)\*\* - Updated 28.4.2025
\*\*\[Nord Component Illustrations]\(https\://www\.figma.com/file/n03Z6aG3GAP31Oc9V6IKYy/Component-Illustrations?node-id=0%3A1)\*\* - Updated 28.4.2025
\*\*\[Nordhealth Print and Merchandise]\(https\://www\.figma.com/file/410C0vmc6TSzvQ98UT1fu6/Brand-Print-and-Merch?node-id=0%3A1)\*\* - Updated 28.4.2025
\*\*\[Nordhealth Digital Templates]\(https\://www\.figma.com/file/5y1YnQSu5yZLlo5N2c2PEG/Brand-Digital-Templates?node-id=5%3A0)\*\* - Updated 28.4.2025
\*\*\[Nordhealth Video Guidelines]\(https\://www\.figma.com/proto/aS6BXI2k1hzux3HgixfT0p/Brand-Video-Guidelines?page-id=0%3A1\&node-id=2%3A512\&viewport=256%2C48%2C0.09\&scaling=contain)\*\* - Updated 28.4.2025
\*\*\[Nordhealth Core Elements]\(https\://www\.figma.com/file/dAkWrvqLZzDS7RA8cGjGUk/Brand-Core-Elements?node-id=1%3A3)\*\* - Updated 28.4.2025
\*\*\[Nordhealth Brand Guidelines]\(https\://www\.figma.com/file/7pIl9EuaLAMr9YxDUUpLRo/Brand-Guidelines-v01.2?node-id=0%3A1)\*\* - Updated 28.4.2025
\*\*\[Nordhealth Website]\(https\://www\.figma.com/file/WRScRzQz2In8FkYHEzPG0Q/Brand-Website?node-id=0%3A1)\*\* - Updated 28.4.2025
\*\*\[Diarium Figma project]\(https\://www\.figma.com/files/project/22484934/Diarium?fuid=929995711626900209)\*\* - Updated 28.4.2025

\*\*\[Nord Figma Toolkit project]\(https\://www\.figma.com/design/yarhTRV8eFffff0BIpevi6/Nord-Figma-Toolkit-v4?node-id=1696-298217)\*\* - Updated 14.11.2025
\*\*\[Nordicons Figma project]\(https\://www\.figma.com/file/2uz2VbPlyMR5QHi9eGDMFf/Nordicons?node-id=2%3A36)\*\* - Updated 28.4.2025
\*\*\[Component Illustrations]\(https\://www\.figma.com/file/n03Z6aG3GAP31Oc9V6IKYy/Component-Illustrations?node-id=0%3A1)\*\* - Updated 28.4.2025

---

## Getting support

Need help with our downloadable assets? Please head over to the [Support page](https://nordhealth.design/resources/support/) for more guidelines and ways to contact us.


# Tools

\*Interactive tools to help you design, theme, and check Nord-based experiences.\*

::div{.n-downloads}
\*\*\[Nord Color Generator]\(/color-generator/)\*\* - Updated 2.5.2025

\*\*\[Nord Theme Builder]\(/theme-builder/)\*\* - Updated 2.5.2025

\*\*\[Nord Accessibility Checklist]\(/design/foundations/accessibility-checklist/)\*\* - Updated 28.4.2025
::


# Frequently Asked Questions

## What is the Nord Design System?

Nord is Nordhealth's design system for products, digital experiences and brand. It's a collection of reusable components and tools, guided by clear standards, that can be assembled together to build digital products and experiences.

## Who works on Nord?

Nord Design System is maintained by João Gonçalves and Joseph Anson, with contributions from teams across Nordhealth. The system was originally built by a core team including Ariel Salminen (architect), Eric Habich, Nick Williams, David Darnes, and Elwin van Eede.

## Why is the design system public?

Public documentation makes sharing and collaboration between different teams and third party vendors much easier as it increases the system's visibility and accountability. This also makes us push towards higher quality content and enables us to be more transparent. Finally, this also serves as an amazing tool that we can leverage in recruiting.

## What is the goal of the design system?

The goal of Nord Design System is to improve UI consistency and quality, while making our software design and development processes more efficient. Nord also helps to establish a common vocabulary between everyone in our organization and ease collaboration between different teams and disciplines.

## What's on the roadmap?

See our [Roadmap in Linear](https://linear.app/nordhealth/team/NDS/all){rel="&#x22;nofollow&#x22;"} for up to date plans.

## How do you prioritize items on your roadmap?

Please see [backlog prioritization model](https://nordhealth.design/resources/backlog-prioritization/) for more details.

## Should we use the Nord Design System?

The short answer is yes, you should use it. Nord improves UI consistency and quality, while making our software design and development processes more efficient.

## Can we use a different framework instead of Nord?

The short answer is, no, you shouldn't. Third party frontend frameworks provide a specific solution and a particular look and feel, and the resulting experience ends up resembling someone else's brand. In addition to look-alike issues, these frameworks add a lot of unnecessary bloat to the user experience.

While a third party framework might seem like a good way to jump start development, it will eventually lead to developers needing to create a substantial amount of custom code to achieve their products' goals. Eventually a threshold will be crossed where the initial benefits of using a third party framework are outweighed by the time spent modifying, extending, and fixing the framework.

Finally, there's also the issue with naming. Using a third party framework means subscribing to someone else's structure, naming, styling conventions, and even ways of working which will make it harder and harder for us to improve our processes and ease the collaboration between different teams and disciplines.

## What if Nord doesn't fulfill our team's requirements?

Nord's contribution model allows feature teams to add new features based on their product requirements. At the same time, it allows us to keep an eye on the quality and consistency of the user experience. Please see [contributing guidelines](https://nordhealth.design/resources/contributing/) for more information.

## What's the meaning of "draft" badges?

These badges indicate whether something is ready to be used in production. Orange ("Draft") status means that it's still under work and not ready to be used in production environment or design work.

## Can I use Nord in any project?

Nord Design System is meant for building digital products and experiences for Nordhealth. Our [terms of use](https://nordhealth.design/resources/terms/) doesn't allow the use of Nord outside of this context.

## Is Nord open source?

No, but feel free to browse this website to learn how we approach design and development at [Nordhealth](https://nordhealth.com){rel="&#x22;nofollow&#x22;"}.

## Is there a way to monitor API status?

Yes, Nord Design System has a public status page that informs our users about the uptime of our services. You can view our [status page here](https://nordhealth.betteruptime.com/){rel="&#x22;nofollow&#x22;"}.

## What tools do you use?

- [Slack for updates](https://nordhealth.slack.com/archives/C01BKU5JA9W){rel="&#x22;nofollow&#x22;"}
- [Figma for design](https://www.figma.com/files/team/929995727836666854/Nordhealth){rel="&#x22;nofollow&#x22;"}
- [GitHub for code](https://github.com/nordhealth){rel="&#x22;nofollow&#x22;"}
- [Linear for tracking progress](https://linear.app/nordhealth/team/NDS/all){rel="&#x22;nofollow&#x22;"}
- [NPM for distribution](https://www.npmjs.com/org/nordhealth){rel="&#x22;nofollow&#x22;"}

## What packages do you offer?

- [Web Components](https://nordhealth.design/components/)
- [CSS Framework](https://nordhealth.design/docs/developer/css-framework/)
- [Design Tokens](https://nordhealth.design/core/tokens/)
- [Themes](https://nordhealth.design/design/themes/)
- [Webfonts](https://nordhealth.design/docs/developer/webfonts/)
- [Nordicons](https://nordhealth.design/icons/)
- [Color Utilities](https://nordhealth.design/design/foundations/color-utilities/)
- [AG Grid Theme](https://nordhealth.design/components/table/#recommendation-for-component-based-libraries)
- [Figma Toolkit](https://nordhealth.design/design/foundations/figma/)

## What's your working culture?

The following set of fundamental rules allows us to get to the highest level of productivity while benefiting both the company and our team members.

- We avoid meetings as much as possible. Instead of having them, we communicate asynchronous to each other via Linear, GitHub, Notion, Figma, and (occasionally) Slack, expecting responses within 24 hours.
- We don't do team wide standups or sync meetings, except one meeting at the start of every cycle. Here we walk through the tasks and also discuss about how the team feels, what motivates them right now, and what would they want to change.
- Most collaboration and discussion happens in feedback loops, using the above mentioned tools, which requires clear and thoughtful communication from everyone.
- We don't have strict deadlines. We ship incrementally as we move through the backlog and launch new things as they become ready.
- Our team members should be able to work on what they think is fun, or rely on their intuition when picking tasks from the backlog. Our [roadmap on Linear](https://linear.app/nordhealth/team/NDS/all){rel="&#x22;nofollow&#x22;"} holds us accountable.
- We focus on persistent iteration over flashy launches.

## How do you use Slack?

We aim to follow the below guidelines to keep the experience great for everyone:

- Reply/follow up to all posts in threads.
- Don't use the "Also send thread reply to main channel" feature, unless absolutely necessary.
- Keep discussion on topic in a thread.
- If you want to discuss about a new topic, start a new thread.

## How do I get started with Nord?

See the [Getting Started](https://nordhealth.design/docs/developer/) section in the documentation.

## Where can I find Nordhealth logo?

You can find the logo in different formats from our [downloads page](https://nordhealth.design/design/assets/).

## Where can I find the presentation templates?

You can find the presentation templates in different formats from our [downloads page](https://nordhealth.design/design/assets/).

## What's the difference between RGB, CMYK and Spot colors?

The straightforward answer is that RGB is for anything digital or on a screen, and CMYK and Spot are for print. If you're working on print and don't know what Spot colors are, then we recommend you to always pick the CMYK version instead.

## What browsers are supported?

Nord Design System is tested in the latest two versions of Chrome, Safari, Edge, Firefox, and Opera. 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.

## Can I use Nord together with other CSS frameworks?

Yes. All CSS selectors are prefixed with `.n-` to prevent collisions.

## What languages are the components written in?

Components are written in TypeScript, CSS and HTML. They ship as standards based Web Components making them compatible with current and future JavaScript based frameworks like Angular, React or Vue.

## What are you using to generate the documentation?

We use [Nuxt](https://nuxt.com/){rel="&#x22;nofollow&#x22;"} to generate it.

## What tools do you use for Web Components?

- Components are built with [Lit](https://lit.dev/){rel="&#x22;nofollow&#x22;"}.
- Component metadata is generated by the [Custom Elements Manifest Analyzer](https://github.com/open-wc/custom-elements-manifest){rel="&#x22;nofollow&#x22;"}.

## How do you version the system's parts?

We follow "Semantic Versioning." Under this scheme, version numbers and the way they change convey meaning about the underlying features and what has been modified from one version to the next. For more details, please see the [documentation](https://semver.org/){rel="&#x22;nofollow&#x22;"}.

## How do I test the different themes?

We've created a tool called [theme builder](https://nordhealth.design/theme-builder/) for this exact purpose.

## How did we choose the UI typeface (font)?

For digital products, we use a typeface called Inter which is carefully crafted and designed for computer screens specifically. It features a tall x-height to aid in readability of mixed-case and lower-case text.

We chose this specific typeface based on user research we did in 2020. During this research we tested dozen different options and chose Inter for its legibility and ability to present user interface and content as clearly and efficiently as possible.

## How can I add a new icon?

All new icons should be added to [Nordicons](https://nordhealth.design/icons/) first. Please see [Support page](https://nordhealth.design/resources/support/) for more information on how to contact us.

## How can I add a new theme?

It's possible and [described here](https://nordhealth.design/design/themes/), but we strongly recommend against it. Please reach out to Nord team before creating a custom theme.

## I found a bug. How do I report it?

First, make sure the problem is reproducible. Once confirmed, [send us a bug report](https://nordhealth.design/resources/support/).

## I couldn't find an answer to my question

See the [Support guidelines](https://nordhealth.design/resources/support/) for instructions on how to reach us.


# About the design system

\*Nord Design System is a collection of reusable components and tools, guided by clear standards, that can be assembled together to build digital products and experiences.\*

The goal of Nord Design System is to improve UI consistency and quality, while making our software design and development processes more efficient. Nord also helps to establish a common vocabulary between everyone in our organization and ease collabo­ration between different teams and disciplines.

Nord Design System has a core team of designers and developers inside Nordhealth who are dedicated to building and supporting the system. The core team includes [Joseph Anson](https://josephanson.com){rel="&#x22;nofollow&#x22;"} and [João Gonçalves](https://joao-goncalves.com/){rel="&#x22;nofollow&#x22;"}.

Our documentation is public as it makes sharing and collaboration between different teams and third party vendors much easier as it increases the system’s visibility and accountability. This also makes us push towards higher quality and enables us to be more transparent. Finally, it also serves as an amazing tool that we can leverage in recruiting.

You can reach out to the team by heading over to [our support page](https://nordhealth.design/resources/support/).

---

## How we work

The following set of fundamental rules allows us to get to the highest level of productivity while benefiting both the company and our team members.

- We avoid meetings as much as possible. Instead of having them, we communicate asynchronous to each other via Linear, GitHub, Notion, Figma, and (occasionally) Slack, expecting responses within 24 hours.
- We don’t do team wide standups or sync meetings, except one meeting at the start of every cycle. Here we walk through the tasks and also discuss about how the team feels, what motivates them right now, and what would they want to change.
- Most collaboration and discussion happens in feedback loops, using the above mentioned tools, which requires clear and thoughtful communication from everyone.
- We don’t have strict deadlines. We ship incrementally as we move through the backlog and launch new things as they become ready.
- Our team members should be able to work on what they think is fun, or rely on their intuition when picking tasks from the backlog. Our [roadmap on Linear](https://linear.app/nordhealth/team/NDS/all){rel="&#x22;nofollow&#x22;"} holds us accountable.
- We focus on persistent iteration over flashy launches.

---

## Our goals

![Nord goals](https://nordhealth.design/img/updates/goals.jpg){.n:border.n:rounded loading="lazy"}

### Efficiency

Improved work efficiency for designers and developers.

### Consistency

Improved user interface consistency and quality.

### Openness

Improved communication between teams and people.

### Standards

Shared guidelines and standards through documentation.


# Accessibility Statement

\*Nord Design Systems team is committed to providing a website that is accessible by all people, regardless of their abilities or technology used.\*

We're continuously working towards improving the accessibility of this website to ensure we provide equal access to everyone. We also actively take steps to further enhance the accessibility to meet or exceed applicable standards.

This work is ongoing and we continue to strive towards our goal of promoting accessibility and meeting WCAG 2.1 level AA guidelines.

We welcome your feedback on how we might improve. For any specific questions or concerns, please contact us at <support@nordhealth.design>.

Building with Nord? Follow our [accessibility checklist](https://nordhealth.design/design/foundations/accessibility-checklist/) to meet these standards in your own work.


# Backlog Prioritization

\*Nord’s backlog prioritization model helps us govern incoming feature requests from multiple sources such as product teams, sales, the QA team, and customer support.\*

## Who creates the backlog?

Our Product Manager is responsible for creating, prioritizing, and maintaining the Nord Design System’s backlog. Requests for backlog items come from various sources such as product teams, sales, the QA team, and customer support.

## Who prioritizes the backlog?

Product Manager prioritizes our backlog and defines the design system direction. We try to usually find a consensus among stakeholders with conflicting requests.

## How do we prioritize the backlog?

We start by deciding what features aren’t critical. Putting low-priority features aside allows us to spend the design system team’s valuable time on higher-priority features.

Once this is done, we utilize the Impact Effort Matrix seen below. Features that require the lowest effort for the highest impact go to the top of our backlog, and items that require greater effort but will have a low impact go to the bottom of the list.

![Nord Design System Impact Effort Matrix](https://nordhealth.design/img/impact-effort-matrix.svg){style="max-width:700px;"}

---

## Getting support

Have a question about how we prioritize features? Please head over to the [Support page](https://nordhealth.design/resources/support/) for more guidelines and ways to contact us.


# Careers

\*Design isn’t just about the look and feel. Design is how it works, and we believe the best way to focus on this is to work as close to the end result as possible. That’s why we need your help.\*

Right now, we’re growing the team working on [Nord Design System](https://nordhealth.design) to support this mission. Our current team setup is small, diverse, and distributed across the globe. A fundamental sentiment that we all share is that we care for the people who use our tools. Providing a great designer and developer experience is really important to us.

When it comes to our team, we have a lot of trust for everyone. Instead of following strict deadlines, our team ships things incrementally and launches new features as they become ready. This means that a certain type of problem solving attitude is required, but the freedom we give you makes [working with us](https://nordhealth.com){rel="&#x22;nofollow&#x22;"} rewarding. You get to work on what you think is fun and rely on your intuition when choosing what problems to solve.

Currently, we’re looking for experienced **Frontend Developers** to join our team. People who are kind, empathetic, and prefer the freedom that working remotely gives them. People who have several years of experience working in cross-functional product teams and on design systems.

## Responsibilities

- Help maintain a culture of empathy, safety and belonging where all voices are heard
- Help improve the design and technical architecture of [Nord Design System](https://nordhealth.design)
- Help promote design systems to teams throughout [Nordhealth](https://nordhealth.com){rel="&#x22;nofollow&#x22;"}
- Collaborate with product, design and other engineers to create design patterns and [components](https://nordhealth.design/components/) that evolve and improve the design system
- Rapidly prototype and test new patterns and components to find solutions
- Provide support for the users of the system
- Write clear and detailed documentation
- Work on accessibility best practices

## Tech

- Nord is divided into modular systems that are [distributed via NPM](https://www.npmjs.com/org/nordhealth){rel="&#x22;nofollow&#x22;"}
- Development happens inside a Lerna mono repository on [GitHub](https://github.com/nordhealth){rel="&#x22;nofollow&#x22;"}
- Web Components using [Lit](https://lit.dev/){rel="&#x22;nofollow&#x22;"}, [TypeScript](https://www.typescriptlang.org/){rel="&#x22;nofollow&#x22;"}, [HTML](https://en.wikipedia.org/wiki/HTML){rel="&#x22;nofollow&#x22;"}, and [CSS](https://nordhealth.design/core/css/)
- Custom documentation platform built with [Eleventy](https://www.11ty.dev/){rel="&#x22;nofollow&#x22;"}
- YAML based [design token](https://nordhealth.design/core/tokens/) system
- CSS Custom Properties for [theming](https://nordhealth.design/design/themes/)
- React port of [Web Components](https://nordhealth.design/components/)
- GitHub, Slack, Notion, Linear, Figma, and NPM as the tools
- Progressive Web App for desktop
- AWS cloud architecture

## What we offer

- Work life balance
- Competitive salary
- Parental leave
- Work remotely from anywhere in Europe
- Team that values diversity and inclusion
- 5 weeks of paid vacation
- M1 Macbook Pro, 5K display and accessories
- Generous budget to set up your home office
- Latest software you need
- Regular team offsites

## Who we are

Nordhealth is a publicly listed and fast growing cloud-based healthcare SaaS company on a mission to redefine digital healthcare. We build software that empower veterinary and therapy professionals to provide the best possible care experiences to their patients. Our products serve more than 50,000 veterinary and therapy professionals across 10,000 clinics and hospitals located in over 30 countries.

Headquartered in Helsinki, Finland, Nordhealth has a solid footprint in the Nordic region and a growing presence internationally, with more than 400 employees working either remotely or from our collaboration hubs. For more details visit the company’s website at [nordhealth.com](https://nordhealth.com/){rel="&#x22;nofollow&#x22;"}.

---

## Open positions

\*\*\[Open application]\(mailto\:support\@nordhealth.design)\*\* - Posted May 6th, 2022

\> \[!NOTE]
\> Don’t meet every single requirement? We’re dedicated to building a diverse and inclusive team, so if you’re excited about a role, but your past experience doesn’t align perfectly with the description, we encourage you to apply anyways. You may be just the right candidate. ❤️


# Contributing

\*Nord's contribution model allows product teams to add new features based on their product requirements. At the same time, it allows us to keep an eye on the quality and consistency of the user experience.\*

Our team follows a hybrid model where the central design system team is responsible for the overall direction. Growth is partly pushed to the consumers, who drive the evolution of Nord. This hybrid model helps us keep Nord accurate and actually useful.

## How to get started

When you start designing a new feature, you may come across a [Design Token](https://nordhealth.design/core/tokens/), [Component](https://nordhealth.design/components/), or [Template](https://nordhealth.design/templates/) that isn't defined in the Nord Design System. When that happens, you should [reach out to the Nord team](https://nordhealth.design/resources/support/) to make a contribution.

You can either do that during our [office hours](https://nordhealth.design/resources/support/#office-hours) or use our [dedicated Slack channel](https://nordhealth.slack.com/archives/C074LNAKH0T){rel="&#x22;nofollow&#x22;"}. The submitted contributions are grouped into three categories similar to the model [Zalando uses](https://medium.com/zalando-design/zalandos-design-system-contribution-model-73ab36f8591e){rel="&#x22;nofollow&#x22;"}:

1. **Light contribution:** A small design tweak to an existing component or style.
2. **Medium contribution:** A bigger change to an existing component or UX pattern.
3. **Heavy contribution:** Creating a brand new component, UX pattern or tool.

In order to determine the contribution weight, please see the following diagram:

[![Nord Design System contribution process and different levels of contribution](https://nordhealth.design/img/contribution.png){.n:border.n:rounded loading="lazy"}](https://coggle.it/diagram/YoHvYg8o3JWkfRm-/t/process-for-adding-new-features-to-nord-design-system)

---

## Contribution process

Our team follows the contribution process defined below. The process may vary depending on the level of contribution:

1. **Contribution proposal:** The first step of a contribution is always a conversation. We want to reduce potential rework and frustration for the contributors by refining the solution before the work begins. Contribution proposals help our team to understand what you're trying to achieve, and what's stopping you from achieving this with Nord today.
2. **Kick-off:** For **medium** and **heavy** contributions, we schedule a kick-off meeting with your team. During this meeting we agree on the scope of contribution, discuss your involvement, and also confirm timelines.
3. **Collaboration:** We like to think about contribution as a way of collaboration. We're here to support you and your team on this journey. We also acknowledge that the product team designers and developers are experts in their team domain, so we often have our people pair up with your team when designing for specific requirements.
4. **Review:** Before publishing the new feature, we want to make sure that the contribution conforms to our high standards for accessibility, usability, and consistency in user experience.
5. **Publish:** In the last step we make sure that the new feature is documented, communicated, and showcased within the company when it gets published.

---

## Contribution tools

To contribute, you need access to some or all of the following tools:

\*\*\[Nord Figma Project]\(https\://www\.figma.com/files/project/21956332/Nord-Design-System?fuid=929995711626900209)\*\* - figma.com/files/project/nord-design-system

\*\*\[Nord GitHub Repository]\(https\://github.com/nordhealth/design-system)\*\* - Our private repository, not for public use.

\*\*\[Nord Slack Channel]\(https\://nordhealth.slack.com/archives/C074LNAKH0T)\*\* - nordhealth.slack.com

---

## Practical guides

Check out these practical guides to help you understand how to design for Nordhealth's platforms using Nord Design System.

\*\*\[Backlog Prioritization]\(/resources/backlog-prioritization/)\*\* - nordhealth.design/resources/backlog-prioritization/

\*\*\[Nord Design Principles]\(/design/foundations/principles/)\*\* - nordhealth.design/principles/

\*\*\[Naming of Things]\(/design/foundations/naming/)\*\* - nordhealth.design/naming/

\*\*\[Accessibility Checklist]\(/design/foundations/accessibility-checklist/)\*\* - nordhealth.design/accessibility-checklist/

\*\*\[Color System guidelines]\(/design/foundations/colors/)\*\* - nordhealth.design/colors/

\*\*\[Color Utility guidelines]\(/design/foundations/color-utilities/)\*\* - nordhealth.design/color-utilities/

\*\*\[Grid guidelines]\(/design/foundations/grid/)\*\* - nordhealth.design/grid/

\*\*\[Typography guidelines]\(/design/foundations/typography/)\*\* - nordhealth.design/typography/

\*\*\[Webfont guidelines]\(/docs/developer/webfonts/)\*\* - nordhealth.design/webfonts/

\*\*\[Theming guidelines]\(/design/themes/)\*\* - nordhealth.design/themes/

\*\*\[Using Web Components]\(/docs/developer/web-components/)\*\* - nordhealth.design/web-components/

\*\*\[Frequently Asked Questions]\(/docs/developer/faq/)\*\* - nordhealth.design/faq/

---

## Getting support

Have a question about contributing? Please head over to the [Support page](https://nordhealth.design/resources/support/) for more guidelines and ways to contact us.


# Support

\*Nord Design System team provides support for its users. See below for different use cases and additional instructions on how to reach us.\*

## Frequently asked questions

Answers to the most common questions about the design system can be found in the [Design System FAQ](https://nordhealth.design/docs/developer/faq/).

## Slack channels

Our team maintains the following Slack channels and provides support as time permits.

- For generic discussion and product updates: [#design-system](https://nordhealth.slack.com/archives/C01BKU5JA9W)
- For support requests: [#design-system-support](https://nordhealth.slack.com/archives/C074LNAKH0T)
- For automated updates: [#design-system-updates](https://nordhealth.slack.com/archives/C01KWRYC6AH)

\[Join discussion]\(https\://nordhealth.slack.com/archives/C01BKU5JA9W)

## Office hours

We organize weekly design system “office hours” where you can show up with your design system questions, support requests, feature ideas, and to discuss about possible bugs. Office hours happen every Friday, 14:00-15:00 (EEST).

\[Subscribe to calendar]\(https\://calendar.google.com/calendar/u/2?cid=Y19kOG1kZTVzbms4NXBzOGVjdjdzZnBvZDA0MEBncm91cC5jYWxlbmRhci5nb29nbGUuY29t
)

## Email

Messages sent to <support@nordhealth.design> will be addressed by the team as quickly as possible.

\[Get in touch]\(mailto\:support\@nordhealth.design)

## Contributing

We’re currently working on a revised contribution model for the feature teams. Please check back later as we’re still in the progress of updating this part of the documentation.

## API status

Nord Design System has a public status page that informs our users about the uptime of our services. You can view our [status page here](https://nordhealth.betteruptime.com/).

\[View API status]\(https\://nordhealth.betteruptime.com/)

## Bug reports and support requests

The Nord team accepts bug reports and support requests [via our dedicated Slack channel](https://nordhealth.slack.com/archives/C074LNAKH0T){rel="&#x22;nofollow&#x22;"} or during the office hours. Bug reports submitted are saved to our issue tracker and posted to the internal Slack channels we use for monitoring.

\[Get support]\(https\://nordhealth.slack.com/archives/C074LNAKH0T)
\> \[!WARNING]
\> You need to be logged in with a Nordhealth account to submit tickets.

[![Nord Design System contribution model and different levels of contribution.](https://nordhealth.design/img/contribution.png){height="1116" width="2760"}](https://coggle.it/diagram/YoHvYg8o3JWkfRm-/t/process-for-adding-new-features-to-nord-design-system)


# Terms of Use

Welcome to Nord Design System website (the “Website”). There are a few rules that you must follow when using our Website and the Content in it, so we ask all our visitors to read our Terms of Use carefully.

This Website is brought to you by Nordhealth Ltd (“Nordhealth”, or “we” or “us”) and all rights, including copyright, in the content of the Website is owned or controlled by Nordhealth.

\> \[!NOTE]
\> TL;DR Nord Design System is solely meant for building digital products and experiences for Nordhealth. You may not use, reproduce, retransmit, disseminate, sell or publish any of the features for any other reason.

## What do I agree to by entering the Website?

You are invited to use the Website on the basis of these Terms of Use set out below.

By entering the Website and using its Content (as defined below) you are deemed to have read and accepted these Terms of Use. If you do not accept these Terms of Use or any part of them, you should not enter or use the Website.

Nordhealth may modify or update these Terms of Use from time to time. If you continue to use this Website after any changes, this means you agree to be bound by the modified Terms of Use.

If we do make a change to the Terms of Use, we will post it at the top of this page, together with the date of the change, for better visibility.

## The Content

Webite provides a set of various content, such as organized tools, resources, and guidelines (“Content”) that work as the foundation for Nordhealth’s products.

## Conditions of Using Features on the Website and Content

Nordhealth hereby grants you a limited, non-exclusive, revocable license to access and use the Website and Content solely for the purpose of performing your duties for and on behalf of Nordhealth (the “Purpose”).

You may not access or use the Website and Content or reproduce, retransmit, disseminate, sell, publish, broadcast or use any of the Content available through it for any other reason.

If Nordhealth is informed or has any reason to believe that any of the Content on our Website are being used by a user other than in accordance with these Terms of Use, Nordhealth reserves the right to suspend or permanently prevent access by the user to the Website and Content and shall have no liability to the user whatsoever in such event.

## Website Content Accuracy

Nordhealth makes every effort to ensure that the Content of the Website is accurate and up-to-date, but Nordhealth does not offer any warranties (whether express, implied or otherwise) as to the reliability, accuracy or completeness of the Content appearing on the Website. The Website is provided “as is” and “as available” without express or implied warranty or condition of any kind.

## Privacy

The access to the Website and use of the Content is governed by Nordhealth’s Privacy Policy.

## Intellectual Property Rights

You acknowledge and agree that all copyright, rights in data, databases, trade-marks, names, images, logos and other intellectual property rights in the Website and in the Content, software and all HTML and other code involved in the Website (“Intellectual Property Rights”) shall stay at all times vested in Nordhealth and its subsidiaries and that these are protected by copyright and other laws and international treaty provisions.

Nothing contained in the Website shall be construed as conferring by implication or otherwise any license or right to use any of the Intellectual Property Rights displayed or subsisting on or in the Website other than in accordance with these Terms of Use.

## Limitation of Liability

While Nordhealth takes all reasonable steps to ensure that the Website is properly functioning at all times, Nordhealth does not warrant that this Website will be uninterrupted, timely, secure or error-free, that defects will be corrected, or that this Website or the server that makes it available are free of software viruses or bugs or other defects.

Nordhealth shall not be liable to you for any loss or damage you suffer as a result of visiting this Website or making use of the Content. You must take your own precautions (including, but not limited to, installing adequate protective measures to guard against software viruses and ensuring that you retain up-to-date copies of all data) to protect yourself against loss or damage.

## Governing Law

Your use of the Website and the Content will be governed by and construed in accordance with the laws of Finland.


# Working with AI

\*Nord Design System provides AI-friendly integrations that enable AI assistants and tools to understand and work with our components, design tokens, and documentation.\*

## Available Integrations

Use these integrations to enhance your AI-assisted development workflow with Nord Design System.

\*\*\[LLMs.txt]\(/docs/developer/working-with-ai/llms-txt/)\*\* - Structured documentation for LLMs

\*\*\[Agent Skills]\(/docs/developer/working-with-ai/skills/)\*\* - Install Nord skills for AI coding agents

## Why AI Integration?

AI assistants like Claude, ChatGPT, Cursor, and Windsurf can help you build faster with Nord Design System when they have access to accurate, up-to-date documentation. Our AI integrations provide:

- **Structured component information** - Properties, slots, events, and CSS custom properties
- **Usage examples** - Real code snippets and implementation patterns
- **Design token references** - Color, typography, spacing, and other design decisions
- **Best practices** - Guidelines and accessibility recommendations

## Quick Setup

### For AI Tools

Reference our LLMs.txt files directly:

- `https://nordhealth.design/llms.txt` - Structured overview
- `https://nordhealth.design/llms-full.txt` - Complete documentation


# LLMs.txt

## What is LLMs.txt?

LLMs.txt is a structured documentation format specifically designed for large language models (LLMs). Nord Design System provides LLMs.txt files that contain comprehensive information about our component library, making it easy for AI tools to understand and assist with Nord Design System development.

These files are optimized for AI consumption and contain structured information about components, APIs, usage patterns, and best practices.

## Available routes

We provide LLMs.txt routes to help AI tools access our documentation:

- [**`/llms.txt`**](https://nordhealth.design/llms.txt) - Contains a structured overview of all components and their documentation links (\~5K tokens)
- [**`/llms-full.txt`**](https://nordhealth.design/llms-full.txt) - Provides comprehensive documentation including implementation details, examples, design tokens, and migration guidance (\~1M+ tokens)

## Choosing the Right File

\> \[!NOTE]
\> \*\*Most users should start with \`/llms.txt\`\*\* - it contains all essential information and works with standard LLM context windows. Use \`/llms-full.txt\` only if you need comprehensive implementation examples and your AI tool supports large contexts (200K+ tokens).

## Important usage notes

\> \[!WARNING]
\> \*\*@-symbol must be typed manually\*\* - When using tools like Cursor or Windsurf, the \`@\` symbol must be typed by hand in the chat interface. Copy-pasting breaks the tool's ability to recognize it as a context reference.

## Usage with AI Tools

### Cursor

Nord Design System provides specialized LLMs.txt files that you can reference in Cursor for better AI assistance with component development.

#### How to use:

1. **Direct reference**: Mention the LLMs.txt URLs when asking questions
2. Add these specific URLs to your project context using `@docs`

[Read more about Cursor Web and Docs Search](https://docs.cursor.com/en/context/@-symbols/@-docs){rel="&#x22;nofollow&#x22;"}

### Windsurf

Windsurf can directly access the Nord Design System LLMs.txt files to understand component usage and best practices.

#### Using LLMs.txt with Windsurf:

- Use `@docs` to reference specific LLMs.txt URLs
- Create persistent rules referencing these URLs in your workspace

[Read more about Windsurf Web and Docs Search](https://docs.windsurf.com/windsurf/cascade/web-search){rel="&#x22;nofollow&#x22;"}

### Other AI Tools

Any AI tool that supports LLMs.txt can use these routes to better understand Nord Design System.

#### Examples for ChatGPT, Claude, or other LLMs:

- "Using Nord Design System documentation from <https://nordhealth.design/llms.txt>{rel="&#x22;nofollow&#x22;"}"
- "Follow complete Nord Design System guidelines from <https://nordhealth.design/llms-full.txt>{rel="&#x22;nofollow&#x22;"}"


# Agent Skills

## What are Agent Skills?

Agent Skills provide structured knowledge about Nord Design System directly to AI coding agents. Once installed, your AI assistant understands Nord components, design tokens, CSS framework, and best practices — without needing to reference documentation manually.

Skills follow the [Agent Skills Discovery RFC](https://github.com/cloudflare/agent-skills-discovery-rfc){rel="&#x22;nofollow&#x22;"} and work with **40+ AI coding agents** including Claude Code, Cursor, Codex CLI, GitHub Copilot, Windsurf, Cline, Aider, and more.

## Installation

Install the Nord skill using the `npx skills` CLI:

```bash
npx skills add https://nordhealth.design
```

This fetches the skill from our well-known discovery endpoint and adds it to your project.

## What the skill provides

The Nord skill gives your AI agent:

- **Component guidance** — how to use all 55+ `<nord-*>` web components correctly
- **Design tokens** — CSS custom property naming (`--n-color-*`, `--n-space-*`)
- **Styling approach** — Tailwind CSS v4 with `n:` variant prefix
- **Theming** — therapy/veterinary brands, dark mode, high contrast
- **Forms** — native form participation, validation patterns
- **Accessibility** — built-in ARIA, keyboard nav, screen reader support
- **Do/Don't rules** — common mistakes to avoid
- **Documentation index** — links to raw markdown for every component and guideline page

## Supported agents

The `npx skills` CLI supports any agent that reads project-level skill files. This includes:

- Claude Code
- Cursor
- Codex CLI
- GitHub Copilot
- Windsurf
- Cline
- Aider
- Continue
- And many more

See the full list at [github.com/vercel-labs/skills](https://github.com/vercel-labs/skills){rel="&#x22;nofollow&#x22;"}.

## Alternative: LLMs.txt

If your AI tool doesn't support agent skills, you can reference our documentation directly:

- [`nordhealth.design/llms.txt`](https://nordhealth.design/llms.txt) — Structured overview with raw Markdown links
- [`nordhealth.design/llms-full.txt`](https://nordhealth.design/llms-full.txt) — Complete inline documentation

See the [LLMs.txt](https://nordhealth.design/docs/developer/working-with-ai/llms-txt/) page for tool-specific setup instructions.


# Using Web Components

\*Nord makes it effortless to implement and use its components across any framework or no framework at all. We accomplish this by using standardized web platform APIs and Web Components.\*

Web Components are a set of technologies that provide a standards based component model for the Web. They allow us to create reusable [Custom Elements](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements){rel="&#x22;nofollow&#x22;"} with their functionality encapsulated away from the rest of the code.

This page covers setup, installation, bundling, and usage patterns. Looking for the reference pages for each Nord component? Browse the [Components library](https://nordhealth.design/components/).

We've chosen to use Web Components because there is a strong requirement for Nord to be used in many different contexts and with varying technologies — from static HTML pages to server-rendered apps, through to single page applications authored with frameworks such as [React](https://reactjs.org/){rel="&#x22;nofollow&#x22;"} and [Vue](https://vuejs.org/){rel="&#x22;nofollow&#x22;"}. Web Components work great for Nord, because they:

- Are tech-agnostic instead of tech-specific
- Future proof our system with Web Standards
- Allow us to use any framework or no framework at all
- Provide great encapsulation for styles and functionality

\[Browse components]\(/components/)

---

## Quick start

There are two necessary parts to using Nord's components — the [Components library](https://nordhealth.design/components/) itself, and the [CSS Framework](https://nordhealth.design/docs/developer/css-framework/). Everything else is optional. The fastest way to get started is to include the following directly into your page with `<script>` and `<link>` tags:

```html
<link rel="stylesheet" href="https://nordcdn.net/ds/css/5.2.0/nord.min.css" />
```

```html
<script type="module" src="https://nordcdn.net/ds/components/5.0.0/index.js"></script>
```

With these, you now have access to all of Nord's components! You can now for example add a button to your page:

```html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>Nord Design System</title>
    <link rel="stylesheet" href="https://nordcdn.net/ds/css/4.2.0/nord.min.css" />
    <script type="module" src="https://nordcdn.net/ds/components/4.11.0/index.js"></script>
  </head>
  <body>
    <nord-button variant="primary">Hello Nordie</nord-button>
  </body>
</html>
```

\> \[!WARNING]
\> Whilst this is a fast way to get started, the above method is not recommended for production since it will result in many small HTTP requests. This has a negative effect on page load times. We recommend using a
\> \[
\> bundler
\> ]\(#bundling)
\> for production, for optimal performance.

---

## Installation

We strive to support as many use-cases as possible for consuming Nord's components. In its purest form, you can include our components and styles via `<script>` and `<link>` tags served from our CDN.

This approach is best for rapid prototyping, for use in static HTML pages, or for integrating into existing apps which do not have a JavaScript build step. For all other cases we recommend installing the packages locally via npm/yarn.

### CDN installation

Include the following in the `<head>` of your web page:

```html
<link rel="stylesheet" href="https://nordcdn.net/ds/css/5.2.0/nord.min.css" />
```

```html
<script type="module" src="https://nordcdn.net/ds/components/5.0.0/index.js"></script>
```

If working on a custom themed app, you should also include the [theme](https://nordhealth.design/design/themes/) after the CSS Framework:

```html
<link rel="stylesheet" href="https://nordcdn.net/ds/css/5.2.0/nord.min.css" />
```

```html
<script type="module" src="https://nordcdn.net/ds/components/5.0.0/index.js"></script>
```

### Local installation

Before moving further with the installation, please make sure you have [Node.js](https://nodejs.org/en/){rel="&#x22;nofollow&#x22;"} installed on your machine. You can install the latest version through their website.

If you're planning on using Nord's Web Components in a project that doesn't yet use [Node Package Manager](https://www.npmjs.com){rel="&#x22;nofollow&#x22;"}, you'll have to first create a [package.json](https://docs.npmjs.com/files/package.json){rel="&#x22;nofollow&#x22;"} file. To do this, run `npm init` and follow the steps provided. Once finished, you can install Nord's Web Components by following the instructions below.

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

```bash
# With NPM
npm install @nordhealth/css @nordhealth/components --save

# With Yarn
yarn add @nordhealth/css @nordhealth/components
```

### Required styles

It's a requirement that you use our [CSS framework](https://nordhealth.design/core/css/) alongside the Web Components. The CSS framework includes all our [design tokens](https://nordhealth.design/core/tokens/), a [default theme](https://nordhealth.design/design/themes/) for the components, as well as a number of helpful utility classes.

Outside of the components themselves, we recommend leveraging the included [design tokens](https://nordhealth.design/core/tokens/) and [utility classes](https://nordhealth.design/core/css/) as much as possible to achieve a consistent look and feel.

If working in Veterinary or Healthcare space, you will also need a specific theme from our [themes package](https://nordhealth.design/design/themes/) in your application:

```bash
# With NPM
npm install @nordhealth/themes --save

# With Yarn
yarn add @nordhealth/themes
```

### Bundling

Bundling and transpiling are considered application concerns. We cannot anticipate all requirements, loading strategies, and so on. So we publish our components as ES modules, written for modern browsers. These can then be bundled, tree shaken, and optimized by individual applications.

To import all components:

```js
import '@nordhealth/components'
```

To import specific components, which allows for optimal tree shaking:

```js
import '@nordhealth/components/lib/Badge'
import '@nordhealth/components/lib/Button'
import '@nordhealth/components/lib/Input'
```

These imports automatically register the Web Components (side effects).

### Browser support

Nord is tested in the latest two versions of all major browsers. See [browser support](https://nordhealth.design/docs/developer/#browser-support) on the Getting Started page for the full list and our policy on older versions.

---

## Usage

### Properties

In browsers, elements have attributes in HTML and properties in JavaScript. Our attributes are always in `dash-case`, and the properties are in `camelCase`.

All attributes have corresponding underlying properties, but not all properties have corresponding attributes. Since HTML only has two types of values, strings and booleans, any property which is not a string or a boolean cannot exist as an attribute. For instance, a function cannot be passed via an attribute, so it must be passed via JavaScript:

```html
<nord-calendar></nord-calendar>

<script type="module">
  const calendar = document.querySelector('nord-calendar')

  // this could not be set via an attribute
  calendar.isDateDisabled = function isWeekend(date) {
    return date.getDay() === 0 || date.getDay() === 6
  }
</script>
```

Boolean attributes are considered `false` by omission, and `true` by inclusion. For instance, to set the `hideLabel` property of an input to `true`, you include the `hide-label` attribute without a value:

```html
<!-- hideLabel property is set to true -->
<nord-input label="Name" hide-label></nord-input>
```

It's recommended, as much as possible, to leverage attributes in HTML rather than properties in JavaScript.

---

### Events

Components emit custom DOM events, which can be listened to via `addEventListener` or whatever mechanism your framework of choice offers. It's worth noting that all our events bubble.

Where our components are drop-in replacements for native elements we follow native event names. For instance, our [Input](https://nordhealth.design/components/input/#events) and other form components, emit `change`, `input`, `blur`, `focus` events.

```html
<nord-input id="events-example" label="Name" />
<script type="module">

  document.querySelector("#events-example").addEventListener("focus", e => {
    console.log("focus", e.target)
  })
</script>
```

Where there is no equivalent native event, we prefix our event names with `nord-`. For instance, the [Command Menu](https://nordhealth.design/components/command-menu/#events) emits a `nord-select` event when a command is chosen from the menu.

\> \[!WARNING]
\> It's best to consult the documentation for each component to be sure of event names.

---

### Methods

Some components offer methods which you can call to invoke behavior. Interactive components like [Input](https://nordhealth.design/components/input/#methods), [Button](https://nordhealth.design/components/button/#methods) etc. offer `focus()`, `blur()`, and `click()` methods, which behave like the native equivalents. Some components offer methods for which there is no native equivalent. For instance, [Date Picker](https://nordhealth.design/components/date-picker/#methods) offers a `show()` and `hide()` method:

```html
<nord-stack>
<p>
Open date picker</p>
<nord-date-picker id="methods-example-picker" label="Date of birth" /></nord-stack>
<script type="module">

  const button = document.querySelector("#methods-example-button")
  const picker = document.querySelector("#methods-example-picker")

  button.addEventListener("click", () => {
    picker.show()
  })
</script>
```

If you are using a framework like React or Vue, you will need to get a reference to the DOM element to call the methods on. Please refer to the [Vue](https://vuejs.org/guide/essentials/template-refs.html){rel="&#x22;nofollow&#x22;"} or [React](https://reactjs.org/docs/refs-and-the-dom.html){rel="&#x22;nofollow&#x22;"} docs for further information.

\> \[!WARNING]
\> It's best to consult the documentation for each component to get a full description of methods and their parameters.

---

### Slots

Web Components offer a feature called [slots](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_templates_and_slots#adding_flexibility_with_slots){rel="&#x22;nofollow&#x22;"}. As with events, properties and methods, slots form part of the public API of a component. Slots allow web components to receive content as children, and place the content into their internal DOM.

The most common slot is the default slot, which captures any content placed as a child of a component that does not have a `slot` attribute. For instance, the [Button](https://nordhealth.design/components/button/#slots) component has a default slot:

```html
<p>
Log in</p>
```

In the above example the text "Log in" is placed into the Button's default slot. You can also place elements inside the default slot, as can be seen here with the [Card](https://nordhealth.design/components/card/) component:

```html
<nord-card>
  
<p>
Hello world</p></nord-card>
```

Some components also offer named slots. Slot names are decided by the components themselves. Named slots are used to differentiate certain types of content, giving components control over style and position. Here we use the [Button](https://nordhealth.design/components/button/) component's `start` slot to position an icon. Notice the `slot="start"` attribute:

```html
<p>
Delete</p>
```

Slotted elements can be placed anywhere inside a component. The component will always place it in the correct place internally. Therefore, the below example will produce the exact same result as above, despite the order being changed:

```html
<p>
Delete</p>
```

\> \[!WARNING]
\> Refer to a component's documentation for a complete list of available slots.

---

### Composition

Composition is how we give you more flexibility and customisability. Rather than configuring a single element through a long list of properties, many of our presentational components are built to be assembled by nesting dedicated child components — for example [Accordion](https://nordhealth.design/components/accordion/) with its accordion items, [Item](https://nordhealth.design/components/item/) with its media, content and action parts, or [Pagination](https://nordhealth.design/components/pagination/) with its links and controls:

```html
<nord-item variant="outline">
  <nord-item-media variant="icon">
    <!-- icon, avatar or image -->
  </nord-item-media>
  <nord-item-content>
    <nord-item-title>Title</nord-item-title>
    <nord-item-description>Secondary line of text.</nord-item-description>
  </nord-item-content>
  <nord-item-actions>
    <!-- buttons or a chevron -->
  </nord-item-actions>
</nord-item>
```

Because these are real elements in your own markup, you can arrange, restyle and extend them, and interleave your own content — customisation that a single fixed element can't offer. This is the direction we favour for new presentational components.

---

### CSS Properties

Our Web Components offer CSS Custom Properties to allow for fine grained control over their presentation. These aren't offered as an alternative to [properties](https://nordhealth.design/#properties), you should use properties whenever possible, but more as an "escape hatch" for when a component needs to meet an edge case.

Component custom properties are prefixed with `--n-` followed by the name of the component and the property in question. For example consider this [Banner](https://nordhealth.design/components/banner/) component that we want to add a `box-shadow` to:

```html
<nord-stack>
<p>
> [!WARNING]
> Default banner presentation</p>
<p>
> [!WARNING]
> Banner with box-shadow added</p></nord-stack>
```

Custom properties are inheritable as well which means they can be applied to any parent, or even the `:root` element, and their respective component will inherit the value(s).

```html
<nord-stack>
<p>
> [!NOTE]
> Example banner</p>
<p>
> [!WARNING]
> Example banner</p>
<p>
> [!WARNING]
> Example banner</p></nord-stack>
<style>

  .custom-property-banners {
    --n-banner-box-shadow: var(--n-box-shadow);
  }
</style>
```

You can see all the available custom properties for the Banner component on [its respective docs page](https://nordhealth.design/components/banner/?example=inside+card#css-properties). Custom properties differ from component to component, refer to the component's documentation for a complete list of available custom properties.

\> \[!WARNING]
\> Always use a component's properties over a CSS custom property wherever possible. CSS Custom properties are built with a counterpart "private" property, prefixed with
\> \`
\> --\_n-
\> \`
\> . Please refrain from using private properties as they are always subject to change and intended for internal component use only.

---

### Themes

We offer light and dark [themes](https://nordhealth.design/design/themes/) for components in addition to high contrast variants. Themes operate at a global level, rather than per component. The [CSS Framework](https://nordhealth.design/docs/developer/css-framework/) includes the light theme by default. For theme specific documentation, please see [themes documentation](https://nordhealth.design/design/themes/). Make sure to try [theme builder](https://nordhealth.design/theme-builder/) as well to get familiar with theming and how to customize it.

```bash
# Install themes using NPM
npm install @nordhealth/themes --save

# Install themes using Yarn
yarn add @nordhealth/themes
```

\[]\(/design/themes/)\[Themes documentation]\(/design/themes/)

---

### Waiting for components to load

Web Components are entirely self-contained (both styles and behavior), and can be loaded/defined asynchronously. Therefore a component may not be ready for use immediately.

When a component is loading, it should be hidden from view to avoid a Flash Of Un-styled Component (see [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content){rel="&#x22;nofollow&#x22;"}). Our CSS framework will do this for you, as long as it is loaded *before* the components.

If you set a property/attribute on a custom element before it's loaded, it will be applied correctly and will use the values once it's loaded. However, you *cannot* call a method on a component before the component is loaded.

Most of the time this is not an issue, as you will be calling methods in event handlers etc, when the component has already loaded. In cases where you want to call a method as soon as possible, for example on page load, you need to wait for the component to be defined, using [`customElements.whenDefined`](https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry/whenDefined){rel="&#x22;nofollow&#x22;"}:

```html
<nord-date-picker id="loading-example" label="Enter date" />
<script type="module">

  const picker = document.querySelector("#loading-example")

  // It's fine to set properties while components are still loading
  picker.isDateDisabled = function isWeekend(date) {
    return date.getDay() === 0 || date.getDay() === 6
  }

  // but if you want to immediately call a method,
  // you should wait for the component to be defined
  await customElements.whenDefined("nord-date-picker")
  picker.click()
</script>
```

---

### Code completion for VS Code

We generate TypeScript type definitions for all our Web Components. This will allow VS Code, and other editors, to offer code completion and type information for properties and methods, whether using TypeScript or not.

Refer to our specific instructions for [React](https://nordhealth.design/#types-and-editor-integration-with-react) and [Vue](https://nordhealth.design/#types-and-editor-integration-with-vue).

---

### Form controls

All our input components raise `change` events, and where it makes sense `input` events. These are useful for client-side validation, or for gathering values in javascript-based apps like with [Vue](https://nordhealth.design/#vue) or [React](https://nordhealth.design/#react).

Data inputs take a different approach to composition: they are standalone by default. A single element such as [Input](https://nordhealth.design/components/input/) bundles its label, hint and error message, so the common case works with no extra markup. When you need more control over layout, you can opt out of this built-in chrome and compose the parts yourself — place the control inside a [Field](https://nordhealth.design/components/field/), which supplies the label, helper text and error, or hide individual parts with attributes like `hide-label`. Convenient by default, composable when you need it.

```html
<form id="form-events-example">

  
<nord-stack>

    
<nord-input label="First name" name="firstName" />

    
<nord-input label="Last name" name="lastName" />

    
<p>
Submit</p>

    
<output />

  </nord-stack></form>
<script type="module">

  const data = {}
  const form = document.querySelector("#form-events-example")
  const output = form.querySelector("output")

  // Input events bubbling up from input components
  form.addEventListener("input", e => {
    data[e.target.name] = e.target.value
  })

  form.addEventListener("submit", e=> {
    e.preventDefault()
    output.innerHTML = `<code>${JSON.stringify(data)}</code>`
  })
</script>
```

For server-rendered apps, our components hook into the browser's [`formdata`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/formdata_event){rel="&#x22;nofollow&#x22;"} event, which means that our components' values will be submitted as part of POST/GET traditional form submissions, like native HTML elements:

```html
<form id="form-submission-example">

  
<nord-stack>

    
<nord-input label="First name" name="firstName" />

    
<nord-input label="Last name" name="lastName" />

    
<p>
Submit</p>

    
<output />

  </nord-stack></form>
<script type="module">

  const form = document.querySelector("#form-submission-example")
  const output = form.querySelector("output")

  const url = new URL(location.href)

  if (url.searchParams) {
    output.innerHTML = `<code>${url.searchParams}</code>`
  }
</script>
```

The browser's built-in [`FormData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData){rel="&#x22;nofollow&#x22;"} object can also be used to get all values from a form via JavaScript:

```html
<form id="form-data-example">

  
<nord-stack>

    
<nord-input label="First name" name="firstName" />

    
<nord-input label="Last name" name="lastName" />

    
<p>
Submit</p>

    
<output />

  </nord-stack></form>
<script type="module">

  const form = document.querySelector("#form-data-example")
  const output = form.querySelector("output")

  form.addEventListener("submit", e => {
    e.preventDefault()
    const data = new FormData(form)

    // This is an example, refer to MDN for more info about FormData.
    output.innerHTML = `<code>${JSON.stringify(Object.fromEntries(data))}</code>`
  })
</script>
```

---

### Localization

Nord provides a lightweight solution for localizing its components. Not all components need localizing, as for the most part snippets of text are set per instance. For example, the label on an [Input](https://nordhealth.design/components/input) will likely be changed every time you use it. Those cases are an app-level concern.

However, some components have text which has no reason to change per instance. For example, the usage instructions in the footer of the [Command menu](https://nordhealth.design/components/command-menu/), or the accessible labels for next/previous month buttons of the [Calendar](https://nordhealth.design/components/calendar/).

For the latter cases, we provide a localization mechanism. It is not possible or feasible for Nord to anticipate every locale in which the components might be consumed, so we rely on individual teams and applications to translate and configure localization. To ensure Nord components work out of the box, we bundle translations for `en-US`.

\[View localization documentation]\(/docs/developer/localization/)

---

## React

As of version 19, React has [excellent support](https://custom-elements-everywhere.com/#react){rel="&#x22;nofollow&#x22;"} for Web Components. They can now be used directly, with no [wrappers](https://nordhealth.design/#react-wrappers) or setup necessary.

\[View example React project]\(https\://github.com/nordhealth/react-example-project)

### Installation

Install with npm:

```bash
npm install @nordhealth/components @nordhealth/css --save
```

or yarn:

```bash
yarn add @nordhealth/components @nordhealth/css
```

### Usage

Import the `@nordhealth/components` and `@nordhealth/css` packages in your main entry point:

```jsx
// main.jsx
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import App from './App.jsx'
import './index.css'

import '@nordhealth/css'
import '@nordhealth/components'

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>
)
```

Then you can use the Nord's components throughout your app. For instance, here is an example using a JSX component:

```js
import { useState } from 'react'

function CounterButton() {
  const [count, setCount] = useState(0)

  return (
    <>
      <nord-button variant="primary" onClick={() => setCount(count + 1)}>
        Clicks:
        {' '}
        {count}
      </nord-button>
    </>
  )
}

export default CounterButton
```

For optimal tree shaking, don't import the `@nordhealth/components` package in the main entry point. Instead, import the specific Nord components you're using in each component. For example:

```js
import { useState } from 'react'
import '@nordhealth/components/lib/Button'

function CounterButton() {
  const [count, setCount] = useState(0)

  return (
    <>
      <nord-button variant="primary" onClick={() => setCount(count + 1)}>
        Clicks:
        {' '}
        {count}
      </nord-button>
    </>
  )
}

export default CounterButton
```

The following example shows how to use refs in a TypeScript application:

```tsx
import type { Input } from '@nordhealth/components'
import { useRef } from 'react'

function FocusInput() {
  const inputRef = useRef<Input>(null)

  return (
    <>
      <nord-button onClick={() => inputRef.current?.focus()} variant="primary">
        Focus input
      </nord-button>
      <nord-input label="Name" ref={inputRef}></nord-input>
    </>
  )
}

export default FocusInput
```

React requires that event listeners for Web Components use the event name **verbatim**. For instance, if a Web Component has an event named `exampleEvent`, you must listen for the `onexampleEvent` event. If a Web Component has an event named `example-event`, you must listen for the `onexample-event` event. This is unusual for React, which typically expects events to be like `onExampleEvent`. For example, this is how you would listen to the [`nord-focus-date` event of the Calendar component](https://nordhealth.design/components/calendar#events):

```js
import { useState } from 'react'

function Calendar() {
  const [focusedDate, setFocusedDate] = useState('')

  return (
    <>
      <p>
        Focused date:
        {focusedDate}
      </p>
      <nord-calendar
        onnord-focus-date={e =>
          setFocusedDate(
            e.date.toLocaleDateString('en', {
              year: 'numeric',
              month: 'long',
              day: 'numeric',
            })
          )}
      >
      </nord-calendar>
    </>
  )
}

export default Calendar
```

\> \[!WARNING]
\> Note: For events that have the same name as a native event, you can still use the syntax you would expect. For example,
\> \`
\> onChange
\> \`
\> or
\> \`
\> onInput
\> \`
\> .

### Types and editor integration with React

Nord's components work out of the box with React, but they don't provide any TypeScript support or editor integration. To improve the developer experience, we offer React-specific types for our components. They allow you to get IntelliSense for Nord components in JSX. Both in TypeScript and JavaScript projects.

To integrate these into your project, install `@nordhealth/components` as you normally would. Then add the following to your `tsconfig.json` in a TypeScript project, or `jsconfig.json` in a JavaScript project:

```json
{
  "compilerOptions": {
    "types": ["@nordhealth/components/lib/react.d.ts"]
  }
}
```

Now you should get full type support for Nord components in your React project. Including IntelliSense for Nord components in JSX.

### Server-side rendering (SSR) with React

Nord components can be imported in non-browser environments, for *shallowly* rendering on the server (within Next.js, for example). That is, the Nord component's tag and attributes set via JSX will be rendered, but the component's shadow DOM with all the styles and HTML in it will not be rendered on the server.

You might get hydration mismatch errors for some components, since Nord components reflect default values for properties to attributes after being defined, and some render to the light DOM. You can resolve these hydration mismatch errors by disabling server-side rendering for the component, or by adding `suppressHydrationWarning` to the component.

If you are using Next.js App Router, you must make sure any Nord components you import are beyond the `"use client";` boundary.

\> \[!WARNING]
\> Note: we currently don't support server-side rendering of Nord components with the shadow DOM included.

### React wrappers

Whilst React supports Web Components, they were very awkward to use as-is [before React 19](https://react.dev/blog/2024/12/05/react-19#support-for-custom-elements){rel="&#x22;nofollow&#x22;"}. For this reason, we provide React-specific wrapper components in the package `@nordhealth/react`. This will allow you to use the Nord components as you would any other React component.

\> \[!WARNING]
\> Note: React 19 makes these wrapper components unnecessary, so the
\> \`@nordhealth/react\`
\> package has been deprecated and will be removed in the next major release.
\>
\>
\>
\>
\> For now,
\> \`@nordhealth/react\`
\> will continue to receive updates as its build is fully automated, but you should start planning on utilizing the
\> \`@nordhealth/components\`
\> package directly where possible.
\>
\>
\>
\>
\> To continue having full type checking and auto-completion in your JSX, you can use
\> \[the new type definition file for React]\(#types-and-editor-integration-with-react)
\> .

Install with npm:

```bash
npm install @nordhealth/react @nordhealth/css --save
```

or yarn:

```bash
yarn add @nordhealth/react @nordhealth/css
```

You must import `@nordhealth/css` once in your main entry point, then import components from `@nordhealth/react` wherever they are needed:

```jsx
import { Button } from '@nordhealth/react'
import { useState } from 'react'
import { createRoot } from 'react-dom/client'
import '@nordhealth/css'

function App() {
  const [count, setCount] = useState(0)

  return (
    <Button
      variant="primary"
      onClick={() => setCount(count + 1)}
    >
      Clicks:
      {' '}
      {count}
    </Button>
  )
}

const root = createRoot(document.querySelector('#app'))
root.render(<App />)
```

The React wrapper components forward their refs, so that you can get access to the underlying web component instance with `useRef`. The `@nordhealth/react` package also exports types for all the Web Components for convenience.

The following example shows how to use refs in a TypeScript application:

```tsx
import type { InputWC } from '@nordhealth/react'
import { Button, Input } from '@nordhealth/react'
import { useRef } from 'react'
import { createRoot } from 'react-dom/client'
import '@nordhealth/css'

function App() {
  const inputRef = useRef<InputWC>(null)

  function handleClick() {
    inputRef.current?.focus()
  }

  return (
    <>
      <Button variant="primary" onClick={handleClick}>
        Focus input
      </Button>
      <Input label="Name" ref={inputRef} />
    </>
  )
}

const root = createRoot(document.querySelector('#app'))
root.render(<App />)
```

### Disabling server-side rendering within Next.js

If you are using the React wrapper components within Next.js, then the easiest way of disabling server-side rendering is by importing them from our Next.js specific integration:

```js
// instead of:
import { Button } from "@nordhealth/react"

// do this:
import { Button } from "@nordhealth/react/lib/next.js"
```

This creates [dynamic imports with `ssr` set to `false`](https://nextjs.org/docs/app/building-your-application/optimizing/lazy-loading#skipping-ssr){rel="&#x22;nofollow&#x22;"} for you, so they only get loaded on the client side.

If you are using Next.js App Router, you must make sure any Nord components you import are beyond the `"use client";` boundary.

\> \[!WARNING]
\> Note: the
\> \`@nordhealth/react\`
\> package (which includes the Next.js integration) has been deprecated and will be removed in the next major release.

---

## Vue

Vue has [excellent support](https://custom-elements-everywhere.com/#vue){rel="&#x22;nofollow&#x22;"} for Web Components out of the box, it only requires a little configuration.

\[View example Vue project]\(https\://github.com/nordhealth/vue-example-project)

### Installation

Install with npm:

```bash
npm install @nordhealth/components @nordhealth/css --save
```

or yarn:

```bash
yarn add @nordhealth/components @nordhealth/css
```

### Configuration

Vue needs to be configured to recognize Web Components. If you're using Vite, it can be done like this:

```js
// vite.config.js
import vue from '@vitejs/plugin-vue'

export default {
  plugins: [
    vue({
      template: {
        compilerOptions: {
          // treat all tags with a dash as custom elements
          isCustomElement: tag => tag.includes('-')
        }
      }
    })
  ]
}
```

For more information, and how to configure for other setups (e.g. Vue CLI), please see the [Vue docs](https://vuejs.org/guide/extras/web-components.html#using-custom-elements-in-vue){rel="&#x22;nofollow&#x22;"}.

### Usage

Import the `@nordhealth/components` and `@nordhealth/css` packages in your main entry point:

```js
import { createApp } from 'vue'
import App from './App.vue'

// main.js
import '@nordhealth/css'
import '@nordhealth/components'

createApp(App).mount('#app')
```

Then you can use the Nord's components throughout your app. For instance, here is an example using a single-file component:

```html
<script setup>
  import { ref } from 'vue'

  const count = ref(0)
</script>

<template>
  <nord-button variant="primary" @click="count++"> Count is: {{ count }} </nord-button>
</template>
```

For optimal tree shaking, don't import the `@nordhealth/components` package in the main entry point. Instead, import the specific Nord components you're using in each component. For example:

```html
<script setup>
  import { ref } from 'vue'
  import '@nordhealth/components/lib/Button'

  const count = ref(0)
</script>

<template>
  <nord-button variant="primary" @click="count++"> Count is: {{ count }} </nord-button>
</template>
```

Our components also support the [`v-model`](https://vuejs.org/api/built-in-directives.html#v-model){rel="&#x22;nofollow&#x22;"} directive for two-way data binding:

```html
<script setup>
  import { ref } from 'vue'

  const name = ref('')
</script>

<template>
  <nord-input v-model="name" label="Name"></nord-input>
  <output>{{ name }}</output>
</template>
```

However, for our [Checkbox](https://nordhealth.design/components/checkbox/), [Toggle](https://nordhealth.design/components/toggle/), and [Tag](https://nordhealth.design/components/tag/) components you need to add `type="checkbox"` to get [`v-model`](https://vuejs.org/api/built-in-directives.html#v-model){rel="&#x22;nofollow&#x22;"} working. Otherwise, Vue has no way of knowing that it should bind to the `checked` property instead of the `value` property. For example:

```html
<script setup>
  import { ref } from 'vue'

  const selected = ref(false)
</script>

<template>
  <nord-checkbox v-model="selected" type="checkbox" label="Label"></nord-checkbox>
  <output>{{ selected }}</output>
</template>
```

Alternatively, you can always use the more verbose equivalent to [`v-model`](https://vuejs.org/api/built-in-directives.html#v-model){rel="&#x22;nofollow&#x22;"}:

```html
<script setup>
  import { ref } from 'vue'

  const selected = ref(false)
</script>

<template>
  <nord-checkbox :checked="selected" label="Label" @change="selected = $event.target.checked"></nord-checkbox>
  <output>{{ selected }}</output>
</template>
```

Sometimes, you may need to pass complex data such as objects, arrays, and functions. These must be passed to a Web Component as *properties* rather than *attributes*. For the most part, Vue does the correct thing, and will handle this without any particular treatment.

However, there may be rare cases where you need to be more explicit that you're supplying a property. For this, Vue has the syntax `.propName="value"`, where `propName` is the name of the property.

For instance, here is an example of passing a function to a component:

```html
<script setup>
  const isWeekend = (date) => date.getDay() === 0 || date.getDay() === 6
</script>

<template>
  <nord-date-picker label="Date of birth" .isDateDisabled="isWeekend"></nord-date-picker>
</template>
```

You can integrate Nord components with RouterLink components from Vue Router like this:

```html
<router-link to="/home" custom v-slot="{ navigate, href, route }">
  <nord-button :href="href" @click="navigate">{{ route.fullPath }}</nord-button>
</router-link>
```

Check out [the Vue Router](https://router.vuejs.org/api/#custom){rel="&#x22;nofollow&#x22;"} documentation for more information.

### Styling

Because our Web Components come with their styles built in, and our [CSS Framework](https://nordhealth.design/docs/developer/css-framework/) comes with [utility helpers](https://nordhealth.design/docs/developer/css-framework/#utilities), you should very rarely need to add CSS to Vue components. However, if you need to add custom styles, please use our [tokens](https://nordhealth.design/core/tokens/) instead of fixed values and add scoped CSS within [Single-File Components](https://vuejs.org/guide/scaling-up/sfc.html){rel="&#x22;nofollow&#x22;"}:

```html
<template>
  <nord-badge>Status</nord-badge>
</template>

<style scoped>
  nord-badge {
    text-transform: capitalize;
  }
</style>
```

Using the `scoped` attribute will ensure the styles don't leak out of your component and affect other components.

Check out [the official Vue](https://vuejs.org/api/sfc-css-features.html){rel="&#x22;nofollow&#x22;"} documentation for more information.

### Types and editor integration with Vue

Nord's components work out of the box with Vue, but they don't provide any TypeScript support or editor integration. To improve the developer experience, we offer Vue-specific types for our components. They allow you to get IntelliSense for Nord components in templates of Vue Single-File Components. Both in TypeScript and JavaScript projects.

To integrate these into your project, install `@nordhealth/components` as you normally would. Then add the following to your `tsconfig.json` in a TypeScript project, or `jsconfig.json` in a JavaScript project:

```json
{
  "compilerOptions": {
    "types": ["@nordhealth/components/lib/vue.d.ts"]
  }
}
```

Now you should get full type support for Nord components in your Vue project. Including IntelliSense for Nord components in templates of Vue Single-File Components.

\> \[!WARNING]
\> Note: previously these types lived in a dedicated
\> \`
\> @nordhealth/vue
\> \`
\> package, but this package has been deprecated and will be removed in the next major version.
\>
\>
\>
\>
\> For now,
\> \`@nordhealth/vue\`
\> will continue to receive updates as its build is fully automated, but you should start planning on utilizing the new
\> \`@nordhealth/components/lib/vue.d.ts\`
\> type definition file instead.

### Server-side rendering (SSR) with Vue

Nord components can be imported in non-browser environments, for *shallowly* rendering on the server (within Nuxt, for example). That is, the Nord component's tag and attributes set via the Vue template will be rendered, but the component's shadow DOM with all the styles and HTML in it will not be rendered on the server.

You might get hydration mismatch errors for some components, since Nord components reflect default values for properties to attributes after being defined, and some render to the light DOM. You can resolve these hydration mismatch errors by disabling server-side rendering for the component, or by using the [data-allow-mismatch](https://vuejs.org/api/ssr.html#data-allow-mismatch){rel="&#x22;nofollow&#x22;"} attribute on the component.

\> \[!WARNING]
\> Note: we currently don't support server-side rendering of Nord components with the shadow DOM included.

---

## Can I use this in my own project?

Nord Design System is solely meant for building digital products and experiences for [Nordhealth](https://nordhealth.com/){rel="&#x22;nofollow&#x22;"}. Please see the [terms of use](https://nordhealth.design/resources/terms/) for full license details.

---

## Support

Need help with our Web Components? Please head over to the [Support page](https://nordhealth.design/resources/support/) for more guidelines and ways to contact us.

---

## Attribution

Special thanks to the following projects that help make Nord possible.

- Components are built with [Lit](https://lit.dev/){rel="&#x22;nofollow&#x22;"}.
- Component metadata is generated by the [Custom Elements Manifest Analyzer](https://github.com/open-wc/custom-elements-manifest){rel="&#x22;nofollow&#x22;"}.
- Documentation is powered by [Nuxt Content](https://content.nuxt.com/){rel="&#x22;nofollow&#x22;"}.


# Webfonts

\*Get started with Nord Design System’s Webfonts that are designed to be used in combination with our CSS Framework to provide a consistent look and feel across all of our products.\*

## Integration

Integrating Nord Design System’s Webfonts into your project is straightforward. You can start using our webfonts immediately by adding the below tag to the `<head>` of your application.

```html
<link rel="stylesheet" href="https://nordcdn.net/ds/fonts/3.0.4/fonts.css" />
```

While not recommended for normal use, you can also self-host Nord Design System’s Webfonts by following the instructions below. This might be required in cases where your application is running inside a sandboxed environment or similar.

\> \[!WARNING]
\> Please note that in most cases you will want to install our \[CSS Framework]\(/docs/developer/css-framework/) instead of Webfonts package directly. CSS Framework imports this package internally and gives you wide range of shorthand utility classes to modify an element's appearance in your application.

---

## Installing Webfonts

Before moving further with the installation, please make sure you have [Node.js](https://nodejs.org/en/){rel="&#x22;nofollow&#x22;"} installed on your machine. You can install the latest version through their website.

If you’re planning on using Nord Design System’s Webfonts in a project that doesn’t yet use [Node Package Manager](https://www.npmjs.com){rel="&#x22;nofollow&#x22;"}, you’ll have to first create a [package.json](https://docs.npmjs.com/files/package.json){rel="&#x22;nofollow&#x22;"} file. To do this, run `npm init` and follow the steps provided. Once finished, you can install Nordhealth’s Fonts by following the instructions below.

### Install using NPM

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

```bash
npm install @nordhealth/fonts
```

### Install using Yarn

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

```bash
yarn add @nordhealth/fonts
```

---

## Usage

Nord Design System’s Webfonts ship with font files and CSS to self-host them. While you can use [Webpack](https://webpack.github.io/){rel="&#x22;nofollow&#x22;"} or similar build tool to require the fonts, the easiest way is to install `copyfiles` NPM package and copy the files over:

```bash
npm install copyfiles --save-dev
```

Once installed, add a script to your package.json that copies the fonts from our package into a location you’ve specified:

```jsonc
"scripts": {
  "copy:fonts": "copyfiles --flat node_modules/@nordhealth/fonts/lib/* src/SPECIFY_YOUR_PATH"
}
```

You can call this script while starting up your app to make sure you’ve always got the latest fonts copied over. If you're using an UNIX-like environment, you can use `&` as the separator:

```jsonc
"start": "copy:fonts & dev"
```

Otherwise, if you need a cross-platform solution, use [npm-run-all module](https://www.npmjs.com/package/npm-run-all){rel="&#x22;nofollow&#x22;"}:

```jsonc
"start": "npm-run-all copy:fonts dev"
```

### Import in SCSS

Once you have fonts installed, you can import them in your project. Nord Design System’s Webfonts provide both SCSS and Less helpers to do this. To import the fonts in SCSS, include this in the beginning of your main SCSS partial:

```scss
// Sets correct path to font files
$nord-font-path: '/assets/fonts';

// Import fonts
@import '../../node_modules/@nordhealth/fonts/lib/fonts.scss';
```

You may need to edit the paths shown above depending on your setup. If you’re using Webpack, you can further simplify the above to:

```scss
// Sets correct path to font files
$nord-font-path: '/assets/fonts';

// Import fonts
@import '~@nordhealth/fonts/lib/fonts.scss';
```

Nord Design System’s Webfonts also provide a way to control the font loading technique using [CSS font-display](https://developer.mozilla.org/en-US/Web/CSS/@font-face/font-display){rel="&#x22;nofollow&#x22;"}. This allows you to adjust the load performance of your app:

```scss
// Change the font loading technique
// auto, block, swap, fallback, optional
$nord-font-display: auto;
```

\> \[!WARNING]
\> When you've imported the fonts in your project, you should use the font-families and font-weights defined in \[Design Tokens]\(/core/tokens/) as its API and naming conventions match the ones used in Nord Design System's Webfonts package.

### Import in Less

To import fonts in Less, include this in the beginning of your main Less partial:

```less
// Sets correct path to font files
@nord-font-path: '/assets/fonts';

// Import fonts
@import '../../node_modules/@nordhealth/fonts/lib/fonts.less';
```

### Import in CSS

You can also import fonts in plain CSS directly from the [Nord CDN](https://nordhealth.design/docs/developer/cdn/). Include this in the beginning of your head:

```html
<link rel="stylesheet" href="https://nordcdn.net/ds/fonts/3.0.4/fonts.css" />
```

---

## Can I use the Webfonts in my own project?

Nord Design System is solely meant for building digital products and experiences for [Nordhealth](https://nordhealth.com){rel="&#x22;nofollow&#x22;"}. Please see the [terms of use](https://nordhealth.design/resources/terms/) for full license details.

---

## Getting support

Need help with our Webfonts? Please head over to the [Support page](https://nordhealth.design/resources/support/) for more guidelines and ways to contact us.


# Content Delivery Network

\*Nord Design System serves all of its packages via a Content Delivery Network for better performance and stability. Nord CDN also makes it faster to implement and use our packages in production.\*

A Content Delivery Network (CDN) is a group of geographically distributed servers that speed up the delivery of web content by bringing it closer to where users are. CDNs cache content like web pages, images, and video in proxy servers near to your physical location. Some of the benefits of using Nord’s CDN includes:

- Faster load times and better performance for all users
- CDN scales more rapidly during heavy traffic
- Minimizes risk of traffic spikes at point of origin, ensuring stability
- Decreases infrastructure costs due to traffic offloading
- Faster to get up and running with development work

---

## Available packages

The following packages are available for usage via Nord CDN:

- **[Web Components](https://nordhealth.design/components/):** `https://nordcdn.net/ds/components/`
- **[Design Tokens](https://nordhealth.design/core/tokens/):** `https://nordcdn.net/ds/tokens/`
- **[Themes](https://nordhealth.design/design/themes/):** `https://nordcdn.net/ds/themes/`
- **[Webfonts](https://nordhealth.design/docs/developer/webfonts/):** `https://nordcdn.net/ds/fonts/`
- **[CSS Framework](https://nordhealth.design/docs/developer/css-framework/):** `https://nordcdn.net/ds/css/`
- **[Nordicons](https://nordhealth.design/icons/):** `https://nordcdn.net/ds/icons/`
- **[Color Utilities](https://nordhealth.design/design/foundations/color-utilities/):** `https://nordcdn.net/ds/color/`
- **[Ag Theme Nord](https://nordhealth.design/components/table/#recommendation-for-component-based-libraries):** `https://nordcdn.net/ds/ag-theme-nord/`

---

## URL structure

Nord CDN uses the following URL structure for the hosted packages:

```html
https://nordcdn.net/ds/<package
  >/<version>/<file> </file></version
></package>
```

To fetch e.g. the Webfonts using the above format, you would write it like:

```html
https://nordcdn.net/ds/fonts/2.0.0/fonts.css
```

- To find URLs for Webfonts, see [Webfonts documentation](https://nordhealth.design/docs/developer/webfonts/)
- To find URLs for Design Tokens, see [Design Tokens documentation](https://nordhealth.design/core/tokens/#usage)
- To find URLs for Themes, see [Themes documentation](https://nordhealth.design/design/themes/)
- To find URLs for Nordicons, see [Nordicons documentation](https://nordhealth.design/icons/)
- To find URLs for Color Utilities, scroll down.
- To find URLs for AG Theme Nord, scroll down.

---

## Subresource Integrity

Subresource Integrity is a security feature that enables browsers to verify that resources they fetch from a CDN are delivered without unexpected manipulation. It works by allowing you to provide a cryptographic hash that a fetched resource must match ([source: MDN](https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity){rel="&#x22;nofollow&#x22;"}).

Our documentation automatically provides cryptographic hashes for the latest available package versions. To enable SRI verification, use the following tags in the `<head>` of your application:

### Design Tokens

```html
<link rel="stylesheet" href="https://nordcdn.net/ds/tokens/9.0.0/tokens.custom-properties.css" />
```

### Webfonts

```html
<link rel="stylesheet" href="https://nordcdn.net/ds/fonts/3.0.4/fonts.css" />
```

### Web Components

```html
<script type="module" src="https://nordcdn.net/ds/components/5.0.0/index.js"></script>
```

### CSS Framework

```html
<link rel="stylesheet" href="https://nordcdn.net/ds/css/5.2.0/nord.min.css" />
```

### Nordicons

```html
<img src="https://nordcdn.net/ds/icons/3.17.0/assets/[ICON NAME].svg" height="24" width="24" alt="" />
```

### Themes

::div{.n-theme-nord}
::

::div{.n-theme-nord-high-contrast}
::

::div{.n-theme-nord-dark}
::

::div{.n-theme-nord-dark-high-contrast}
::

### Color Utilities

```html
<script src="https://nordcdn.net/ds/color/3.0.18/index.min.js"></script>
```

### AG Theme Nord

```html
<link rel="stylesheet" href="https://nordcdn.net/ds/ag-theme-nord/3.0.19/ag-theme-nord.min.css" />
```

---

## Available versions

Nord CDN includes versioned releases of the following packages starting from:

- **@nordhealth/tokens:** `1.0.0` and newer
- **@nordhealth/themes:** `2.0.0` and newer
- **@nordhealth/fonts:** `2.0.0` and newer
- **@nordhealth/components:** `1.0.0-alpha.23` and newer
- **@nordhealth/css:** `1.0.0-alpha.0` and newer
- **@nordhealth/color:** `1.0.0` and newer
- **@nordhealth/ag-theme-nord:** `1.0.0` and newer

---

## Can I use Nord CDN in my own project?

Nord Design System is solely meant for building digital products and experiences for [Nordhealth](https://nordhealth.com){rel="&#x22;nofollow&#x22;"}. Please see the [terms of use](https://nordhealth.design/resources/terms/) for full license details.

## Getting support

Need help with Nord CDN? Please head over to the [Support page](https://nordhealth.design/resources/support/) for more guidelines and ways to contact us.


# Localization

\*Localization is the process of adapting a product's translation to a specific country or region. Our team is committed to providing a high-quality experience for all our international users.\*

Nord provides a lightweight solution for localizing its components. Not all components need localizing, as for the most part snippets of text are set per instance. For example, the label on an [Input](https://nordhealth.design/components/input) will likely be changed every time you use it. Those cases are an app-level concern.

However, some components have text which has no reason to change per instance. For example, the usage instructions in the footer of the [Command menu](https://nordhealth.design/components/command-menu/), or the accessible labels for next/previous month buttons of the [Calendar](https://nordhealth.design/components/calendar/).

For the latter cases, we provide a localization mechanism. It is not possible or feasible for Nord to anticipate every locale in which the components might be consumed, so we rely on individual teams and applications to translate and configure localization. To ensure Nord components work out of the box, we bundle translations for `en-US`.

## How does it work?

We observe the [`lang`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang){rel="&#x22;nofollow&#x22;"} attribute on the `<html>` element of a page, and use this to decide which translations to use for components. If a matching translation is found, the components will use this. Otherwise, the components will fall back to using the built-in `en-US` translations.

For this reason, it is imperative that you correctly set the `lang` attribute on the `<html>` element. Not doing so is considered an accessibility failure, and will also cause unexpected or incorrect localization of components.

We use a [`MutationObserver`](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver){rel="&#x22;nofollow&#x22;"} to observe and respond to changes to the `lang` attribute on `<html>`. So whilst you can do a full page reload whenever the language is changed, we also support changing languages on the fly without a full reload.

In addition to setting the `lang` attribute on `<html>`, you can also set the `lang` attribute on individual Nord components if you need to override the document language for specific use cases. When set on a component, it will create its own `MutationObserver` to monitor and respond to changes to the `lang` attribute. Use this feature sparingly, as it can impact performance if overused.

## Registering translations

To add a translation, we provide a `registerTranslation` function, which accepts an object containing localized text for a specific language/region.

```js
import { registerTranslation } from '@nordhealth/components'

registerTranslation({
  $lang: 'fi',
  $name: 'Suomi',
  $dir: 'ltr',

  // translations go here
})
```

For a full example of a real world translation, see the [example translation](https://nordhealth.design/#example-translation) section.

If you use TypeScript, we export a `Translation` type which will guide you in creating translations, and will raise compile time errors if you are missing any pieces of text:

```ts
import { registerTranslation, Translation } from '@nordhealth/components'

const yourTranslation: Translation = {
  // translation goes here
}

registerTranslation(yourTranslation)
```

For convenience you can also register multiple translations at once:

```ts
import { registerTranslation, Translation } from '@nordhealth/components'

const fi: Translation = { /* translation */}
const no: Translation = { /* translation */}

registerTranslation(fi, no)
```

You may have to support many languages, and not want to pay the cost of registering all translations on page load. In this case, you can register translations as needed, by [dynamically importing](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#dynamic_imports){rel="&#x22;nofollow&#x22;"} your translations modules:

```ts
import { registerTranslation } from '@nordhealth/components'

function loadTranslation(lang) {
  import(`path/to/your/translations/${lang}.js`).then(({ default: translation }) => registerTranslation(translation))
}

someDropdown.addEventListener('change', (e) => {
  const lang = e.target.value

  loadTranslation(lang).then(() => {
    document.documentElement.lang = lang
  })
})
```

### Partial translations

You don't need to provide all translation keys when registering a translation. It's safe to register **partial translations** with only the fields you're changing. Missing fields will be merged with existing translations.

> **Only `$lang` is required.** The `$name` and `$dir` properties are optional in partial translations and will be preserved from the existing translation if not provided.

```ts
import { registerTranslation, type PartialTranslation } from '@nordhealth/components'

// Minimal: Only provide $lang and the fields you're changing
const partialEnglish: PartialTranslation = {
  $lang: 'en',
  'nord-command-menu': {
    placeholder: 'Search clients by name, ID, email, phone...',
  },
}

registerTranslation(partialEnglish)
```

Or with full metadata (also supported):

```ts
const partialEnglish: PartialTranslation = {
  $lang: 'en',
  $name: 'English',
  $dir: 'ltr',
  'nord-command-menu': {
    placeholder: 'Search clients by name, ID, email, phone...',
  },
}

registerTranslation(partialEnglish)
```

After registering a partial translation:

- Only the fields you provide are updated
- All other fields are preserved from the existing translation (or defaults)
- Other components like `nord-calendar`, `nord-modal` remain unchanged
- Function values (like `noResults` callbacks) are properly preserved
- `$name` and `$dir` are preserved from existing registration if not provided

This approach is fully supported and tested. You can safely update a single translation field without needing to specify all keys.

## Example translation

Each translation has the following top-level properties:

- `$lang`: the language code for the translation. This should conform to the expected values of the [`lang`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang){rel="&#x22;nofollow&#x22;"} attribute.
- `$name`: a human-readable name for the translation.
- `$dir`: the writing direction of the language. The value for this must either be `"ltr"` or `"rtl"`.

Other top-level properties correspond to the component name in which the text is used, and below that the identifiers for individually translated snippets.

Note that there are a mix of strings, arrays, and functions as values. This is to give maximum flexibility when translating, and to allow for properly handling language-specific grammar.

Below is an example translation for the Finnish locale, which can be used as a reference:

```js
export default {
  '$lang': 'fi',
  '$name': 'Suomi',
  '$dir': 'ltr',

  'nord-command-menu': {
    instructions: 'Paina \'Enter\' vahvistaaksesi valinnan tai \'Escape\' peruuttaaksesi',
    inputLabel: 'Kirjoita komento jonka haluat suorittaa.',
    footerArrowKeys: 'Siirry',
    footerEnterKey: 'Valitse',
    footerEscapeKey: 'Esc sulje',
    footerBackspaceKey: 'Siirry takaisin',
    noResults: searchTerm => `Ei tuloksia haulle "${searchTerm}"`,
    tip: 'Vinkki: jotkin haut vaativat tarkan hakutermin. Koita kirjoittaa koko hakutermi kokonaisuudessaan, tai kokeile toista sanaa tai fraasia.',
    placeholder: 'Kirjoita komento tai hakusana…',
  },

  'nord-calendar': {
    prevMonthLabel: 'Edellinen kuukausi',
    nextMonthLabel: 'Seuraava kuukausi',
    monthSelectLabel: 'Kuukausi',
    yearSelectLabel: 'Vuosi',
  },

  'nord-date-picker': {
    modalHeading: 'Valitse päivämäärä',
    closeLabel: 'Sulje ikkuna',
    buttonLabel: 'Valitse päivämäärä',
    selectedDateMessage: 'Valittu päivämäärä on',
  },

  'nord-modal': {
    closeLabel: 'Sulje ikkuna',
  },

  'nord-nav-toggle': {
    label: 'Näytä/Piilota valikko',
  },

  'nord-textarea': {
    remainingCharacters: remaining => `${remaining} merkkiä jäljellä`,
  },

  'nord-notification': {
    dismissLabel: 'Sulje ilmoitus',
  },

  'nord-message': {
    unreadLabel: 'Lukematon',
  },

  'nord-tag': {
    removeLabel: 'Poista',
  },
}
```

## Localization framework integration

You can integrate the Nord translations easily with a localization framework by writing a wrapper around it.

The following TypeScript example integrates with [i18next](https://www.i18next.com/){rel="&#x22;nofollow&#x22;"}:

```ts
import type { Translation } from '@nordhealth/components'
import i18next from 'i18next'
import { useSupportedLocales } from './useSupportedLocales.js'

export function useNordTranslation(locale: string) {
  const supportedLocales = useSupportedLocales()

  // we want to fix the t function, so that it always matches the given locale,
  // allowing us to control when the translations are switched over
  const t = i18next.getFixedT(locale)

  const translation: Translation = {
    '$lang': locale,
    '$name': supportedLocales[locale].name,
    '$dir': supportedLocales[locale].dir,

    'nord-command-menu': {
      placeholder: t('common.nordComponents.commandMenu.placeholder'),
      instructions: t('common.nordComponents.commandMenu.instructions'),
      inputLabel: t('common.nordComponents.commandMenu.inputLabel'),
      footerArrowKeys: t('common.nordComponents.commandMenu.footerArrowKeys'),
      footerEnterKey: t('common.nordComponents.commandMenu.footerEnterKey'),
      footerEscapeKey: t('common.nordComponents.commandMenu.footerEscapeKey'),
      footerBackspaceKey: t(
        'common.nordComponents.commandMenu.footerBackspaceKey'
      ),
      noResults: (searchTerm: string) =>
        t('common.nordComponents.commandMenu.noResults', {
          searchTerm,
        }),
      tip: t('common.nordComponents.commandMenu.tip'),
    },
  }

  return translation
}
```

---

## Support

Need help with localization? Please head over to the [Support page](https://nordhealth.design/resources/support/) for more guidelines and ways to contact us.


# Launching Nord Design System



# How we use Custom Properties in Web Components



# December, 2021

You’re reading the sixth Nord Design System monthly update. This month we’ve grown the team, further expanded on our components and began growing our CSS Framework.

Hey folks, Dave here standing in for Ariel to bringing you some updates on what's been happening this month.

## CSS Framework

I guess one of the things that’s happened this month is that I joined the team. And with that I’ve been delving into the Nordhealth design system to see how I can contribute. At present the [CSS Framework](https://nordhealth.design/docs/developer/css-framework/) is quite bare bones so I’ve been spending some time to expand on this framework to make it more useful for everyone.

There’s many things to consider when working on our CSS Framework. We want to strike a balance between useful, light-weight and approachable. It needs to be really helpful when building out the majority of the front-end, but not bloated to the extent that it’s detrimental to performance. It also needs to make sense, with class names that can be parsed without much guesswork.

![Examples of our CSS Framework utility helpers. Typography, Reset and Miscellaneous](https://nordhealth.design/img/updates/utility-examples.png)

We’re trying to reduce guesswork in our documentation too, by providing semantic examples that fit with the utility being shown. For example the documentation for our typographic sizing is shown with various heading levels, further reducing the guesswork around semantic HTML. However this is merely a suggestion, the CSS Framework is also intended to be flexible with the way you want to work.

It’s still a work in progress but we’ve accomplished a lot in a fairly short space of time. The CSS Framework currently includes a series of utility classes that refer back to our [design tokens](https://nordhealth.design/core/tokens/), but it’ll soon contain utilities for setting out all your typography, laying out stacked lists of components and a reset utility to give you a clean slate to work with.

I’ve really enjoyed collaborating with the team on this one, and I hope that energy is reflected in the quality of the framework once it's out in the wild.

\[View documentation]\(/core/css/)

---

## New this month

\*\[Video: /img/updates/command-menu-demo.mov]\*

Plenty of new components this month, including the extremely impressive [Command Menu](https://nordhealth.design/components/command-menu/) (shown above). We’ve had the addition of a [Spinner](https://nordhealth.design/components/spinner/) and [Icon](https://nordhealth.design/components/icon/) component as well as form entry components such as [Input](https://nordhealth.design/components/input/) and [Textarea](https://nordhealth.design/components/textarea/).

There’s lots to unpack in these components so I’ll leave Nick and Ariel the opportunity to go into more detail on another occasion.

\[View documentation]\(/components/)

---

As a newcomer to the team it’s been super interesting to see what’s been achieved within the design system and what’s next on the list. Also been very satisfying to contribute so soon after joining the team.

I’m going to keep things short but sweet, so you can get back to enjoying time with family and friends as we round off the year.

Happy Holidays!
— Dave

P.S. Subscribe to our [RSS Feed](https://nordhealth.design/feed.xml){rel="&#x22;nofollow&#x22;"} to follow the latest updates from Nord team.


# February, 2021

You’re reading the first ever Nord Design System monthly update. We’re just starting our design systems journey at Nordhealth and have created this documentation platform to support these efforts.

The aim of this platform is to serve as a hub for [Nordhealth’s](http://nordhealth.com){rel="&#x22;nofollow&#x22;"} user interface design and frontend development work in the future. We’re pushing towards automating most parts of the documentation creation, but you should also expect to see manually crafted design guidelines, development tutorials, and similar here in the future.

To stay up to date with the latest [releases](https://nordhealth.design/changelogs) and [updates](https://nordhealth.design/updates/) from our design systems team, you can follow the [what’s new](https://nordhealth.design/changelogs) section that includes our current roadmap and any future updates we might release.

Currently, our main focus has been on brand refresh, exploring the overall visual direction, how the theming system works, and also creating the underlying technical architecture to support the work that follows.

Our draft style guide looks like this:

![Provet style guide](https://nordhealth.design/img/styleguide-provet.svg){.provet}![Diarium style guide](https://nordhealth.design/img/styleguide-diarium.svg){.diarium}

We’ve also started exploring components a little and how they could behave and look like. Here’s a concept on navigation that we’ve also tested on the documentation itself:

![Navigation component concept](https://nordhealth.design/img/component-navigation.png)

Last week, we also published the very first production ready design systems package, [Nord Webfonts](https://nordhealth.design/changelogs/webfonts), which includes our UI typefaces and related tools to utilize them:

### Nord Webfonts 1.0.1

- Initial release of `@nordhealth/fonts` which includes **Nordhealth Sans** and &#x2A;*Nordhealth Mono.** For documentation and usage guidelines, please see [Webfonts](https://nordhealth.design/docs/developer/webfonts/).
- Makes `@nordhealth/fonts` package completely independent from `@nordhealth/tokens`.
- Can now be used standalone without any other package from Nord.
- Release date 11.2.2021.

We’ve also started drafting Nord Design Tokens which you can [browse here](https://nordhealth.design/core/tokens/). The early token views are shown below:

![Provet Design Tokens](https://nordhealth.design/img/view-tokens-provet.png){.provet}![Diarium Design Tokens](https://nordhealth.design/img/view-tokens-diarium.png){.diarium}

If you liked this update, please consider subscribing to our [RSS Feed](https://nordhealth.design/feed.xml){rel="&#x22;nofollow&#x22;"} to follow the latest updates from Nord team.

**P.S. Our team is hiring, [view open positions](https://nordhealth.design/resources/careers/) to apply.**

Until the next time!
— Ariel


# Nord Design System architecture

You’re reading the eigth Nord Design System monthly update. This month I wanted to give a little more insight into how we’ve architectured Nord’s packages and how they’re interconnected.

One of the recent major changes in Nord is that we’ve re-designed the underlying package architecture. The reason why we decided to do such a big fundamental change this close to our official release, is that we felt like the original structure was too complex to use and that there were too many dependencies between the different packages overall.

In early January we decided to do something about this and simplify the architecture. Originally, if you wanted to utilize any of the components, you had to first install and link our [Design Tokens](https://nordhealth.design/core/tokens/), then install and link [Webfonts](https://nordhealth.design/docs/developer/webfonts/), then our [CSS Framework](https://nordhealth.design/docs/developer/css-framework/), [Themes](https://nordhealth.design/design/themes/), and finally the [Web Components](https://nordhealth.design/components/) themself. That’s quite a few steps, huh?!

**In the re-designed architecture we have two different levels to the packages:**

1. On the first level, we have packages called [Webfonts](https://nordhealth.design/docs/developer/webfonts/), [Design Tokens](https://nordhealth.design/core/tokens/), and [Nordicons](https://nordhealth.design/icons/) (illustrated below). These packages are like atoms of the systems as they don’t have external or internal dependencies into any other packages in the system.
2. On the second level, we have [CSS Framework](https://nordhealth.design/docs/developer/css-framework/), [Web Components](https://nordhealth.design/components/), and [Themes](https://nordhealth.design/design/themes/) (illustrated below). These packages internally depend on the first level packages, but we wanted to hide these dependencies for the end user, Frontend Developer in this case, meaning that you’d more or less always install one or more of the second level packages only into your app to consume parts of the system:

![Nord Design System architecture overview](https://nordhealth.design/img/updates/architecture/1.jpg)

As an example, if you would like to use our &#x2A;*CSS Framework,** you would only install that specific NPM package and that’s really it. You don’t have to care, as a user, that internally this package also also uses our **Webfonts** and **Design Token** packages:

![Dependencies for utilizing CSS Framework](https://nordhealth.design/img/updates/architecture/2.jpg)

Another example could be that if you’d want to skin your application with one of our themes, you’d also add the **Themes** package and choose a theme to use from it. Again, internally, we still use both **Webfonts** and **Design Token** packages, but as a user, you don’t have to care about those:

![Dependencies for utilizing Nord Themes](https://nordhealth.design/img/updates/architecture/3.jpg)

Finally, in the below example, we show all three first level packages being used internally (Webfonts, Design Tokens and Nordicons), but for the end user, only **CSS Framework** and **Web Components** will be relevant in this case:

![Dependencies for utilizing Web Components](https://nordhealth.design/img/updates/architecture/4.jpg)

You could also directly utilize one of the first level packages, like the **Design Tokens** if you’re working on a native iOS application and want to pull in the base colors and similar styles in XML format:

![Dependencies for utilizing Design Tokens on iOS](https://nordhealth.design/img/updates/architecture/5.jpg)

While the above is still possible, we wanted to avoid the user having to install a lot of different dependencies to be able to use a utility class from the CSS Framework, or a component from the Web Components package.

All of this seems quite evident in hindsight, but our original thinking was to strive for modularity to reduce the complexity and improve our system’s reusability by breaking it into small, easier to consume parts.

This modularity eventually increased the complexity for the users because we didn’t consider the API carefully enough, especially when it comes to CSS Custom Properties and the complex theming system we’ve got.

In the new architecture we’ve still kept the same level of modularity inside the system, but simplified it for our users and now offer a better and simpler API. These changes also nicely align with one of our key [design principles](https://nordhealth.design/design/foundations/principles/&#x29; which states that &#x2A;*“developers should be able to start using our tools in minutes, not hours, days or weeks.”**

Until the next time!
— Ariel

P.S. Subscribe to our [RSS Feed](https://nordhealth.design/feed.xml){rel="&#x22;nofollow&#x22;"} to follow the latest updates from Nord team.


# Redesigning Nordicons Icon Library

Brand Designer Ilkka Janatuinen has been drawing on computers since the 1980s and is now designing brands, drawing UI and tweaking the tiniest design details at [H23 Agency](https://www.instagram.com/h23agency/). Ilkka Helped Nordhealth to redesign the Nordicons icon library in 2022.

A good, well executed set of icons is one of the cornerstones of [brand visuals](https://nordhealth.design/design/foundations/brand/) among other elements like the logo, typography and colors. It serves the functional purpose of making the application more intuitive to use, but there’s also the aesthetic part of being pleasing to look at and fit the rest of the brand visually.

Late last year, we started discussing about updating the [icon library](https://nordhealth.design/icons/) to better serve its purpose. Some of the icons were slightly outdated, or needed a redesign for functional reasons. We also had some challenges with the icon library’s license which wasn’t suitable for our needs. Our conclusion was that the easiest way to solve these problems would be to design a new icon library.

As we weren’t anymore limited by the previous [icon library’s](https://nordhealth.design/icons/) design, we first ran a few workshops to define a new icon style and sizing. We went through different options and tested them in all possible use cases. Designing for healthcare domain also meant that we had to keep in mind older low DPI screens, so not completely forgetting the rules of pixel perfect design either.

One of the key ingredients we wanted to concentrate on throughout the process, was to keep the designs as unambiguous as possible. We did this to be able to more effortlessly assist people to design more Nordicons with very [clear guidelines](https://nordhealth.design/design/foundations/iconography/).

My drawing tool of choice was Adobe Illustrator. I’ve used it for years and have set up the system to draw large sets of icons quickly. We tested the icons first in Figma, using the [Nord Design System’s components](https://nordhealth.design/components/) available in our [Figma Toolkit](https://nordhealth.design/design/foundations/figma/).

![](https://nordhealth.design/img/updates/icons/image1.png)

First, we defined the general icon style. We had already made the decision to keep the line icon style, as it’s a clear and versatile, so we started by trying different corner radiuses and line end variations.

![](https://nordhealth.design/img/updates/icons/image6.png)

There was quite a bit of testing done in this phase, as we were looking for the perfect sizes and dimensions for the icons. The aim was to design icons that would work well in different sizes and screen resolutions.

We tested mainly 10x10, 12x12, 20x20 and 24x24 pixel grids. Even 11x11 at one point, but in the end we settled on 10x10 as it seemed to look the best next to Inter typeface used throughout the design system.

I personally prefer 12px icon size that scales up to 24/36/48px and stays pixel perfect all the way, but as [Nord Design System](https://nordhealth.design) has much bigger variety of sizes, it didn’t seem like an ideal solution in this case.

We needed something more universal and keeping the icons plain and cohorent in a 10px grid seemed to work the best for our purpose. If we can’t fit all we need into that grid, then we shouldn’t have an icon for that purpose. To solve a design problem, keeping things simple seems to work most of the time.

![](https://nordhealth.design/img/updates/icons/image8.png)

At one point, we also explored an idea to draw three or four different sizes for most of the icons, but that was soon discarded.

![](https://nordhealth.design/img/updates/icons/image10.png)

As the icon styles and dimensions were agreed on, it was time to start drawing all the icons. We had a couple of meetings along the way and had a half day workshop in [Nordhealth Helsinki office](https://nordhealth.com){rel="&#x22;nofollow&#x22;"} to make the final decisions on the designs.

![](https://nordhealth.design/img/updates/icons/image12.png)

The end result is a great, versatile set of icons and a well tested way to design new icons in the future. You can have a closer look of the whole icon library here: <https://nordhealth.design/nordicons/>{rel="&#x22;nofollow&#x22;"}

## TL;DR

- This redesign moves our icon style closer to the [Nordhealth brand](https://nordhealth.design/design/foundations/brand/). All icons now closely follow the brand guidelines and have strong affiliation with our logomark and design language.
- With this update we’re overcoming issues with the old icon style which was somewhat limiting our creativity and possibilities.
- This update allows us to get rid of licensing issues with the previous iconset as it prevented us from sharing any of our work in Figma community or GitHub.

Until the next time!
— Ilkka

P.S. Subscribe to our [RSS Feed](https://nordhealth.design/feed.xml){rel="&#x22;nofollow&#x22;"} to follow the latest updates from Nord team.


# Interview with Design System Guide



# Rewriting Nord Docs with Nuxt

\*We've completely rewritten the Nord Design System documentation site from the ground up, replacing the previous Eleventy-based static site with a modern Nuxt 4 application.\*

## Why the rewrite?

The original documentation site served us well, but as Nord Design System grew, we needed a platform that could keep up with our ambitions. The Eleventy setup was becoming increasingly difficult to extend with interactive features, and we wanted to unlock new capabilities that a Vue-based framework could offer.

Key motivations included:

- **Nuxt Studio integration** — enabling designers and content editors to contribute directly to the docs without touching code.
- **Vue component ecosystem** — leveraging Vue's component model for richer, more interactive documentation pages.
- **AI support** — laying the groundwork for AI-assisted tooling and integrations.
- **Better developer experience** — hot module replacement, TypeScript throughout, and a more maintainable codebase.

## What's new

### Built on Nuxt 4 with Content v3

The new docs site uses [Nuxt 4](https://nuxt.com){rel="&#x22;nofollow&#x22;"} with [@nuxt/content v3](https://content.nuxt.com){rel="&#x22;nofollow&#x22;"} for content management. All existing markdown content was migrated, and we've added custom MDC (Markdown Components) for interactive elements like callouts, component usage blocks, and live examples.

### Full-text search

We've implemented client-side full-text search powered by [MiniSearch](https://lucaong.github.io/minisearch/){rel="&#x22;nofollow&#x22;"}, allowing you to quickly find components, guidelines, tokens, and documentation pages.

### Component documentation from source

Component pages are now generated directly from the web component source code using `nuxt-component-meta`. Properties, events, slots, methods, and CSS custom properties are extracted automatically, ensuring the docs always match the latest release.

### Live examples in iframes

Every component example runs in its own isolated iframe, providing a clean rendering environment that accurately represents how components behave in production. Examples are prerendered as part of the build for fast loading.

### LLMs.txt support

We've added `/llms.txt` and `/llms-full.txt` routes that provide AI-friendly versions of our documentation, making it easier for large language models to understand and reference Nord Design System.

### Sitemap, SEO and accessibility

The site includes automatic sitemap generation, structured data with Schema.org, and comprehensive meta tags. We've maintained our commitment to accessibility throughout the rebuild.

### Theme Builder and Color Generator

The [Theme Builder](https://nordhealth.design/theme-builder) and [Color Generator](https://nordhealth.design/color-generator) tools have been rebuilt as Vue pages, with full theme switching support and URL-based state persistence.

## Technical highlights

- **Nuxt 4** with Vue 3.5 and Vite
- **@nuxt/content v3** with SQLite-backed content queries
- **Tailwind CSS v4** with the Nord CSS utility layer
- **Shiki** for syntax highlighting with Nord-themed code blocks
- **Server API routes** for component metadata, examples, navigation, and assets
- **Static generation** with nearly 2,000 prerendered routes
- **GitHub Pages** deployment with PR preview support

## What's next

This rewrite opens the door for several exciting improvements we have planned:

- **Nuxt Studio** for visual content editing
- **Vue web component** experiments
- **Interactive playground** with Storybook for trying components in the browser
- **AI skills** for integrating Nord Design System with AI-assisted development workflows
- **MCP server** for connecting Nord Design System directly to AI-powered development tools

We're excited about the foundation this provides and look forward to building on it.


# Latest Updates

\*Stay up to date with the latest blog posts, announcements, and insights from the Nord Design System team.\*

\- \[18 New Components, 56 Component Parts, and a Redesigned Docs Website]\(/updates/july-2026-component-updates) — Joseph Anson and João Gonçalves, 2026-07-06
\- \[Introducing Storybook and the New Playground Experience]\(/updates/march-2026-storybook-playground) — Joseph Anson, 2026-03-05
\- \[Rewriting Nord Docs with Nuxt]\(/updates/february-2026-nuxt-docs-rewrite) — Joseph Anson, 2026-02-11
\- \[Introducing Brands for Nord Design System]\(https\://arielsalminen.com/2025/introducing-brands-for-nord-design-system/) — Ariel Salminen, 2025-06-04
\- \[Interview with Design System Guide]\(https\://thedesignsystem.guide/interview-ariel-salminen) — Ariel Salminen, 2024-02-21
\- \[Finalist for the Best Design System Award]\(/updates/may-2023-jammies-nomination-copy) — Ariel Salminen, 2023-05-22
\- \[Redesigning Nordicons Icon Library]\(/updates/february-2023-redesigning-nordicons-icon-library) — Ilkka Janatuinen, 2023-02-24
\- \[Finalist for the Jamstack Conf Jammies]\(/updates/october-2022-jammies-nomination) — Ariel Salminen, 2022-10-25
\- \[How we use Custom Properties in Web Components]\(https\://web.dev/custom-properties-web-components/) — David Darnes, 2022-08-17
\- \[Tabs components]\(https\://darn.es/building-tabs-in-web-components/) — David Darnes, 2022-06-29
\- \[Launching Nord Design System]\(https\://arielsalminen.com/2022/launching-nord-design-system/) — Ariel Salminen, 2022-04-05
\- \[Statistics for the first year]\(/updates/march-2022-statistics-for-the-first-year) — Ariel Salminen, 2022-03-31
\- \[Nord Design System architecture]\(/updates/february-2022-design-system-architecture) — Ariel Salminen, 2022-02-21
\- \[How we use Figma]\(/updates/january-2022) — Eric Habich, 2022-01-31
\- \[December, 2021]\(/updates/december-2021) — David Darnes, 2021-12-20
\- \[October, 2021]\(/updates/october-2021) — Ariel Salminen, 2021-10-14
\- \[September, 2021]\(/updates/september-2021) — Ariel Salminen, 2021-09-07
\- \[June, 2021]\(/updates/june-2021) — Ariel Salminen, 2021-06-30
\- \[May, 2021]\(/updates/may-2021) — Ariel Salminen, 2021-05-16
\- \[February, 2021]\(/updates/february-2021) — Ariel Salminen, 2021-02-17
\- \[Latest Updates]\(/updates) — null, null


# How we use Figma

You’re reading the seventh Nord Design System monthly update. This month we’ve worked on improving the system’s architecture, added new components and worked on refining Nord Figma Toolkit.

Nord’s [Figma Toolkit](https://nordhealth.design/design/foundations/figma/) is a resource for exploration and collaboration. It contains the building blocks for designing with Nord. Our goal is to create a toolkit that anyone at [Nordhealth](https://nordhealth.com){rel="&#x22;nofollow&#x22;"} can use to prototype ideas. The toolkit is in progress at the moment, but will launch by the end of March. We’ve gathered some generic guidelines we follow below:

## Base components for variant sets

Components can contain many variations or repeating elements. It's not uncommon to have 100+ variations of an input for example. Imagine realizing that you misaligned a text box and updating each one by hand.

![Variant sets](https://nordhealth.design/img/updates/figma/1.png)

By making changes to a base component instead of each instance, we can make an adjustment once and it will update across all of our variants.

\*\[Video: /img/updates/figma/2.mp4]\*

When exporting a component to the team library, we hide the base components since they wont be needed. You can do this by going to the Assets Panel in the source Figma file, right-clicking, and selecting Hide when publishing.

![Exporting components](https://nordhealth.design/img/updates/figma/3.png)

## Consistency with styles

In [Figma](https://www.figma.com/){rel="&#x22;nofollow&#x22;"}, Styles are a lot like Components. Styles allow you to define properties such as colors, font, and box shadows. If you want to update a color for example, you can modify the Color Style and it will automatically update wherever that Color Style is used.

\*\[Video: /img/updates/figma/4.mp4]\*

An additional benefit of using Styles is that they can be applied to theming directly in Figma. In our library we theme by using the slash naming convention `Nord Light / Accent` and the plugin [Themer](https://www.figma.com/community/plugin/731176732337510831/Themer){rel="&#x22;nofollow&#x22;"}.

Nord uses [Design Tokens](https://nordhealth.design/core/tokens/) to store variables for the elements of our design system. These tokens store values for [Color](https://nordhealth.design/tokens/#color){rel="&#x22;nofollow&#x22;"}, [Font](https://nordhealth.design/tokens/#font-size){rel="&#x22;nofollow&#x22;"}, [Box Shadow](https://nordhealth.design/tokens/#box-shadow){rel="&#x22;nofollow&#x22;"}, and many other base styles. In the [Nord Figma Toolkit](https://nordhealth.design/figma/){rel="&#x22;nofollow&#x22;"}, we use these tokens when defining our Styles to ensure consistency across platforms.

\*\[Video: /img/updates/figma/5.mp4]\*

## Components that are effortless to play with

A design system should provide flexible components to designers that are effortless to manipulate and update with new content. If a component breaks when a designer applies it their use case, then two things might happen. They may either unlink it from the Team Library or create a custom component. We'd like to avoid both of those cases. By creating variant sets with Auto-Layout and Constraints we can make updates easier, and save designer’s time. It's also useful for communicating reflow behavior to developers.

At a basic level we've created components like buttons that automatically resize when you update the contents. You can also stretch this component to create full-width buttons when needed.

\*\[Video: /img/updates/figma/6.mp4]\*

By using auto-layout in content blocks, we can make it easier to maintain the correct spacing and layout. You can resize and update content without having to revisit the documentation.

\*\[Video: /img/updates/figma/7.mp4]\*

We also support complex behavior in larger components such as our table. Here we've allowed for horizontal and vertical resizing, 3 content density settings, fixed-width or fill-width cell resizing, desktop and mobile versions, as well as 8 content types for table cells and headers.

\*\[Video: /img/updates/figma/8.mp4]\*

## In context components

The Components of Nord are primarily base level Components. In order to show how Components can be used and how they form larger patterns we’ve created Component Groups and [Interface Templates](https://www.figma.com/file/iGUx4IYLFa8jPHM0VIGOGW/?node-id=2%3A9){rel="&#x22;nofollow&#x22;"}.

Component Groups might include patterns such as a Radio Button Group. Radio buttons are always grouped together, so we've added this group to the library to make it simpler to create a form.

![Component groups](https://nordhealth.design/img/updates/figma/9.jpg)

Interface templates show how Nord can be used to compose an entire page or application.

![Interface templates](https://nordhealth.design/img/updates/figma/10.jpg)

## Curating the library

We've curated the Nord library to make design approachable to anyone at Nordhealth. We keep everything in one library for the sake of simplicity.

### 1. Hide base components

By hiding base components and atoms for each component, we only surface complete components in the library. For example, we wouldn't want the base component for a form input to show in our library. We only surface the final form component which contains the component variants such as hover, active, input, and error states.

### 2. Use variant sets to provide components

Variants allow us to consolidate states into a single component. The button component for example contains 1334 variants, which would be overwhelming to show in the Nord Figma Library. Instead, we surface a single dynamic button component using variants.

### 3. Applying an approachable naming convention

Figma defines component names in a library based on Page name, Frame name, then Component name in that order. In order to keep the library easier to understand we removed frames from the structure and use the naming convention `Page name > Component name`. We typically house 1-5 components per page so a 2 level navigation structure will work best at the moment.

\*\[Video: /img/updates/figma/11.mp4]\*

## Making it approachable

There are a few things we can do to make our Figma Library approachable.

### 1. Add a cover photo

This is a quick change and makes the Nord Design System file approachable. When you're looking at a sea of draft files, the Nord Library is easier to find. If you'd like to add a cover photo to your design file you can [follow the instructions from Figma](https://resources/support/.figma.com/hc/en-us/articles/360038511413-Set-custom-thumbnails-for-files){rel="&#x22;nofollow&#x22;"}. You can also use our [File Thumbnail](https://www.figma.com/file/u32okMUqi5BlWsG2k1JZgH/Nord-Design-System?node-id=2265%3A133092){rel="&#x22;nofollow&#x22;"} as a template to create your own.

### 2. Create a sticker sheet of components

In the Nord Design File we've organized a scannable sticker sheet of components. You can also copy and paste a component from the sticker sheets in the [Nord Design System Figma File](https://www.figma.com/file/u32okMUqi5BlWsG2k1JZgH/Nord-Design-System?node-id=1645%3A129904){rel="&#x22;nofollow&#x22;"}. Personally, I prefer this workflow over using the Assets panel in Figma. Each component has clear sections for the component, variants, and building blocks which we call atoms.

### 3. Create approachable component pages

We've categorised our components using pages in Figma. We combine the names with emojis to make them easier to scan.

\*\[Video: /img/updates/figma/12.mp4]\*

## Create link between Figma and docs

With design systems in general, we want to centralize as much as possible. When it comes to documentation our approach is for documentation to exist on [nordhealth.design](https://nordhealth.design/){rel="&#x22;nofollow&#x22;"} and not in Figma. There are two ways we can create links between Figma and the Nord documentation.

Add a View documentation link in the header of each component. You can create links to a url directly in figma by highlighting the text you want to link, type `Cmd+K`, enter your url and then hit `return`.

If you're using a Nord component in your own design file, you can also link to documentation from Figma. Selelct a component and open the inspect panel. Click the View documentation button and you'll be redirected to the component page on nordhealth.design.

\*\[Video: /img/updates/figma/13.mp4]\*

Until the next time!
— Eric

P.S. Subscribe to our [RSS Feed](https://nordhealth.design/feed.xml){rel="&#x22;nofollow&#x22;"} to follow the latest updates from Nord team.


# 18 New Components, 56 Component Parts, and a Redesigned Docs Website

\*The July 2026 Nord release pairs a redesigned documentation website with Nord 5 component releases. The new docs make the system easier to browse, preview, test and copy from, while the component library adds new patterns across forms, filters, data display, navigation, containers and layout.\*

![New Nord Design System homepage showing the redesigned docs shell, release banner and live component preview](https://nordhealth.design/img/updates/july-2026-component-updates/new-website-home.png)

This release brings together two related pieces of work. The first is a redesigned documentation website that feels closer to the products built with Nord: persistent navigation, clear category browsing, full-site light and dark mode, a command-style search entry point, live component previews and quick template previews. The second is the component release itself, with new Light DOM components, refreshed guidance and Storybook-backed examples across the library.

For package-level release notes and exact version history, see the [Web Components changelog](https://nordhealth.design/changelogs/). This article focuses on what changed from a product and documentation point of view.

At a glance:

- The docs website has a new application-style shell with persistent navigation, search, page outlines and light/dark mode throughout.
- The [Components overview](https://nordhealth.design/components/) is now grouped by purpose, matching the way teams look for UI building blocks.
- Component pages combine guidance, Storybook-backed examples, accessibility notes and generated API reference.
- The new [Blocks](https://nordhealth.design/blocks/) gallery provides copy-paste product patterns built from Nord components.
- The new [Templates](https://nordhealth.design/templates/) gallery lets teams quickly preview full-page layouts, copy their markup, or open them full screen.
- Nord 5 adds **18 new components** made up of **56 individual component parts**, plus updates to existing components, across the same groups used on the Components overview.

## New website design

The new website is built around the way teams actually use a design system. Instead of treating the docs as a set of isolated reference pages, the redesigned site brings navigation, examples, status, search and release context into the same workspace.

The homepage now opens with a live product surface built from Nord components. It shows the design language in context before asking people to choose a package or read an API table. The release banner at the top points directly to the latest component work, so teams can discover what changed without digging through changelogs first.

The site shell also gives the docs more room to grow:

- **Persistent sidebar navigation** keeps components, design tokens, Tailwind CSS, blocks, templates, icons and updates close at hand.
- **Light and dark mode throughout** lets teams review documentation, components, blocks and templates in the same appearance modes their products support.
- **Search entry points** are always visible, with keyboard hints for people who move quickly through the docs.
- **Right-side outlines** make long component pages easier to scan, especially pages with examples, accessibility notes and generated API sections.
- **Status badges** show when a component is new, alpha, beta, deprecated, Light DOM based, or updated.

The goal is not only to make the website look newer. It is to make the documentation behave more like a working tool for product teams.

## Browsing components by purpose

![Components overview showing grouped component cards and the page outline](https://nordhealth.design/img/updates/july-2026-component-updates/components-overview.png)

The [Components overview](https://nordhealth.design/components/) now groups the library by the same categories used across the site:

- Action
- Data input
- List & table
- Content & media
- Feedback & status
- Navigation
- Overlay
- Layout
- Container

This makes the overview easier to scan than one long alphabetical list. You can still filter by name from the header, but the default view answers a more useful question: "What kind of UI am I trying to build?"

Each card pairs a component illustration with a short description and release status. New components are visible at a glance, deprecated components stay discoverable without being promoted, and Light DOM components are clearly marked. The sidebar also mirrors the component list, so people can jump directly into a component page without losing the larger category context.

## Richer component pages

![Date Range Picker component page showing status badges, Storybook controls and generated page outline](https://nordhealth.design/img/updates/july-2026-component-updates/date-range-picker-docs.png)

Component pages are now designed to teach usage before exposing the complete API reference. The top of a page gives the component description, status badges and a Storybook-backed example. From there, the page moves through usage guidance, composition notes, examples, accessibility guidance and generated API sections.

The embedded example viewer is the biggest shift. Instead of static screenshots or isolated snippets, examples now run as live stories with controls, code and accessibility tabs. This lets people test the component state before copying an implementation detail.

The page structure is consistent across new and existing components:

- **Usage guidance** explains when to reach for the component and how it fits with nearby patterns.
- **Composition sections** show how compound components and parts work together.
- **Examples** use Storybook stories, so the same source supports docs, testing and the standalone Storybook.
- **Accessibility notes** call out labeling, keyboard behavior and screen reader expectations.
- **Generated API reference** documents props, slots, methods, events, CSS custom properties, state attributes and dependencies from source metadata.

![Accordion component page showing a composed component example and controls panel](https://nordhealth.design/img/updates/july-2026-component-updates/accordion-docs.png)

Compound components benefit the most from this format. Accordion, Field, Combobox, Filter Bar and Pagination all rely on composition. The docs can now explain the model in prose, show a working example, and keep the generated API for the parent and parts on the same page.

## Component model

The new components also establish the direction for future Nord APIs. They are designed to be easier to compose in product code and easier to document from source.

- **Light DOM rendering for new components** lets application CSS, `@nordhealth/css` utilities and global styles reach component internals without `::part`. Existing Shadow DOM components are unchanged.
- **Composition-first APIs** split larger patterns into small parts that can be assembled to match the interface anatomy. Field, Item, Pagination, Accordion and Combobox are all examples of this approach.
- **Shared behavior controllers** keep focus management, open state, disabled state, transitions, roving focus and active descendant behavior consistent across component families.

This is why the release is bigger than a set of isolated tags. It gives product teams a more consistent way to build forms, filters, disclosure patterns, lists and navigation while keeping each part inspectable in the docs.

## Component releases

Nord 5 is a broad component release, but the changes are not all the same kind of change. Some are brand new components, some are new component families, and others are updates to existing components so they work better with the new model.

The release follows the same grouping as the [Components overview](https://nordhealth.design/components/).

### Action

Action components do not get a new standalone primitive in this release, but the redesigned docs make action patterns easier to evaluate. Button, Button Group, Command Menu, Message and Segmented Control now appear in the grouped overview with clearer illustrations and status context.

This also matters for blocks and templates, where action components usually appear as part of a larger workflow rather than as isolated examples.

### Data input

Data input is the largest part of this release. It includes new form structure, richer picker controls and a complete filter family.

- [Field](https://nordhealth.design/components/field/), Field Group and Field Set provide composable form layout and labeling primitives.
- Existing form controls still work standalone, but can now be wrapped in Field when you need shared label, hint, error and required behavior.
- [Combobox](https://nordhealth.design/components/combobox/) and [Autocomplete](https://nordhealth.design/components/autocomplete/) add virtualized option lists, declarative options and groups, async patterns, clear buttons, slots, auto-highlight behavior, disabled items and creatable entries.
- [Number Field](https://nordhealth.design/components/number-field/) adds formatted numeric input with parsing and formatting callbacks, currency and unit slots, and wheel and scrub interactions.
- [OTP Field](https://nordhealth.design/components/otp-field/) adds grouped one-time-code input with normalization, masking, form integration and right-to-left support.
- [Date Range Picker](https://nordhealth.design/components/date-range-picker/) adds a two-month range calendar, presets, inline mode, custom triggers, responsive single-month collapse, read-only styling and disabled/highlighted date callbacks.
- [Filter Bar](https://nordhealth.design/components/filter-bar/) adds composition-first filter controls for table headers and toolbars.
- [Filter Dropdown](https://nordhealth.design/components/filter-dropdown/) adds a chip trigger with selectable options, search, groups, tree selection, select-all, clearable and loading states.
- [Filter Date Range](https://nordhealth.design/components/filter-date-range/) brings the date-range picker pattern into the filter family.
- [Calendar](https://nordhealth.design/components/calendar/) now supports native range selection, hover previews, multi-month display and date disabling/highlighting callbacks.
- [Time Picker](https://nordhealth.design/components/time-picker/) is a new native time field paired with a dropdown of selectable times at a configurable interval, with `round-to-interval` and `hour-format`.
- [Fieldset](https://nordhealth.design/components/fieldset/) is deprecated in favor of the new Field family.

\*See usage example\*

\*See usage example\*

### List & table

[Item](https://nordhealth.design/components/item/) adds a composable row primitive for people, files, settings and other single pieces of content. It is useful anywhere a product surface needs a repeated row with leading media, primary content, metadata and trailing actions.

Item is intentionally small. It gives teams a consistent row anatomy without forcing every list or table-like surface into the same full table component.

### Content & media

[Kbd](https://nordhealth.design/components/kbd/) and Kbd Group add styled keyboard key and shortcut display. They are useful in docs, command menus, keyboard shortcut references and power-user workflows.

The new docs use keyboard hints in navigation and search, so these components also help document Nord itself with Nord components.

[Truncate](https://nordhealth.design/components/truncate/) adds a primitive for shortening overflowing text with an accessible full-text fallback, useful in tables, cards and dense list rows where space is limited.

### Feedback & status

[Meter](https://nordhealth.design/components/meter/) adds a static measurement display for values such as usage, battery, capacity or score. It gives teams a lighter-weight choice when they need to communicate a bounded value without implying task progress.

Existing feedback components also received updates:

- [Banner](https://nordhealth.design/components/banner/) adds an `actions` slot for trailing calls to action or dismiss buttons.
- [Toast](https://nordhealth.design/components/toast/) groups render in the browser top layer above modals.

These changes make feedback patterns work better in complex application shells, where overlays, navigation and messages often appear at the same time.

### Navigation

Navigation gains both new components and visual refinements.

- [Outline](https://nordhealth.design/components/outline/) adds an in-page table of contents with controlled and scroll-spy modes.
- [Pagination](https://nordhealth.design/components/pagination/) adds a composed pagination model with loading, numbered, simple, icon-only, cursor and right-to-left examples.
- [Tab Group](https://nordhealth.design/components/tab-group/) now pre-selects the first asynchronously slotted tab in framework rendering.
- Navigation receives refreshed selected, active and hover treatments.

\*See usage example\*

\*See usage example\*

### Overlay

Overlay components received updates that make them more predictable in composed product surfaces.

- [Popout](https://nordhealth.design/components/popout/) adds opt-in controlled mode.
- [Tooltip](https://nordhealth.design/components/tooltip/) stays in the top layer until its fade-out transition ends, preventing flashes behind layout navigation.

These changes are small from an API point of view, but important for reliability. Popouts and tooltips often sit inside dense tables, filters, modals and navigation shells, where layering bugs are especially visible.

### Layout

Layout updates focus on application shell behavior and scrollable surfaces.

- [Scroll Area](https://nordhealth.design/components/scroll-area/) is a new scroll container with custom, consistently-styled scrollbars, optional edge fades and `always-show-scrollbar`.
- [Aside](https://nordhealth.design/components/aside/) and Aside Trigger add a new right-side rail and drawer layout for surfacing secondary content alongside the main view.
- [Layout](https://nordhealth.design/components/layout/) aligns sticky footers to the live navigation width instead of a hardcoded size.
- Layout, Aside and Aside Trigger receive refreshed selected, active, hover and surface treatments.

The visual updates are most noticeable in larger screens where side navigation, content, headers and sticky footers need to feel like one coherent application frame.

### Container

Container components add new ways to group and reveal content.

- [Accordion](https://nordhealth.design/components/accordion/) adds stacked sections with single- or multi-open behavior.
- [Collapsible](https://nordhealth.design/components/collapsible/) adds a focused show/hide primitive for a single region.

\*See usage example\*

Accordion is for related sets of sections. Collapsible is for one disclosure region. Having both keeps common disclosure patterns consistent without forcing teams to use a larger component than the interface needs.

## Blocks and templates

![Blocks gallery showing copy-paste dashboard patterns built from Nord components](https://nordhealth.design/img/updates/july-2026-component-updates/blocks-gallery.png)

The new [Blocks](https://nordhealth.design/blocks/) page shows copy-paste UI sections built from Nord components. Blocks sit between a single component and a full application template: they are small enough to reuse directly, but large enough to show how components work together in real product surfaces.

The first batch includes dashboard, scheduling, consultation, communication, patient and client, billing, form, onboarding, authentication and layout patterns. They are especially useful when you know the product pattern you need but do not want to start from a blank page.

Blocks are also a practical way to test component combinations. A component can look correct in isolation but still need adjustments once it appears beside filters, cards, tabs, actions, tables and empty states. The blocks gallery gives us a shared place to document those product-level combinations.

![Templates gallery showing full-page layouts that can be previewed, copied or opened full screen](https://nordhealth.design/img/updates/july-2026-component-updates/templates-gallery.png)

The [Templates](https://nordhealth.design/templates/) gallery takes the next step up from blocks. Templates are complete page layouts built from Nord components, grouped by use case such as application, dashboard, layout, login, navigation, settings and theming.

The important improvement is speed: you can browse the gallery, open a template in place, preview the live page, copy its markup, or view it full screen without leaving the flow. That makes templates useful both for starting a new screen and for quickly checking how components behave together in a realistic page shell.

## What to try first

If you are reviewing the release, start with these areas:

1. Open the [Components overview](https://nordhealth.design/components/) and scan the new category groups.
2. Try the [Date Range Picker](https://nordhealth.design/components/date-range-picker/), [Combobox](https://nordhealth.design/components/combobox/), [Filter Bar](https://nordhealth.design/components/filter-bar/) and [Accordion](https://nordhealth.design/components/accordion/) pages to see the new docs format.
3. Toggle between light and dark mode while reviewing components, blocks and templates.
4. Open the [Blocks gallery](https://nordhealth.design/blocks/) and copy one pattern into a local prototype.
5. Open the [Templates gallery](https://nordhealth.design/templates/) to quickly preview full-page layouts and view one full screen.
6. Check your visual-regression baselines around navigation, layout, overlays, feedback and form controls.
7. Read the [Web Components changelog](https://nordhealth.design/changelogs/) for exact package versions and release details.

## What's next

This release is a foundation, not a finish line. A few areas we are actively working on:

- **Graduating the alpha components.** Several of the new components — Combobox, Autocomplete, Date Range Picker, Meter, Number Field, OTP Field, Time Picker and others — ship as alpha while we finalise their APIs. Expect those interfaces to settle and the alpha labels to drop as we gather feedback from real product use. If you are adopting them now, tell us where the API feels awkward.
- **More blocks and templates.** The first batch covers common product surfaces, but it is deliberately a starting point. We will keep adding patterns — and refining existing ones — as we see which combinations teams reach for most.
- **Deeper composition.** The composition-first direction behind Field, Filter Bar, Accordion and Item continues. Next up, we plan to move **Card**, **Modal** and **Dialog** to the same small, slot-driven parts that compose cleanly rather than one-off wrappers, so there is less repeated product code to maintain.
- **More components.** We are exploring several new components, including **Chat**, **Overflow List**, **Data Table** (built on TanStack Table for Lit), **Input Group**, **Timestamp** and **Resizable**.
- **Framework-agnostic foundations.** We are exploring headless primitives so the same accessible behaviour can be shared beyond web components, making Nord easier to adopt across React, Vue and other stacks.

We will share specifics as they land — follow the [Web Components changelog](https://nordhealth.design/changelogs/) and [Latest Updates](https://nordhealth.design/updates/) for the next steps.

## Upgrade notes

Existing component APIs are intended to remain compatible, so most applications do not need a code migration just to install Nord 5. The visual system has changed in places, especially around navigation, surfaces and newly documented component states, so visual-regression baselines should be regenerated after upgrading.

The most important adoption work is deciding where the new composition-first components should replace local patterns. Field, Combobox, Date Range Picker, Filter Bar, Accordion, Pagination and Item are all designed to reduce repeated product code, but they are best introduced deliberately where they simplify real screens.

For exhaustive package notes and release dates, read the [Web Components changelog](https://nordhealth.design/changelogs/).


# June, 2021

You’re reading the third Nord Design System monthly update. This month we’ve been focusing on onboarding new team members and also rolling out the new brand guidelines into the documentation.

In the beginning of the month, [Eric Habich](https://www.linkedin.com/in/eric-habich-236484ab/){rel="&#x22;nofollow&#x22;"}, our new product designer, joined Nord Design System team. I’ve personally worked with Eric in the past with various clients when I was still living in the San Francisco Bay Area and knew beforehand how talented addition he’d be for our small team. As the first task to get more familiar with Nord, Eric illustrated [our home page](https://nordhealth.design) and the different tools we offer with these nifty drawings:

[![Nord illustrations](https://nordhealth.design/img/updates/illustrations.png){style="max-width:738px"}](https://nordhealth.design)

The interesting bit with these illustrations is that they’re all themed with CSS Custom Properties and use Nord’s [theming feature](https://nordhealth.design/design/themes/). This means that each illustration variant in the documentation is actually the same SVG which gets its colors from the [design tokens](https://nordhealth.design/core/tokens/).

In late May, we also published [Nordhealth brand guidelines](https://nordhealth.design/design/foundations/brand/). This is a result of the brand work we’ve been working on since February and which I shared a little about in the [last monthly update](https://nordhealth.design/updates/may-2021/):

[![Nordhealth brand guidelines](https://nordhealth.design/img/updates/brand-guidelines.png){loading="lazy"}](https://nordhealth.design/design/foundations/brand/)

Together with the above update, we’ve been also improving our [downloads section](https://nordhealth.design/design/assets/) throughout the month to make sure all the brand assets would be available there for downloading and usage:

[![Nord downloads](https://nordhealth.design/img/updates/downloads.png){loading="lazy"}](https://nordhealth.design/design/assets/)

Later during June, we started moving our focus more into product design and started doing both background research and competitive research to help us start designing the system’s parts. We currently have various related Figma documents under the Nord project, like for example the below Interface Audit:

![Nord User Interface Audit](https://nordhealth.design/img/updates/interface-audit.png){loading="lazy"}

…or this document where we’ve started collecting user flows, screens, and information architectures…

![Nord design system background research](https://nordhealth.design/img/updates/research.png){loading="lazy"}

…or this document with typeface tests and visual directions to work with…

![Nord typography](https://nordhealth.design/img/updates/typography.png){loading="lazy"}

…and eventually also documents where we’ve started to draft out the actual interface concepts:

![Nord drafts](https://nordhealth.design/img/updates/drafts.png){loading="lazy"}

Finally, while we’ve moved things forward in Figma, we’ve also started researching on how to sync Figma, our different [color themes](https://nordhealth.design/design/themes/), and the code based [design tokens](https://nordhealth.design/core/tokens/) and built this prototype Figma plugin that fetches the tokens from Nord Design Tokens Node.js package and generates color libraries for Figma usage and syncing:

![Nord Design System Figma plugin](https://nordhealth.design/img/updates/figma.gif){loading="lazy" style="max-width:579px"}

June has been busy, and there’re quite a few things under work behind the scenes which aren’t yet visible in the live system, but which will later start surfacing here in the form of components and larger user interface patterns. Right now though, as it is the end of the month, our whole team would like to wish you all wonderful summer holidays! We’ll catch up again with you in August.

Until the next time!
— Ariel

P.S. Subscribe to our [RSS Feed](https://nordhealth.design/feed.xml){rel="&#x22;nofollow&#x22;"} to follow the latest updates from Nord team.


# Tabs components



# Introducing Brands for Nord Design System



# Statistics for the first year

You’re reading the ninth Nord Design System monthly update. During the past month we’ve been preparing the system for official launch and making sure we offer stable API and comprehensive docs.

Looking back in time, we started our design system journey at the end of 2020 with initial user research. We did this because we wanted to first better understand the challenges we’re trying to solve at [Nordhealth](https://nordhealth.com){rel="&#x22;nofollow&#x22;"} and how the design system might help.

Back then, we interviewed around 60 different persons from different teams, with different backgrounds, and with different levels of experience. The result of this research was an organizational challenges heatmap that highlighted organization level problems.

Once we had this data, we continued the research with a [series of workshops](https://arielsalminen.com/2018/vue-design-system/#figuring-out-challenges){rel="&#x22;nofollow&#x22;"}. These workshops were meant to reveal a lack of alignment and personal biases across teams. The final output from these workshops was a set of prioritized actions that directly informed the backlog of the design system.

Once we knew what the challenges were, it was a matter of creating fundamental [principles](https://nordhealth.design/design/foundations/principles/) and [goals for the system](https://nordhealth.design/resources/about/#our-goals) that we should follow to start solving these issues. The concrete design and development work on the design system started in August 2021 when Eric and Nick joined the team.

Now, 8 months later, we’re excited to launch Nord Design System and all of our tools for production usage! 🎉

---

## Tools you can use today

All of our tools are out of beta phase starting today and ready for production usage. [Web Components](https://nordhealth.design/components/) have also reached release candidate (RC) status and we’ll publish `1.0.0` next week unless significant bugs emerge.

You can read more about each tool below:

\*\*\[Figma Toolkit]\(/design/foundations/figma/)\*\* - nordhealth.design/figma/

\*\*\[Web Components]\(/components/)\*\* - nordhealth.design/components/

\*\*\[CSS Framework]\(/core/css/)\*\* - nordhealth.design/css/

\*\*\[Themes]\(/design/themes/)\*\* - nordhealth.design/themes/

\*\*\[Theme Builder]\(/theme-builder/)\*\* - nordhealth.design/theme-builder/

\*\*\[Nordicons]\(/icons/)\*\* - nordhealth.design/nordicons/

\*\*\[Design Tokens]\(/core/tokens/)\*\* - nordhealth.design/tokens/

\*\*\[Webfonts]\(/docs/developer/webfonts/)\*\* - nordhealth.design/webfonts/

We hope you enjoy using Nord’s tools and help us improve them by providing feedback to us via [Slack](https://nordhealth.design/resources/support/), [Office Hours](https://nordhealth.design/resources/support/), [Monthly Meetups](https://nordhealth.design/resources/support/), and also the feedback functionality found from the bottom of each documentation page.

Hope to hear from you soon!

---

## Statistics for the first year

We wanted to collect a few statistics here, so that we can better track the progress on Nord. We think some of these metrics are impressive for such a small team as for a long time the team was only one person, until we hired two more during summer 2021, and eventually by the end of the year the fourth person, [Dave](https://twitter.com/daviddarnes){rel="&#x22;nofollow&#x22;"}.

**Here you go, the numbers:**

### Team has grown from 1 to 4

Nord team has grown from one to four persons and we’re [currently hiring](https://nordhealth.design/resources/careers/) two more designers and developers for the team.

\[View careers and apply]\(/resources/careers/)

---

### 109,431 lines of code written

We had three people write a total of 109,431 lines of code that form the foundations of Nord Design System today.

![109,431 lines of code written](https://nordhealth.design/img/updates/launch/code.png)

---

### 2,786 commits

We had three people make almost 3000 commits over the past year which are now merged to Main branch on [Nordhealth GitHub](https://github.com/nordhealth){rel="&#x22;nofollow&#x22;"}.

![2,786 commits commits to GitHub](https://nordhealth.design/img/updates/launch/commits.png)

---

### 1296 button variations and states

There are 1296 [button variations](https://nordhealth.design/components/button/) and states. This includes all [6 themes](https://nordhealth.design/design/themes/) we have, but you shouldn’t ever underestimate a button and what a seemingly simple component can cost to an organization when it’s being reinvented by every single product team.

![1296 button variations and states](https://nordhealth.design/img/updates/launch/button.png)

---

### 3218 Figma frames

We’ve worked through 49 [Figma](https://nordhealth.design/design/foundations/figma/) files which contain a total of 107 pages and 3218 frames that we’ve used for background research, design exploration, prototyping, and the components themselves.

![3218 Figma frames](https://nordhealth.design/img/updates/launch/figma.png)

---

### 31 code based components

During the past 8 months we’ve designed and built a total of 31 code based Web Components. 27 of them [can be seen in the documentation](https://nordhealth.design/components/) already and 4 more are waiting behind existing pull requests on GitHub.

![31 code based components](https://nordhealth.design/img/updates/launch/components.png){style="max-width: 600px;"}

---

### 32.96 kB total bundle size

[Lit](https://lit.dev/){rel="&#x22;nofollow&#x22;"} has helped us to keep Nord’s bundle size small. All of our CSS and [Web Components](https://nordhealth.design/components/) combined weigh around 33 kB (minified and compressed).

![32.96 kB total bundle size](https://nordhealth.design/img/updates/launch/terminal.png){style="max-width: 500px;"}

---

### 95.57 % code coverage

Our automated tests currently cover 95.57% of the code base. We use [Web Test Runner](https://modern-web.dev/docs/test-runner/overview/){rel="&#x22;nofollow&#x22;"}, [Mocha](https://mochajs.org/){rel="&#x22;nofollow&#x22;"}, and [Puppeteer](https://pptr.dev){rel="&#x22;nofollow&#x22;"} to automate E2E, unit, accessibility, and screenshot diff tests.

![95.57% code coverage](https://nordhealth.design/img/updates/launch/tests.png)

---

### 256 design tokens

There are [256 design tokens](https://nordhealth.design/core/tokens/) that we use to store design variables like colors, font sizes and spacing information. These are used instead of hard coded values to ensure a better UI consistency across different platforms.

![256 design tokens](https://nordhealth.design/img/updates/launch/tokens.png){style="max-width: 433px;"}

---

### 200,000+ page views

We have had over 200K page views on [nordhealth.design](https://nordhealth.design){rel="&#x22;nofollow&#x22;"} documentation website since May, 2021 when we started measuring visits.

![200,000+ page views](https://nordhealth.design/img/updates/launch/pageviews.png)

---

### 3373 hours of work

Our team of four persons has used a total of 3373 hours to design, build and maintain the system we have today.

![3373 hours of work](https://nordhealth.design/img/updates/launch/hours.png)

---

### 282 versions published

During the past year we’ve published 282 packages versions to [npm](https://www.npmjs.com/org/nordhealth){rel="&#x22;nofollow&#x22;"} that have recently started getting more downloads as teams start utilizing these tools.

![282 versions published](https://nordhealth.design/img/updates/launch/packages.png)

---

### 402 pages of documentation

We’ve created over 400 pages of documentation and live code examples combined during the past year which are all live at [nordhealth.design](https://nordhealth.design){rel="&#x22;nofollow&#x22;"}.

![402 pages of documentation](https://nordhealth.design/img/updates/launch/docs.png){style="max-width: 650px;"}

---

### 100% Lighthouse performance score

[Lighthouse](https://developer.chrome.com/blog/lighthouse-load-performance/){rel="&#x22;nofollow&#x22;"}, a tool by Google that evaluates websites by their performance, accessibility, and other best practices, scores our application templates with 100% score.

![100% Lighthouse performance score](https://nordhealth.design/img/updates/launch/performance.png){style="max-width: 650px;"}

---

### 309 completed Linear issues

We’ve worked through a backlog of 385 tasks and completed 309 of them in a tool called [Linear](https://linear.app/){rel="&#x22;nofollow&#x22;"} that we use for issue tracking and task prioritization.

![309 completed Linear issues ](https://nordhealth.design/img/updates/launch/linear.png){style="max-width: 339px;"}

---

### 120 completed roadmap goals

We’ve completed 120 high level roadmap goals since we’ve started the work on Nord.

- ~~Bug reporting capabilities and enhanced support for design system.~~
- ~~Improved documentation regarding getting started with Nord.~~
- ~~Creating content guidelines for components.~~
- ~~Web Components reaches stable 1.0 state.~~
  - ~~Badge component~~
  - ~~Button component~~
  - ~~Calendar component~~
  - ~~Card component~~
  - ~~Checkbox component~~
  - ~~Etc…~~

Until the next time,
— Ariel

P.S. Subscribe to our [RSS Feed](https://nordhealth.design/feed.xml){rel="&#x22;nofollow&#x22;"} to follow the latest updates from Nord team.


# Introducing Storybook and the New Playground Experience

\*Nord Design System now ships with Storybook 10, bringing a powerful new playground experience to every component page. Explore components interactively with controls, test across themes and viewports, run accessibility audits, and export to CodePen — all without leaving the docs.\*

![storybook.png](https://nordhealth.design/img/updates/march-2026-storybook-playground/storybook.png)

## Why Storybook?

Our previous documentation examples were static HTML snippets rendered in iframes. They showed what a component looked like, but not how it behaved when you changed its properties, resized the viewport, or switched themes. Developers had to read the API docs separately and piece things together manually.

With Storybook, every component now has a living, interactive playground backed by the same source of truth as our component library. This means:

- **Instant feedback** — change a prop and see the result immediately.
- **Single source of truth** — stories are written alongside the component source code, so examples are always up to date.
- **Extensible tooling** — we can add new testing and documentation addons as the ecosystem evolves.

## The Playground

Each component page now features a **Playground** story as the default example. The Playground embeds Storybook directly into the docs site with the controls panel open, so you can tweak every property, slot, and variant without leaving the page.

![playground.png](https://nordhealth.design/img/updates/march-2026-storybook-playground/playground.png)

### Controls panel

::div{.n:grid.n:m:grid-cols-2.n:gap-m.n:items-start}
  :::div
  The controls panel is generated automatically from the component's custom elements manifest. Every property, attribute, and slot is represented as an interactive control — selects for enums, toggles for booleans, text inputs for strings, and more.
  :::

![Storybook controls panel](https://nordhealth.design/img/updates/march-2026-storybook-playground/control.png){.n:border.n:border-default.n:rounded style="max-width: 320px;"}
::

### Theme switching

::div{.n:grid.n:m:grid-cols-2.n:gap-m.n:items-start}
  :::div
  A theme selector in the toolbar lets you preview components across all four Nord themes:

  - **Nord** (default light)
  - **Nord Dark**
  - **Veterinary**
  - **Veterinary Dark**

  Theme switching works in both the embedded playground and the standalone Storybook.
  :::

![Theme switcher in the Storybook toolbar](https://nordhealth.design/img/updates/march-2026-storybook-playground/theme-switcher.png){.n:border.n:border-default.n:rounded style="max-width: 320px;"}
::

### Viewport testing

::div{.n:grid.n:m:grid-cols-2.n:gap-m.n:items-start}
  :::div
  Storybook's built-in viewport tool lets you preview components at different device sizes — from mobile to desktop — directly in the canvas. This is especially useful for responsive components like Layout, Navigation, and Popout that adapt their behaviour based on screen width.
  :::

![Viewport selector showing different device presets](https://nordhealth.design/img/updates/march-2026-storybook-playground/responsive.png){.n:border.n:border-default.n:rounded style="max-width: 320px;"}
::

### Accessibility testing

::div{.n:grid.n:m:grid-cols-2.n:gap-m.n:items-start}
  :::div
  Every story is automatically audited using the **Accessibility addon** powered by axe-core. Open the Accessibility panel to see a live report of any violations, incomplete checks, or passed rules for the current story state.
  :::

![Accessibility panel showing an audit result](https://nordhealth.design/img/updates/march-2026-storybook-playground/accessiblity.png){.n:border.n:border-default.n:rounded style="max-width: 320px;"}
::

### Autodocs

Storybook generates a full documentation page for each component, combining a live preview of every story with an auto-generated property table extracted from the custom elements manifest. This serves as a quick reference alongside our handwritten component guides.

### CodePen integration

Want to take an example further? Every story includes an **Open in CodePen** button — both in the docs site example viewer and in the Storybook toolbar. It exports the rendered HTML along with the correct CDN links for Nord CSS, themes, and components, so you get a working sandbox in seconds.

## For contributors

Stories live alongside their component source in `packages/components/src/<component>/`. Adding a new story is straightforward:

```ts
export const MyNewExample: Story = {
  render: () => html`
    <nord-button variant="primary">Hello</nord-button>
  `,
}
```

Run `npm run storybook` in the components package to start the development server. All 55+ components already have stories covering their key states and variants.

## What's next

This is the foundation we'll continue building on:

- **Visual regression testing** with Storybook's snapshot capabilities
- **Interaction testing** for complex component workflows
- **Design token documentation** within Storybook
- **Figma integration** linking stories to their design counterparts

We're excited about how Storybook transforms the way you explore and adopt Nord components. Try it out on any component page or open the standalone Storybook directly.

\[Open Storybook]\(/storybook/)


# May, 2021

You’re reading the second Nord Design System monthly update. Since February, we’ve been busy rethinking our design processes and brand identity that was launched a few weeks ago.

During the past months our team has been busy rethinking our brand identity from the ground up. We wanted to go through this effort to mirror the growth and transformation of our company into the leading cloud-based provider of healthcare and veterinary software. As a result, “Three Plus Group” and “Finnish Net Solutions” now have a new name and corporate identity and are now all called [Nordhealth](https://nordhealth.com){rel="&#x22;nofollow&#x22;"}.

Our new logo represents “togetherness.” Two sides working as one. So, on a business level, it represents a key driver for us, acquisition. For our customers and end users, it expresses the seamless use of our products to improve productivity and communication. We bring healthcare professionals closer to their patients. Our new logo also defines how our teams work as a strong unshakable unit. On a deeper level, the logo also illustrates a bigger idea, change and innovation in the global healthcare market.

This rebranding is a start of a bigger design transformation at Nordhealth. Our plan isn’t to merely rethink the corporate brand. The goal is to continue this work and rethink our design processes and digital products from the ground up and improve their user experience and user interfaces vastly.

**This is where Nord Design System steps in. Nord is our platform for driving the design transformation.**

![New Nordhealth brand](https://nordhealth.design/img/brand.svg){.provet}

Subscribe to our [RSS Feed](https://nordhealth.design/feed.xml){rel="&#x22;nofollow&#x22;"} to follow the latest updates from Nord team.

Until the next time!
— Ariel


# Finalist for the Best Design System Award

Nord Design System was recently nominated for the Best Design System award at [Grand One competition](https://grandone.fi/kilpailutyot/?palkinto=voittajat&kategoria=paras-design-system) and won an honorable mention for the best developer experience.

[![Best Design System award](https://nordhealth.design/img/updates/best-design-system.jpg){.n-border.n-border-radius height="4032" style="max-width:600px;" width="3024"}](https://grandone.fi/kilpailutyot/?palkinto=voittajat&kategoria=paras-design-system)

\[View all finalists]\(https\://grandone.fi/kilpailutyot/?palkinto=voittajat\&kategoria=paras-design-system)

P.S. Subscribe to our [RSS Feed](https://nordhealth.design/feed.xml){rel="&#x22;nofollow&#x22;"} to follow the latest updates from Nord team.


# October, 2021

You’re reading the fifth Nord Design System monthly update. This month we’ve gained great momentum and have published four new packages, and made many improvements to Nord documentation.

As [Nord Design System](https://nordhealth.design) is still quite young, we feel like it’s a good idea to once in a while repeat why we are building these tools and what’s really the scope of our work. To us, a “design system” is a collection of reusable components and tools, guided by clear standards, that can be assembled together to build digital products and experiences.

What this means, is that we aren’t really designing the workflows and features of each product. Instead, our goal is to provide the best possible tools, components, and guidelines for our designers and developers working in each product team to be able to build more consistent products at scale, faster, and with better outcomes.

The ultimate end goal for us is to provide tools that allow us, [as a company](https://nordhealth.com){rel="&#x22;nofollow&#x22;"}, to better serve our end users and that is really at the center of everything we do. We want to transform our culture, processes, and practices to support this mission and the design system is an important tool to help us with this transformation.

The fundamental purpose of Nord is to elevate our design and frontend development practices in-house, bring those disciplines closer together, improve the consistency between products, and also improve the working efficiency for everyone in the long run.

**We’re here to make your life easier, [let us know how we can help](https://nordhealth.design/resources/support/) your team.**

---

## New this month

As mentioned earlier, we’ve published quite a few [new packages](https://nordhealth.design/changelogs) and features this month, so we’re listing all of them below and linking to their respective documentation pages for detailed information about usage and such.

[![Nord Design Tokens](https://nordhealth.design/img/design-tokens.png)](https://nordhealth.design/core/tokens/)

## Nord Design Tokens [1.0.0]{.n-badge.n-badge-l}

Design tokens are a tech-agnostic way to store variables. We use tokens instead of hard coded values to ensure a better UI consistency across different platforms. Design tokens reached stable state this week and they’re now ready for production usage.

\[View documentation]\(/core/tokens/)

---

[![Nord Themes](https://nordhealth.design/img/themes.svg)](https://nordhealth.design/design/themes/)

## Nord Themes [2.0.0]{.n-badge.n-badge-l}

Nord’s parts are themable using CSS Custom Properties. We ship pre-made themes for Nordhealth, Veterinary and Healthcare. You can utilize these themes through our Themes package which reached stable state this week and is now ready for production usage.

\[View documentation]\(/design/themes/)

---

[![Nordicons](https://nordhealth.design/img/nordicons.png)](https://nordhealth.design/icons/)

## Nordicons [1.0.0]{.n-badge.n-badge-l}

Nordicons are used to provide additional meaning or in places where text label doesn’t fit. They communicate messages at a glance and draw attention to important information. Nordicons package reached stable state this week and is now ready for production usage.

\[View documentation]\(/icons/)

---

[![Nord Webfonts](https://nordhealth.design/img/inter.svg)](https://nordhealth.design/docs/developer/webfonts/)

## Nord Webfonts [2.0.0]{.n-badge.n-badge-l}

Nord Design System provides an npm package that makes it straightforward to use our webfonts. This package ships with all the necessary font files in addition to Sass, Less, and CSS for self-hosting. Nord’s Webfonts package reached stable state this week and is now ready for production usage.

\[View documentation]\(/docs/developer/webfonts/)

---

[![Nord CDN](https://nordhealth.design/img/updates/cdn.jpg)](https://nordhealth.design/docs/developer/cdn/)

## Nord CDN

We now serve all of Nord’s packages via a new Content Delivery Network for better performance and stability. Nord CDN also makes it faster to implement and use our packages in production.

\[View documentation]\(/docs/developer/cdn/)

---

::div{.n-theme-nord}
::

::div{.n-theme-nord-dark}
::

\> \[!WARNING]
\> We've added a new visual style to highlight specific content from the rest when needed.

## Improved documentation

We’ve worked on improving our documentation platform and added a handful of new features to make the daily usage nicer for everyone. The biggest changes include:

1. We’ve moved from global theming into a local theming. You can see this in action above and on e.g. our [Design Tokens documentation](https://nordhealth.design/core/tokens/) or on [Stack component page](https://nordhealth.design/components/stack/). No more hiding of content per theme, so all content is easier to discover.
2. All code examples now include “copy to clipboard” functionality. You can see this in action above and on e.g. [Themes documentation](https://nordhealth.design/design/themes/). Additionally, we’ve also added this functionality to the [Design Tokens](https://nordhealth.design/core/tokens/) documentation.
3. The search in the docs has been improved and it should now work much more reliably to make it quicker to find and discover content. Please note that when you search you can use arrow up/down keys and enter to select a result you want to open.
4. We’ve added a new visual style to highlight specific content from the rest when needed. There’s an example shown above this list.
5. The documentation itself is now using Nord Web Components so in a way we’re dog fooding ourselves with our own product to find issues and make it more robust.
6. There’s a lot of new content, including usage guidelines for [Design Tokens](https://nordhealth.design/core/tokens/#usage), [Themes](https://nordhealth.design/design/themes/), [Webfonts](https://nordhealth.design/docs/developer/webfonts/), [Nordicons](https://nordhealth.design/icons/), [Nord CDN](https://nordhealth.design/docs/developer/cdn/) and [more…](https://nordhealth.design/docs/developer/)

---

Until the next time!
— Ariel

P.S. Subscribe to our [RSS Feed](https://nordhealth.design/feed.xml){rel="&#x22;nofollow&#x22;"} to follow the latest updates from Nord team.


# Finalist for the Jamstack Conf Jammies

Nord Design System was recently nominated for the Jamstack Conf Jammies award in “Project of the Year” category. Winners will be announced live at [Jamstack Conf](https://jamstack.org/conf/jammies/) on November 7 – 8.

Nord was nominated for outstanding achievement in delivering best-in-class experiences to customers through innovative use of technologies across the Jamstack and its ecosystem. You can read more [about the award on the official website](https://jamstack.org/conf/jammies/){rel="&#x22;nofollow&#x22;"}.

[![Jammies award](https://nordhealth.design/img/updates/jammies.jpg){height="1536" width="2027"}](https://jamstack.org/conf/jammies/)

\[View all finalists]\(https\://jamstack.org/conf/jammies/)

P.S. Subscribe to our [RSS Feed](https://nordhealth.design/feed.xml){rel="&#x22;nofollow&#x22;"} to follow the latest updates from Nord team.


# September, 2021

You’re reading the fourth Nord Design System monthly update. This month we’ve been working on making sure that everyone at Nordhealth understands how and why we’re building a design system.

We started the design systems work at [Nordhealth](https://nordhealth.com){rel="&#x22;nofollow&#x22;"} in late 2020. The way I usually recommend starting this work is via user research, which helps us to figure out what are the challenges on organization, team, and people level that we should be solving. We do this because all companies are different and there isn’t one solution that fits everyone when it comes to design systems.

Back then we interviewed \~60 different persons from different teams, with different backgrounds, and with different levels of experience. The result of this research was an organizational challenges heatmap that highlighted organization level problems.

Now that we had a clear list of challenges that we wanted to start solving, it was a matter of creating fundamental principles and goals for the system that we should follow to start solving these issues. We came up with these four goals for Nord:

![Nord goals](https://nordhealth.design/img/updates/goals.jpg)

At the same time, we also created design principles for the design systems work that would form the foundations for Nord and guide our team when working on the different parts of the system and help us do better and more informed decisions. These are the six design principles we created for Nord:

### 1. Put user needs first

We care for the people who use our products. We’re here to make their day-to-day and long-term work better and more pleasant through great user experience.

### 2. Strive for consistency, not uniformity

We should use the same language and design patterns wherever possible. This helps people get familiar with our services. Same holds true for the system and its developer experience.

### 3. Default to openness

We should share what we’re doing whenever we can. Building our services transparently increases their visibility and accountability and makes us push towards higher quality.

### 4. Make it accessible

Our services are for everyone. We make sure people with different needs can use our products and that they meet the accessibility standards outlined in WCAG 2.1.

### 5. Provide a good developer experience

Providing a good developer experience is very important to us. Developers should be able to start using our tools in minutes, not hours, days or weeks.

### 6. Automate everything you can

We value the time of our colleagues, users, and our future selves over our own. We are always proactively looking for ways to automate repetitive tasks and testing.

![Nord has tech-agnostic components](https://nordhealth.design/img/updates/agnostic.jpg)

Whenever I talk about Nord Design System, one of the first things that I like to mention is that we’re building a system that is &#x2A;*tech agnostic, not tech specific.** Meaning that you can take any component from Nord and use it with any framework. That could be Angular, React, Preact, Vue.js, plain HTML, your old PHP application, or any future framework.

We achieve this by building on top of existing web standards ([Web Components](https://developer.mozilla.org/en-US/docs/Web/Web_Components){rel="&#x22;nofollow&#x22;"} to be exact), instead of choosing a specific framework to go with. This is really important for us for a few reasons;

### Tech-Agnostic Instead Of Tech-Specific

In order to create modular interfaces, a design system needs to be technology-agnostic instead of technology-specific. Web Components offer this benefit and make it easier to reduce our design system’s complexity and improve its reusability.

### Future Proofing With Web Standards

[Web Standards](https://en.wikipedia.org/wiki/Web_standards){rel="&#x22;nofollow&#x22;"} are more future proof than any given JavaScript framework. I’ve seen different frameworks come and go during my almost two decade long career on the web, but Web Standards keep thriving and evolving.

### Any Framework Or No Framework

Web Components can be used with [any JavaScript framework](https://custom-elements-everywhere.com/){rel="&#x22;nofollow&#x22;"} or no framework at all. This means we’re able to support all our product teams from a single codebase. This makes it possible for our small design system team to be very efficient.

### Full Encapsulation

[Shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM){rel="&#x22;nofollow&#x22;"} allows components to have their own DOM tree that can’t be accidentally accessed from the main document. For us this means that “everything just works” when the components are implemented onto different environments and platforms. Most styles cannot penetrate a component from the outside, and styles inside a component won’t bleed out.

![Nord has tech-agnostic styles as well](https://nordhealth.design/img/updates/agnostic-2.jpg)

Nord’s tech-agnostic thinking isn’t limited to only components either, all our styles are agnostic as well. We use [design tokens](https://nordhealth.design/core/tokens/) instead of hard coded values to ensure a better UI consistency across different platforms. Be that a web application, a native application, a mobile application, a VR solution, or something new that doesn’t even exist today.

![Nord’s technical architecture](https://nordhealth.design/img/updates/structure.jpg)

Looking at the way [Nord](https://nordhealth.design) itself is structured, looks somewhat like shown in the picture above. The most important thing about the architecture is that we aren’t really talking about one gigantic design system, but multiple small modular systems that can be used either standalone or together depending on specific team’s needs.

So on a high-level we have design tokens which are the base building blocks of our design language. There we define things like colors, fonts, spacing, shadows, and other properties that create the visual look. Then on the second level we have packages such as Nord’s CSS Framework, Theme system, Web Components, and Figma components.

What ties it all together is our documentation and guidelines at [nordhealth.design](https://nordhealth.design) which is getting more and more automated as we move along.

[![Nord UI prototype](https://nordhealth.design/img/updates/prototype.jpg)](https://nordhealth.github.io/nordhealth-pay-prototype/)

The last thing I perhaps want to share in this update, is an [early prototype](https://nordhealth.github.io/nordhealth-pay-prototype/) of Nord’s UI components. We’ve been moving back and forth between Figma and HTML prototypes to be able adjust the micro interactions and how the UI feels in real use in real environment, which is the web browser. Things will definitely still change quite a lot as we’re rapidly iterating on the design and theming, but [take a peek of what’s under work](https://nordhealth.github.io/nordhealth-pay-prototype/).

Until the next time!
— Ariel

P.S. Subscribe to our [RSS Feed](https://nordhealth.design/feed.xml){rel="&#x22;nofollow&#x22;"} to follow the latest updates from Nord team.