Bleed

Bleed applies negative inline margin so children escape a padded parent without reworking the outer layout. The wrapper is a plain div; it offsets from the parent's content box and does not resize its children.

Set amount to a spacing token for a controlled pull, or full to reach the viewport edges and ignore amount. Match amount to the parent Stack or Surface hPadding token so media, dividers, or trailing controls kiss the chrome while siblings stay inset.

Typical uses include edge-to-edge hero bands inside a padded section, carousels that should meet the screen sides, and full-width rules under inset copy.

When to useCopy Anchor Link

• Media or a divider should break out of padded Surface / Stack chrome
• A hero band should span viewport edges while intro copy stays inset
• The outer padding should stay intact for siblings above and below

When not to useCopy Anchor Link

• You can drop parent padding for the whole section instead of a local breakout
• The edge belongs to the panel outline → Surface border
• You need a themed divider without breakout → Separator alone

RelatedCopy Anchor Link

• Stack — padded host whose hPadding Bleed should match
• Surface — card or section chrome around bleed content
• Separator — edge-to-edge rules wrapped in Bleed

Common examplesCopy Anchor Link

Matched amountCopy Anchor Link

Pair amount with the same spacing step as the parent's hPadding so a media band or callout breaks out of a padded Surface without dropping padding for the rest of the card.

Viewport edgeCopy Anchor Link

full stretches the child to the viewport width from a centered, padded layout. Useful for hero media that should ignore section margins while title and body stay on the spacing scale.

Edge-to-edge dividerCopy Anchor Link

Wrap a Separator in Bleed with amount matched to the section hPadding so the rule hits the panel edges while the rows above and below keep their inset.

Ask your agentCopy Anchor Link

Build a release-notes card with padded title and summary, a cover image that bleeds to the card edges, then body copy and a secondary Read full notes button — keep the image breakout on the spacing scale with the card padding.