Blocs
Mise en avant 1
Mise en avant 1 - avec une image
Taille de l'image : largeur maximum 585px
Mise en avant 1 - Image à gauche
Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression.
Mise en avant 1 - Image à droite
Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression.
Attention
Prêter votre carte CPS vous expose au risque d’usurpation de votre identité de professionnel de santé. Prêter votre carte CPS vous expose au risque qu’un individu tiers, en votre nom, consulte ou signe des documents de santé.
Mise en avant 1 - avec une image - Option Goutte
Taille de l'image : 482*446
Mise en avant 1 - Image à gauche + Option Goutte
Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression.
Mise en avant 1 - Image à droite + Option Goutte
Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression.
Mise en avant 1 - avec une vidéo
Taille de l'image : 585*329
La vidéo s'ouvre dans une modale. Il faut charger le HTML de la modale une seule fois en bas de page, après le footer. Respectez tous les ID car ils sont utilisés dans le JS.
<div class="modal fade" id="modalVideoTeaser" tabindex="-1" role="dialog" aria-hidden="true" aria-labelledby="modalVideoLabelTeaser">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title" id="modalVideoLabelTeaser">Video</h1>
<button type="button" data-dismiss="modal" class="btn btn--close btn--icon-only">
<svg class="svg-icon svg-close" aria-hidden="true" focusable="false">
<use xlink:href="svg-icons/icon-sprite.svg#close"></use>
</svg>
<span class="sr-only">Fermer : Video</span>
</button>
</div>
<div class="modal-body">
<div class="embed-responsive embed-responsive-16by9 mt-1" id="m-teaser__iframe"></div>
</div>
</div>
</div>
</div>
Mise en avant 1 - Slider
Mise en avant 1 - Slider
Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression.
Mise en avant 1 - Image à gauche + Option Goutte
Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression.
Mise en avant 1 - Vidéo à droite
Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression.
Mise en avant 1 - Fond gris
Taille de l'image : largeur maximum 535px
Mise en avant 1 - Fond gris
Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression.
Mise en avant 1 - Fond gris - Image à gauche
Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression.
Mise en avant 1 - Fond gris - Image à droite
Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression.
Mise en place
Charger les CSS suivantes :
- CSS du Système de Design
- CSS globale pour les blocs (1,9Ko - CSS)
- CSS globale pour les sliders (3,8Ko - CSS)
- CSS de la carte Vidéo (0,76Ko - CSS)
- CSS du bloc Mise en avant 1 (3Ko - CSS)
Charger les JS suivants :