Skip to contentShopify logoPolaris

Bleed

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

Alpha

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 (
    <Card>
      <Text as="h2" variant="bodyMd">
        Content inside a card
      </Text>
      <Bleed marginInline="400">
        <Placeholder label="marginInline" />
      </Bleed>
    </Card>
  );
}

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

Props

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

interface BleedProps
children?React.ReactNode
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.

Related resources

  • 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.