Font-family

Class	Properties
`font-system-ui`	font-family: `'system-ui'`;
`font-mitr`	font-family: `'Mitr'`;
`font-roboto`	font-family: `'Roboto'`;
`font-dosis`	font-family: `'Dosis'`;
`font-poppins`	font-family: `'Poppins'`;

Basic usage

You can control the font-family used for your texts

font-poppins

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fugiat itaque laborum possimus quasi, necessitatibus dolor.

font-mitr

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fugiat itaque laborum possimus quasi, necessitatibus dolor.

font-roboto

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fugiat itaque laborum possimus quasi, necessitatibus dolor.

font-dosis

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fugiat itaque laborum possimus quasi, necessitatibus dolor.

Code


        <p class="font-poppins ...">Lorem ipsum dolor sit amet</p>
        <p class="font-mitr ...">Lorem ipsum dolor sit amet</p>
        <p class="font-roboto ...">Lorem ipsum dolor sit amet</p>
        <p class="font-dosis ...">Lorem ipsum dolor sit amet</p>

Heading

Class	Properties
`<h1></h1>`	font-size: `2.5rem`; /* 40px */
`<h2></h2>`	font-size: `2rem`; /* 32px */
`<h3></h3>`	font-size: `1.75rem`; /* 28px */
`<h4></h4>`	font-size: `1.5rem`; /* 24px */
`<h5></h5>`	font-size: `1.25rem`; /* 20px */
`<h6></h6>`	font-size: `1rem`; /* 16px */

Basic usage

All HTML Headings, <h1> through <h6>, are available

h1

Lorem, ipsum dolor sit amet.

h2

Lorem, ipsum dolor sit amet.

h3

Lorem, ipsum dolor sit amet.

h4

Lorem, ipsum dolor sit amet.

h5

Lorem, ipsum dolor sit amet.

h6

Lorem, ipsum dolor sit amet.

Code


        <h1>Lorem ipsum dolor sit amet</h1>
        <h2>Lorem ipsum dolor sit amet</h2>
        <h3>Lorem ipsum dolor sit amet</h3>
        <h4>Lorem ipsum dolor sit amet</h4>
        <h5>Lorem ipsum dolor sit amet</h5>
        <h6>Lorem ipsum dolor sit amet</h6>

Font-size

Class	Properties
`text-xs`	font-size: `0.75rem`; /* 12px */
`text-sm`	font-size: `0.875rem`; /* 14px */
`text-base`	font-size: `1rem`; /* 16px */
`text-lg`	font-size: `1.125rem`; /* 18px */
`text-xl`	font-size: `1.25rem`; /* 20px */
`text-2xl`	font-size: `1.5rem`; /* 24px */
`text-3xl`	font-size: `1.875rem`; /* 30px */
`text-4xl`	font-size: `2.25rem`; /* 36px */
`text-5xl`	font-size: `3rem`; /* 48px */
`text-6xl`	font-size: `3.75rem`; /* 60px */
`text-7xl`	font-size: `4.5rem`; /* 72px */
`text-8xl`	font-size: `6rem`; /* 96px */
`text-9xl`	font-size: `8rem`; /* 128px */

Basic usage

You can control the font-size of an element using 'text-{size}' class

text-xs

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fugiat itaque laborum possimus quasi, necessitatibus dolor.

text-sm

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fugiat itaque laborum possimus quasi, necessitatibus dolor.

text-base

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fugiat itaque laborum possimus quasi, necessitatibus dolor.

text-lg

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fugiat itaque laborum possimus quasi, necessitatibus dolor.

text-xl

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fugiat itaque laborum possimus quasi, necessitatibus dolor.

Code


        <p class="text-xs ...">Lorem ipsum dolor sit amet</p>
        <p class="text-sm ...">Lorem ipsum dolor sit amet</p>
        <p class="text-base ...">Lorem ipsum dolor sit amet</p>
        <p class="text-lg ...">Lorem ipsum dolor sit amet</p>
        <p class="text-xl ...">Lorem ipsum dolor sit amet</p>

Font-weight

Class	Properties
`font-thin`	font-weight: `100`;
`font-extralight`	font-weight: `200`;
`font-light`	font-weight: `300`;
`font-normal`	font-weight: `400`;
`font-medium`	font-weight: `500`;
`font-semi-bold`	font-weight: `600`;
`font-bold`	font-weight: `700`;
`font-extrabold`	font-weight: `800`;
`font-black`	font-weight: `900`;

Basic usage

You can control the font-weight of an element using 'font-{size}' class

text-thin

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fugiat itaque laborum possimus quasi, necessitatibus dolor.

text-extralight

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fugiat itaque laborum possimus quasi, necessitatibus dolor.

text-light

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fugiat itaque laborum possimus quasi, necessitatibus dolor.

