HTML Elements

The @dnb/eufemia 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.

Overview

Vanilla HTML

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

React JSX

For those using JSX with React, you can simply use the wrapper Components. They also inherit to the Skeleton provider.

import { H1, H2, P, Anchor, Link } from '@dnb/eufemia/elements'
render(
<article>
<H1>Semantic h1</H1>
<P>My Paragraph</P>
<Anchor href="/">Link</Anchor>
<Link href="/">Link</Link>
</article>
)

Styled Components

They work seamlessly with Styled Components (emotion) as well:

Styled Link

Anchor (Text Link)

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

import { Link, Anchor } from '@dnb/eufemia/elements'
render(<Anchor href="/uilib/elements/anchor">Accessible text</Anchor>)

NB: If you only use a vanilla HTML anchor element including target="_blank" then you have to ensure you add a title attribute that includes Opens a new Window or as a part of the text:

<a
title="Opens a new Window"
target="_blank"
href="https://"
class="dnb-anchor"
>
text (opens in new window)
</a>

Anchor states

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

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/eufemia/elements'
render(
<Ol nested inside>
<li>Item</li>
</Ol>
)

Unordered Lists

Ordered Lists (nested)

  1. Item
  2. Item
    1. Item
      1. Item
      2. Item
    2. Item
      1. Item
      2. Item
  3. 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.

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

Ordered list with other types

Ordered lists do support natively other types, like letters and roman numerals. You can define that by using the type HTML attribute.

  1. Item
  2. Item
    1. Item
      1. Item
      2. Item
  3. Item

ol with custom type

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

Blockquote

Default Blockquote

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

Blockquote with graphics on top

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

Blockquote with transparent background (no-background)

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 and graphics on top

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

Image

The image element associated with the class dnb-img does not have much opinionated styling. It exists more to have a future possibility to optimize and add features.

As of now, the React image "element" (Img) does provide a figure element with the role="img" and an img tag inside. This is mainly to support the Skeleton provider.

import { Img } from '@dnb/eufemia/elements'
render(<Img alt="..." src="..." width="100" height="100" />)

Basic image element

DNB logo

Image with invalid source

Alt text

Image with caption

Alt text
Caption text

Image element with skeleton

DNB logo

Horizontal Rule

The <hr /> tag in HTML stands for horizontal rule and is used to insert a horizontal rule or a thematic break in an HTML page to divide or separate document sections. The <hr /> tag is an empty tag and it does not require an end tag.

Customize hr color

/* Example of how to change the line color */
.dnb-hr:after {
color: var(--color-ocean-green);
}
Something
Something

Horizontal Rule in fullscreen

Use the modifier dnb-hr--fullscreen to get a full screen rule. You can also set just fullscreen={true}.

Something
Something

Horizontal Rule thickness / hairline

Use the modifier dnb-hr--light to get a 0.5px rule. You can also set just light={true} or medium={true}.

Light 0.5px

Default 1px

Medium 1.5px

Horizontal Rule thickness tests

Browsers do render borders differently. They also handle sizing differently. E.g. will 1.5px be rounded up to 2px in Chromium based browsers (on size related CSS properties).

In order to address different solutions, here is a test case, finding the right balance of creating 0.5px / 1.5px lines, browser compatibility and correct look. As per year 2020, Firefox does the best job on showing the line thickness correct.

Unstyled HTML Elements

In order to use the inherited Skeleton, there are a number of un-styled HTML elements, that do inherit and react to the Skeleton Provider.

import { Span, Div } from '@dnb/eufemia/elements'
  • Span
  • Div

Example usage of span


Code

Code and Syntax highlighting

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

  • @dnb/eufemia/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/eufemia. 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);

Missing HTML Elements

Not every commonly used HTML Elements are included yet in the @dnb/eufemia. 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.