Bleed

🌓Dark Mode Compatible

A specialized layout component that allows content to "bleed" beyond its parent container's boundaries. Essential for content-focused layouts where certain elements need to break free from narrow reading widths.

Overview

Use Bleed when you need…

• Full-width hero images in narrow article containers
• Background sections that extend to viewport edges
• Callouts or blockquotes that extend slightly beyond prose width
• Marketing sections with alternating full-width backgrounds
• Gallery images that break out of reading constraints
• Visual accents that create rhythm in content-heavy pages

Live demoInteractive

Content at reading width (Container)

Full-width bleed (inline="full")

Content returns to reading width

Anatomy

Bleed uses negative margins to pull content outside its parent container.

Without Bleed:
┌─────────────────────────────────────────┐
│  Container (max-width: 65ch)            │
│                                         │
│  ┌─────────────────────────────────┐    │
│  │  Content constrained            │    │
│  │  to reading width               │    │
│  └─────────────────────────────────┘    │
│                                         │
└─────────────────────────────────────────┘

With Bleed inline="full":
┌─────────────────────────────────────────┐
│  Container (max-width: 65ch)            │
│                                         │
┌──────────────────────────────────────────┐
│  Bleed content extends to viewport edges │
└──────────────────────────────────────────┘
│                                         │
│  ┌─────────────────────────────────┐    │
│  │  Content returns to reading     │    │
│  │  width after bleed              │    │
│  └─────────────────────────────────┘    │
└─────────────────────────────────────────┘

Component Structure:

• Inline bleed: Horizontal (left + right) negative margins
• Block bleed: Vertical (top + bottom) negative margins
• Full-width: Uses CSS width: 100vw + margin-left: calc(-50vw + 50%) technique
• Numeric values: Apply negative margins from spacing scale

Usage

Import the component:

import { Bleed, Container } from '@grasdouble/lufa_design-system';

Basic usage

src/App.tsx

import { Bleed, Container } from '@grasdouble/lufa_design-system';

function App() {
  return (
    <Container size="md">
      <h1>Article Title</h1>
      <p>Article introduction with optimal reading width...</p>

      {/* Hero image breaks out to full viewport width */}
      <Bleed inline="full">
        <img src="/hero.jpg" alt="Hero" style={{ width: '100%', height: 'auto' }} />
      </Bleed>

      <p>Article content continues at reading width...</p>
    </Container>
  );
}

Pattern: Callout with partial bleed

src/components/Callout.tsx

import { Bleed, Container } from '@grasdouble/lufa_design-system';

export function CalloutBox() {
  return (
    <Container size="md">
      <p>Regular paragraph content...</p>

      {/* Callout bleeds 24px beyond container edges */}
      <Bleed inline={24}>
        <div style={{ padding: '16px', background: '#fff3cd', border: '2px solid #ffc107', borderRadius: '4px' }}>
          <strong>💡 Tip:</strong> This callout extends slightly beyond the reading width for emphasis.
        </div>
      </Bleed>

      <p>More content...</p>
    </Container>
  );
}

Pattern: Marketing landing page

src/components/LandingPage.tsx

import { Bleed, Container } from '@grasdouble/lufa_design-system';

export function LandingPage() {
  return (
    <Container size="lg">
      <section style={{ padding: '64px 32px', textAlign: 'center' }}>
        <h1 style={{ fontSize: '48px', fontWeight: 'bold', marginBottom: '16px' }}>Transform Your Workflow</h1>
        <p style={{ fontSize: '20px', color: '#6b7280', marginBottom: '32px' }}>
          The all-in-one platform for modern teams
        </p>
      </section>

      {/* Full-width accent section */}
      <Bleed inline="full">
        <section style={{ background: '#f3f4f6', padding: '64px 32px' }}>
          <Container size="lg">
            <h2 style={{ fontSize: '36px', fontWeight: 'bold', textAlign: 'center' }}>Key Features</h2>
          </Container>
        </section>
      </Bleed>
    </Container>
  );
}

Variants

Inline values

Value	Behavior	Use Case
8-96	Negative margins (numeric pixels)	Subtle extension for callouts, quotes
"full"	Full viewport width (100vw)	Hero images, full-width sections

Block values

Value	Behavior	Use Case
8-32	Negative top/bottom margins	Reduce vertical spacing around bleed

Props

Prop	Type	Default	Description
inline	0 | 4 | 8 | 12 | 16 | 24 | 32 | 40 | 48 | 64 | 80 | 96 | 'full'	Required	Horizontal bleed amount (pixels or "full")
block	0 | 4 | 8 | 12 | 16 | 24 | 32 | 40 | 48 | 64 | 80 | 96	undefined	Vertical bleed amount (pixels)
as	'div' | 'section' | 'article' | 'figure'	'div'	HTML element to render
children	ReactNode	-	Content to bleed beyond container
className	string	-	Additional CSS classes

Also supports all standard HTML attributes for the underlying element.

Accessibility

Bleed is a non-interactive layout container. Ensure child content maintains proper semantic structure and accessibility.

import { Bleed, Container } from '@grasdouble/lufa_design-system';

export function AccessibleSection() {
  return (
    <Container size="md">
      <Bleed inline="full" as="section" aria-labelledby="featured-content">
        <div style={{ padding: '48px 32px', background: '#f9fafb' }}>
          <Container size="md">
            <h2 id="featured-content" style={{ fontSize: '32px', fontWeight: 'bold', marginBottom: '16px' }}>
              Featured Content
            </h2>
            <p style={{ fontSize: '18px', color: '#6b7280' }}>Important information accessible to all users.</p>
          </Container>
        </div>
      </Bleed>
    </Container>
  );
}

• Use semantic HTML elements (section, figure, article).
• Provide ARIA labels (aria-labelledby) for sectioning content.
• Ensure sufficient color contrast for text inside bleed sections.
• Maintain proper heading hierarchy inside bleed content.

Theming & Tokens

Bleed uses numeric pixel values from the spacing scale for inline and block props:

/* Numeric inline bleed (e.g., inline={16}) */
.bleed-inline-16 {
  margin-left: -16px;
  margin-right: -16px;
}

/* Full-width bleed (inline="full") */
.bleed-inline-full {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
}

/* Block bleed (e.g., block={16}) */
.bleed-block-16 {
  margin-top: -16px;
  margin-bottom: -16px;
}

Spacing values: 0, 4, 8, 12, 16, 24, 32, 40, 48, 64, 80, 96 pixels.

The inline="full" variant uses viewport units (vw) and calc() to achieve full-width regardless of parent container constraints.

Do / Don't

Do

• Use Bleed for visual hierarchy and rhythm in content-focused layouts
• Maintain consistent reading width for body text (use Container)
• Provide adequate padding inside bleed content (especially for inline="full")
• Use semantic HTML elements via the as prop for sections and figures
• Test on various viewport sizes to ensure no horizontal scroll

Don't

• Don't use Bleed for all content (defeats the purpose of content hierarchy)
• Don't nest Bleed components (creates unpredictable layouts)
• Don't use Bleed without a constraining parent container (Container)
• Don't forget internal padding for full-width bleeds (content would touch edges)
• Don't use large block values excessively (can disrupt vertical rhythm)

Related Components

• Container - Max-width container that Bleed breaks out of
• Box - Basic layout primitive for padding and margins
• Stack - Vertical layout with consistent spacing
• Grid - Grid-based layouts for structured content