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"

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.

Theme

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

• "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"
  • any other elements with the .bfc-theme-bgor .bfc-theme-fade-bg classes
• Text color of elements with the .bfc-theme (or .bf-link) class

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:

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.

Box.Arrow

The <Box.Arrow /> sub-component can be nested inside any 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:

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:

Examples

Combine <Box> with components like <Inline>, <Grid>, <Button>, and <Icon> to compose various card layouts.

Also see .bf-elements for applying bifrost styling to HTML elements like <h5>, <small>, <p> etc. so you can skip the .bf-h5 and .bf-p classes.

Card with title

Download button

Clickable card

With icon

Icon and content

Circle icon

Split card

Multiple links

Horizontal image

See <Card> for examples with a vertical layout.