DNB Eufemia components are ready to use, styled and custom build HTML elements.
The avatar component are identifiers that makes people and companies more scannable.
The badge component allows the user to focus on new or unread content or notifications
The Breadcrumb component is a bar for navigation showing current web path
The Button component should be used as the primary call-to-action in a form, or as a user interaction mechanism.
The Checkbox component is shown as a square box that is ticked (checked) when activated.
The DatePicker component should be used whenever there is to enter a single date or a date period.
The Dialog component is a Modal variation that appears at the center of the screen.
The Drawer component is a Modal variation that appears as a side panel at any chosen side of the page.
The Dropdown component is a custom-made data selection component.
The FormLabel component represents a caption for all sorts of HTML elements in a user interface.
The FormRow component is a helper to more easily achieve often used DNB form layout setups.
The FormSet component is a helper to more easily achieve often used DNB form layout setups.
The FormStatus is a simple component meant for displaying the status of a form.
Fragments are small, low-level and reusable parts used inside other components.
The GlobalError is a simple component to integrate where a 404 or 500 message has to be shown.
The GlobalStatus is a complex component meant for displaying global Application notifications or a summary of a form.
The Heading component is a helper to create automated semantic headings within a boundary of some rules.
HeightAnimation is a helper component to animate from 0 to height:auto powered by CSS.
A help button with custom semantics, helping screen readers determine the meaning of that button
The main Icon component is basically a wrapper for whatever icon you place within it.
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.
The InputMasked component uses the basic input component, but with some additional masking functionality.
The input component is an umbrella component for all inputs which share the same style as the classic text input field.
A ready to use DNB logo in SVG format
Modal dialogs appear on top of the main content changing the mode of the system into a special mode requiring user interaction.
A ready to use DNB number formatter
The Pagination component supports both classical pagination and infinity scrolling.
The ProgressIndicator component is a waiting loader / spinner to show while other content is in progression.
The Radio component is shown as a circle that is filled (checked) when activated.
The Section component is a visual helper.
The Skeleton component is a visual building block helper.
The Slider component provides a visual indication of adjustable value.
The Space component provides margins within the provided spacing patterns.
The step indicator (progress indicator) is a visual representation of a users progress through a set of steps or series of actions.
Enhanced HTML Table element
Tabs are a set of buttons which allow navigation between content that is related and on the same level of hierarch.
The Tag component
The Textarea component has to be used as a multi-line text input control with an unlimited number of characters possible.
The Timeline component shows events in chronological order and gives a great overview of the overall process
The ToggleButton component should be used to toggle on or off a limited number of choices.
VisuallyHidden has all the styles necessary to hide it from visual clients, but keep it for screen readers.
The Autocomplete component, also know as a ComboBox, completes / suggests values during typing.
The Accordion component, also known as a ComboBox, completes / suggests values during typing.
The DrawerList component is a fragment inside other components.
ScrollView is a tiny helper component to allow Eufemia controlling the UX.