Components#
DNB Eufemia components are ready-to-use, styled, and custom-built HTML elements.
Overview#
All components and fragments grouped by practical usage categories.
Accordion#
Use Accordion to let people open and close sections of related content.
Anchor (Text Link)#
Use Anchor to take people to another page, section, or website.
AriaLive#
Use AriaLive to announce page changes to screen reader users.
Autocomplete#
Use Autocomplete to help people find and choose from matching suggestions as they type.
Avatar#
Use Avatar to make a person, company, or profile easier to recognize.
Badge#
Use Badge to highlight new, unread, or important information.
Breadcrumb#
Use Breadcrumb to show where someone is and let them move back up the path.
Button#
Use Button when people need to start, confirm, or submit an action.
Card#
Use Card to group related content in a clear, separated area.
Checkbox#
Use Checkbox when people can turn one or more options on or off.
CopyOnClick#
Use CopyOnClick when people should copy text by clicking it.
CountryFlag#
Use CountryFlag to show a country by its flag from an ISO country code.
DateFormat#
Use DateFormat to show dates in the correct DNB format.
DatePicker#
Use DatePicker when people need to choose one date or a date range.
Dialog#
Use Dialog when people need to make a choice or read an important message before continuing.
Drawer#
Use Drawer to show extra content in a panel that slides in from the side.
Dropdown#
Use Dropdown when people need to choose one option from a list.
Filter#
Use Filter to help people narrow down a list or data set.
FormLabel#
Use FormLabel to name an input, control, or form-related field.
FormStatus (Messageboxes)#
Use FormStatus to show validation errors, warnings, or messages near a form.
GlobalError (404)#
Use GlobalError to show a clear 404 or 500 error page.
GlobalStatus#
Use GlobalStatus to show important page-level messages or a summary of form errors.
Heading (auto level)#
Use Heading to create accessible page headings with the correct level.
HeightAnimation#
Use HeightAnimation to animate content as it opens or closes.
HelpButton#
Use HelpButton when a short explanation should be available next to a label or control.
Icon#
Use Icon to render and size an icon in line with Eufemia styling.
InfinityScroller#
Use InfinityScroller to load more content automatically as people scroll.
InfoCard#
Use InfoCard to show helpful information, tips, or guidance in a highlighted area.
Input#
Use Input when people need to enter a short line of text.
InputMasked#
Use InputMasked when people must enter text in a fixed format.
List#
Use List to show rows of related content, with optional actions or navigation.
ListFormat#
Use ListFormat to show lists of values in the correct DNB format.
Logo#
Use Logo to show the DNB logo with the correct SVG and styling.
Menu#
Use Menu when people need to choose from a small list of actions or links.
Modal#
Use Modal when people must focus on one task or message before returning to the page.
NumberFormat#
Use NumberFormat to show numbers in the correct DNB format.
Pagination#
Use Pagination to split long content into pages or load more content as people move through it.
PortalRoot#
Use PortalRoot to render floating content outside the normal page structure.
ProgressIndicator#
Use ProgressIndicator to show that something is loading or processing.
Radio#
Use Radio when people must choose one option from a set.
ScrollView#
Use ScrollView when content needs its own horizontal or vertical scrolling area.
Section#
Use Section to give an area of the page a visual background or surface.
Skeleton#
Use Skeleton to show where content will appear while it is loading.
SkipContent#
Use SkipContent to help keyboard users jump past large or repeated content.
Slider#
Use Slider when people need to choose a value from a range.
Stat#
Use Stat to highlight an important number, label, or trend.
StepIndicator#
Use StepIndicator to show progress through a process with several steps.
Switch#
Use Switch when people can turn one setting on or off.
Table#
Use Table to show structured data in rows and columns.
Tabs#
Use Tabs to let people switch between related views on the same page.
Tag#
Use Tag to show a small label, status, or selected value.
TermDefinition#
Use TermDefinition to explain a word or phrase without leaving the page.
Textarea#
Use Textarea when people need to write longer text over several lines.
Timeline#
Use Timeline to show events or steps in chronological order.
ToggleButton#
Use ToggleButton when people can turn one or more visible choices on or off.
Tooltip#
Use Tooltip to give a short hint or explanation for nearby content.
Upload#
Use Upload when people need to choose or drag files into a page.
VisuallyHidden
Use VisuallyHidden to keep helpful text available to screen readers but hidden visually.