React Reference

Home

react

Box

import Box from "@intility/bifrost-react/Box";

Unstyled

Out of the box, the <Box> component simply renders an unstyled <div>.

<Box>Box content</Box>
<div>div content</div>
<Box>Box content</Box>
<div>div content</div>

Box content

div content

Styling props

<Box> provides convenient (and typesafe) props to apply bifrost CSS classes and variables;

padding applies className="bf-padding"
border applies className="bf-border"
radius applies className="bf-radius"
shadow applies className="bf-shadow"

<Box padding border radius>
  Box with padding, border, and radius
</Box>
<div className="bf-padding bf-border bf-radius">
  Equivalent div with classes
</div>
<Box padding border radius>
  Box with padding, border, and radius
</Box>
<div className="bf-padding bf-border bf-radius">
  Equivalent div with classes
</div>

Box with padding, border, and radius

Equivalent div with classes

Background

The background prop applies an optional background, using a .bfc-[color]-bg class.

Valid values are:

base

base-2

base-3

dimmed

inverted

inverted-2

disabled

theme

theme-fade

neutral

neutral-fade

brand

brand-fade

attn

attn-fade

chill

chill-fade

success

success-fade

warning

warning-fade

alert

alert-fade

These classes also apply a corresponding text color.

<Box padding radius background>
  default background (true) is same as "base-3"
</Box>
<Box padding radius background="theme-fade">theme-fade</Box>
<Box padding radius background="chill">chill</Box>
<Box padding radius background="warning">warning</Box>
<Box padding radius background>
  default background (true) is same as "base-3"
</Box>
<Box padding radius background="theme-fade">theme-fade</Box>
<Box padding radius background="chill">chill</Box>
<Box padding radius background="warning">warning</Box>

default (true) is "base-3"

theme-fade

chill

warning

Theme

The theme prop applies a theme class and accepts the following strings:

"teal" = .bf-theme-teal
"purple" = .bf-theme-purple
"pink" = .bf-theme-pink
"yellow" = .bf-theme-yellow
"inherit" (or undefined) = no theme class

This does not give the box a background or text color, but will change the values for the CSS --bfc-theme-* variables for the box and its children, which in turn means it will apply to:

Some colors of any themeable child components, like <Button> or <Badge>
<Box> if its background prop is set to "theme" or "theme-fade"
- or any other elements with the .bfc-theme-bgor .bfc-theme-fade-bg classes
Text color of elements with the .bfc-theme (or .bf-code) class

<Box theme="purple">
  Purple themed box with a <Button>Button</Button>, a <Badge>Badge</Badge>, and
  <span className="bfc-theme">.bfc-theme</span> text
</Box>
<Box theme="purple" background="theme" padding radius>
  Box themed box with theme background
</Box>
<Box theme="teal" background="theme-fade" padding radius>
  Teal themed box with theme-fade background
</Box>
<Box theme="purple">
  Purple themed box with a <Button>Button</Button>, a <Badge>Badge</Badge>, and
  <span className="bfc-theme">.bfc-theme</span> text
</Box>
<Box theme="purple" background="theme" padding radius>
  Box themed box with theme background
</Box>
<Box theme="teal" background="theme-fade" padding radius>
  Teal themed box with theme-fade background
</Box>

Purple themed box with a , a

Badge

, and .bfc-theme text

Purple themed box with theme background

Teal themed box with theme-fade background

Nested theme

It is possible to nest multiple elements with different themes, in which case the inner theme will take precedence.

Radius

The radius prop applies rounded corners, using a .bf-radius-[size] class.

You can also round specific corners with radiusTopLeft, radiusTopRight, radiusBottomRight, and radiusBottomLeft.

Valid values are:

false

true

full

<Box padding radius background>
  default (true) is equivalent to "m"
</Box>
<Box padding radius="s" background>
  radius="s"
</Box>
<Box padding radius="full" background>
  radius="full"
</Box>
<Box padding radiusBottomLeft="xl" background>
  radiusBottomLeft="xl"
</Box>
<Box padding radius background>
  default (true) is equivalent to "m"
</Box>
<Box padding radius="s" background>
  radius="s"
</Box>
<Box padding radius="full" background>
  radius="full"
</Box>
<Box padding radiusBottomLeft="xl" background>
  radiusBottomLeft="xl"
</Box>

default (true) is equivalent to "m"

radius="s"

radius="full"

radiusBottomLeft="xl"

Clickable box

