Tipografia

A tipografia é usada para apresentar seu design e conteúdo da forma mais clara e eficiente possível.

Exemplos

API

⚠️ Importante

Os componentes de tipografia estão descontinuados. Procure utilizar as classes css para estilizar seu texto.

Os componentes CB1, CB2, CB3, CDisplay, CH1, CH2, CH3 e CSubtitle devem ser evitados.

Estilos de tipografia disponíveis

DISPLAY: The quick brown fox jumps over the lazy dog

H1: The quick brown fox jumps over the lazy dog

H2: The quick brown fox jumps over the lazy dog

H3: The quick brown fox jumps over the lazy dog

SUBTITLE: The quick brown fox jumps over the lazy dog

B1: The quick brown fox jumps over the lazy dog

B2: The quick brown fox jumps over the lazy dog

B3: The quick brown fox jumps over the lazy dog

BTN: The quick brown fox jumps over the lazy dog

BTN-SM: The quick brown fox jumps over the lazy dog

INPUT: The quick brown fox jumps over the lazy dog

LABEL: The quick brown fox jumps over the lazy dog

HYPERLINK: The quick brown fox jumps over the lazy dog

TAG: The quick brown fox jumps over the lazy dog

<p class="c-text-display">DISPLAY: The quick brown fox jumps over the lazy dog</p> <p class="c-text-h1">H1: The quick brown fox jumps over the lazy dog</p> <p class="c-text-h2">H2: The quick brown fox jumps over the lazy dog</p> <p class="c-text-h3">H3: The quick brown fox jumps over the lazy dog</p> <p class="c-text-subtitle">SUBTITLE: The quick brown fox jumps over the lazy dog</p> <p class="c-text-b1">B1: The quick brown fox jumps over the lazy dog</p> <p class="c-text-b2">B2: The quick brown fox jumps over the lazy dog</p> <p class="c-text-b3">B3: The quick brown fox jumps over the lazy dog</p> <p class="c-text-btn">BTN: The quick brown fox jumps over the lazy dog</p> <p class="c-text-btn-sm">BTN-SM: The quick brown fox jumps over the lazy dog</p> <p class="c-text-input">INPUT: The quick brown fox jumps over the lazy dog</p> <p class="c-text-label">LABEL: The quick brown fox jumps over the lazy dog</p> <p class="c-text-hyperlink">HYPERLINK: The quick brown fox jumps over the lazy dog</p> <p class="c-text-tag">TAG: The quick brown fox jumps over the lazy dog</p>

<p class="c-text-display">DISPLAY: The quick brown fox jumps over the lazy dog</p>
<p class="c-text-h1">H1: The quick brown fox jumps over the lazy dog</p>
<p class="c-text-h2">H2: The quick brown fox jumps over the lazy dog</p>
<p class="c-text-h3">H3: The quick brown fox jumps over the lazy dog</p>
<p class="c-text-subtitle">SUBTITLE: The quick brown fox jumps over the lazy dog</p>
<p class="c-text-b1">B1: The quick brown fox jumps over the lazy dog</p>
<p class="c-text-b2">B2: The quick brown fox jumps over the lazy dog</p>
<p class="c-text-b3">B3: The quick brown fox jumps over the lazy dog</p>
<p class="c-text-btn">BTN: The quick brown fox jumps over the lazy dog</p>
<p class="c-text-btn-sm">BTN-SM: The quick brown fox jumps over the lazy dog</p>
<p class="c-text-input">INPUT: The quick brown fox jumps over the lazy dog</p>
<p class="c-text-label">LABEL: The quick brown fox jumps over the lazy dog</p>
<p class="c-text-hyperlink">HYPERLINK: The quick brown fox jumps over the lazy dog</p>
<p class="c-text-tag">TAG: The quick brown fox jumps over the lazy dog</p>

API

Para usar as classes de tipografia é preciso primeiro importar o estilos.

import '@estrategiahq/coruja-web-ui/dist/coruja-web-ui.css'

Estilos tipográficos

Cada classe disponível configura os aspectos: tamanho da fonte, peso da fonte e altura da linha.

Essas classes já são responsivas e se adequam para o tamanho do DS Mobile em resoluções abaixo de tablet.

Desktop

Classe	Tamanho Fonte (font-size)	Espessura (font-weight)	Altura linha (line-height)	Estilos
.c-text-display	3.625rem	900	4rem	---
.c-text-h1	3rem	700	5rem	---
.c-text-h2	2.25rem	700	3rem	---
.c-text-h3	1.5rem	700	2rem	---
.c-text-subtitle	1.125rem	700	1.5rem	---
.c-text-b1	1.125rem	500	1.75rem	---
.c-text-b2	0.8125rem	500	1.5rem	---
.c-text-b3	0.6875rem	500	1rem	---
.c-text-btn	0.8125rem	700	1.5rem	---
.c-text-btn-sm	0.6875rem	500	1rem	uppercase
.c-text-input	0.8125rem	500	1.5rem	---
.c-text-label	0.8125rem	700	1.5rem	---
.c-text-hyperlink	0.8125rem	700	1.5rem	underline
.c-text-tag	0.5rem	700	1rem	---

Mobile

Classe	Tamanho Fonte (font-size)	Espessura (font-weight)	Altura linha (line-height)	Estilos
.c-text-display	3rem	900	3.5rem	---
.c-text-h1	2.25rem	700	3rem	---
.c-text-h2	1.5rem	700	2rem	---
.c-text-h3	1.125rem	700	1.75rem	---
.c-text-subtitle	1.125rem	500	1.75rem	---
.c-text-b1	0.8125rem	700	1.5rem	---
.c-text-b2	0.8125rem	500	1.5rem	---
.c-text-b3	0.6875rem	500	1rem	---
.c-text-btn	0.8125rem	700	1.5rem	---
.c-text-btn-sm	0.6875rem	500	1rem	uppercase
.c-text-input	0.8125rem	500	1.5rem	---
.c-text-label	0.8125rem	700	1.5rem	---
.c-text-hyperlink	0.8125rem	700	1.5rem	underline
.c-text-tag	0.5rem	700	1rem	---

⚠️ Importante

Os componentes de tipografia estão descontinuados. Procure utilizar as classes css para estilizar seu texto.

Os componentes CB1, CB2, CB3, CDisplay, CH1, CH2, CH3 e CSubtitle devem ser evitados.