Bleed

Bleed layout applies negative spacing scale to its child nodes.

Props

Name	Type	Description	Default
space	`'0rem' \| '0.125rem' \| '0.25rem' \| '0.5rem' \| '1rem' \| '1.5rem' \| '2rem' \| '3rem' \| '4rem' \| '5rem'`	Applies the spacing scale to all sides.	`'0rem'`
horizontal	`'0rem' \| '0.125rem' \| '0.25rem' \| '0.5rem' \| '1rem' \| '1.5rem' \| '2rem' \| '3rem' \| '4rem' \| '5rem'`	Applies the spacing scale to the left and right sides.	`'0rem'`
vertical	`'0rem' \| '0.125rem' \| '0.25rem' \| '0.5rem' \| '1rem' \| '1.5rem' \| '2rem' \| '3rem' \| '4rem' \| '5rem'`	Applies the spacing scale to the top and bottom sides.	`'0rem'`
top	`'0rem' \| '0.125rem' \| '0.25rem' \| '0.5rem' \| '1rem' \| '1.5rem' \| '2rem' \| '3rem' \| '4rem' \| '5rem'`	Applies the spacing scale to the top side.	`'0rem'`
right	`'0rem' \| '0.125rem' \| '0.25rem' \| '0.5rem' \| '1rem' \| '1.5rem' \| '2rem' \| '3rem' \| '4rem' \| '5rem'`	Applies the spacing scale to the right side.	`'0rem'`
bottom	`'0rem' \| '0.125rem' \| '0.25rem' \| '0.5rem' \| '1rem' \| '1.5rem' \| '2rem' \| '3rem' \| '4rem' \| '5rem'`	Applies the spacing scale to the bottom side.	`'0rem'`
left	`'0rem' \| '0.125rem' \| '0.25rem' \| '0.5rem' \| '1rem' \| '1.5rem' \| '2rem' \| '3rem' \| '4rem' \| '5rem'`	Applies the spacing scale to the left side.	`'0rem'`
Required children	`React.ReactNode`	Custom content inside the bleed.	-

Examples

Basic usage

() => {
  return (
    <DxcInset space="2rem">
      <DxcFlex direction="column" gap="2rem">
        <Placeholder height="50px" />
        <DxcBleed space="1.5rem">
          <Placeholder height="50px" />
        </DxcBleed>
        <Placeholder height="50px" />
      </DxcFlex>
    </DxcInset>
  );
}

() => {
  return (
    <DxcInset space="2rem">
      <DxcFlex direction="column" gap="2rem">
        <Placeholder height="50px" />
        <DxcBleed space="1.5rem">
          <Placeholder height="50px" />
        </DxcBleed>
        <Placeholder height="50px" />
      </DxcFlex>
    </DxcInset>
  );
}

Custom sides

() => {
  return (
    <DxcInset space="2rem">
      <DxcFlex direction="column" gap="2rem">
        <Placeholder height="50px" />
        <DxcBleed top="0.5rem" right="1rem" bottom="1.5rem" left="1.5rem">
          <Placeholder height="50px" />
        </DxcBleed>
        <Placeholder height="50px" />
      </DxcFlex>
    </DxcInset>
  );
}

() => {
  return (
    <DxcInset space="2rem">
      <DxcFlex direction="column" gap="2rem">
        <Placeholder height="50px" />
        <DxcBleed top="0.5rem" right="1rem" bottom="1.5rem" left="1.5rem">
          <Placeholder height="50px" />
        </DxcBleed>
        <Placeholder height="50px" />
      </DxcFlex>
    </DxcInset>
  );
}

Props
Examples
- Basic usage
- Custom sides

Edit this page on GitHub

Report an issue on GitHub

Badge

NextBox

Bleed

Props

Examples

Basic usage

Custom sides

Contents