CSS classes#

CSS helper classes#

Reusing classes in the markup instead of using SCSS extends or mixins will prevent duplication in @dnb/eufemia. This approach also benefits your application by reusing these helper classes.

Core style#

dnb-core-style

Provides the core Body Style inside a wrapper, making it available for all its children. The Body Style includes the correct color, line-height, font, and a CSS reset, among other styles.

Wrapper with the DNB Body Style (CSS reset)

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

Tab focus#

dnb-tab-focus

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

dnb-mouse-focus
dnb-focus-ring
dnb-no-focus

Try to focus me with the Tab key

My main focus state has been removed and replaced by the helping class .dnb-tab-focus

Skip link#

dnb-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.

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

More details in the Focus Section.

Spacing#

dnb-spacing

Sets default spacing (using margin) on all HTML elements inside the container with this style. The default spacing is 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)
  </h1>
  <p class="dnb-p">👉 Me as well</p>
</article>

More details in Styling.

Scrollbar appearance#

dnb-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#

dnb-sr-only

Visually hide an element while keeping it accessible to 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.!

Page background#

dnb-page-background

Sets the page background color using the --token-color-background-page-background design token. Use this class on a root element (such as body or a wrapper) to ensure a themed background color that adapts to light and dark modes.

Drop shadow#

dnb-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 softer and more blurred.

CSS properties#

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

import properties from '@dnb/eufemia/style/themes/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);

Sharp drop shadow#

dnb-sharp-drop-shadow

Adds a smaller but sharper drop shadow (box-shadow: 0 1px 6px rgba(0, 0, 0, 0.16)) to the component. Designed for hovering elements such as dropdowns or calendars.

CSS properties#

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

import properties from '@dnb/eufemia/style/themes/ui/properties.js'

const cssBoxShadow = properties['--shadow-sharp']

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

--shadow-sharp-x: 0;
--shadow-sharp-y: 1px;
--shadow-sharp-blur-radius: 6px;
--shadow-sharp-color: rgba(0, 0, 0, 0.16);

Responsive component#

dnb-responsive-component

Makes some form components, like Input, react to small-sized screens. Since this can have negative effects when enabled by default, you can enable it optionally using this helper class.

Unstyled list#

dnb-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.

Selection#

dnb-selection

Applies custom ::selection colors for better contrast and readability.

This is automatically applied to every element whose class starts with dnb-. For other elements, you can add the .dnb-selection class manually to opt in.

background-color: var(--token-color-decorative-first-subtle);
color: var(--token-color-text-neutral);
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.

Suggest an edit