Skip to contentShopify logoPolaris

Text container

A text container is used to wrap text elements such as paragraphs, headings, and lists to give them vertical spacing.

Deprecated

The TextContainer is a simple layout component which was made redundant by the BlockStack component. Use BlockStack with gap values of 2, 4, and 5 to replicate layouts.

Text container component examples

Use this component for default vertical spacing.

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

function TextContainerExample() {
  return (
    <TextContainer>
      <Text variant="headingMd" as="h2">
        Install the Shopify POS App
      </Text>
      <p>
        Shopify POS is the easiest way to sell your products in person.
        Available for iPad, iPhone, and Android.
      </p>
    </TextContainer>
  );
}

Best practices

The closer the spacing, the closer the relationship between content topics. The closeness visually represents the relationship.

  • Use tight spacing to relate content topics to each other
  • Use loose spacing to separate concepts that are independent of each other

Related components

  • For more layout variations, or if you’re looking to vertically space components other than text, use BlockStack.

    On this page