Skip to main content

Bifrost design system

The design system consists of basic design elements, components and patterns that can be used when developing Intility services. It serves as a common toolbox where we collaborate across departments, enabling us to create great services for our customers.

Get started

Figma

View our extensive Bifrost Figma library, with components, colors, typography and more.

CSS

Bring designs to life in web apps with the help of our CSS library.

React

Supercharge your development experience with our pre-made React components.

Components

Categories:

Text content in the active panel

Accordion

Vertical menu with collapsible panels

AutoCol

Create column layout based on available width

Figma

BackButton

Click to navigate to previous page

CSS

Badge

Small text label in different colors

Banner

Small box attached to top of an element

CSS

Figma

Bifrost

Configure locale for React components

CSS

Figma

BottomBar

Fixed position bottom content panel

Box

Customizable box to apply bifrost background, padding, shadow, and border.

Figma

Breadcrumbs

Display a path to the active page

Breakpoint

Conditionally display content based on screen width

Figma

Button

For click events

Wrap card text content in Card.Content.

Card

Panel with optional title, content and image

UncheckedCheckedIndeterminate

Checkbox

Square with a toggleable checkmak

Checkbox cardBlueberries udon noodles crispy iceberg lettuce picnic soy milk green tea scotch bonnet pepper tahini drizzle

CheckboxCard

Toggleable panel

Container

Conditionally display content based on container width

Figma

DatePicker

Input field for selecting a date

CSS

Drawer

Fixed position expandable right-hand sidebar

CSS

Dropdown

Display a positioned toggleable pop-up

CSS

This text is overflowing its container.

Ellipsis

Hide overflowing text with an ellipsis

Figma

FieldGroup

Group multiple input fields together

Drag & drop file or click to upload

.csv file, less than 10 MB

FileInputArea

Drag and drop area for files

CSS

Figma

FloatingArea

Fixed area automatically visible on scroll

CSS

Figma

FloatingMessage

Display a temporary floating feedback Message

CSS

Figma

FormatDate

Display a date based on locale

CSS

Figma

Grid

Create a responsive column layout

Figma

Icon

Display a Font Awesome SVG

Inline

Place, stretch and separate inline elements

Figma

Input

Editable single-line text input field

Label

Stand-alone input field label

Click me

navigation

Link

Styling for anchor hyperlinks

React

Bullet
Points

Numbered
List

visual

List

Bullet point or numbered items

React

Menu

Menu with vertical or horizontal layout

CSS

Success message

Well done, everything is as it should be.

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

CSS

ProgressBar

Display progress as percentage

Select thisOr this

Radio

Toggleable circle, for single-choice group

Radio cardThis is clearly the best option. Please pick this one. Pretty please with a cherry on top.

RadioCard

Radio button card

visual

Scrollbar

Bifrost-styled scrollbar

React

Whatever content you like

Section

Section card with a heading (optionally clickable)

Select

Input field with multiple options in a dropdown

Skeleton

Animated placeholders for loading content

Figma

SlideDown

Expand or collapse an element with a height transition

Figma

Spinner

Rotating icon indicating loading status

StepBar

Visualise steps in a wizard

CSS

Sticky

A floating box that stays put within a section while scrolling

SubmitButton

Submit a form

Switch

Toggleable switch button

Switch cardUsers often expect checkboxes to be a part of a form with a submit button, while switches are usually expected to be automatically 'saved'.

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

Additional information

TextArea

Editable multi-line text input field

Tooltip

Display a positioned pop-up on hover

CSS

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?

Email Slack GitHub Learn more