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.
<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>
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:
- 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:
- HTML
<ty-text variant="headline" size="md">Your Headline</ty-text>
Body
For standard body text, you can use the body variant:
- 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:
- 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' |