Content block

Used to create a container that centers and sets the maximum width of the content within.

Alpha

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

Used to set maximum width.

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


function ContentBlockWidthExample() {
  return (
    <div style={{width: '100%'}}>
      <ContentBlock width="md">
        <Box background="surface" borderRadius="2" padding="5" shadow="card">
          <Text variant="bodySm" as="h3" alignment="center">
            medium
          </Text>
        </Box>
      </ContentBlock>
      <br />
      <ContentBlock width="lg">
        <Box background="surface" borderRadius="2" padding="5" shadow="card">
          <Text variant="bodySm" as="h3" alignment="center">
            large
          </Text>
        </Box>
      </ContentBlock>
    </div>
  );
}

Props

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

interface ContentBlockProps

children?React.ReactNode: Elements to display inside container.
width'md' | 'lg': Adjust maximum width of container.