import { Story, Meta } from '@storybook/blocks';
import * as TypographyStories from './StylesTypographiques.stories';
import '../styles/shared.css';

<Meta title="Design Tokens/Styles typographiques" of={TypographyStories} />


<div className="header">
  <h1>Styles typographiques</h1>
  <p>Les styles typographiques disponibles dans notre Design System.</p>
</div>
<Story of={TypographyStories.Introduction} />

## Styles de titres

Les titres sont utilisés pour créer une hiérarchie visuelle dans la page, et permettent de trouver facilement une information.

<Story of={TypographyStories.HeadingStyles} />

## Styles de titres alternatifs

Pour donner une plus grande liberté éditoriale et graphique, sans nuire à la hiérarchie de l’information et au référencement nous vous proposons plusieurs niveaux de titres alternatifs (display). Vous pourrez les utiliser pour les mise en avant, les bannières, etc..
Les titres alternatifs peuvent être associés selon votre besoin à un h1, un h2, un h3 ou un h4.

<Story of={TypographyStories.DisplayHeadingStyles} />

## Corps de texte

Les styles de texte sont là pour vous aider à concevoir vos interfaces efficacement et assurer l’homogénéité entre les différents sites.

<Story of={TypographyStories.BodyTextStyles} />

## Liens et libellés

<br />

Les liens et libellés permettent de guider l'utilisateur et d'identifier clairement les éléments interactifs.

<Story of={TypographyStories.LinksAndLabels} />