Skip to content

CSS helper classes

Reusing classes in the markup instead of using SCSS extends or mixins will prevent duplication in the @dnb/eufemia. So also your application will have good benefits from reusing these helper classes.

Core style


In order to be able to have the core Body Style inside a wrapper and available for all its children. The Body Style contains among others styles, the correct color, line-height, font and a CSS reset.

Wrapper with the DNB Body Style (CSS reset)

Read more about .dnb-core-style and Use Eufemia Styles elsewhere

Tab focus


Removes default focus outline from a focusable element and adds a custom visual focus state when is focused by a tab key. There is also:

  • dnb-mouse-focus
  • dnb-focus-ring
  • dnb-no-focus
Try to focus me with the Tab keyMy main focus state has been removed and replaced by the helping class .dnb-tab-focus

Skip link


A default Skip Link style, for adding a link at the top of each page that goes directly to the main content area.

<a class="dnb-skip-link" href="#content-id">Skip to content</a>
<!-- Nav links or content to skip -->
<main id="content-id">
<!-- Content goes here -->

More details in the Focus Section.



Sets default spacing (using margin) on all HTML elements inside the container with this style. The default spacing is a margin-bottom: 1.5rem, but specific margins are defined for headings, lists and tables.

<article class="dnb-spacing">
<!-- DNB spacings -->
<h1 class="dnb-h--xx-large">
e.g. I have now the Eufemia spacing (margin)
<p class="dnb-p">👉 Me as well</p>

More details in Styling.

Scrollbar appearance


Define the DNB scrollbar appearance, including the color --color-emerald-green with transparent.

NB: Browser support is not fully covered (2021).

Screen Reader (sr) only


Visually hides an element, but is still reachable by screen readers. (sr stands for Screen Reader)

Hidden textI am only visible to screen readers, so you probably can't see me. Unless you're using a screen reader.!

Drop shadow


Adds a default drop shadow, box-shadow: 0 8px 16px rgba(51, 51, 51, 0.08), to the component. The current shadow specification is designed to be less sharp and more blurry.

CSS properties

The DNB Drop shadow is also available as a CSS Custom Property:

import properties from '@dnb/eufemia/style/themes/theme-ui/properties.js'
const cssBoxShadow = properties['--shadow-default']

If you only want to apply parts of the property, these are available as well:

  • --shadow-default-x: 0;
  • --shadow-default-y: 8px;
  • --shadow-default-blur-radius: 16px;
  • --shadow-default-color: rgba(51, 51, 51, 0.08);

Responsive component


Makes some component form components, like Input react to small sized screens. But as this can have some negative effects to have this enabled by default, you can enable this optionally using this helper class.

Unstyled list


Removes default styling for lists. Applies to the ul or ol elements.

  • I'm an unstyled list item
  • Me too!

  • But I'm not.



Applies the DNB selection colors to the selected content.

Eufemia uses custom ::selection colors to enhance the contrast and to play well against the many green colors. Every HTML class that starts with the prefix dnb- will be effected. In some circumstances you can simply make use of the class .dnb-selection, which applies the styles below on ::selection.

background-color: var(--color-mint-green);
color: var(--color-black);
text-shadow: none;

If you select a part of this text, you will see the selection highlight is green.

HTML class naming

To ensure a consistent class structure and to ensure that the class is owned by the DNB UI Library, all classes in the UI Library are prefixed with dnb-. Read more about that in the Naming conventions.