text-normal

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fugiat itaque laborum possimus quasi, necessitatibus dolor.

text-medium

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fugiat itaque laborum possimus quasi, necessitatibus dolor.

text-semi-bold

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fugiat itaque laborum possimus quasi, necessitatibus dolor.

text-bold

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fugiat itaque laborum possimus quasi, necessitatibus dolor.

text-extrabold

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fugiat itaque laborum possimus quasi, necessitatibus dolor.

text-black

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fugiat itaque laborum possimus quasi, necessitatibus dolor.

Code


            <p class="font-light ...">Lorem ipsum dolor sit amet</p>
            <p class="font-normal ...">Lorem ipsum dolor sit amet</p>
            <p class="font-medium ...">Lorem ipsum dolor sit amet</p>
            <p class="font-semi-bold ...">Lorem ipsum dolor sit amet</p>
            <p class="font-bold ...">Lorem ipsum dolor sit amet</p>

Letter-spacing

Class	Properties
`letter-spacing-tighter`	letter-spacing: `-0.05em`;
`letter-spacing-tight`	letter-spacing: `-0.025em`;
`letter-spacing-normal`	letter-spacing: `0em`;
`letter-spacing-wide`	letter-spacing: `0.025em`;
`letter-spacing-wider`	letter-spacing: `0.05em`;
`letter-spacing-widest`	letter-spacing: `0.1em`;

Basic usage

You can control the letter-spacing of an element using 'letter-spacing-{size}' class

letter-spacing-tighter

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fugiat itaque laborum possimus quasi, necessitatibus dolor.

letter-spacing-normal

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fugiat itaque laborum possimus quasi, necessitatibus dolor.

letter-spacing-wide

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fugiat itaque laborum possimus quasi, necessitatibus dolor.

letter-spacing-widest

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fugiat itaque laborum possimus quasi, necessitatibus dolor.

Code


        <p class="letter-spacing-tighter ...">Lorem ipsum dolor sit amet</p>
        <p class="letter-spacing-normal ...">Lorem ipsum dolor sit amet</p>
        <p class="letter-spacing-wide ...">Lorem ipsum dolor sit amet</p>
        <p class="letter-spacing-widest ...">Lorem ipsum dolor sit amet</p>

Line-height

Class	Properties
`leading-negative`	line-height: `0.75`;
`leading-none`	line-height: `1`;
`leading-tight`	line-height: `1.25`;
`leading-snug`	line-height: `1.375`;
`leading-normal`	line-height: `1.5`;
`leading-relaxed`	line-height: `1.625`;
`leading-wide`	line-height: `2`;
`leading-3`	line-height: `0.75rem`; /* 12px */
`leading-4`	line-height: `1rem`; /* 16px */
`leading-5`	line-height: `1.25rem`; /* 20px */
`leading-6`	line-height: `1.5rem`; /* 24px */
`leading-7`	line-height: `1.75rem`; /* 28px */
`leading-8`	line-height: `2rem`; /* 32px */
`leading-9`	line-height: `2.25rem`; /* 36px */
`leading-10`	line-height: `2.5rem`; /* 40px */

Basic usage

You can control the line-height of an element using 'leading-{size}' class

leading-negative

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nam, laboriosam eos ut soluta tempore quisquam id tenetur veniam consectetur tempora repudiandae est itaque minima optio voluptas odit atque cupiditate quidem, repellat quae amet, officia voluptatibus. Nisi, obcaecati. Excepturi nemo fugiat, totam, perferendis pariatur in similique, minima nisi molestiae quo dolores.

leading-none

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nam, laboriosam eos ut soluta tempore quisquam id tenetur veniam consectetur tempora repudiandae est itaque minima optio voluptas odit atque cupiditate quidem, repellat quae amet, officia voluptatibus. Nisi, obcaecati. Excepturi nemo fugiat, totam, perferendis pariatur in similique, minima nisi molestiae quo dolores.

leading-normal

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nam, laboriosam eos ut soluta tempore quisquam id tenetur veniam consectetur tempora repudiandae est itaque minima optio voluptas odit atque cupiditate quidem, repellat quae amet, officia voluptatibus. Nisi, obcaecati. Excepturi nemo fugiat, totam, perferendis pariatur in similique, minima nisi molestiae quo dolores.

leading-wide

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nam, laboriosam eos ut soluta tempore quisquam id tenetur veniam consectetur tempora repudiandae est itaque minima optio voluptas odit atque cupiditate quidem, repellat quae amet, officia voluptatibus. Nisi, obcaecati. Excepturi nemo fugiat, totam, perferendis pariatur in similique, minima nisi molestiae quo dolores.

