Styleguide

Embed

  • v.0.0.1

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.

Audio

<audio controls="">
  <source src="http://www.w3schools.com/tags/horse.ogg" type="audio/ogg">
  <source src="http://www.w3schools.com/tags/horse.mp3" type="audio/mpeg">  Your browser does not support the audio element.
</audio>

Vidéo

<video width="320" height="240" controls="">
  <source src="http://www.w3schools.com/tags/movie.mp4" type="video/mp4">
  <source src="http://www.w3schools.com/tags/movie.ogg" type="video/ogg">  Your browser does not support the video tag.
</video>

Iframe

<iframe width="640" height="360" src="https://www.youtube.com/embed/bJ9r8LMU9bQ" frameborder="0" allowfullscreen></iframe>

Formulaire

  • v.0.0.1

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 formulaire.

Legend

The Form:









Radio Buttons:




Checkboxes:






HTML5-specific Form Elements












42



350 degrees

<fieldset>
  <legend>Legend</legend>
  <p>The Form:</p>
  <form>
    <p>
      <label for="text_field">Text Field:</label>
      <br>
      <input id="text_field" type="text">
    </p>
    <p>
      <label for="text_field_disabled">Disabled Text Field:</label>
      <br>
      <input id="text_field_disabled" type="text" disabled="" value="I'm disabled">
    </p>
    <p>
      <label for="text_field_readonly">Readonly Text Field:</label>
      <br>
      <input id="text_field_readonly" type="text" readonly="" value="I'm readonly">
    </p>
    <p>
      <label for="text_area">Text Area:</label>
      <br>
      <textarea id="text_area"></textarea>
    </p>
    <p>
      <label for="text_area_disabled">Disabled Text Area:</label>
      <br>
      <textarea id="text_area_disabled" disabled="">I'm disabled</textarea>
    </p>
    <p>
      <label for="text_area">Readonly Text Area:</label>
      <br>
      <textarea id="text_area" readonly="">I'm readonly</textarea>
    </p>
    <p>
      <label for="select_element">Select Element:</label>
      <br>
      <select id="select_element">
        <optgroup label="Option Group 1">
          <option value="1">Option 1</option>
          <option value="2">Option 2</option>
        </optgroup>
        <optgroup label="Option Group 2">
          <option value="1">Option 1</option>
          <option value="2">Option 2</option>
          <option value="3" disabled="">Disabled Option</option>
        </optgroup>
      </select>
    </p>
    <p>
      <label for="select_element_disabled">Disabled Select Element:</label>
      <br>
      <select id="select_element_disabled" disabled="">
        <option value="1">Unselectable Option</option>
        <option value="2">This option should not even be seen</option>
      </select>
    </p>
    <p>Radio Buttons:
      <br>
      <label>
        <input class="radio" type="radio" name="radio_button" value="radio_1"> Radio 1
      </label>
      <br>
      <label>
        <input class="radio" type="radio" name="radio_button" value="radio_2"> Radio 2
      </label>
      <br>
      <label>
        <input class="radio" type="radio" name="radio_button" value="radio_3"> Radio 3
      </label>
      <br>
      <label>
        <input class="radio" type="radio" name="radio_button" value="radio_4" disabled=""> Radio Disabled
      </label>
      <br>
    </p>
    <p>Checkboxes:
      <br>
      <label>
        <input class="checkbox" type="checkbox" name="checkboxes" value="check_1"> Checkbox 1
      </label>
      <br>
      <label>
        <input class="checkbox" type="checkbox" name="checkboxes" value="check_2"> Checkbox 2
      </label>
      <br>
      <label>
        <input class="checkbox" type="checkbox" name="checkboxes" value="check_3"> Checkbox 3
      </label>
      <br>
      <label>
        <input class="checkbox" type="checkbox" name="checkboxes" value="check_4" disabled=""> Checkbox Disabled
      </label>
      <br>
    </p>
    <p>
      <label for="password">Password:</label>
      <br>
      <input class="password" id="password" type="password">
    </p>
    <p>
      <label for="file">File Input:</label>
      <br>
      <input class="file" id="file" type="file">
    </p>
    <h3>HTML5-specific Form Elements</h3>
    <p>
      <label for="email">Email:</label>
      <br>
      <input id="email" type="email">
    </p>
    <p>
      <label for="url">URL:</label>
      <br>
      <input id="url" type="url">
    </p>
    <p>
      <label for="tel">Telephone:</label>
      <br>
      <input id="tel" type="tel">
    </p>
    <p>
      <label for="number">Number:</label>
      <br>
      <input id="number" type="number" min="0" max="10" step="1" value="5">
    </p>
    <p>
      <label for="search">Search:</label>
      <br>
      <input id="search" type="search">
    </p>
    <p>
      <label for="date">Date:</label>
      <br>
      <input id="date" type="date">
    </p>
    <p>
      <label for="time">Time:</label>
      <br>
      <input id="time" type="time">
    </p>
    <p>
      <label for="color">Color:</label>
      <br>
      <input id="color" type="color">
    </p>
    <p>
      <label for="datalist">Datalist:</label>
      <br>
      <input id="datalist" list="browsers" name="browser" type="datalist">
      <datalist id="browsers">
        <option value="Internet Explorer"></option>
        <option value="Firefox"></option>
        <option value="Chrome"></option>
        <option value="Opera"></option>
        <option value="Safari"></option>
      </datalist>
    </p>
    <p>
      <label for="range">Range:</label>
      <br>
      <input id="range" type="range" name="points" min="1" max="10">
    </p>
    <p>
      <label for="output">Output:</label>
      <br>
      <output id="output" name="result">42</output>
    </p>
    <p>
      <label for="progress">Progress:</label>
      <br>
      <progress id="progress" value="65" max="100"></progress>
    </p>
    <p>
      <label for="meter">Meter:</label>
      <br>
      <meter id="meter" min="200" max="500" value="350">350 degrees</meter>
    </p>
    <p>
      <button>Button Element</button>
    </p>
    <p>
      <input type="reset" value="Clear">
    </p>
    <p>
      <input type="submit" value="Submit">
    </p>
  </form>
</fieldset>

Typographie

  • v.0.0.1

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>