Inset

Inset layout applies positive spacing scale to its child nodes.

Props

Name	Type	Description	Default
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.ReactNode`	Custom content inside the inset.	-

Examples

Basic usage

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

Custom sides

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

Inset

Props

Examples

Basic usage

Custom sides

On this page