Docs

Back to component list

Box

A <Box /> has a defined size of width and height.

It will be displayed within a <Boxes /> grid, can have background images and can be colored.

NameDefault
scale
number1
backgroundImageId
stringnull
backgroundImageFit
string'cover'

Set how the background image should be fit into the box.

Possible options:

  • fill
  • contain
  • cover
  • none
  • scale-down

Live demo and more details: https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

backgroundImagePosition
string'center center'

Set how the background image should be positioned within the box.

Takes two values, one for the horizontal and one for the vertical axis.

Example values:

  • center bottom
  • 2rem center
  • top right

Live demo and more details: https://developer.mozilla.org/en-US/docs/Web/CSS/object-position

linkId
string

Id of an internal page to link to

href
string

URI of an external page to link to

hash
string

Option hash to attach to the link href

title
string

Optional title. Should be set for a11y and seo reasons when link has non-text content.

colorSet
stringnull

Define a color set for this box

colors
object{}

Overwrite specific colors

showAnimation
string

Apply show animation

Box

A box resides within a <Boxes/> component.

You may use it to provide:

  • Empty spaces to push content to the side (or down in some rare cases)
  • Display content in a specific area
  • Use it as design element with a background color or image

You can skip the height if you want a square box, it will be automatically set given width.

Example

<Boxes>
  <Box backgroundColor="tomato" />
  <Box>

# Some example content

For this box

</Box>
<Box backgroundImageId="randomPictureId" />
</Boxes>


Back to component list