Skip to content

[Layout foundations] Update Bleed component docs and guidance #6909

@laurkim

Description

@laurkim

Update Bleed docs on polaris.shopify.com

  • Description
  • Examples: descriptions and visuals
  • Add bleed values section
Update
Description Applies negative margin to allow content to bleed out into the surrounding layout.
Vertical example Content will bleed vertically into the surrounding layout using the vertical prop.
Horizontal example Content will bleed horizontally into the surrounding layout using the horizontal prop.
Specific direction example Content will bleed into the surrounding layout in a specific direction using the top, bottom, left, or right prop.
All directions example Content will bleed into the surrounding layout in all directions using the spacing prop.
Add section "Bleed values" Content should never go beyond the edges of the parent container. Choose a bleed value that works within the containing layout.

Before and after
Image

Link to Figma

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions