Bifrost React6.12.0
Welcome to the Bifrost React documentation pages. Here is all you need to get started with your Bifrost project.
Get started
React components
Accordion
Vertical menu with collapsible panels
AutoCol
Create column layout based on available width
BackButton
Click to navigate to previous page
Badge
Small text label in different colors
Banner
Small box attached to top of an element
Bifrost
Configure locale for React components
BottomBar
Fixed position bottom content panel
Box
Customizable box to apply bifrost background, padding, shadow, and border.
Breadcrumbs
Display a path to the active page
Breakpoint
Conditionally display content based on screen width
Button
For click events
Card
Panel with optional title, content and image
Checkbox
Square with a toggleable checkmak
CheckboxCard
Toggleable panel
Container
Conditionally display content based on container width
DatePicker
Input field for selecting a date
Drawer
Fixed position expandable right-hand sidebar
Dropdown
Display a positioned toggleable pop-up
Ellipsis
Hide overflowing text with an ellipsis
Feedback
Feedback for a group of form fields
FieldGroup
Group multiple input fields together
FileInputArea
Drag and drop area for files
FloatingArea
Fixed area automatically visible on scroll
FloatingMessage
Display a temporary floating feedback Message
FormatDate
Display a date based on locale
FormatDuration
Human-readable duration between two dates
Grid
Create a responsive column layout
Icon
Display a Font Awesome SVG
Inline
Place, stretch and separate inline elements
Input
Editable single-line text input field
Label
Stand-alone input field label
Menu
Menu with vertical or horizontal layout
Message
Text box for feedback or info
Modal
Pop-up box with full-screen backdrop
Nav
Main navigation menu top- and sidebars
Pagination
Buttons for paged tables or grids
ProgressBar
Display progress as percentage
Radio
Toggleable circle, for single-choice group
RadioCard
Radio button card
Section
Section card with a heading (optionally clickable)
Select
Input field with multiple options in a dropdown
Skeleton
Animated placeholders for loading content
SlideDown
Expand or collapse an element with a height transition
Spinner
Rotating icon indicating loading status
StepBar
Visualise steps in a wizard
Sticky
A floating box that stays put within a section while scrolling
SubmitButton
Submit a form
Switch
Toggleable switch button
SwitchCard
Toggleable switch card
| Navn | Tittel | Avdeling |
|---|---|---|
| Eric Morton | Developer | Developer Services |
| Herman Jensen | Developer | Developer Services |
| Linda Tran | Datteren til oppfinneren av Tran | Developer Services |
Table
Display data in rows and columns
Tabs
Bar of buttons to switch between content panels
Tag
Small clickable button
TextArea
Editable multi-line text input field
Tooltip
Display a positioned pop-up on hover
Join the collaboration?
By collaborating in building the design system we may create more united user experiences across our services. It also may save time for you and other people that are using the design system. The design system is a common home for reusable components, best practices, patterns and more. Would you like to know more?