Components

DNB Eufemia components are ready to use, styled and custom build HTML elements.

Avatar

The avatar component are identifiers that makes people and companies more scannable.

Badge

The badge component allows the user to focus on new or unread content or notifications

Breadcrumb

The Breadcrumb component is a bar for navigation showing current web path

Button

The Button component should be used as the primary call-to-action in a form, or as a user interaction mechanism.

Checkbox

The Checkbox component is shown as a square box that is ticked (checked) when activated.

DatePicker

The DatePicker component should be used whenever there is to enter a single date or a date period.

Dialog

The Dialog component is a Modal variation that appears at the center of the screen.

Drawer

The Drawer component is a Modal variation that appears as a side panel at any chosen side of the page.

Dropdown

The Dropdown component is a custom-made data selection component.

FormLabel

The FormLabel component represents a caption for all sorts of HTML elements in a user interface.

FormRow

The FormRow component is a helper to more easily achieve often used DNB form layout setups.

FormSet

The FormSet component is a helper to more easily achieve often used DNB form layout setups.

FormStatus (StatusMessage)

The FormStatus is a simple component meant for displaying the status of a form.

Fragments

Fragments are small, low-level and reusable parts used inside other components.

GlobalError (404)

The GlobalError is a simple component to integrate where a 404 or 500 message has to be shown.

GlobalStatus

The GlobalStatus is a complex component meant for displaying global Application notifications or a summary of a form.

Heading

The Heading component is a helper to create automated semantic headings within a boundary of some rules.

HeightAnimation

HeightAnimation is a helper component to animate from 0 to height:auto powered by CSS.

HelpButton

A help button with custom semantics, helping screen readers determine the meaning of that button

Icon

The main Icon component is basically a wrapper for whatever icon you place within it.

InfoCard

The infocard is used to give the user more information than we can give in a messagebox. It can also be used as to give useful tips.

InputMasked

The InputMasked component uses the basic input component, but with some additional masking functionality.

Input

The input component is an umbrella component for all inputs which share the same style as the classic text input field.

Logo

A ready to use DNB logo in SVG format

Modal

Modal dialogs appear on top of the main content changing the mode of the system into a special mode requiring user interaction.

NumberFormat

A ready to use DNB number formatter

Pagination

The Pagination component supports both classical pagination and infinity scrolling.

ProgressIndicator

The ProgressIndicator component is a waiting loader / spinner to show while other content is in progression.

Radio

The Radio component is shown as a circle that is filled (checked) when activated.

Section

The Section component is a visual helper.

Skeleton

The Skeleton component is a visual building block helper.

Slider

The Slider component provides a visual indication of adjustable value.

Space

The Space component provides margins within the provided spacing patterns.

StepIndicator

The step indicator (progress indicator) is a visual representation of a users progress through a set of steps or series of actions.

Switch

Table

Enhanced HTML Table element

Tabs

Tabs are a set of buttons which allow navigation between content that is related and on the same level of hierarch.

Tag

The Tag component

Textarea

The Textarea component has to be used as a multi-line text input control with an unlimited number of characters possible.

Timeline

The Timeline component shows events in chronological order and gives a great overview of the overall process

ToggleButton

The ToggleButton component should be used to toggle on or off a limited number of choices.

Tooltip

VisuallyHidden

VisuallyHidden has all the styles necessary to hide it from visual clients, but keep it for screen readers.

Autocomplete

The Autocomplete component, also know as a ComboBox, completes / suggests values during typing.

Accordion

The Accordion component, also known as a ComboBox, completes / suggests values during typing.

DrawerList

The DrawerList component is a fragment inside other components.

ScrollView

ScrollView is a tiny helper component to allow Eufemia controlling the UX.

InfinityScroller