Text

Import

import { Text } from '@zeal-ui/core';

Usage

<Container type="col">
    <Text type="mainHeading">Main Heading</Text>
    <Text type="subHeading1">Sub Heading 1</Text>
    <Text type="subHeading2">Sub Heading 2</Text>
</Container>;

Regular Text

<Text width="80%" bold>
    Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of
    classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a
    Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin
    words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in
    classical literature, discovered the undoubtable source.
</Text>;

Props

width

Description

It is used to set the width of the text.

Values

String with valid width.

height

Description

It is used to set the height of the text.

Values

String with valid height.

type

Description

It is used to set the type of the text.

Values

mainHeading | subHeading1 | subHeading2.

size

Description

It is used to set the font size of the text.

Values

String with valid font size.

center

Description

It is used to position the text in the center based on its width.

Values

Boolean value.

bold

Description

It is used to make the text bold.

Values

Boolean value.

scrollAuto

Description

It is used to add a scrollbar on x or y axis or both if the contents of the text overflows.

Values

Boolean value.

Note

To learn about customizing the components check this section of the docs.