Skip to content

HTML Elements

The dnb-ui-lib contains styling for the most commonly used HTML Elements defined by the UX team at DNB. You may also have a look at Typography for headings and paragraph usage.

How to use

By default, no HTML element tag will be styled, except for Headings and Paragraphs which are styled by default without defining a class(es).

In order to apply a style, you have to define a CSS class, like:

Although, You have also the possibility to load a sub package, called dnb-ui-tags which applies all the styles to the HTML tags automatically. Use it with caution, as they can effect existing styles as well.

React JSX

For those using JSX with React, you can simply use the wrapper Components.

import { H1, H2, Lead, P, Link } from 'dnb-ui-lib/elements'
render(
<article>
<H1>Semantic h1</H1>
<P>My Paragraph</P>
</article>
)

They work seamlessly with Styled Components as well:

Styled Link

Overview

Anchor (Text Link)

The Anchor, also knows as Link is used to navigate from one linked content to the next.

You would normally just decorate your anchor class withe this CSS class: .dnb-anchor.

React JSX

Additional Anchor helper classes

To force a specific state of style, use the following classes to do so:

Anchor modifiers

Anchor with icons

Anchor in headings

Customize blank target graphic

You may use a tool like this url-encoder to url-encode your SVG.

If you only want to change the colors, you can swap out fill='%23007272' with your custom color HEX code. Keep in mind that %23 stands for #.

.dnb-anchor::after {
background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 0a.75.75 0 000 1.5V0zm4 .75h.75A.75.75 0 0015 0v.75zm-.75 4a.75.75 0 001.5 0h-1.5zm1.5 4a.75.75 0 00-1.5 0h1.5zm-.75 6.5V16c.41 0 .75-.34.75-.75H15zm-14 0H.25c0 .41.34.75.75.75v-.75zM1 .75V0a.75.75 0 00-.75.75H1zm5.75.75a.75.75 0 000-1.5v1.5zm2.72 3.72a.75.75 0 001.06 1.06L9.47 5.22zM14.25.75v4h1.5v-4h-1.5zm0 8v6.5h1.5v-6.5h-1.5zM15 14.5H1V16h14v-1.5zm-13.25.75V.75H.25v14.5h1.5zM1 1.5h5.75V0H1v1.5zm10 0h4V0h-4v1.5zm-.47 4.78l5-5L14.47.22l-5 5 1.06 1.06z' fill='%23007272' /%3E%3C/svg%3E");
}
.dnb-anchor:active::after {
background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 0a.75.75 0 000 1.5V0zm4 .75h.75A.75.75 0 0015 0v.75zm-.75 4a.75.75 0 001.5 0h-1.5zm1.5 4a.75.75 0 00-1.5 0h1.5zm-.75 6.5V16c.41 0 .75-.34.75-.75H15zm-14 0H.25c0 .41.34.75.75.75v-.75zM1 .75V0a.75.75 0 00-.75.75H1zm5.75.75a.75.75 0 000-1.5v1.5zm2.72 3.72a.75.75 0 001.06 1.06L9.47 5.22zM14.25.75v4h1.5v-4h-1.5zm0 8v6.5h1.5v-6.5h-1.5zM15 14.5H1V16h14v-1.5zm-13.25.75V.75H.25v14.5h1.5zM1 1.5h5.75V0H1v1.5zm10 0h4V0h-4v1.5zm-.47 4.78l5-5L14.47.22l-5 5 1.06 1.06z' fill='%23a5e1d2' /%3E%3C/svg%3E");
}

To ensure compatibility for Internet Explorer and older Edge versions, you may still use base64. Use e.g. this base64 converter

