Bleed

Bleed layout applies negative spacing scale to its child nodes.

Props

NameTypeDescriptionDefault
space'0rem' | '0.125rem' | '0.25rem' | '0.5rem' | '0.75rem' | '1rem' | '1.5rem' | '2rem' | '2.5rem' | '3rem' | '3.5rem' | '4rem' | '5rem' | '6rem' | '7rem'Applies the spacing scale to all sides.-
horizontal'0rem' | '0.125rem' | '0.25rem' | '0.5rem' | '0.75rem' | '1rem' | '1.5rem' | '2rem' | '2.5rem' | '3rem' | '3.5rem' | '4rem' | '5rem' | '6rem' | '7rem'Applies the spacing scale to the left and right sides.-
vertical'0rem' | '0.125rem' | '0.25rem' | '0.5rem' | '0.75rem' | '1rem' | '1.5rem' | '2rem' | '2.5rem' | '3rem' | '3.5rem' | '4rem' | '5rem' | '6rem' | '7rem'Applies the spacing scale to the top and bottom sides.-
top'0rem' | '0.125rem' | '0.25rem' | '0.5rem' | '0.75rem' | '1rem' | '1.5rem' | '2rem' | '2.5rem' | '3rem' | '3.5rem' | '4rem' | '5rem' | '6rem' | '7rem'Applies the spacing scale to the top side.-
right'0rem' | '0.125rem' | '0.25rem' | '0.5rem' | '0.75rem' | '1rem' | '1.5rem' | '2rem' | '2.5rem' | '3rem' | '3.5rem' | '4rem' | '5rem' | '6rem' | '7rem'Applies the spacing scale to the right side.-
bottom'0rem' | '0.125rem' | '0.25rem' | '0.5rem' | '0.75rem' | '1rem' | '1.5rem' | '2rem' | '2.5rem' | '3rem' | '3.5rem' | '4rem' | '5rem' | '6rem' | '7rem'Applies the spacing scale to the bottom side.-
left'0rem' | '0.125rem' | '0.25rem' | '0.5rem' | '0.75rem' | '1rem' | '1.5rem' | '2rem' | '2.5rem' | '3rem' | '3.5rem' | '4rem' | '5rem' | '6rem' | '7rem'Applies the spacing scale to the left side.-
Required
children
React.ReactNodeCustom 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>
  );
}

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>
  );
}