Parts UI - Typography

Heading h1

Heading h2

Heading h3

Heading h4

Heading h5

Heading h6

<h1>Heading h1</h1>
<h2>Heading h2</h2>
<h3>Heading h3</h3>
<h4>Heading h4</h4>
<h5>Heading h5</h5>
<h6>Heading h6</h6>

Copied

<div class="h1">Heading h1</div>
<div class="h2">Heading h2</div>
<div class="h3">Heading h3</div>
<div class="h4">Heading h4</div>
<div class="h5">Heading h5</div>
<div class="h6">Heading h6</div>

Copied

The styles of elements with classes h1 - h6 are completely identical to the styles of pure html elements <h1> - <h6>

.text-title

CSS class that contains heading styles except text size

Lorem ipsum dolor

<span class="text-title">...</span>

Copied

.text-indent

CSS class containing styles of paragraph and <p> element. Adds its base values line-height and margin indents.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<span class="text-indent">...</span>

Copied

Font sizes

.text-base

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga eius in, labore dolorem delectus saepe dolorum, facilis nemo enim maiores ducimus! Tempora beatae ipsum iure vitae voluptatibus, dignissimos delectus, minima!

.text-xxl

.text-xl

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint recusandae saepe unde repellendus, delectus perspiciatis consequatur sit suscipit fugit quo, architecto, pariatur non quasi amet enim adipisci nulla dolores? Magni.

.text-lg

.text-md

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo, magni repudiandae voluptatibus nesciunt ullam possimus alias animi, a eum vitae voluptates quod, molestias, iste ut deleniti quaerat et eos nemo.

.text-sm

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum iste mollitia sequi nulla cumque vel neque ipsam tenetur in! Reiciendis, cum necessitatibus alias veritatis fugit natus! Commodi ab animi, quod accusamus praesentium dicta quisquam alias officiis nesciunt nemo obcaecati cumque amet aliquam delectus optio ea, nam nihil fuga, officia id!

.text-xs

.text-xxs

.text-lead
.text-h1
.text-h2
.text-h3
.text-h4
.text-h5
.text-h6

text-lead
text-h1
text-h2
text-h3
text-h4
text-h5
text-h6

Font faces

Font faces classes set values to font-weight and font-style rules, therefore correctness of the font face displaying depends on support by font family that you are using on your project

.text-thin
.text-100
font-weight: 100

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, unde voluptatem quia minus quae nihil cum dolores at tempore optio blanditiis doloremque totam, eveniet, nisi rem mollitia illum officia amet.

.text-x-lighter
.text-200
font-weight: 200

.text-lighter
.text-300
font-weight: 300

.text-regular
.text-400
font-weight: 400 (normal)

.text-medium
.text-500
font-weight: 500

.text-demi
.text-600
font-weight: 600

.text-bold
.text-700
font-weight: 700 (bold)

.text-x-bold
.text-800
font-weight: 800

.text-black
.text-900
font-weight: 900

.text-italic
font-style: italic

.text-normal
font-style: normal

Colors

.text-info

.text-success

.text-warning

.text-alert

.text-gray

.text-dark

.text-mute

.text-gray-light

.text-light

Alignment

.text-center

Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit et expedita ab quos obcaecati ipsam natus vitae debitis minima distinctio, soluta molestias nemo blanditiis, eligendi cum neque enim? Asperiores, tenetur.

.text-right

.text-left

Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto alias praesentium maxime quisquam magnam! Quisquam recusandae in fugit laudantium accusamus, tempore ipsa at sunt libero atque iure ratione itaque similique.

Styles

.text-hidden
.text-dots

.text-caps

.text-nocaps

.text-space
letter-spacing: 0.1em

.text-space-xs
letter-spacing: 0.02em

.text-space-sm
letter-spacing: 0.05em

.text-space-md
letter-spacing: 0.15em

.text-space-lg
letter-spacing: 0.2em

.text-space-xl
letter-spacing: 0.3em

.text-space-none
letter-spacing: 0

The project is being tested and under development

If you find a mistake or have ideas for the development of the project - send a message