.dnb-anchor::after {
background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTEgMGEuNzUuNzUgMCAwMDAgMS41VjB6bTQgLjc1aC43NUEuNzUuNzUgMCAwMDE1IDB2Ljc1em0tLjc1IDRhLjc1Ljc1IDAgMDAxLjUgMGgtMS41em0xLjUgNGEuNzUuNzUgMCAwMC0xLjUgMGgxLjV6bS0uNzUgNi41VjE2Yy40MSAwIC43NS0uMzQuNzUtLjc1SDE1em0tMTQgMEguMjVjMCAuNDEuMzQuNzUuNzUuNzV2LS43NXpNMSAuNzVWMGEuNzUuNzUgMCAwMC0uNzUuNzVIMXptNS43NS43NWEuNzUuNzUgMCAwMDAtMS41djEuNXptMi43MiAzLjcyYS43NS43NSAwIDAwMS4wNiAxLjA2TDkuNDcgNS4yMnpNMTQuMjUuNzV2NGgxLjV2LTRoLTEuNXptMCA4djYuNWgxLjV2LTYuNWgtMS41ek0xNSAxNC41SDFWMTZoMTR2LTEuNXptLTEzLjI1Ljc1Vi43NUguMjV2MTQuNWgxLjV6TTEgMS41aDUuNzVWMEgxdjEuNXptMTAgMGg0VjBoLTR2MS41em0tLjQ3IDQuNzhsNS01TDE0LjQ3LjIybC01IDUgMS4wNiAxLjA2eiIgZmlsbD0iIzAwNzI3MiIgLz48L3N2Zz4=);
}
.dnb-anchor:active::after {
background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cGF0aAogICAgZD0iTTExIDBhLjc1Ljc1IDAgMDAwIDEuNVYwem00IC43NWguNzVBLjc1Ljc1IDAgMDAxNSAwdi43NXptLS43NSA0YS43NS43NSAwIDAwMS41IDBoLTEuNXptMS41IDRhLjc1Ljc1IDAgMDAtMS41IDBoMS41em0tLjc1IDYuNVYxNmMuNDEgMCAuNzUtLjM0Ljc1LS43NUgxNXptLTE0IDBILjI1YzAgLjQxLjM0Ljc1Ljc1Ljc1di0uNzV6TTEgLjc1VjBhLjc1Ljc1IDAgMDAtLjc1Ljc1SDF6bTUuNzUuNzVhLjc1Ljc1IDAgMDAwLTEuNXYxLjV6bTIuNzIgMy43MmEuNzUuNzUgMCAwMDEuMDYgMS4wNkw5LjQ3IDUuMjJ6TTE0LjI1Ljc1djRoMS41di00aC0xLjV6bTAgOHY2LjVoMS41di02LjVoLTEuNXpNMTUgMTQuNUgxVjE2aDE0di0xLjV6bS0xMy4yNS43NVYuNzVILjI1djE0LjVoMS41ek0xIDEuNWg1Ljc1VjBIMXYxLjV6bTEwIDBoNFYwaC00djEuNXptLS40NyA0Ljc4bDUtNUwxNC40Ny4yMmwtNSA1IDEuMDYgMS4wNnoiCiAgICBmaWxsPSIjYTVlMWQyIgogIC8+Cjwvc3ZnPg==);
}

You can also make the base64 conversion during runtime using btoa, e.g.:

const svgAsString = ReactDOMServer.renderToString(<YourSVG />)
const base64 = window.btoa(svgAsString)
AnchorElement.style = `background-image: url(data:image/svg+xml;base64,${base64})`
// ... or using Node:
Buffer.from(svgAsString, 'utf-8').toString('base64')

Blockquote

Dis leo aliquam neque aptent nascetur metus ad ut eu Choro vivendum tractatos ei quo. Cite Referance

Default Blockquote

Dis leo aliquam neque aptent nascetur metus ad ut eu Choro vivendum tractatos ei quo.

Blockquote with graphics on top

Dis leo aliquam neque aptent nascetur metus ad ut eu Choro vivendum tractatos ei quo. Luctus cursus odio hendrerit ullamcorper adipiscing est dis curabitur sit. Cite Referance

Blockquote with transparent background (no-background)

Dis leo aliquam neque aptent nascetur metus ad ut eu Choro vivendum tractatos ei quo.

Blockquote with transparent background and graphics on top

Lists

List modifiers

  • .dnb-ul--nested / .dnb-ol--nested will ensure a nested structure of several lists
  • .dnb-ol--outside (default) defines the position of the marker
  • .dnb-ol--inside defines the position of the marker

With React you can also send in the modifiers as booleans:

import { Ol } from 'dnb-ui-lib/elements'
render(
<Ol nested inside>
<li>Item</li>
</Ol>
)

Unordered Lists

Ordered Lists (nested)

  • Item
  • Item
    1. Item
      1. Item
      2. Item
    2. Item
      1. Item
      2. Item
  • Item

