Bleed

Bleed layout applies negative spacing scale to its child nodes.

Introduction

The bleed component is a container that applies negative margins around its content, allowing elements to extend beyond their usual boundaries. This can be useful for aligning content seamlessly and creating dynamic, edge-to-edge layouts. It provides customizable spacing options, offering greater design flexibility while maintaining visual coherence.

Best practices

  • Enhance visual flow: use the bleed component to create smooth transitions between sections, removing unwanted spacing restrictions.
  • 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.