Bleed
A layout primitive that lets content intentionally escape a constrained container.
API Reference
Bleed is a moduix layout primitive and does not wrap a Base UI primitive.
Use inline="none" or block="none" to keep an axis constrained. Supported
bleed amounts are xs, sm, md, lg, xl, plus full on the inline axis.
Use as to render a semantic element or custom component while keeping the same
bleed behavior.
Basic
Container content stays constrained.
This block bleeds to the viewport edges.
Following content returns to the container width.
import { Bleed, Text } from "moduix";export function BleedDemo() { return ( <div className={styles.container}> <Text tone="muted">Container content stays constrained.</Text> <Bleed className={styles.bleed}> <Text weight="semibold"> This block bleeds to the viewport edges. </Text> </Bleed> <Text tone="muted"> Following content returns to the container width. </Text> </div> );}.container { display: flex; width: min(28rem, calc(100vw - var(--spacing-8))); flex-direction: column; gap: var(--spacing-4); padding: var(--spacing-4); border: var(--border-width-sm) dashed var(--color-border);}.bleed { display: flex; flex-direction: column; align-items: center; padding: var(--spacing-4); background-color: var(--color-muted); text-align: center;}Full list of component variables available for project-level overrides.
| Property | Default | Description |
|---|---|---|
| --bleed-block-xs | var(--spacing-1) | Controls extra-small block bleed. |
| --bleed-block-sm | var(--spacing-2) | Controls small block bleed. |
| --bleed-block-md | var(--spacing-3) | Controls medium block bleed. |
| --bleed-block-lg | var(--spacing-4) | Controls large block bleed. |
| --bleed-block-xl | var(--spacing-6) | Controls extra-large block bleed. |
| --bleed-inline-full | calc(50% - 50vw) | Controls full viewport inline bleed. |
| --bleed-inline-xs | var(--spacing-1) | Controls extra-small inline bleed. |
| --bleed-inline-sm | var(--spacing-2) | Controls small inline bleed. |
| --bleed-inline-md | var(--spacing-3) | Controls medium inline bleed. |
| --bleed-inline-lg | var(--spacing-4) | Controls large inline bleed. |
| --bleed-inline-xl | var(--spacing-6) | Controls extra-large inline bleed. |
Interactive variables scoped for docs preview without changing size scale tokens.
| Property | Value | Default | Description |
|---|---|---|---|
| --bleed-inline-full | calc(50% - 50vw) | Controls full viewport inline bleed. |
Anatomy
Bleed is a single root layout primitive. It applies negative inline and/or block margins so
content can extend beyond a constrained parent while staying in normal document flow.
Bleed
└─ children<Bleed inline="md" block="none">
<div className={styles.panel}>Escaped content</div>
</Bleed>| Part | Role |
|---|---|
Bleed | Root layout wrapper. Controls inline/block bleed amounts and element type. |
Composition
Use Bleed props inline and block to control bleed amount per axis, and as when the root
should be a specific semantic element such as section or figure. The component forwards refs to
the rendered element, so it can be measured, focused, or passed to animation libraries like any
native element.
Bleed has no internal service slots, so customization is done directly with className and
bleed CSS variables on the root element.
Examples
Inline Amounts
Use inline to choose how far content escapes the container on the inline axis.
Small inline bleed
Large inline bleed
Full inline bleed
import { Bleed, Text } from "moduix";export function BleedInlineAmountsDemo() { return ( <div className={styles.container}> <Bleed inline="sm" className={styles.panel}> <Text>Small inline bleed</Text> </Bleed> <Bleed inline="lg" className={styles.panel}> <Text>Large inline bleed</Text> </Bleed> <Bleed inline="full" className={styles.panel}> <Text>Full inline bleed</Text> </Bleed> </div> );}.container { display: flex; width: min(28rem, calc(100vw - var(--spacing-8))); flex-direction: column; gap: var(--spacing-4); padding: var(--spacing-4); border: var(--border-width-sm) dashed var(--color-border);}.panel { display: flex; flex-direction: column; align-items: center; padding: var(--spacing-4); background-color: var(--color-muted); text-align: center;}Block Bleed
Use block when a surface should also escape vertical container padding.
Container padding above.
Inline and block bleed
Container padding below.
import { Bleed, Text } from "moduix";export function BleedBlockDemo() { return ( <div className={styles.paddedContainer}> <Text tone="muted">Container padding above.</Text> <Bleed inline="md" block="md" className={styles.panel}> <Text>Inline and block bleed</Text> </Bleed> <Text tone="muted">Container padding below.</Text> </div> );}.paddedContainer { display: flex; width: min(28rem, calc(100vw - var(--spacing-8))); flex-direction: column; gap: var(--spacing-4); padding: var(--spacing-6); border: var(--border-width-sm) dashed var(--color-border);}.panel { display: flex; flex-direction: column; align-items: center; padding: var(--spacing-4); background-color: var(--color-muted); text-align: center;}Semantic Element
Use as when the escaping content has a more specific semantic role.
Full-width media with a constrained parent.
import { Bleed, Text } from "moduix";export function BleedSemanticDemo() { return ( <div className={styles.container}> <Bleed as="figure" className={styles.figure}> <div className={styles.media} /> <Text tone="muted" size="sm"> Full-width media with a constrained parent. </Text> </Bleed> </div> );}.container { display: flex; width: min(28rem, calc(100vw - var(--spacing-8))); flex-direction: column; gap: var(--spacing-4); padding: var(--spacing-4); border: var(--border-width-sm) dashed var(--color-border);}.figure { display: flex; flex-direction: column; align-items: center; gap: var(--spacing-3); padding: var(--spacing-4); background-color: var(--color-muted); text-align: center;}.media { width: min(28rem, 100%); min-height: 8rem; border-radius: var(--radius-md); background: linear-gradient(135deg, rgb(0 0 0 / 0.14), transparent 45%), var(--color-accent);}Custom Styles
Pass className when styling the root or overriding bleed variables in local CSS.
Customized bleed amount.
import { Bleed, Text } from "moduix";export function CustomStylesBleedDemo() { return ( <div className={styles.container}> <Bleed className={styles.customBleed}> <Text weight="semibold">Customized bleed amount.</Text> </Bleed> </div> );}.container { display: flex; width: min(28rem, calc(100vw - var(--spacing-8))); flex-direction: column; gap: var(--spacing-4); padding: var(--spacing-4); border: var(--border-width-sm) dashed var(--color-border);}.customBleed { --bleed-inline-full: calc(var(--spacing-8) * -1); display: flex; flex-direction: column; align-items: center; padding: var(--spacing-4); background-color: var(--color-muted); text-align: center;}