Bleed

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

Alpha

This component and its documentation is in development. There could be breaking changes made to it in a non-major release of Polaris. Please use with caution.

Content will bleed vertically into the surrounding layout using the vertical prop.

import React from 'react';
import {Bleed, Box, Text, Inline} from '@shopify/polaris';


function BleedVerticalExample() {
  return (
    <Box background="surface" border="base" padding="4">
      <Bleed marginInline="0" marginBlock="4">
        <Placeholder label="Vertical" />
      </Bleed>
    </Box>
  );
}

const Placeholder = ({label = '', height = 'auto', width = 'auto'}) => {
  return (
    <div
      style={{
        background: '#7B47F1',
        padding: '14px var(--p-space-2)',
        height: height,
        width: width,
      }}
    >
      <Inline align="center">
        <div
          style={{
            color: '#FFFFFF',
          }}
        >
          <Text as="h2" variant="bodyMd" fontWeight="regular">
            {label}
          </Text>
        </div>
      </Inline>
    </div>
  );
};

Props

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

interface BleedProps
children?React.ReactNode
marginInline?"0" | "025" | "05" | "1" | "2" | "3" | "4" | "5" | "6" | "8" | "10" | "12" | "16" | "20" | "24" | "28" | "32"

Negative horizontal space around children.

Defaults to '5'.

marginBlock?"0" | "025" | "05" | "1" | "2" | "3" | "4" | "5" | "6" | "8" | "10" | "12" | "16" | "20" | "24" | "28" | "32"

Negative vertical space around children.

marginBlockStart?"0" | "025" | "05" | "1" | "2" | "3" | "4" | "5" | "6" | "8" | "10" | "12" | "16" | "20" | "24" | "28" | "32"

Negative top space around children.

marginBlockEnd?"0" | "025" | "05" | "1" | "2" | "3" | "4" | "5" | "6" | "8" | "10" | "12" | "16" | "20" | "24" | "28" | "32"

Negative bottom space around children.

marginInlineStart?"0" | "025" | "05" | "1" | "2" | "3" | "4" | "5" | "6" | "8" | "10" | "12" | "16" | "20" | "24" | "28" | "32"

Negative left space around children.

marginInlineEnd?"0" | "025" | "05" | "1" | "2" | "3" | "4" | "5" | "6" | "8" | "10" | "12" | "16" | "20" | "24" | "28" | "32"

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.