You can wrap <Box> in a link or button to make it clickable. The .bf-neutral-link class can apply neutral styling for both <a> and <button> elements. Use .bf-neutral-link-text to underline on hover.

<a href="/path/to/page" className="bf-neutral-link">
  <Box radius background padding>
    <span className="bf-neutral-link-text">Clickable</span> box
  </Box>
</a>
<a href="/path/to/page" className="bf-neutral-link">
  <Box radius background padding>
    <span className="bf-neutral-link-text">Clickable</span> box
  </Box>
</a>

Clickable box

Box.Arrow

The <Box.Arrow /> sub-component can be nested inside a link or button to get an arrow with a slight animation effect on hover. You'll need to position the arrow yourself, which <Inline> can help you with:

<a href="/path/to/page" className="bf-neutral-link">
  <Box radius background padding>
    <Inline align="center">
      <Inline.Stretch className="bf-neutral-link-text">
        Link to another page
      </Inline.Stretch>
      <Box.Arrow />
    </Inline>
  </Box>
</a>

<button className="bf-neutral-link">
  <Box radius background padding>
    <Inline align="center">
      <Inline.Stretch>
        A button action
      </Inline.Stretch>
      <Box.Arrow />
    </Inline>
  </Box>
</button>
<a href="/path/to/page" className="bf-neutral-link">
  <Box radius background padding>
    <Inline align="center">
      <Inline.Stretch className="bf-neutral-link-text">
        Link to another page
      </Inline.Stretch>
      <Box.Arrow />
    </Inline>
  </Box>
</a>

<button className="bf-neutral-link">
  <Box radius background padding>
    <Inline align="center">
      <Inline.Stretch>
        A button action
      </Inline.Stretch>
      <Box.Arrow />
    </Inline>
  </Box>
</button>

Link to another page

External link

<Box.Arrow external /> renders an arrow pointing up and to the right, suitable for links to external pages. Often used alongside target="_blank" on the link:

<a target="_blank" href="https://intility.com" className="bf-neutral-link">
  <Box radius background padding>
    <Inline align="center">
      <Inline.Stretch>
        Let's go to <span className="bf-neutral-link-text">intility.com</span>
      </Inline.Stretch>
      <Box.Arrow external />
    </Inline>
  </Box>
</a>
<a target="_blank" href="https://intility.com" className="bf-neutral-link">
  <Box radius background padding>
    <Inline align="center">
      <Inline.Stretch>
        Let's go to <span className="bf-neutral-link-text">intility.com</span>
      </Inline.Stretch>
      <Box.Arrow external />
    </Inline>
  </Box>
</a>

Let's go to intility.com

Examples

Combined with components like <Inline>, <Grid>, <Button>, and <Icon> you can compose various cards:

Also see .bf-elements for applying bifrost styling to HTML elements like <h5>, <small>, <p> etc.

<Box padding={16} radius shadow background>
  <Grid>
    <h5>Ingrid Berntsen</h5>
    <p>
      Sosialantropolog med utdanning fra Universitetet i Oslo (UiO).
    </p>
    <Button variant="filled">
      <Icon icon={faArrowDownToLine} marginRight /> Last ned kontakt
    </Button>
  </Grid>
</Box>

<a href="#path" className="bf-neutral-link">
  <Box padding={16} radius shadow background>
    <Grid>
      <Inline align="center">
        <Inline.Stretch>
          <h5>
            <Icon icon={faInfoCircle} marginRight />
            <span className="bf-neutral-link-text">More information</span>
          </h5>
        </Inline.Stretch>
        <Box.Arrow />
      </Inline>
      <p>Read about this and a lot more</p>
    </Grid>
  </Box>
</a>

<a href="#path" className="bf-neutral-link">
  <Box padding={16} radius shadow background>
    <Inline align="center">
      <Inline.Stretch>
        <h5 className="bf-neutral-link-text">Carpenter Brut</h5>
      </Inline.Stretch>
      <Box.Arrow />
    </Inline>
  </Box>
</a>

<a href="#path" className="bf-neutral-link">
  <Box padding={16} radius shadow background>
    <Inline align="center">
      <Inline.Stretch>
        <h5>
          <Icon icon={faChartLine} marginRight />
          <span className="bf-neutral-link-text">Statistics</span>
        </h5>
      </Inline.Stretch>
      <Box.Arrow />
    </Inline>
  </Box>
</a>

