Cette page vous présente les différents éléments de typographie et styles applicables grâce au template JA Purity II.
Styles des titres
Titre 1
Balise appliquée : <h1>Le texte</h1>
Titre 2
Balise appliquée : <h2>Le texte</h2>
Titre 3
Balise appliquée : <h3>Le texte</h3>
Titre 4
Balise appliquée : <h4>Le texte</h4>
Titre 5
Balise appliquée : <h5>Le texte</h5>
Titre 4
Balise appliquée : <h6>Le texte</h6>
Styles speciaux
Bloc de texte avec les balises : <pre>Le texte</pre> ou <div class="code">Le texte</div>
#ja-rightcol {
width: 180px;
float: right;
color: #EEEEEE;
}
Balise appliquée : <span class="highlight">Le texte</span>
Exemple de texte en style highlight
Lettrine appliquée en début de phrase par la balise <span class="dropcap">La lettre</span>. Lorem ipsum dolor sit amet consectetuer at elit augue In lorem. Quis Donec libero at Vivamus mi fringilla neque commodo at vitae. A mauris risus consequat ac egestas netus est Vestibulum Curabitur consectetuer. Lorem ipsum dolor sit amet consectetuer at elit augue In lorem. Quis Donec libero at Vivamus mi fringilla neque commodo at vitae. A mauris risus consequat ac egestas netus est Vestibulum Curabitur consectetuer.
Balises appliquées au bloc de texte et à la 1ère lettre : <blockquote><span class="open">L</span>e texte</blockquote>
Balises appliquées au bloc de texte et, à la 1ère et dernière lettre <blockquote><span class="open">L</span>e text<span class="close">e</span></blockquote> pour fermer le bloc
Styles des listes
|
|
|
|
01Bloc de texte avec les balises : <p class="blocknumber-1"><span class="bignumber">01</span>Le texte à mettre de préférence sur deux lignes pour séparer les blocs</p>
02Bloc de texte identique avec le chiffre 2 : <p class="blocknumber-1"><span class="bignumber">02</span>Le texte à mettre de préférence sur deux lignes pour séparer les blocs</p>
01Bloc de texte avec les balises : <p class="blocknumber-2"><span class="bignumber">01</span>Le texte à mettre de préférence sur deux lignes pour séparer les blocs</p>
02Bloc de texte identique avec le chiffre 2 : <p class="blocknumber-2"><span class="bignumber">02</span>Le texte à mettre de préférence sur deux lignes pour séparer les blocs</p>
01Bloc de texte avec les balises : <p class="blocknumber-3"><span class="bignumber">01</span>Le texte à mettre de préférence sur deux lignes pour séparer les blocs</p>
02Bloc de texte identique avec le chiffre 2 : <p class="blocknumber-3"><span class="bignumber">02</span>Le texte à mettre de préférence sur deux lignes pour séparer les blocs</p>
Styles de paragraphe
Paragraphe avec les balises <p class="error"><span class="icon"> </span>Le texte</p>
Paragraphe avec les balises <p class="tips"><span class="icon"> </span>Le texte!</p>
Paragraphe avec les balises<p class="key"><span class="icon"> </span>Le texte</p>
Paragraphe avec les balises<p class="tag"><span class="icon"> </span>Le texte</p>
Paragraphe avec les balises<p class="cart"><span class="icon"> </span>Le texte</p>
Paragraphe avec les balises <p class="doc"><span class="icon"> </span>Le texte</p>
Paragraphe avec les balises <p class="note"><span class="icon"> </span>Le texte</p>
Paragraphe avec les balises <p class="photo"><span class="icon"> </span>Le texte</p>
Paragraphe avec les balises <p class="mobi"><span class="icon"> </span>Le texte</p>
Styles Bubbles
<div class="box-ct">
<div class="box tl"> </div> <div class="box tr"> </div> <div class="box bl"> </div> <div class="box br"> </div>
Texte de la bulle d'information
</div>
<span class="arrow"> </span> <span class="author">Texte sous la bulle d'information</span>
</div>
<div class="box-ct">
Texte de la bulle d'information
</div>
<span class="arrow"> </span>
<span class="author">Texte sous la bulle d'information</span>
</div>
<div class="box-ct">
<div class="box tl"> </div> <div class="box tr"> </div> <div class="box bl"> </div> <div class="box br"> </div>
Texte de la bulle d'information
</div>
<span class="arrow"> </span> <span class="author">Texte sous la bulle d'information</span>
</div>
<div class="box-ct">
Texte de la bulle d'information
</div>
<span class="arrow"> </span>
<span class="author">Texte sous la bulle d'information</span>
</div>
<div class="box-ct">
<div class="box tl"> </div> <div class="box tr"> </div> <div class="box bl"> </div> <div class="box br"> </div>
Texte de la bulle d'information
</div>
<span class="arrow"> </span> <span class="author">Texte sous la bulle d'information</span>
</div>
<div class="box-ct">
Texte de la bulle d'information
</div>
<span class="arrow"> </span>
<span class="author">Texte sous la bulle d'information</span>
</div>
Styles Blocs de texte et Légendes
Balise appliquée : <p class="box-sticky">Texte du bloc</p>
Balise appliquée : <p class="box-download">Texte du bloc</p>
Balise appliquée : <p class="box-grey">Texte du bloc</p>
Balise appliquée : <p class="box-hilite">Texte du bloc</p>
Style legend
Balises appliquées : <div class="legend"><h3 class="legend-title">Texte du titre</h3><p>Lorem ipsum dolor sit amet consectetuer at elit augue In lorem. Quis Donec libero at Vivamus mi fringilla neque commodo at vitae. A mauris risus consequat ac egestas netus est Vestibulum Curabitur consectetuer.</p></div>
Style legend & highlight
Balises appliquées : <div class="legend-hilite"><h3 class="legend-title">Texte du titre</h3><p>Lorem ipsum dolor sit amet consectetuer at elit augue In lorem. Quis Donec libero at Vivamus mi fringilla neque commodo at vitae. A mauris risus consequat ac egestas netus est Vestibulum Curabitur consectetuer.</p></div>
Styles spéciaux pour modules
_badge badge-top
_badge badge-new
_badge badge-pick
_badge badge-hot
< Précédent | Suivant > |
---|