Applies negative margin to allow content to bleed out into the surrounding layout.


This component is a work in progress and ready for exploratory usage, with breaking changes expected in minor version updates. Please use with caution. Learn more about our component lifecycles.

Content will bleed horizontally into the surrounding layout using the marginInline prop.

import React from 'react';

import {Bleed, Card, Text, HorizontalStack} from '@shopify/polaris';

function BleedHorizontalExample() {
  return (
      <Text as="h2" variant="bodyMd">
        Content inside a card
      <Bleed marginInline="400">
        <Placeholder label="marginInline" />

const Placeholder = ({label = '', height = 'auto', width = 'auto'}) => {
  return (
        background: 'var(--p-color-text-info)',
        padding: '14px var(--p-space-200)',
        height: height,
        width: width,
      <HorizontalStack gap="400" align="center">
            color: 'var(--p-color-text-on-color)',
          <Text as="h2" variant="bodyMd" fontWeight="regular">


Want to help make this feature better? Please share your feedback.

interface BleedProps
marginInline?T | ({ [Breakpoint in BreakpointsAlias]?: T; })<T><SpaceScale>

Negative horizontal space around children.

marginBlock?T | ({ [Breakpoint in BreakpointsAlias]?: T; })<T><SpaceScale>

Negative vertical space around children.

marginBlockStart?T | ({ [Breakpoint in BreakpointsAlias]?: T; })<T><SpaceScale>

Negative top space around children.

marginBlockEnd?T | ({ [Breakpoint in BreakpointsAlias]?: T; })<T><SpaceScale>

Negative bottom space around children.

marginInlineStart?T | ({ [Breakpoint in BreakpointsAlias]?: T; })<T><SpaceScale>

Negative left space around children.

marginInlineEnd?T | ({ [Breakpoint in BreakpointsAlias]?: T; })<T><SpaceScale>

Negative right space around children.

Bleed values

Content should never go beyond the edges of the parent container. Choose a bleed value that works within the containing layout.

  • Bleed props are named following the convention of CSS logical properties, such as 'margin-inline-start' and 'margin-block-start'. Learn more about CSS logicial properties.