Styleguide

Typographie

Ajouté à la version :

Changelog:

  • 0.0.1: Ajout du composant

Les éléments ci-dessous sont juste là à titre indicatif afin de voir le rendu des éléments sans style de module. Vous pouvez utiliser cette page pour voir si des effets de bords s'appliquent aux éléments des bases.

Vous devez utiliser les styles de composants définis sur cette page : Composants de titres.

Balises de titre

Balise H1

Balise H2

Balise H3

Balise H4

Balise H5
Balise H6
<h1>Balise H1</h1>
<h2>Balise H2</h2>
<h3>Balise H3</h2>
<h4>Balise H4</h3>
<h5>Balise H5</h4>
<h6>Balise H6</h5>

Blocs de textes

L'albatros

Souvent, pour s'amuser, les hommes d'équipage prennent des albatros, vastes oiseaux des mers, qui suivent, indolents compagnons de voyage, le navire glissant sur les gouffres amers.

A peine les ont-ils déposés sur les planches, que ces rois de l'azur, maladroits et honteux, laissent piteusement leurs grandes ailes blanches comme des avirons traîner à côté d'eux.

Ce voyageur ailé, comme il est gauche et veule ! Lui, naguère si beau, qu'il est comique et laid ! L'un agace son bec avec un brûle-gueule, L'autre mime, en boitant, l'infirme qui volait !

Le Poète est semblable au prince des nuées qui hante la tempête et se rit de l'archer ; exilé sur le sol au milieu des huées, ses ailes de géant l'empêchent de marcher.

Charles Baudelaire : Les Fleurs du mal

<h1>L'albatros</h1>
<p>Souvent, pour s'amuser, les hommes d'équipage prennent des albatros, vastes oiseaux des mers, qui suivent, indolents compagnons de voyage, le navire glissant sur les gouffres amers.</p>
<p>A peine les ont-ils déposés sur les planches, que ces rois de l'azur, maladroits et honteux, laissent piteusement leurs grandes ailes blanches comme des avirons traîner à côté d'eux.</p>
<p>Ce voyageur ailé, comme il est gauche et veule ! Lui, naguère si beau, qu'il est comique et laid ! L'un agace son bec avec un brûle-gueule, L'autre mime, en boitant, l'infirme qui volait !</p>
<p>Le Poète est semblable au prince des nuées qui hante la tempête et se rit de l'archer ; exilé sur le sol au milieu des huées, ses ailes de géant l'empêchent de marcher.</p>
<p>Charles Baudelaire : <em>Les Fleurs du mal</em></p>

Éléments de typographie

Élement de lien et de lien externe

Élement abbr et abbr avec un attibut title

Élement ACRONYM

Élement b

Élement cite

Élement code

Élement data

Élement del

Élement dfn et dfn avec attribut title

Élement em

Élement i

Élement ins

Élement kbd

Élement mark

Élement q

Élement s

Élement samp

Élement small

Élement span

Élement strong

Élement sub

Élement sup

Élement

Élement u

<p>Élement de <a href="#">lien</a> et de <a href="http://example.com" target="_blank">lien externe</a></p>
<p>Élement <abbr>abbr</abbr> et <abbr title="Abbreviation">abbr</abbr> avec un attibut title</p>
<p>Élement <acronym title="Mon attribut title">ACRONYM</acronym></p>
<p>Élement <b>b</b></p>
<p>Élement <cite>cite</cite></p>
<p>Élement <code>code</code></p>
<p>Élement <data value="666">data</data></p>
<p>Élement <del>del</del></p>
<p>Élement <dfn>dfn</dfn> et <dfn title="Mon attribut title">dfn avec attribut title</dfn></p>
<p>Élement <em>em</em><p>
<p>Élement <i>i</i></p>
<p>Élement <ins>ins</ins></p>
<p>Élement <kbd>kbd</kbd></p>
<p>Élement <mark>mark</mark></p>
<p>Élement <q>q</q></p>
<p>Élement <s>s</s></p>
<p>Élement <samp>samp</samp></p>
<p>Élement <small>small</small></p>
<p>Élement <span>span</span></p>
<p>Élement <strong>strong</strong></p>
<p>Élement <sub>sub</sub></p>
<p>Élement <sup>sup</sup></p>
<p>Élement <time datatime="2005-05-15 19:00">time</time></p>
<p>Élement <u>u</u></p>

Éléments de liste

Liste ordonnée

  • Élement de liste 1
  • Élement de liste 2
  • Élement de liste 3
    • Élement de liste 3.1
    • Élement de liste 3.2
      • Élement de liste 3.2.1
      • Élement de liste 3.2.2
    • Élement de liste 3.3
  • Élement de liste 4
<ul>
  <li>Élement de liste 1</li>
  <li>Élement de liste 2</li>
  <li>Élement de liste 3
    <ul>
      <li>Élement de liste 3.1</li>
      <li>Élement de liste 3.2
        <ul>
          <li>Élement de liste 3.2.1</li>
          <li>Élement de liste 3.2.2</li>
        </ul>
      </li>
      <li>Élement de liste 3.3</li>
    </ul>
  </li>
  <li>Élement de liste 4</li>
</ul>

Liste non ordonnée

  1. Élement de liste 1
  2. Élement de liste 2
  3. Élement de liste 3
    1. Élement de liste 3.1
    2. Élement de liste 3.2
      1. Élement de liste 3.2.1
      2. Élement de liste 3.2.2
    3. Élement de liste 3.3
  4. Élement de liste 4
<ol>
  <li>Élement de liste 1</li>
  <li>Élement de liste 2</li>
  <li>Élement de liste 3
    <ol>
      <li>Élement de liste 3.1</li>
      <li>Élement de liste 3.2
        <ol>
          <li>Élement de liste 3.2.1</li>
          <li>Élement de liste 3.2.2</li>
        </ol>
      </li>
      <li>Élement de liste 3.3</li>
    </ol>
  </li>
  <li>Élement de liste 4</li>
</ol>

Liste de définition

Définition 1
Description de la défnition 1
Définition 2
Description de la défnition 2
<dl>
  <dt>Définition 1</dt>
  <dd>Description de la défnition 1</dd>
  <dt>Définition 2</dt>
  <dd>Description de la défnition 2</dd>
</dl>

Tableau

Élement caption
Table Header 1 Table Header 2 Table Header 3
Division 1 Division 2 Division 3
Division 1 Division 2 Division 3
Division 1 Division 2 Division 3
A row with a cell spanning all 3 columns
Table Footer 1 Table Footer 2 Table Footer 3
<table cellspacing="0" cellpadding="0">
  <caption>Élement caption</caption>
  <thead>
    <tr>
      <th>Table Header 1</th>
      <th>Table Header 2</th>
      <th>Table Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Division 1</td>
      <td>Division 2</td>
      <td>Division 3</td>
    </tr>
    <tr class="even">
      <td>Division 1</td>
      <td>Division 2</td>
      <td>Division 3</td>
    </tr>
    <tr>
      <td>Division 1</td>
      <td>Division 2</td>
      <td>Division 3</td>
    </tr>
    <tr>
      <td colspan="3">A row with a cell spanning all 3 columns</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th>Table Footer 1</th>
      <th>Table Footer 2</th>
      <th>Table Footer 3</th>
    </tr>
  </tfoot>
</table>