--- title: 'CSS classes' version: 10.104.0 generatedAt: 2026-04-17T18:46:12.750Z checksum: 090b7d977ba4be5e2c4c04d199a30a4048416c59f443a56985df2f80629d9c40 --- # 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. ```tsx render(

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` ```tsx render(
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. ```html Skip to content
``` More details in the [Focus Section](/uilib/usage/accessibility/focus#skip-link). ## 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. ```html

e.g. I have now the Eufemia spacing (margin)

👉 Me as well

``` More details in [Styling](/uilib/usage/customisation/styling#spacing). ## 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_) ```tsx render(

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

) ``` ## 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: ```ts 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);` ## 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: ```ts import properties from '@dnb/eufemia/style/themes/theme-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](/uilib/components/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. ```tsx render(
  • I'm an unstyled list item
  • Me too!
  • But I'm not.
 ) ``` ## Selection `dnb-selection` Applies the DNB selection colors to selected content. Eufemia uses custom `::selection` colors to enhance contrast and work well with the many green colors. Every HTML class that starts with the prefix `dnb-` will be affected. In some circumstances, you can simply use the `.dnb-selection` class, which applies the styles below on `::selection`. ```scss background-color: var(--color-mint-green); color: var(--color-black); text-shadow: none; ``` ```tsx render(

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](/contribute/style-guides/naming).