Text container

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

Use this component for default vertical spacing.

<template>
<TextContainer>
  <Text variant="headingMd" as="h2">
    Install the Shopify POS App
  </Text>
  <Text as="p">
    Shopify POS is the easiest way to sell your products in person.
    Available for iPad, iPhone, and Android.
  </Text>
</TextContainer>
</template>

<template>
<TextContainer spacing="tight">
  <Text variant="headingMd" as="h2">
    Install the Shopify POS App
  </Text>
  <Text as="p">
    Shopify POS is the easiest way to sell your products in person.
    Available for iPad, iPhone, and Android.
  </Text>
</TextContainer>
</template>

<template>
<TextContainer spacing="loose">
  <Text variant="headingMd" as="h2">
    Install the Shopify POS App
  </Text>
  <Text as="p">
    Shopify POS is the easiest way to sell your products in person.
    Available for iPad, iPhone, and Android.
  </Text>
</TextContainer>
</template>

Props

No props found for this component, run `yarn gen:docs` to generate component meta first.

Slots

No slots found for this component, run `yarn gen:docs` to generate component meta first.

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.