Props

type

Note 1: Default type: p

Babel: use HTML typography tag names. All tags have default font sizes.

Example

p

سلام من به تو یار قدیمی

span

سلام من به تو یار قدیمیh1

سلام من به تو یار قدیمی

h2

سلام من به تو یار قدیمی

h3

سلام من به تو یار قدیمی

h4

سلام من به تو یار قدیمی

h5

سلام من به تو یار قدیمی

h6

سلام من به تو یار قدیمی

// React Components

<Typography>سلام من به تو یار قدیمی</Typography>

<Typography type="span">سلام من به تو یار قدیمی</Typography>

<Typography type="h1">سلام من به تو یار قدیمی</Typography>

<Typography type="h2">سلام من به تو یار قدیمی</Typography>

<Typography type="h3">سلام من به تو یار قدیمی</Typography>

<Typography type="h4">سلام من به تو یار قدیمی</Typography>

<Typography type="h5">سلام من به تو یار قدیمی</Typography>

<Typography type="h6">سلام من به تو یار قدیمی</Typography>

// Babel

<p>سلام من به تو یار قدیمی</p>

<span>سلام من به تو یار قدیمی</span>

<h1>سلام من به تو یار قدیمی</h1>

<h2>سلام من به تو یار قدیمی</h2>

<h3>سلام من به تو یار قدیمی</h3>

<h4>سلام من به تو یار قدیمی</h4>

<h5>سلام من به تو یار قدیمی</h5>

<h6>سلام من به تو یار قدیمی</h6>

color

Note: Default color is gray900.

Babel: Default color is color-gray900.

Example

vblue

سلام من به تو یار قدیمی

gray900

سلام من به تو یار قدیمی

red400

سلام من به تو یار قدیمی

yellow500

سلام من به تو یار قدیمی

green600

سلام من به تو یار قدیمی

Default

All colors in `overview/colors` are available.

// React Components

<Typography color="vblue" type="h3">سلام من به تو یار قدیمی</Typography>

<Typography color="gray900" type="h3">سلام من به تو یار قدیمی</Typography>

<Typography color="red400" type="h3">سلام من به تو یار قدیمی</Typography>

<Typography color="yellow500" type="h3">سلام من به تو یار قدیمی</Typography>

<Typography color="green600" type="h3">سلام من به تو یار قدیمی</Typography>

<Typography ltr type="h3">All colors in `overview/colors` are available.</Typography>

// Babel

<h3 class="color-vblue">سلام من به تو یار قدیمی</h3>

<h3 class="color-gray900">سلام من به تو یار قدیمی</h3>

<h3 class="color-red400">سلام من به تو یار قدیمی</h3>

<h3 class="color-yellow500">سلام من به تو یار قدیمی</h3>

<h3 class="color-green600">سلام من به تو یار قدیمی</h3>

<h3 class="ltr">All colors in `overview/colors` are available.</h3>

size

Note 1: Default size is the same as tag size.

Note 2: size of each element can be one of the following:

Babel: font-size class names define with: fs-{size}.

'10' '11' '12' '14' '16' '18' '22' '24' '28' '36'

Example

size: 12

سلام من به تو یار قدیمی

size: 22

سلام من به تو یار قدیمی

size: 36

سلام من به تو یار قدیمی

// React Components

<Typography size="12" type="h1">سلام من به تو یار قدیمی</Typography>

<Typography size="22" type="h1">سلام من به تو یار قدیمی</Typography>

<Typography size="36" type="h1">سلام من به تو یار قدیمی</Typography>

// Babel

<h1 class="fs-12">سلام من به تو یار قدیمی</h1>

<h1 class="fs-22">سلام من به تو یار قدیمی</h1>

<h1 class="fs-36">سلام من به تو یار قدیمی</h1>

ltr

Note 1: Default is false.

Babel: Just add ltr class name.

Example

Default

سلام من به تو یار قدیمی

ltr

My greetings to you my old friend.

// React Components

<Typography type="h3">سلام من به تو یار قدیمی</Typography>

<Typography ltr type="h3">My greetings to you my old friend.</Typography>

// Babel

<h3>سلام من به تو یار قدیمی</h3>

<h3 class="ltr">My greetings to you my old friend.</h3>

weight

Note 1: Default weight for h tags is bold.

Note 2: weight of each element can be one of the following:

Babel: font-weight class names define with: fs-{weight}.

'bold' 'normal' '100' '200' '600' '900'

Example

bold

سلام من به تو یار قدیمی

normal

سلام من به تو یار قدیمی

100

سلام من به تو یار قدیمی

200

سلام من به تو یار قدیمی

600

سلام من به تو یار قدیمی

900

سلام من به تو یار قدیمی

// React Components

<Typography weight="bold" type="h3">سلام من به تو یار قدیمی</Typography>

<Typography weight="normal" type="h3">سلام من به تو یار قدیمی</Typography>

<Typography weight="100" type="h3">سلام من به تو یار قدیمی</Typography>

<Typography weight="200" type="h3">سلام من به تو یار قدیمی</Typography>

<Typography weight="600" type="h3">سلام من به تو یار قدیمی</Typography>

<Typography weight="900" type="h3">سلام من به تو یار قدیمی</Typography>

// Babel

<h3 class="fw-bold">سلام من به تو یار قدیمی</h3>

<h3 class="fw-normal">سلام من به تو یار قدیمی</h3>

<h3 class="fw-100">سلام من به تو یار قدیمی</h3>

<h3 class="fw-200">سلام من به تو یار قدیمی</h3>

<h3 class="fw-600">سلام من به تو یار قدیمی</h3>

<h3 class="fw-900">سلام من به تو یار قدیمی</h3>