As A helper for setting the underlaying element of a component

Attributes

• element (:string) (required) - Must be one of "dt", "dd", "h1", "h2", "h3", "h4", "h5", "h6", "p", "span", "strong", or "legend".
• Global attributes are accepted.

Slots

• inner_block (required)

Typography helps establish hierarchy and communicate important content by creating clear visual patterns.

Examples

  <.text variant="bodyLg" as="p" alignment="center">center alignment</.text>
  <.text as="p" tone="caution">cautious text</.text>

See

• https://polaris.shopify.com/components/typography/text
• https://github.com/Shopify/polaris/blob/main/polaris-react/src/components/Text/Text.tsx

Attributes

• alignment (:string) - Adjust horizontal alignment of text.Must be one of "start", "center", "end", or "justify".
• as (:string) - The element type. Defaults to "span".
• break_word (:boolean) - Prevent text from overflowing.
• tone (:string) - Adjust tone of text.Must be one of "success", "critical", "caution", "subdued", or "text-inverse".
• font_weight (:string) - Adjust weight of text.Must be one of "regular", "medium", "semibold", or "bold".
• numeric (:boolean) - Use a numeric font variant with monospace appearance.
• truncate (:boolean) - Truncate text overflow with ellipsis.
• variant (:string) - Typographic style of text.Must be one of "headingSm", "headingMd", "headingLg", "headingXl", "heading2xl", "heading3xl", "bodySm", "bodyMd", or "bodyLg".
• visually_hidden (:boolean) - Visually hide the text.
• text_decoration_line (:string) - Add a line-through to the text.Must be one of "line-through".
• Global attributes are accepted.

Slots

• inner_block (required)