Playbook logo
14.13.0

Title

Typically used as headers. Follow semantic hierarchy — Title 1s should be followed by Title 2s followed by Title 3s and so on, without skipping any levels.
Tags can be changed using the tag prop. However, be sure follow markdown semantics (h1's are followed by h2's followed by h3's and so on).

Default UI

Default Title


Title 1

Title 2

Title 3

Title 4


Prop

Title kit will use h3 tag by default, and size 3 as well.
Size and tag props are not in correlation with each other, meaning any size can be used along with any tag.

Light Weight UI

Title 1

Title 2

Title 3


Prop

Title size 1, size 2, & size 3 will use font-weight: 700 by default, if you want a lighter font weight, use the bold prop set to false.
Title size 4 uses a heavy font weight by default and will not accept a lighter font weight.

Colors

Default Color

Title Color

Title Color

Title Color


Prop

Title kit will use default color by default. Other available colors are:

*light lighter success error link

  • These colors are not for standard usage. You can use the color prop to make fixes if colors are not appearing properly, but consult your UX team members if you are deciding to implement it
Responsive

Responsive Title


The size prop supports responsive sizes. To use them, pass an object to the size prop containing your size values relative to responsive break points (show code below). To test this here, resize your browser window to responsively change this Title's size.

Truncate

After first row

Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis, minus. Nisi beatae voluptatum labore sequi. Nemo accusantium corrupti, reiciendis magnam tenetur perferendis esse pariatur voluptas eaque hic vel rem nihil quidem dolorum ex dolor, libero ullam placeat, sapiente eos. Cumque obcaecati dignissimos molestiae, minima quibusdam sint maxime libero accusantium animi quis quia maiores enim ipsum, esse, modi laudantium illum error!

After second row

Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis, minus. Nisi beatae voluptatum labore sequi. Nemo accusantium corrupti, reiciendis magnam tenetur perferendis esse pariatur voluptas eaque hic vel rem nihil quidem dolorum ex dolor, libero ullam placeat, sapiente eos. Cumque obcaecati dignissimos molestiae, minima quibusdam sint maxime libero accusantium animi quis quia maiores enim ipsum, esse, modi laudantium illum error!

After third row

Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis, minus. Nisi beatae voluptatum labore sequi. Nemo accusantium corrupti, reiciendis magnam tenetur perferendis esse pariatur voluptas eaque hic vel rem nihil quidem dolorum ex dolor, libero ullam placeat, sapiente eos. Cumque obcaecati dignissimos molestiae, minima quibusdam sint maxime libero accusantium animi quis quia maiores enim ipsum, esse, modi laudantium illum error!


Prop

truncate | Type: String | Values: "1" | "2" | "3" | "4" | "5"

The truncate prop truncates overflowing text up to a maximum of five rows and adds an ellipsis at the end.


UI Samples using Title Kit

Get the full picture. See how this kit is used in our samples.

Available Props

PropsTypeValues

bold

enum
true

color

enum
"default" | "light" | "lighter" | "success" | "error" | "link"

data

object
{ [key: string]: string; }

size

enum
1 | 2 | 3 | 4 | "1" | "2" | "3" | "4" | SizeResponsiveType

tag

enum
"h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "div" | "span"

text

string

variant

"link"
"link"