Box

Unstyled

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

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

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>

Background

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

Valid values are:

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>

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>
  Purple-themed box with theme background
</Box>
<Box theme="teal" background="theme-fade" padding radius>
  Teal-themed box with theme-fade background
</Box>

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:

<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>

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>

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>

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>

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>

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>

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>

Multiple links

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit

Lorem ipsum dolor sit

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>

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>
  );
}