Text

The ty-text component serves as a fundamental building block for displaying text in your user interface. It allows you to control the style, size, and type of text to match the specific requirements of your design.

Usage

To use the ty-text component, you can specify the desired variant and size attributes in your HTML code.

Live Editor

<div>
  <ty-text variant="display" size="md">Your Display</ty-text>
  <ty-text variant="headline" size="md">Your Headline</ty-text>
  <ty-text variant="body" size="md">Your body</ty-text>
  <ty-text variant="label" size="md">Your Label</ty-text>
</div>

Result

Loading...

Display

The display variant of ty-text is perfect for large and prominent text that demands attention. It's typically used for headings, banners, or other focal points:

Your Display

HTML

<ty-text variant="display" size="md">Your Display</ty-text>

Headline

When you need to emphasize titles or headings, the headline variant is an excellent choice:

Your Headline

HTML

<ty-text variant="headline" size="md">Your Headline</ty-text>

Body

For standard body text, you can use the body variant:

Your Body

HTML

<ty-text variant="body" size="md">Your Body</ty-text>

Label

The label variant is suitable for smaller text elements like labels or captions:

Your Label

HTML

<ty-text variant="body" size="md">Your Label</ty-text>

API

Properties

The ty-text component accepts the following properties:

Name	Description	Type	Default
variant	text type	'display', 'headline', 'body', 'label'	'label'
size	text size	'sm', 'md', 'lg'	'md'