Skip to main content

Bridging the gap between designers and developers

Bifrost — Intility's Design System

Go to components

For designers

Want to view all of our components in our library? Check out our components with all instances and variables.

For developers

View all code for our Bifrost components in either React or CSS. Check out everything you need as a developer.

Components

Expanded accordion content text

interactivenavigation

Accordion

Vertical menu with collapsible panels

AutoCol

Create column layout based on available width

Design

Figma

BackButton

Click to navigate to previous page

CSS

SuccessWarningAlertChill pill

Badge

Colored text label to highlight information

Banner

Small box attached to top of an element

CSS

Design

Figma

Bifrost

Configure locale for React components

CSS

Design

Figma

BottomBar

Fixed position bottom content panel

layoutvisualutility

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

Design

Figma

Navn	Tittel	Avdeling
Eric Morton	Developer	Developer Services
Herman Jensen	Developer	Developer Services
Linda Tran	Datteren til oppfinneren av Tran	Developer Services

interactiveutility

DataTable

Sort, filter, reorder, paginate your data

CSS

Design

Figma

DatePicker

Input field for selecting a date

CSS

layoutinteractive

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

Design

Figma

Select at least one (1) pizza topping

Feedback

Feedback for a group of form fields

CSS

Design

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

Design

Figma

interactivevisual

FloatingMessage

Display a temporary floating feedback Message

CSS

Design

Figma

FormatDate

Display a date based on locale

CSS

Design

Figma

FormatDuration

Human-readable duration between two dates

CSS

Design

Figma

Grid

Create a responsive column layout

Design

Figma

Icon

Display a Font Awesome SVG

Inline

Place, stretch and separate inline elements

Design

Figma

Input

Editable single-line text input field

Label

Stand-alone input field label

Design

Click me

navigation

Link

Styling for anchor hyperlinks

React

Design

Bullet
Points

Numbered
List

visual

List

Bullet point or numbered items

React

Design

interactivenavigation

Menu

Menu with vertical or horizontal layout

CSS

Success message

Well done, everything is as it should be.

Message

Colored text box to highlight information

layoutinteractive

Modal

Pop-up box with full-screen backdrop

navigationinteractivelayout

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

Design

visual

Scrollbar

Bifrost-styled scrollbar

React

Design

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

Design

Figma

SlideDown

Expand or collapse an element with a height transition

Design

Figma

Spinner

Rotating icon indicating loading status

Design

StepBar

Visualise steps in a wizard

CSS

Sticky

A floating box that stays put within a section while scrolling

SubmitButton

Submit a form

Design

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

Design

layoutnavigationinteractive

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

Collaboration

Collaboration

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