Skip to main content

Background Wrapper

<BackgroundWrapper> applies a selectable background style to its child components.

info

Most of the time you do not want to put a <BackgroundWrapper> inside a <BoundaryBox> because it would add a margin around it. However, it is common to place a <BoundaryBox> inside a <BackgroundWrapper>.

Background Styles​

You can select between different background types by passing the backgroundType to the component.

Solid Grey​

<BackgroundWrapper backgroundType="solidGrey">

Result​

This is how
the selected
background style
looks like.

Solid Blue​

<BackgroundWrapper backgroundType="solidBlue">

Result​

This is how
the selected
background style
looks like.

Zoom​

<BackgroundWrapper backgroundType="zoom">

Result​

This is how
the selected
background style
looks like.


This needs
more space
to breathe.


Way more.

gradientLight​

<BackgroundWrapper backgroundType="gradientLight">

Result​

This is how
the selected
background style
looks like.

gradientDark​

<BackgroundWrapper backgroundType="gradientDark">

Result​

This is how
the selected
background style
looks like.

ada​

<BackgroundWrapper backgroundType="ada">

Result​

This is how
the selected
background style
looks like.


This needs
more space
to breathe.


Way more.

none (default)​

This is how
the selected
background style
looks like.

info

For the sake of simplicity, no other elements were used here as children of <BackgroundWrapper>. Get to know the <BoundaryBox> with which you could have made it look even better.