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 witch 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>My 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:

With icon

Manipulation

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

Lists

Unordered Lists

  • Item 1
  • Item 2
  • Item 3
    • Item 1
      Break
    • Item 2
  • Item 4

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

Definition Lists

Title
Description
Title
Description
Sub Title
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;.

Working Demo

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

Styled Demo

A Table Caption
Header

Column 1 width p

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

Classes

There are a couple helper classes to style tables:

  • .dnb-table__th Table Header
  • .dnb-table__td Table Data
  • .dnb-table__tr Table Row
  • .dnb-table__tr--even Use this on a tr
  • .dnb-table__tr--odd Use this on a tr
  • .dnb-table--no-wrap Use this on a th
  • .dnb-table--active Use this on a th
  • .dnb-table--sortable Use this on a th
  • .dnb-table--reversed Use this on a th
  • .dnb-table--tabular Use this on the table root
.dnb-table__th
.dnb-table__tr--even > .dnb-table__td
.dnb-table__tr--odd > .dnb-table__td

Example usage of class helpers

Tabular Numbers

Set Tabular Lining on tables by using this CSS class: .dnb-table--tabular

Tabular Lining
0123456789

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