TextContainer is used to wrap text elements such as TextBlock and Heading, and provide consistent vertical spacing. --- ### Example ![textcontainer](/assets/api/checkout-extensions/post-purchase/components/textcontainer.png) ```ts?title: "JS" import {extend, TextBlock, TextContainer} from '@shopify/post-purchase-ui-extensions'; extend('Checkout::PostPurchase::Render', (root) => { const textContainer = root.createComponent(TextContainer, undefined, [ root.createComponent(TextBlock, undefined, 'TextBlock'), root.createComponent(TextBlock, undefined, 'TextBlock'), root.createComponent(TextBlock, undefined, 'TextBlock'), ]); root.appendChild(textContainer); }); ``` ```tsx?title: "React" import {render, TextContainer, TextBlock} from '@shopify/post-purchase-ui-extensions-react'; render('Checkout::PostPurchase::Render', () => ); function App() { return ( TextBlock TextBlock TextBlock ); } ``` ## Props optional = ? | Name | Type | Description | | --- | --- | --- | | alignment? | "leading" | "center" | "trailing" | Align children’s on the horizontal axis | | spacing? | "xtight" | "tight" | "loose" | "xloose" | Adjust spacing between children |