DXC Logo
Halstack Design System
v16.1.0

Overview

Guidelines

Foundations

Migration

Utilities

Components

Inset

Inset layout applies positive 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 inset.-
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)" />
        <DxcInset space="var(--spacing-padding-m)">
          <Placeholder height="var(--height-xxl)" />
        </DxcInset>
        <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)" />
        <DxcInset
          top="var(--spacing-padding-xxs)"
          right="var(--spacing-padding-xs)"
          bottom="var(--spacing-padding-m)"
          left="var(--spacing-padding-l)"
        >
          <Placeholder height="var(--height-xxl)" />
        </DxcInset>
        <Placeholder height="var(--height-xxl)" />
      </DxcFlex>
    </DxcInset>
  );
}
On this page