Bleed (Preview)

To add the Bleed component to your app:

1
2
import { Bleed } from '@forge/react';

Description

Bleed allows child elements to visually extend beyond the bounds of their parent container. This is useful for creating visual effects where a child needs to break out of its parent's padding or spacing.

Props

Examples

Inline

Use the inline prop to allow the child element to bleed along the horizontal axis, extending beyond the left and right bounds of its parent container.

1
2
import { Bleed, Box, Inline, xcss } from '@forge/react';

const borderStyles = xcss({
  borderColor: 'color.border.discovery',
  borderStyle: 'solid',
  borderWidth: 'border.width',
  borderRadius: 'radius.small',
  boxShadow: 'elevation.shadow.raised',
});

const ExampleBox = ({ backgroundColor = 'color.background.discovery' }) => (
  <Box
    backgroundColor={backgroundColor}
    padding="space.150"
    xcss={borderStyles}
  />
);

const BleedInlineExample = () => {
  return (
    <Inline space="space.100">
      <ExampleBox />
      <ExampleBox />
      <Bleed inline="space.200">
        <ExampleBox backgroundColor="color.background.discovery.pressed" />
      </Bleed>
      <ExampleBox />
      <ExampleBox />
    </Inline>
  );
};

Block

Use the block prop to allow the child element to bleed along the vertical axis, extending beyond the top and bottom bounds of its parent container.

1
2
import { Bleed, Box, Inline, xcss } from '@forge/react';

const borderStyles = xcss({
  borderColor: 'color.border.discovery',
  borderStyle: 'solid',
  borderWidth: 'border.width',
  borderRadius: 'radius.small',
  boxShadow: 'elevation.shadow.raised',
});

const ExampleBox = ({ backgroundColor = 'color.background.discovery' }) => (
  <Box
    backgroundColor={backgroundColor}
    padding="space.150"
    xcss={borderStyles}
  />
);

const BleedBlockExample = () => {
  return (
    <Stack space="space.100">
      <ExampleBox />
      <ExampleBox />
      <Bleed block="space.150">
        <ExampleBox backgroundColor="color.background.discovery.pressed" />
      </Bleed>
      <ExampleBox />
      <ExampleBox />
    </Stack>
  );
};

Accessibility considerations

When using the Bleed component, we recommend keeping the following accessibility considerations in mind:

• Bleed is a layout primitive that affects visual presentation only. Ensure that any content inside a Bleed remains accessible and readable regardless of how far it extends beyond its container.
• Avoid using Bleed in ways that cause content to overlap other interactive elements, as this can make it difficult for keyboard and screen reader users to navigate the page.