Options d'affichage :
  • font-size Titre : -title-size-small -title-size-medium -title-size-large -title-size-extra-large
  • font-size Sous-titre : -subtitle-size-small -subtitle-size-medium -subtitle-size-large -subtitle-size-extra-large
  • font-weight : -primary -secondary -tertiary

par défaut -title-size-large -primary

Titre: 24px [h2,h3,h4,h5,h6,p]

LevelTitleSection Content/Children

Remplacez-le par un composant existant ou celui que vous avez créé en utilisant le “swap instance” qui se trouve dans les propriétés du composant.

-title-size-extra-large -primary

Titre: 28px [h2,h3,h4,h5,h6,p]

LevelTitleSection Content/Children

Remplacez-le par un composant existant ou celui que vous avez créé en utilisant le “swap instance” qui se trouve dans les propriétés du composant.

-title-size-medium -primary

Titre: 20px [h2,h3,h4,h5,h6,p]

LevelTitleSection Content/Children

Remplacez-le par un composant existant ou celui que vous avez créé en utilisant le “swap instance” qui se trouve dans les propriétés du composant.

-title-size-small -primary

Titre: 18px [h2,h3,h4,h5,h6,p]

LevelTitleSection Content/Children

Remplacez-le par un composant existant ou celui que vous avez créé en utilisant le “swap instance” qui se trouve dans les propriétés du composant.

Options d'affichage d'un Titre -medium avec des graisses différentes : -primary -secondary -tertiary .

Par défaut -title-size-medium -primary

Titre: 20px [h2,h3,h4,h5,h6,p]

LevelTitleSection Content/Children

Remplacez-le par un composant existant ou celui que vous avez créé en utilisant le “swap instance” qui se trouve dans les propriétés du composant.

-title-size-medium -secondary

Titre: 20px [h2,h3,h4,h5,h6,p]

LevelTitleSection Content/Children

Remplacez-le par un composant existant ou celui que vous avez créé en utilisant le “swap instance” qui se trouve dans les propriétés du composant.

-title-size-medium -tertiary

Titre: 20px [h2,h3,h4,h5,h6,p]

LevelTitleSection Content/Children

Remplacez-le par un composant existant ou celui que vous avez créé en utilisant le “swap instance” qui se trouve dans les propriétés du composant.

Options d'affichage du sous-titre: -subtitle-size-small -subtitle-size-medium -subtitle-size-large -subtitle-size-extra-large .
Utilisable seulement pour la variante de font-weight "primary" de taille de Titre font-size -title-size-medium par défaut déclinable -title-size-small , -title-size-large et -title-size-extra-large.

Tableau de correspondance des cas -primary avec sous-titre

  • Titre -title-size-small -primary 18px avec Sous-titre -subtitle-size-small 16px
  • Titre -title-size-medium -primary 20px avec Sous-titre -subtitle-size-medium 18px ou -subtitle-size-small 16px selon la hiérarchie du sous-titre
  • Titre -title-size-large -primary 24px avec Sous-titre -subtitle-size-large 20px ou -subtitle-size-medium 18px selon la hiérarchie du sous-titre
  • Titre -title-size-extra-large -primary 28px avec Sous-titre -subtitle-size-extra-large 24px

2 Options d'encapsulage html des du sous-titres :

Option 1 - Version avec span.subtitle à l'intérieur de la balise de titre hx

NB: Préconiser l'utilisation du sous-titre à l'intérieur de la balise de titre pour une meilleure sémantique et accessibilité quand le sous-titre est lié au titre.

LevelTitleSection primary Titre (p/h2/h3) Sous-titre [h3,h4,h5,h6,p]

LevelTitleSection Content/Children

Remplacez-le par un composant existant ou celui que vous avez créé en utilisant le “swap instance” qui se trouve dans les propriétés du composant.


Option 2 - Version avec une div class .subtitle en dehors de la balise div class titre:

NB: Utiliser la version avec un div séparé pour des cas où le sous-titre est moins directement lié au titre ou pour des raisons de style.

LevelTitleSection primary Titre (p/h2/h3)

Sous-titre [h3,h4,h5,h6,p]

LevelTitleSection Content/Children

Remplacez-le par un composant existant ou celui que vous avez créé en utilisant le “swap instance” qui se trouve dans les propriétés du composant.

          

            
HTML

            


            
PUG

            
include ../../../mixins/swap-component.pug

.title-exemple 
  h4 Options d'affichage : 
    ul
      li font-size Titre : #[code -title-size-small -title-size-medium -title-size-large -title-size-extra-large]
      li font-size Sous-titre : #[code -subtitle-size-small -subtitle-size-medium -subtitle-size-large -subtitle-size-extra-large]
      li font-weight : #[code -primary -secondary -tertiary] 
  p par défaut 
    strong #[code -title-size-large -primary] 

.level-title-section.-title-size-large.-primary
  .wrapper-title
    .title
      h2 Titre: 24px [h2,h3,h4,h5,h6,p]
        button.additional-cta(type='button')
          span.sr-only Bouton [insert wording]
          i.maificon.maificon-information-cercle(aria-hidden='true')
  +swap-component(title='LevelTitleSection Content/Children')
p 
  strong #[code -title-size-extra-large -primary] 
.level-title-section.-title-size-extra-large.-primary
  .wrapper-title
    .title
      h2 Titre: 28px [h2,h3,h4,h5,h6,p]
        button.additional-cta(type='button')
          span.sr-only Bouton [insert wording]
          i.maificon.maificon-information-cercle(aria-hidden='true')
  +swap-component(title='LevelTitleSection Content/Children')
