Box
Customizable box to apply bifrost background, padding, shadow, and border.
Class names
The react <Box> component provides a way to access CSS classes with some
default values for bifrost styling:
| Class name | Applied style |
|---|---|
.bf-padding | padding: var(--bf-box-padding); |
.bf-padding-x | padding-inline: var(--bf-box-padding); |
.bf-padding-y | padding-block: var(--bf-box-padding); |
.bf-border | border: var(--bf-border); |
.bf-border-top | border-top: var(--bf-border); |
.bf-border-right | border-right: var(--bf-border); |
.bf-border-bottom | border-bottom: var(--bf-border); |
.bf-border-left | border-left: var(--bf-border); |
.bf-radius | border-radius: var(--bf-radius-m); |
.bf-shadow | box-shadow: var(--bf-shadow); |
In addition to .bfc-[color]-bg
background-color classes.
They are based on bifrost variables like:
| CSS variable | Value |
|---|---|
--bf-box-padding | 16px up to 1280px viewport width, 24px for wider |
--bf-border | 1px solid var(--bfc-base-c-dimmed) |
--bf-radius | 12px |
--bf-shadow | 0 0 var(--bf-shadow-blur) var(--bfc-shadow) |
Combining these you can compose different boxes:
Border
Padded box with a border and rounded corners.
Background color
Valid background color classnames are:
Clickable box
Use .bf-neutral-link to remove default link or button styling, and wrap any
text you would like underlined on hover in .bf-neutral-link-text.
Button
To make a "box" clickable, use the<button> element to make it accessible.
The .bf-block class applies display: block; width: 100%; when applied to a
<button>.
Link
Anchor (<a>) elements are inline by default, to use it as a "box", you can
either apply display: block; or use the .bf-block class which does just
that.
Use .bf-box-arrow (or .bf-box-arrow-external) on an arrow-right icon to
animate on hover.
You can place it on the right hand side using .bf-inline and
.bf-inline-stretch.
Examples
Card with button
Also see typography docs, .bfl-grid, and
.bf-button
Ingrid Berntsen
Sosialantropolog med utdanning fra Universitetet i Oslo (UiO).