Typographie

Des titres fins en Montserrat portent la page. Un mot d'accent par titre, rien en gras.

Le mot d'accent

Entourez une partie du titre d'astérisques : elle prend la couleur d'accent. Un seul passage par titre.

Comment ça marche

TSDemo.tsx

<Heading>Comment ça *marche*</Heading>

Les titres venant d'un CMS n'ont pas d'astérisques : accentLast colore alors les derniers mots.

La réalité du terrain en données

TSDemo.tsx

<Heading size="lg" accentLast={2}>
  La réalité du terrain en données
</Heading>

Tailles de titre

La size visuelle est indépendante de la balise choisie avec as : gardez un plan correct (un seul h1 par page) quel que soit le rendu.

Titres fins

TSDemo.tsx

<Heading as="p" size="display">Titres fins</Heading>
<Heading as="p" size="xl">Titres fins</Heading>
<Heading as="p" size="lg">Titres fins</Heading>
<Heading as="p" size="md">Titres fins</Heading>
<Heading as="p" size="sm">Titres fins</Heading>

Prop	Type	Défaut	Description
`as`	`"h1" \| "h2" \| … \| "h6" \| "p" \| "span"`	`"h2"`	Balise rendue, indépendante de la taille visuelle.
`size`	`"display" \| "xl" \| "lg" \| "md" \| "sm"`	`"xl"`	display : 48–72 px, xl : 36–48 px, lg : 28–36 px, md : 24 px, sm : 20 px.
`accentLast`	`number`	–	Pour une chaîne sans astérisques : nombre de derniers mots en couleur d'accent.

Texte courant

Grand, ton par défaut : une introduction.

Moyen, atténué : le corps de la page.

Petit, discret : un détail ou une aide.

TSDemo.tsx

<Text size="lg" tone="default">…</Text>
<Text>…</Text>
<Text size="sm" tone="subtle">…</Text>

Prop	Type	Défaut	Description
`as`	`ElementType`	`"p"`	Élément rendu.
`size`	`"lg" \| "md" \| "sm"`	`"md"`	18, 16 ou 14 px.
`tone`	`"default" \| "muted" \| "subtle"`	`"muted"`	Blanc, opacité 72 % ou 55 %. Le corps reste atténué pour ne pas rivaliser avec les titres.

Numéros d'étape

De grands numéros fins remplacent les icônes pour des étapes qui suivent un ordre réel. Une liste sans ordre n'a pas de numéro : la carte commence simplement par son titre.

Installer

Composer

Publier

TSDemo.tsx

{steps.map((step, i) => (
  <div key={step}>
    <StepNumber n={i + 1} />
    <Heading as="h3" size="sm">{step}</Heading>
  </div>
))}

Prop	Type	Défaut	Description
`n`	`number`	–	Numéro de l'étape, affiché sur deux chiffres.
`size`	`"md" \| "sm"`	`"md"`	48 ou 24 px.

Texte brut

plainText retire les astérisques, pour les attributs et les métadonnées. AccentText affiche l'accent dans vos propres éléments.

import { AccentText, plainText } from "trc-ui";

const title = "Comment ça *marche*";

<img alt={plainText(title)} src="…" />
<h2 className="my-title"><AccentText text={title} /></h2>