Inset

Ready

Inset layout applies positive spacing scale to its child nodes.

Props

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

Examples

Basic usage

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

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

Custom sides

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

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

Edit this page on GitHub

Heading

NextLink

Inset

Props

Examples

Basic usage

Custom sides

Contents