Bleed

Bleed lets content extend beyond the prose column into the page margins. This gives images, videos, code blocks, and embeds more breathing room without changing the overall grid layout.

How it works

Holocron defines a --bleed CSS variable that controls how far content extends past the prose column. It is 0px on mobile and up to 32px on desktop (≥ 1080px). Bleed never fills the whole column gap, so code and images stay short of the right sidebar. The .bleed CSS class applies negative left and right margins, making the element wider than its parent.

  Mobile (< 1080px)                      Desktop (≥ 1080px)

  ┌──────────────────────┐            ┌──────────────────────────────┐
  │ prose column         │            │       prose column           │
  │ ┌──────────────────┐ │         ┌──┼──────────────────────────────┼──┐
  │ │ bleed element    │ │         │  │  bleed element extends       │  │
  │ │ (same width)     │ │         │  │  past both edges <──────────>│  │
  │ └──────────────────┘ │         └──┼──────────────────────────────┼──┘
  └──────────────────────┘            └──────────────────────────────┘

Default bleed behavior

Some elements bleed automatically:

Code blocks bleed into the right margin by default so code text lines up with the prose left edge. You can control this with the bleed meta option (see Code Blocks).
Images are wrapped in a <Bleed> component automatically and extend into both margins.

Adding bleed to any element

Wrap any content in a div with className="bleed" to make it extend into the margins. This is useful for videos, iframes, embeds, and large visuals that benefit from extra width.

YouTube embed

123456789101112<div className='bleed'>
<iframe
  width="100%"
  height="400"
  src="https://www.youtube.com/embed/dQw4w9WgXcQ?controls=0&modestbranding=1&rel=0&showinfo=0&iv_load_policy=3"
  title="Video title"
  frameBorder="0"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  allowFullScreen
  style={{ borderRadius: '8px' }}
/>
</div>

Framed video

Combine bleed with Frame for a captioned video that extends into the margins:

123<Frame caption="Product demo" className='bleed'>
  <video src="/videos/demo.mp4" controls width="100%" />
</Frame>

Wide image

Images already bleed by default, but if you have a custom image layout (like a side-by-side comparison), wrap it:

123456<div className='bleed'>
  <Columns cols={2}>
    <img src="/images/before.png" alt="Before" />
    <img src="/images/after.png" alt="After" />
  </Columns>
</div>

`no-bleed` — keeping content inside containers

Container components like Callout, Accordion, Expandable, Panel, Steps, and Card apply the no-bleed class automatically. This sets --bleed: 0px for all descendants so code blocks, lists, and images stay inside the container frame.

You can also use no-bleed yourself on any wrapper:

123<div className='no-bleed'>
  Code blocks and images inside here will not bleed.
</div>

Overriding `--bleed` in custom CSS

Change the bleed distance globally in your style.css:

12345678/* style.css */
:root {
  --bleed: 0px;

  @variant lg {
    --bleed: 48px; /* wider bleed on desktop */
  }
}

Set --bleed: 0px at all breakpoints to disable bleed entirely.

Bleed never fills the whole column gap. On desktop it is capped to columnGap - 16px, so a tight layout.columnGap (for example 32px) still leaves space before the right sidebar.