Text container

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


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 (
      <Text variant="headingMd" as="h2">
        Install the Shopify POS App
        Shopify POS is the easiest way to sell your products in person.
        Available for iPad, iPhone, and Android.

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

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

    On this page