#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.

#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.