Bleed

A layout component that applies negative margins to allow content to bleed outside its container boundaries, useful for full-width images or edge-to-edge content.

Anatomy

<script>
  import { Bleed } from "@saas-ui/svelte/layout/bleed";
</script>

<Bleed inline={8}>
  <img src="full-width.jpg" alt="..." />
</Bleed>

Examples

Basic Accessibility

Basic bleed effect that extends content beyond its container using negative margins.

<div class="border-border-default rounded-sm border p-8">
	<Bleed>
		<DecorativeBox class="h-16">Bleed</DecorativeBox>
	</Bleed>
</div>

Direction Accessibility

Control the bleed direction using inline (horizontal), block (vertical), or individual directional props.

<Stack gap={4}>
	<div class="border-border-default rounded-sm border p-8">
		<Bleed inlineStart={8}>
			<DecorativeBox class="h-8">inlineStart</DecorativeBox>
		</Bleed>
	</div>

	<div class="border-border-default rounded-sm border p-8">
		<Bleed inlineEnd={8}>
			<DecorativeBox class="h-8">inlineEnd</DecorativeBox>
		</Bleed>
	</div>

	<div class="border-border-default rounded-sm border p-8">
		<Bleed blockStart={8}>
			<DecorativeBox class="h-8">blockStart</DecorativeBox>
		</Bleed>
	</div>

	<div class="border-border-default rounded-sm border p-8">
		<Bleed blockEnd={8}>
			<DecorativeBox class="h-8">blockEnd</DecorativeBox>
		</Bleed>
	</div>
</Stack>

Props

Prop	Type	Default	Description
`inline`	`number`	-	The negative margin on the x-axis.
`block`	`number`	-	The negative margin on the y-axis.
`inlineStart`	`number`	-	The negative margin on the inline-start axis.
`inlineEnd`	`number`	-	The negative margin on the inline-end axis.
`blockStart`	`number`	-	The negative margin on the block-start axis.
`blockEnd`	`number`	-	The negative margin on the block-end axis.
`children`	`any`	-	The content to be rendered inside the component.
`class`	`text`	-	Additional CSS classes to apply.