DXC Logo
Halstack Design System
v16.1.0

Overview

Guidelines

Foundations

Migration

Utilities

Components

Bleed

Bleed layout applies negative spacing scale to its child nodes.

Overview
Code

Props

NameTypeDescriptionDefault
bottomstringApplies the spacing scale to the bottom side.-
Required
children
React.ReactNodeCustom content inside the bleed.-
horizontalstringApplies the spacing scale to the left and right sides.-
leftstringApplies the spacing scale to the left side.-
rightstringApplies the spacing scale to the right side.-
spacestringApplies the spacing scale to all sides.-
topstringApplies the spacing scale to the top side.-
verticalstringApplies the spacing scale to the top and bottom sides.-

Examples

Basic usage

() => {
  return (
    <DxcInset space="var(--spacing-padding-xl)">
      <DxcFlex direction="column" gap="var(--spacing-padding-xl)">
        <Placeholder height="var(--height-xxl)" />
        <DxcBleed space="var(--spacing-padding-l)">
          <Placeholder height="var(--height-xxl)" />
        </DxcBleed>
        <Placeholder height="var(--height-xxl)" />
      </DxcFlex>
    </DxcInset>
  );
}

Custom sides

() => {
  return (
    <DxcInset space="var(--spacing-padding-xl)">
      <DxcFlex direction="column" gap="var(--spacing-padding-xl)">
        <Placeholder height="var(--height-xxl)" />
        <DxcBleed 
          bottom="var(--spacing-padding-l)"
          left="var(--spacing-padding-l)"
          right="var(--spacing-padding-m)"
          top="var(--spacing-padding-xs)"
        >
          <Placeholder height="var(--height-xxl)" />
        </DxcBleed>
        <Placeholder height="var(--height-xxl)" />
      </DxcFlex>
    </DxcInset>
  );
}
On this page