Nested ol list by using .dnb-ol--nested

Ordered list style position (outside vs inside)

The list marker will be inside of wrapped text / text with newlines.

  • Using dnb-ol--outside (default): Using Porta commodo tempus interdum habitant urna magna aliquet quam nisl
    1. Porta commodo tempus interdum habitant urna magna aliquet quam nisl
  • New ol, using dnb-ol--inside: Porta commodo tempus interdum habitant urna magna aliquet quam nisl
    1. Porta commodo tempus interdum habitant urna magna aliquet quam nisl

Nested ol with inside modifier .dnb-ol--inside

Definition Lists

Use Definition Lists when ever you have to tie together any items that have a direct relationship with each other (name/value sets).

You can use multiples of <dt> and <dd> within a definition list.

You can also use block level elements in the definition description, such as the <p> and <ul> elements. But you cannot use block level elements inside a definition term.

Any styling can be applied.

Term
Description
Term
Description 1
Description 2
Description 3
Sub Term
Sub Description

Remove list styles

  • ul Item
  1. ol Item
dl Title
dl Description

Tables

The following table has a default style. But in future, there will be several patterns and styles to choose from.

You may consider using table-layout: fixed;. You can use the modifier class in doing so: .dnb-table--fixed

Working Demo

Check out a working example on CodeSandbox, using react-table.

Classes

NB: Tables get their default table style by only having correct markup and the .dnb-table class assigned.

To enhance or manipulate the the table style, you can make use of a couple helper classes:

  • .dnb-table--fixed Table Layout
  • .dnb-table__th Table Header
  • .dnb-table__td Table Data
  • .dnb-table__tr Table Row
  • .dnb-table__tr--even Use this on a tr - if manual definition is needed
  • .dnb-table__tr--odd Use this on a tr - if manual definition is needed
  • .dnb-table--no-wrap Use this on a th
  • .dnb-table--sortable Use this on a th - sortable column
  • .dnb-table--active Use this on a th - current column is sorted
  • .dnb-table--reversed Use this on a th - defines the order
  • .dnb-table--right Use this on a th, td or tr - align the content to the right (or use align="right")
  • .dnb-table--center Use this on a th, td or tr - align the content to the left (or use align="center")
.dnb-table__th
.dnb-table__tr--even > .dnb-table__td
.dnb-table__tr--odd > .dnb-table__td

Example usage of class helpers

Default Table style

A Table Caption
Header

Column 1 width p

Column 2 with codeColumn 3 with spanColumn 4
Column which spans over two columnsColumn 3Column 4
Column 1Column 2Column 3Column 4

Table with sticky header

NB: Keep in mind, you have to avoid using overflow: hidden; on any child elements to get position: sticky; to work. This is a know issue happening on every modern browser. There are various tricks, including this deallocation / sync solution.

A Table Caption
Header
FooterSum

Column 1 width p

Column 2 with codeColumn 3 with spanColumn 4
Column which spans over two columnsColumn 3Column 4
Column 1Column 2Column 3Column 4

Table with long header text (wrapping)

Also, the table header is set to small font-size.

A Table Caption
Static long header senectus ornare convallis ut at erat imperdiet commodo

col span of 4


Missing HTML Elements

Several commonly used HTML Elements are not included in the dnb-ui-lib. This decision is made by the DNB UX Team and relies on a principle to make UX design as good as possible, consistent and more thoughtful towards a broader customer target.

  • For the select element, use the Dropdown component.

Code

Code Highlighting with Prism

Prism is a popular Syntax Highlighting tool. DNB has its own theme You can use:

  • dnb-ui-lib/style/themes/theme-ui/prism/dnb-prism-theme.js

Code and Pre Tag usage

Styling for both the <code> and the <pre> tags are build in the dnb-ui-lib. So simply use them in Your Syntax:

<p class="dnb-p">
My <code class="dnb-code">Formatted example</code> in a Paragraph
</p>
<pre class="dnb-pre">
One line
New lines
</pre>

Code and Typography

<code> snippets look best when rendered in a Monotype font. Developers will normally have installed some of these fonts on their devices. Here is an example of CSS font-family usage:

font-family: var(--font-family-monospace);