• Full Screen
  • Wide Screen
  • Narrow Screen
  • Augmenter la taille
  • Taille par défaut
  • Diminuer la taille

Typographie et styles

Envoyer Imprimer PDF

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

  1. Liste numérotée classique
  2. Ligne 2
  3. Ligne 3
  4. Ligne 4
  • Liste à puce classique
  • Ligne 2
  • Ligne 3
  • Ligne 4
  •  Liste à puce avec le style "arrow" et "icon"
  •  
  • <ul class="arrow"><li><span class="icon">&nbsp;</span>Le texte</li></ul>
  •  Liste à puce avec le style "star" et "icon"
  •  <ul class="star"><li><span class="icon">&nbsp;</span>Le texte</li></ul>
  •  
  •  Liste à puce avec le style "checklist" et "icon"
  •   <ul class="checklist"><li><span class="icon">&nbsp;</span>Le texte</li></ul>
  •  Liste à puce avec le style "phone" et "icon"
  •  <ul class="phone"><li><span class="icon">&nbsp;</span>Le texte</li></ul>
  •  
  •  Liste à puce avec le style "address" et "icon"
  •  <ul class="address"><li><span class="icon">&nbsp;</span>Le texte</li></ul>
  •  

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">&nbsp;</span>Le texte</p>

 Paragraphe avec les balises <p class="message"><span class="icon">&nbsp;</span>Le texte</p>

 Paragraphe avec les balises <p class="tips"><span class="icon">&nbsp;</span>Le texte!</p>

 Paragraphe avec les balises<p class="key"><span class="icon">&nbsp;</span>Le texte</p>

 Paragraphe avec les balises<p class="tag"><span class="icon">&nbsp;</span>Le texte</p>

 Paragraphe avec les balises<p class="cart"><span class="icon">&nbsp;</span>Le texte</p>

 Paragraphe avec les balises <p class="doc"><span class="icon">&nbsp;</span>Le texte</p>

 Paragraphe avec les balises <p class="note"><span class="icon">&nbsp;</span>Le texte</p>

 Paragraphe avec les balises <p class="photo"><span class="icon">&nbsp;</span>Le texte</p>

 Paragraphe avec les balises <p class="mobi"><span class="icon">&nbsp;</span>Le texte</p>

Styles Bubbles

 
 
 
 
<div class="bubble bubble-l1 clearfix">
<div class="box-ct">

<div class="box tl">&nbsp;</div> <div class="box tr">&nbsp;</div> <div class="box bl">&nbsp;</div> <div class="box br">&nbsp;</div>
Texte de la bulle d'information
</div>
<span class="arrow">
&nbsp;</span> <span class="author">Texte sous la bulle d'information</span>
</div>
  Texte sous la bulle d'information
<div class="bubble bubble-l2 clearfix">
<div class="box-ct">

Texte de la bulle d'information
</div>
<span class="arrow">
&nbsp;</span>
<span class="author">
Texte sous la bulle d'information</span>
</div>
  Texte sous la bulle d'information
 
 
 
 
<div class="bubble bubble-d1 clearfix">
<div class="box-ct">
<div class="box tl">
&nbsp;</div> <div class="box tr">&nbsp;</div> <div class="box bl">&nbsp;</div> <div class="box br">&nbsp;</div>
Texte de la bulle d'information
</div>
<span class="arrow">&nbsp;</span> <span class="author">
Texte sous la bulle d'information</span>
</div>
  Texte sous la bulle d'information
<div class="bubble bubble-d2 clearfix">
<div class="box-ct">

Texte de la bulle d'information
</div>
<span class="arrow">
&nbsp;</span>
<span class="author">
Texte sous la bulle d'information</span>
</div>
  Texte sous la bulle d'information
 
 
 
 
<div class="bubble bubble-hl1 clearfix">
<div class="box-ct">
<div class="box tl">
&nbsp;</div> <div class="box tr">&nbsp;</div> <div class="box bl">&nbsp;</div> <div class="box br">&nbsp;</div>
Texte de la bulle d'information
</div>
<span class="arrow">
&nbsp;</span> <span class="author">Texte sous la bulle d'information</span>
</div>
  Texte sous la bulle d'information
<div class="bubble bubble-hl2 clearfix">
<div class="box-ct">

Texte de la bulle d'information
</div>
<span class="arrow">
&nbsp;</span>
<span class="author">
Texte sous la bulle d'information</span>
</div>
  Texte sous la bulle d'information

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

 
Appliquez le suffixe suivant au module :
_badge badge-top
 
Appliquez le suffixe suivant au module :
_badge badge-new
 
Appliquez le suffixe suivant au module :
_badge badge-pick
 
Appliquez le suffixe suivant au module :
_badge badge-hot

Connexion

Identifiants

Identifiant / Mot de passe
Super Administrateur
admin / admin
Rédacteur

redacteur / redacteur
Éditeur
editeur / editeur
Travail
fifi / fifi - toto / toto
Auteurs
lulu / lulu - mama / mama
Membre
membre / membre
Vous êtes ici : Template du site Typographie et styles