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