DNB Eufemia components are ready to use, styled and custom build HTML elements.
The Accordion component is a combination of an accessible button (header area) and a content container.
The Anchor, also knows as "Link" is used to navigate from one page to the next HTML page.
The Autocomplete component, also know as a ComboBox, completes / suggests values during typing.
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.
Card is a block section element showing the white box with rounded gray borders, adding spacing automatically.
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 FormStatus is a simple component meant for displaying the status of a form.
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 InfinityScroller component is a mode of the Pagination component which loads content continuously as the user scrolls down the page.
The InfoCard is used to give the user more information than we can give in a message box. It can also be used as to give useful tips.
The Input component is an umbrella component for all inputs which share the same style as the classic text input field.
The InputMasked component uses the basic input component, but with some additional masking functionality.
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.
SkipContent gives users – using their keyboard for navigation – the option to skip over content which contains a large amount of interactive elements.
The Slider component provides a visual indication of adjustable value.
The StepIndicator (progress indicator) is a visual representation of a users progress through a set of steps or series of actions.
The Switch component (toggle) is a digital on/off switch.
Enhanced HTML Table element.
Tabs are a set of buttons which allow navigation between content that is related and on the same level of hierarchy.
The Tag component is a compact element for displaying discrete information.
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.
The Tooltip component is primarily meant to enhance the UX for various and additional information.
The Upload widget should be used in scenarios where the user has to upload files. Files can be uploaded by clicking button. You also have the opportunity to add descriptive texts below the title where you could put max file size, allowed file formats etc.
VisuallyHidden has all the styles necessary to hide it from visual clients, but keep it for screen readers.