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.

zoomBlueRight

A blue Cardano zoom-blur logo anchored to the bottom-right of the section. Use it to signal product or ecosystem depth without overpowering content. Works best on tall sections that have empty space on the right (e.g. two-column intros above a grid).

<BackgroundWrapper backgroundType="zoomBlueRight">

Result

This is how
the selected
background style
looks like.

This needs
more space
to breathe.

Way more.

zoomBlueCenter

A lighter, faded variant of the Cardano zoom-blur logo, centered behind the section content. Acts as a subtle watermark for hero-style sections that need a quiet visual accent rather than a foreground graphic.

<BackgroundWrapper backgroundType="zoomBlueCenter">

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.

adaLight

<BackgroundWrapper backgroundType="adaLight">

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.