Code


        <p class="leading-negative ...">Lorem ipsum dolor sit amet</p>
        <p class="leading-none ...">Lorem ipsum dolor sit amet</p>
        <p class="leading-normal ...">Lorem ipsum dolor sit amet</p>
        <p class="leading-wide ...">Lorem ipsum dolor sit amet</p>

Line-clamp

Class	Properties
`line-clamp-1`	overflow: `hidden`; display: `-webkit-box`; -webkit-box-orient: `vertical`; -webkit-line-clamp: `1`;
`line-clamp-2`	overflow: `hidden`; display: `-webkit-box`; -webkit-box-orient: `vertical`; -webkit-line-clamp: `2`;
`line-clamp-3`	overflow: `hidden`; display: `-webkit-box`; -webkit-box-orient: `vertical`; -webkit-line-clamp: `3`;
`line-clamp-4`	overflow: `hidden`; display: `-webkit-box`; -webkit-box-orient: `vertical`; -webkit-line-clamp: `4`;
`line-clamp-5`	overflow: `hidden`; display: `-webkit-box`; -webkit-box-orient: `vertical`; -webkit-line-clamp: `5`;
`line-clamp-6`	overflow: `hidden`; display: `-webkit-box`; -webkit-box-orient: `vertical`; -webkit-line-clamp: `6`;
`line-clamp-none`	overflow: `visible`; display: `block`; -webkit-box-orient: `horizontal`; -webkit-line-clamp: `none`;

Basic usage

You can truncate a block of text using 'line-clamp-{number of line}' class

13 avril 2023

Title of the card

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa sequi laborum, aut earum pariatur aperiam consectetur labore voluptate illo voluptatibus porro natus voluptatum nobis sunt ipsum! Ut sint officia eos eveniet facere laboriosam obcaecati totam sequi dolorem aperiam, quidem eligendi nisi fuga incidunt voluptatibus. Molestiae, magni architecto perspiciatis hic voluptatibus, ullam officiis itaque explicabo accusamus, dignissimos odio cum! Omnis, ex.

13 avril 2023

Title of the card

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa sequi laborum, aut earum pariatur aperiam consectetur labore voluptate illo voluptatibus porro natus voluptatum nobis sunt ipsum! Ut sint officia eos eveniet facere laboriosam obcaecati totam sequi dolorem aperiam, quidem eligendi nisi fuga incidunt voluptatibus. Molestiae, magni architecto perspiciatis hic voluptatibus, ullam officiis itaque explicabo accusamus, dignissimos odio cum! Omnis, ex.

Code


        <p class="line-clamp-3 ...">Lorem ipsum dolor sit amet</p>
        <p class="line-clamp-4 ...">Lorem ipsum dolor sit amet</p>

Text-alignment

Class	Properties
`text-left`	text-align: `left`;
`text-right`	text-align: `right`;
`text-center`	text-align: `center`;
`text-justify`	text-align: `justify`;
`text-start`	text-align: `start`;
`text-end`	text-align: `end`;

Basic usage

You can the text-alignment of an element using 'text-{direction}' class

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo voluptate ut adipisci deleniti tenetur laboriosam temporibus numquam, perspiciatis, rerum, repudiandae quod. Ea consectetur, ratione deleniti natus deserunt fugiat quae! Minus?

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ea mollitia soluta repellendus inventore accusamus dolores sint suscipit, voluptate maiores dolorem libero itaque praesentium voluptates, vel, ipsum dolorum iusto consectetur! Beatae.

Code


        <p class="text-left ...">Lorem ipsum dolor sit amet</p>
        <p class="text-center ...">Lorem ipsum dolor sit amet</p>
        <p class="text-right ...">Lorem ipsum dolor sit amet</p>

Blockquote

You can control color of blockquote using 'border-{color}' into blockquote-border class

La chose la plus brave à faire lorsque tu manques de courage est d'encourager les gens à l'être et de leur donner l'exemple.

Code


        <figure>
            <div class="blockquote-border border-blue-400">
                <blockquote class="blockquote">
                    <p>La chose la plus brave à faire lorsque tu manques de courage est d'encourager les gens à l'être et de leur donner l'exemple.</p>
                </blockquote>
                <figcaption class="blockquote-footer">
                    <cite>Corra Harris</cite>
                </figcaption>
            </div>
        </figure>

Typography

Font-family

Basic usage

Code

Heading

Basic usage

Lorem, ipsum dolor sit amet.

Lorem, ipsum dolor sit amet.

Lorem, ipsum dolor sit amet.

Lorem, ipsum dolor sit amet.

Lorem, ipsum dolor sit amet.

Lorem, ipsum dolor sit amet.

Code

Font-size

Basic usage

Code

Font-weight

Basic usage

Code

Letter-spacing

Basic usage

Code

Line-height

Basic usage

Code

Line-clamp

Basic usage

Code

Text-alignment

Basic usage

Code

Blockquote

Code