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
<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
<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
Liens
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>