Skip to content
Home

CSS Styles

To ensure flexibility and the possibility of theming, the DNB CSS Styles area built in a bottom up manner.

The styles are decoupled from the functional components. There are several packages you can use and combine.

Main Packages

  • dnb-ui-core: includes the DNB Main Styles like helper classes, HTML and body reset (normalize).
    • We have an alternative package, dnb-ui-basis, that can be used if your page has other css that conflicts with Eufemia. It does the same, but adds resets to the .dnb-core-style class instead of the body element so Eufemia styling can be scoped to just a part of your page. NB: needs a .dnb-core-style wrapper class.

Theme Packages

Additional Theme Packages

  • ui-theme-properties: includes only the CSS Custom Properties. you can find this package inside /style/themes/theme-ui/.
  • ui-theme-extensions: includes all the styles (and themes) for extensions (not shown in the Diagram).
  • ui-theme-fonts: includes only the @font-face and properties. you can find this package inside /style/themes/theme-ui/.
  • ui-theme-tags: this package will force styles on all the HTML Tags like <h1> instead of CSS classes, like .dnb-h--xx-large
    • NB: needs a .dnb-core-style wrapper class.
    • Use it carefully - because this will effect existing styles as well.

All the CSS packages are ready to use, minified CSS files. You will find the main style here: @dnb/eufemia/style/dnb-ui-core.min.css

Individual styles

Additionally, it is also possible to import a style and theme for every single component separately. You can find the styles here, like: @dnb/eufemia/components/{button}/style/dnb-{button}.min.css - read more about how to import a single-component style

CSS Structure Diagram

The following Diagram gives an overall overview how the packages are structured.

CSS Structure Diagram

How to deal with existing styles

The dnb-ui-core package includes some styles which effects the global scope (<body> reset). To avoid interference with existing styles, let's say a header or a menu, you could only use the dnb-ui-basis package in combination with other packages like ui-theme-basis and ui-theme-components.

You may have a look at some code examples of dealing with legacy code.

Example import

// NB: needs a wrapper class: ".dnb-core-style"
import '@dnb/eufemia/style/basis'
import '@dnb/eufemia/style/themes/ui'


// instead of all together
/* import '@dnb/eufemia/style' */

Core Style

To have the Eufemia Core styles inside a wrapper anyway, simply use the following helper class: .dnb-core-style:

<body>
  <p>I'm not Eufemia</p>
  <!-- Wrapper to have correct Eufemia css reset and styles -->
  <div id="app" class="dnb-core-style">
    <h1 class="dnb-h--xx-large">I have an Eufemia Style</h1>
    <p class="dnb-p">👉 Me as well</p>
  </div>
</body>

CSS Specificity

Once you use the .dnb-core-style wrapper class, you may in some circumstances, need to use it to modify already given properties.

For Styled Components you do it this way:

import { P } from '@dnb/eufemia'
const MyElement = styled(P)`
  .dnb-core-style & {
    margin-top: 3rem;
  }
  color: var(--color-sky-blue);
`

In CSS you simply do it this way:

.dnb-core-style .my-element {
  margin-top: 3rem;
  color: var(--color-sky-blue);
}

Spacing for Articles

To ensure more flexibility in styling, all the margins / spacings are reset to zero. But more often we have to have a by default defined spacing, e.g. margin on HTML Elements like headings or paragraphs.

To use the default DNB spacings, define a CSS class called: .dnb-spacing Effected HTML Elements inside this container will then have a default spacing. This will be specially helpful for article alike pages.

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

The styles for the .dnb-spacing are included in the package: ui-theme-basis For more details, check out the source file: spacing.scss

Styling of HTML Elements (tags)

To deal with HTML Elements, without declaring them with individual CSS classes (like <h1 class="dnb-h--xx-large">), you can import the sub package ui-theme-tags.

NB: Use it carefully - cause this will effect existing styles as well!

import '@dnb/eufemia/style/dnb-ui-core.min.css'
import '@dnb/eufemia/style/themes/theme-ui/ui-theme-basis.min.css'


- import '@dnb/eufemia/style/themes/theme-ui/ui-theme-components.min.css'
+ import '@dnb/eufemia/style/themes/theme-ui/ui-theme-tags.min.css'
<!-- HTML Elements in the wild -->
<div class="dnb-core-style">
  <h1>I'm now Eufemia styled</h1>
  <ul>
    <li>Me as well</li>
  </ul>
</div>

A list of all CSS properties (variables)

Beside the portal documentation with related tables and additional information, you may have a look at the CSS file, containing the custom properties (CSS variables), as well as a JavaScript file, which is auto generated from the CSS data.

Access CSS properties (variables) in JavaScript

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


const seaGreenColor = properties['--color-sea-green']
const basisFontSize = properties['--font-size-basis']

Using Tailwind

Tailwind can be used as a tooling layer alongside Eufemia, but avoid overlapping CSS and resets.

Recommended approach:

  • Use Eufemia as the source of truth for tokens and reset.
  • Do not include Tailwind's base/reset; only include its theme + utilities.
  • Map Tailwind tokens to Eufemia CSS variables; avoid self-referencing variables.

NB: import only Tailwind theme and utilities (Tailwind v4):

@layer theme, utilities;


@import 'tailwindcss/theme.css' layer(theme);
@import 'tailwindcss/utilities.css' layer(utilities);

Example: bridge Tailwind tokens to Eufemia variables using @theme:

/* index.css */
@theme {
  /* spacing */
  --spacing-sm: var(--spacing-small);
  --spacing-md: var(--spacing-medium);
  --spacing-lg: var(--spacing-large);


  /* typography */
  --font-family-sans: var(--font-family-default);
  --font-family-mono: var(--font-family-monospace);
}

Known styling and CSS issues

  • Safari, both on mobile and desktop has a problem where we combine border-radius with the usage of inset in a box-shadow. The solution for now is to not use inset – which results in an outer border, which is not ideal as we then not do follow the UX guidelines for these browsers. We have a SASS function handling this for us: @mixin fakeBorder.