<Box padding={16} radius shadow background>
  <Grid gap={8}>
    <h5>3/128</h5>
    <p>Trunks not synced</p>
  </Grid>
</Box>
<Box padding={16} radius shadow background>
  <Grid>
    <h5>Ingrid Berntsen</h5>
    <p>
      Sosialantropolog med utdanning fra Universitetet i Oslo (UiO).
    </p>
    <Button variant="filled">
      <Icon icon={faArrowDownToLine} marginRight /> Last ned kontakt
    </Button>
  </Grid>
</Box>

<a href="#path" className="bf-neutral-link">
  <Box padding={16} radius shadow background>
    <Grid>
      <Inline align="center">
        <Inline.Stretch>
          <h5>
            <Icon icon={faInfoCircle} marginRight />
            <span className="bf-neutral-link-text">More information</span>
          </h5>
        </Inline.Stretch>
        <Box.Arrow />
      </Inline>
      <p>Read about this and a lot more</p>
    </Grid>
  </Box>
</a>

<a href="#path" className="bf-neutral-link">
  <Box padding={16} radius shadow background>
    <Inline align="center">
      <Inline.Stretch>
        <h5 className="bf-neutral-link-text">Carpenter Brut</h5>
      </Inline.Stretch>
      <Box.Arrow />
    </Inline>
  </Box>
</a>

<a href="#path" className="bf-neutral-link">
  <Box padding={16} radius shadow background>
    <Inline align="center">
      <Inline.Stretch>
        <h5>
          <Icon icon={faChartLine} marginRight />
          <span className="bf-neutral-link-text">Statistics</span>
        </h5>
      </Inline.Stretch>
      <Box.Arrow />
    </Inline>
  </Box>
</a>

<Box padding={16} radius shadow background>
  <Grid gap={8}>
    <h5>3/128</h5>
    <p>Trunks not synced</p>
  </Grid>
</Box>

Ingrid Berntsen

Sosialantropolog med utdanning fra Universitetet i Oslo (UiO).

More information

Read about this and a lot more

Carpenter Brut

Statistics

3/128

Trunks not synced

Circle icon

<Box background radius shadow padding>
  <Inline>
    <Box
      radius="full"
      background="base"
      style={{
        width: 40,
        height: 40,
        display: "grid",
        placeItems: "center",
      }}
    >
      <Icon icon={faCommentLines} className="bfc-base-2 bf-large" />
    </Box>
    <Inline.Stretch>
      <small className="bfc-base-2">Message to signees</small>
      <div>Don't forget to celebrate</div>
    </Inline.Stretch>
  </Inline>
</Box>
<Box background radius shadow padding>
  <Inline>
    <Box
      radius="full"
      background="base"
      style={{
        width: 40,
        height: 40,
        display: "grid",
        placeItems: "center",
      }}
    >
      <Icon icon={faCommentLines} className="bfc-base-2 bf-large" />
    </Box>
    <Inline.Stretch>
      <small className="bfc-base-2">Message to signees</small>
      <div>Don't forget to celebrate</div>
    </Inline.Stretch>
  </Inline>
</Box>

Message to signees

Don't forget to celebrate

Split card

<Box background radius shadow>
  <Box padding>
    <Inline>
      <Inline.Stretch>
        <h5>27</h5>
        cats
      </Inline.Stretch>
      <Box
        radius="full"
        background="base"
        style={{
          width: 48,
          height: 48,
          display: "grid",
          placeItems: "center",
        }}
      >
        <Icon icon={faCat} className="bfc-base-2 bf-large" />
      </Box>
    </Inline>
  </Box>
  <Box padding radiusBottomRight radiusBottomLeft background="base-2">
    <div style={{ display: "grid", gridTemplateColumns: "auto 1fr", gap: 8 }}>
      <strong style={{ justifySelf: "end" }}>4</strong>
      <div>Burmese</div>
      <strong style={{ justifySelf: "end" }}>3</strong>
      <div>Voids</div>
      <strong style={{ justifySelf: "end" }}>20</strong>
      <div>Orange ones</div>
    </div>
  </Box>
