Charte

Titres

Titre 1

Titre 2

Titre 3

Titre 4

Titre 5
Titre 6
<h1 class="title-1">Titre 1</h1>
<h2 class="title-2">Titre 2</h2>
<h3 class="title-3">Titre 3</h3>
<h4 class="title-4">Titre 4</h4>
<h5 class="title-5">Titre 5</h5>
<h6 class="title-6">Titre 6</h6>

Couleurs

Couleur 1
Couleur 2
Couleur 2 inversée
Couleur 3
Couleur 4
Couleur 5
Couleur 6
Couleur Erreur
Couleur Succès

Formulaires

<form class="forms" action="" method="post"></form>

Boutons radio

Civilité
<div class="fields radio-fields">
<span class="labels">Civilité</span>
<div class="radio-group">
<div class="radio-item">
<input type="radio" class="input-radio" name="gender" value="m" checked="checked" />
<span class="shape"></span>
</div>
<label for="man" class="labels">Monsieur</label>
</div>
</div>

Cases à cocher

Compétences
<div class="fields checkbox-fields">
<span class="labels">Compétences</span>
<div class="checkbox-group">
<div class="checkbox-item">
<input type="checkbox" class="input-checkbox" name="gender" value="html" />
<span class="shape"></span>
</div>
<label for="html" class="labels">HTML</label>
</div>
</div>

Boites de sélection

<div class="fields select-fields">
<select class="input-select" name="job" data-error-label="job" required>
<option value="">Sélectionnez votre métier</option>
<option value="1">Chef de Projet</option>
</select>
</div>

Champs texte

<div class="fields text-fields">
<label for="email" class="labels">Email<span class="labels-required">*</span></label>
<input type="email" class="input-text" name="email" data-error-label="email" value="" required />
</div>
<ul class="form-errors">
<li class="form-error">Veuillez renseigner votre nom</li>
</ul>

Champs inline

<div class="fields text-fields inline">
<label for="lastname" class="labels">Nom de famille<span class="labels-required">*</span></label>
<input type="text" id="lastname" class="input-text" name="lastname" data-error-label="lastname" value="" required />
</div>

Champs avec placeholders

<div class="fields text-fields">
<label for="zipcode" class="labels-placeholder">Code postal<span class="labels-required">*</span></label>
<input type="text" id="zipcode" class="input-text" name="zipcode" data-error-label="zipcode" maxlength="5" value="" required />
</div>

Champ date

<div class="fields date-fields">
<label for="birthdate" class="labels">Date de naissance<span class="labels-required">*</span></label>
<input type="text" id="birthdate" class="input-date" name="birthdate" data-error-label="birthdate" placeholder="jj/mm/aaaa" maxlength="10" value="" required />
</div>

Champ désactivé

<div class="fields text-fields disabled">
<label for="disabled-field" class="labels">Champ désactivé</label>
<input type="text" id="disabled-field" class="input-text" name="disabled_field" data-error-label="firstname" value="" />
</div>

Boutons

<div class="fields button-fields">
<input type="submit" class="input-button btns btn-1" value="Valider" />
<input type="reset" class="input-button btns btn-3" value="Annuler" />
</div>

Boutons

Bouton 1 Bouton 2 Bouton 3
<a href="#" class="btns btn-1">Bouton 1</a>
<a href="#" class="btns btn-2">Bouton 2</a>
<a href="#" class="btns btn-3">Bouton 3</a>

Liens

Lien 1

Lien 2

Lien 3

Lien 4

<a href="#" class="links link-1">Lien 1</a>
<a href="#" class="links link-2">Lien 2</a>
<a href="#" class="links link-3">Lien 3</a>
<a href="#" class="links link-4">Lien 4</a>

Tooltip

Ceci est un tooltip En informatique, une infobulle est un message qui apparaît en surimpression lors du passage du pointeur de la souris sur certains éléments de l'interface graphique. Source : Wikipedia ! Et en voici un autre Nouveau contenu ! .

<p>
    Ceci est un
    <span class="tooltip">
        <b>tooltip</b>
        <span class="tooltip-content">
            Contenu du tooltip
        </span>
    </span>
</p>