@atlaskit/primitives/constellation/bleed/examples.mdx

Primitives are token-backed low-level building blocks.

---
title: Bleed
description: A bleed controls negative whitespace in layouts.
order: 0
---

import BleedDefault from '../../examples/constellation/bleed/default';
import BleedBlock from '../../examples/constellation/bleed/block';
import BleedInline from '../../examples/constellation/bleed/inline';
import BleedAll from '../../examples/constellation/bleed/all';

import { CodeDocsHeader } from '@af/design-system-docs-ui';

<CodeDocsHeader
	name="@atlaskit/primitives"
	repository="https://bitbucket.org/atlassian/atlassian-frontend-mirror"
	directoryName="primitives"
/>

## Using Bleed

Bleed is a component that allows its children to break the boundaries of its container. This is
useful for content that wants to negate the padding or whitespace applied by its parent in a
controlled manner. For example in the below grid layout, the middle item bleeds across the inline
and block axes to overlap the gap set by the grid.

<Example Component={BleedAll} packageName="@atlaskit/primitives/bleed" />

## Bleed and no bleed

Bleed might be utilised to create a stacking effect with a group of avatars. Here each avatar is
laid out with the `Inline` parent container. Without a bleed, each avatar would sit directly
adjacent to its sibling. With `Bleed` we can negate the whitespace and force each avatar to overlap
its direct sibling and create our desired stack.

<Example Component={BleedDefault} packageName="@atlaskit/primitives/bleed" />

## Block whitespace

Bleed can be controlled on the block axis (vertical) with the `block` property. The values of this
property are tied to our spacing scale. Note, in the context of a flex container bleed will collapse
the whitespace around its child element.

<Example Component={BleedBlock} packageName="@atlaskit/primitives/bleed" />

## Inline whitespace

Bleed can also be controlled on the inline axis (horizontal) with the `inline` property. The values
of this property are tied to our spacing scale. Note, in the context of a flex container bleed will
collapse the whitespace around its child element.

<Example Component={BleedInline} packageName="@atlaskit/primitives/bleed" />