Brickv0.1.12
Bleed
Navigation & layoutBrick 0.1.12

Bleed

Bleed lets authored content extend beyond the inset of its immediate container using responsive, theme-aware logical spacing.

Live example

Built from the published package

Interactive

Release story

The parent keeps its reading inset while selected artwork reaches the edge.
Edge media
Choose with confidence

Know when Bleed is the right part

Use it when

Use Bleed for edge media, editorial artwork, or another deliberate child that must cross a parent's padding while the parent keeps owning that inset.

Choose another path when

Use Frame for size constraints, Stack/Grid for arrangement, Surface for paint, and application CSS for unrelated positioning. Do not use Bleed to conceal an incorrect container measure.

Installation and imports

tsx
import { Bleed } from "@flowstack-ui/brick/bleed";
import "@flowstack-ui/brick/styles.css";

With modular styles load styles/core.css once and styles/bleed.css.

tsx
import "@flowstack-ui/brick/styles/core.css";
import "@flowstack-ui/brick/styles/bleed.css";

Quick start

tsx
<Surface inset="lg">
  <Bleed inline={6} blockStart={6}>
    <Image.Root src="/editorial.jpg">...</Image.Root>
  </Bleed>
</Surface>

Visual recipes and states

Bleed has no visual recipe or interaction state. It changes only logical margin, converting public positive spacing into negative margins internally.

Examples

tsx
<Bleed asChild blockStart={{ initial: 4, lg: 8 }}>
  <figure>...</figure>
</Bleed>
Public contract

API

Start with the public parts and root options below. Components with multiple parts separate each area into its own named subsection.

Public exports are Bleed, BleedProps, and BleedElement.

PropValueDefault
asdiv, span, section, article, aside, main, header, footer, nav, ul, ol, lidiv
asChildbooleanfalse
inlineresponsive Brick spacing value0
blockresponsive Brick spacing value0
inlineStartresponsive Brick spacing valueinherited from inline
inlineEndresponsive Brick spacing valueinherited from inline
blockStartresponsive Brick spacing valueinherited from block
blockEndresponsive Brick spacing valueinherited from block
slotstringbleed

Spacing props accept non-negative Brick spacing values or responsive values with initial and optional sm, md, lg, and xl overrides. Directional values override their matching axis edge. asChild preserves one non-Fragment child.

Shared responsibility

Accessibility

Bleed adds no semantics or behavior. Verify the resulting composition does not introduce horizontal page scrolling, crop meaningful content, or obscure focus indicators.

Responsive behavior

Values follow Brick's mobile-first breakpoint grammar and carry forward until a later authored value replaces them.

Stable visual contract

Styling and tokens

Customization

Prefer the spacing props. Bleed intentionally has no paint, size, overflow, position, or z-index customization surface.

Tokens and CSS hooks

Stable hooks are .brick-bleed, data-bleed, data-slot, and data-slot="bleed". Spacing variables are implementation details generated from the public props.

Advanced reference

Open these details only when you need to inspect DOM ownership, native forwarding, or lower-level composition.

Maintainer resources

Tests, playground evidence, source notes, and release history remain available without crowding the plug-and-play guide.
Source docsChangelogPlayground