</Box>
<Box background radius shadow>
  <Box padding>
    <Inline>
      <Inline.Stretch>
        <h5>27</h5>
        cats
      </Inline.Stretch>
      <Box
        radius="full"
        background="base"
        style={{
          width: 48,
          height: 48,
          display: "grid",
          placeItems: "center",
        }}
      >
        <Icon icon={faCat} className="bfc-base-2 bf-large" />
      </Box>
    </Inline>
  </Box>
  <Box padding radiusBottomRight radiusBottomLeft background="base-2">
    <div style={{ display: "grid", gridTemplateColumns: "auto 1fr", gap: 8 }}>
      <strong style={{ justifySelf: "end" }}>4</strong>
      <div>Burmese</div>
      <strong style={{ justifySelf: "end" }}>3</strong>
      <div>Voids</div>
      <strong style={{ justifySelf: "end" }}>20</strong>
      <div>Orange ones</div>
    </div>
  </Box>
</Box>

27

cats

Burmese

Voids

Orange ones

Multiple links

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit

<Box background radius shadow>
  <Box padding>
    <div style={{ display: "grid", justifyItems: "start", gap: 8 }}>
      <img src="/home/bifrostLogo2025.svg" height="40" alt="Bifrost" />
      <h5>Title</h5>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
  </Box>
  <Box padding radiusBottomRight radiusBottomLeft background="base-2">
    <Grid>
      <a href="#path" className="bf-neutral-link">
        <Inline align="center">
          <Inline.Stretch className="bf-neutral-link-text">
            Lorem ipsum dolor sit
          </Inline.Stretch>
          <Box.Arrow />
        </Inline>
      </a>
      <a href="#path" className="bf-neutral-link">
        <Inline align="center">
          <Inline.Stretch className="bf-neutral-link-text">
            Lorem ipsum dolor sit
          </Inline.Stretch>
          <Box.Arrow />
        </Inline>
      </a>
      <a href="#path" className="bf-neutral-link">
        <Inline align="center">
          <Inline.Stretch className="bf-neutral-link-text">
            Lorem ipsum dolor sit
          </Inline.Stretch>
          <Box.Arrow />
        </Inline>
      </a>
    </Grid>
  </Box>
</Box>
<Box background radius shadow>
  <Box padding>
    <div style={{ display: "grid", justifyItems: "start", gap: 8 }}>
      <img src="/home/bifrostLogo2025.svg" height="40" alt="Bifrost" />
      <h5>Title</h5>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
  </Box>
  <Box padding radiusBottomRight radiusBottomLeft background="base-2">
    <Grid>
      <a href="#path" className="bf-neutral-link">
        <Inline align="center">
          <Inline.Stretch className="bf-neutral-link-text">
            Lorem ipsum dolor sit
          </Inline.Stretch>
          <Box.Arrow />
        </Inline>
      </a>
      <a href="#path" className="bf-neutral-link">
        <Inline align="center">
          <Inline.Stretch className="bf-neutral-link-text">
            Lorem ipsum dolor sit
          </Inline.Stretch>
          <Box.Arrow />
        </Inline>
      </a>
      <a href="#path" className="bf-neutral-link">
        <Inline align="center">
          <Inline.Stretch className="bf-neutral-link-text">
            Lorem ipsum dolor sit
          </Inline.Stretch>
          <Box.Arrow />
        </Inline>
      </a>
    </Grid>
  </Box>
</Box>

Sandbox

import Box from "@intility/bifrost-react/Box";
import Grid from "@intility/bifrost-react/Grid";
import Button from "@intility/bifrost-react/Button";
import Icon from "@intility/bifrost-react/Icon";
import Inline from "@intility/bifrost-react/Inline";
import { faDownload } from "@fortawesome/free-solid-svg-icons";
import { faComment } from "@fortawesome/free-regular-svg-icons";

export default function BoxDemo() {
  return (
    <Grid className="bf-elements">
      <Box padding border radius>
        Box with padding, border, and radius
      </Box>
      <Box padding={16} radius shadow background>
        <Grid>
          <h5>Ingrid Berntsen</h5>
          <p>Sosialantropolog med utdanning fra Universitetet i Oslo (UiO).</p>
          <Button variant="filled">
            <Icon icon={faDownload} marginRight /> Last ned kontakt
          </Button>
        </Grid>
      </Box>
      <Box background radius shadow padding>
        <Inline>
          <Box
            radius="full"
            background="base"
            style={{
              width: 40,
              height: 40,
              display: "grid",
              placeItems: "center",
            }}
          >
            <Icon icon={faComment} className="bfc-base-2 bf-large" />
          </Box>
          <Inline.Stretch>
            <small className="bfc-base-2">Message to signees</small>
            <div>No message</div>
          </Inline.Stretch>
        </Inline>
      </Box>
    </Grid>
  );
}

Open Sandbox