p 
  strong #[code -title-size-medium -primary] 
.level-title-section.-title-size-medium.-primary
  .wrapper-title
    .title
      h2 Titre: 20px [h2,h3,h4,h5,h6,p]
        button.additional-cta(type='button')
          span.sr-only Bouton [insert wording]
          i.maificon.maificon-information-cercle(aria-hidden='true')
  +swap-component(title='LevelTitleSection Content/Children')
p 
  strong #[code -title-size-small -primary] 
.level-title-section.-title-size-small.-primary
  .wrapper-title
    .title
      h2 Titre: 18px [h2,h3,h4,h5,h6,p]
        button.additional-cta(type='button')
          span.sr-only Bouton [insert wording]
          i.maificon.maificon-information-cercle(aria-hidden='true')
  +swap-component(title='LevelTitleSection Content/Children')


.documentation-space  

.title-exemple
  h4 Options d'affichage d'un Titre -medium avec des graisses différentes : #[code -primary -secondary -tertiary] . 
  
p Par défaut 
  strong #[code -title-size-medium -primary]
.level-title-section.-title-size-medium.-primary
  .wrapper-title
    .title
      h2 Titre: 20px [h2,h3,h4,h5,h6,p]
        button.additional-cta(type='button')
          span.sr-only Bouton [insert wording]
          i.maificon.maificon-information-cercle(aria-hidden='true')
  +swap-component(title='LevelTitleSection Content/Children')
p 
  strong #[code -title-size-medium -secondary]
.level-title-section.-title-size-medium.-secondary
  .wrapper-title
    .title
      h2 Titre: 20px [h2,h3,h4,h5,h6,p]
        button.additional-cta(type='button')
          span.sr-only Bouton [insert wording]
          i.maificon.maificon-information-cercle(aria-hidden='true')
  +swap-component(title='LevelTitleSection Content/Children')
p 
  strong #[code -title-size-medium -tertiary]
.level-title-section.-title-size-medium.-tertiary
  .wrapper-title
    .title
      h2 Titre: 20px [h2,h3,h4,h5,h6,p]
        button.additional-cta(type='button')
          span.sr-only Bouton [insert wording]
          i.maificon.maificon-information-cercle(aria-hidden='true')
  +swap-component(title='LevelTitleSection Content/Children')

.documentation-space  

.title-exemple 
  h4 Options d'affichage du sous-titre: #[code -subtitle-size-small -subtitle-size-medium -subtitle-size-large -subtitle-size-extra-large] . 
    br 
    | Utilisable seulement pour la variante de font-weight "primary" de taille de Titre 
    | font-size #[code -title-size-medium]  par défaut déclinable  #[code -title-size-small , -title-size-large] et  #[code -title-size-extra-large].

  p 
    strong Tableau de correspondance des cas -primary avec sous-titre
  ul
    li Titre #[code -title-size-small -primary]  18px avec Sous-titre #[code -subtitle-size-small] 16px   
    li Titre #[code -title-size-medium -primary] 20px avec Sous-titre #[code -subtitle-size-medium] 18px ou #[code -subtitle-size-small] 16px selon la hiérarchie du sous-titre
    li Titre #[code -title-size-large -primary] 24px avec Sous-titre #[code -subtitle-size-large] 20px ou #[code -subtitle-size-medium] 18px selon la hiérarchie du sous-titre
    li Titre #[code -title-size-extra-large -primary] 28px avec Sous-titre #[code -subtitle-size-extra-large] 24px

  p
    strong 2 Options d'encapsulage html des du sous-titres : 

  p Option 1 - Version avec 
    strong #[code span.subtitle] 
    | à l'intérieur de la balise de titre 
    strong hx

  p 
    strong NB: 
    | Préconiser l'utilisation du sous-titre à l'intérieur de la balise de titre pour une meilleure sémantique et accessibilité quand le sous-titre est lié au titre.

.level-title-section.-title-size-medium.-primary.-subtitle-size-medium
  .wrapper-title
    .title
      h2 LevelTitleSection primary Titre (p/h2/h3)
        button.additional-cta(type='button')
          span.sr-only Bouton [insert wording]
          i.maificon.maificon-information-cercle(aria-hidden='true')
        span.subtitle Sous-titre [h3,h4,h5,h6,p]
          button.additional-cta(type='button')
            span.sr-only Bouton [insert wording]
            i.maificon.maificon-information-cercle(aria-hidden='true')
  +swap-component(title='LevelTitleSection Content/Children')
br

p Option 2 - Version avec une 
  strong #[code div class .subtitle] 
  | en dehors de la balise 
  strong #[code div class titre]
  | :
p 
  strong NB: 
  | Utiliser la version avec un div séparé pour des cas où le sous-titre est moins directement lié au titre ou pour des raisons de style.

.level-title-section.-title-size-medium.-primary.-subtitle-size-medium
  .wrapper-title
    .title
      h2 LevelTitleSection primary Titre (p/h2/h3)
        button.additional-cta(type='button')
          span.sr-only Bouton [insert wording]
          i.maificon.maificon-information-cercle(aria-hidden='true')
    .subtitle 
      h3 Sous-titre [h3,h4,h5,h6,p]
        button.additional-cta(type='button')
          span.sr-only Bouton [insert wording]
          i.maificon.maificon-information-cercle(aria-hidden='true')
  +swap-component(title='LevelTitleSection Content/Children')