Skip to main content

Bridging the gap between designers and developers

Bifrost — Intility's Design System

Go to components

For designers

Find visual guidelines, writing principles, patterns, and component specifications for designing Intility services.

For developers

View Bifrost component code in React and CSS, with examples, charts, data tables, and hooks.

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

Name	Team	Position	Country
Ilya Rozanov	Boston Bears	Centre	Russia
Shane Hollander	Montreal Voyageurs	Centre	Canada
Scott Hunter	New York Admirals	Centre	USA

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

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

FloatingArea

Fixed area automatically visible on scroll

CSS

Design

Figma

interactivevisual

FloatingMessage

Display a temporary floating feedback Message

CSS

Figma

FormatDate

Display a date based on locale

CSS

Design

Figma

FormatDuration

Human-readable duration between two dates

CSS

Design

Figma

FormatRelativeTime

Display time relative to now

CSS

Design

Figma

Grid

Create a responsive column layout

Design

Figma

const greet = "hello";

Highlighter

Syntax-highlighted code block with copy button

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

Click me

navigation

Link

Styling for anchor hyperlinks

React

Bullet
Points

Numbered
List

visual

List

Bullet point or numbered items

React

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

Name	Team	Position	Country
Ilya Rozanov	Boston Bears	Centre	Russia
Shane Hollander	Montreal Voyageurs	Centre	Canada
Scott Hunter	New York Admirals	Centre	USA

Table

Display data in rows and columns

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