Backdrop

A soft shaded area behind one line of text or one see-through control, so it stays readable on a busy background, like the twinkle background. It fades out to the background you say it sits on.

Install

Requires @intility/bifrost-experimental, installed and set up. Then import the component:

import Backdrop from "@intility/bifrost-experimental/Backdrop";

Usage

Wrap each line of text and each see-through control, like a flat button, in its own backdrop. Don't wrap several lines in one, because it then becomes a box around all of them. Elements with a solid background, like cards, don't need it.

<Backdrop>
  <h2 className="bf-h2">Platform Manager</h2>
</Backdrop>

Background

Set background to the background the backdrop sits on, so it fades out to the same color. It takes the same values as the background prop of Box. The default is "base", the normal page background. The backdrop also sets the text color that goes with the background.

<Backdrop background="base-2">Text on a base-2 background</Backdrop>

In front page headers

Pass a backdrop to the title and subtitle of a FrontpageHeader:

<FrontpageHeader
  title={<Backdrop>Platform Manager</Backdrop>}
  subtitle={<Backdrop>An operational control plane ...</Backdrop>}
/>

Good to know

• The backdrop is only as wide as its content. To center a line, center the backdrop from its parent, for example with align-items: center.
• It renders a span, so it can go inside a heading or a paragraph.
• Don't put z-index, isolation, opacity, transform or filter on a single backed line, or the next line's backdrop can cover it. Around a group of lines it's fine, and it's needed when the lines are not in a FrontpageHeader, which already does this.
• Text on the default backdrop has a contrast of at least 10:1 in every theme, in light and dark mode.

Accessibility

The shaded area is hidden from screen readers. The backdrop doesn't change what is read out.