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.

Introduction

The inset component is a container that adds spacing around its content, enhancing visual separation between elements in a layout. It offers customizable spacing options, allowing for greater design flexibility. Typically, it is used alongside other components to create a cohesive and well-structured layout.

Best practices

  • Enhance visual hierarchy: use the inset component to create clear separation between elements in a layout.
  • Maintain balance and aesthetics: choose appropriate spacing values to ensure a well-proportioned and visually appealing design.
  • Avoid unnecessary clutter: excessive use of the Inset component may lead to a fragmented or overcrowded layout.
  • Ensure consistency with design tokens: whenever possible, use the design tokens provided by the Halstack Design System, to maintain visual and functional consistency across applications, even though the component allows custom values.
  • Combine with other layout techniques: use this component alongside flex and grid components to create consistent and semantic layouts.