Documentation au sujet de la page de profil des ministres
- Statut
- Stable
- Type
- Gabarit de Canada.ca
- Dernière revue
- 2021-10-13
- Est conforme à
- Spécifications du contenu et de l'architecture de l'information 2.1
- Spécification
- Pages de profil des ministres - Modèle obligatoire de Canada.ca
- Version du gabarit
- Version 2.0
Exemples pratiques
Journée d'assermentation
Mise en page (Version 2.0)
Changements:
- En vedette - Ajouté
- Fil Twitter - Supprimé
- Nouveautés - Supprimé
- Activités récentes - Supprimé
- Galerie - Supprimé
- Titre
Ref: 1 - Photo
Ref: 2 - Intro
Ref: 3, 4 and 5 - En vedette
Ref: 6
<!-- Titre [Réf: 1] -->
<div class="row">
<div class="col-3">
<!-- Intro - photo du ou de la ministre [Ref: 2] -->
</div>
<div class="col-9">
<!-- Intro - Texte [Ref: 3 and 4] -->
<!-- Coordonnées [Ref: 5] -->
</div>
</div>
<!-- Promotions contextuelles (Version 4.0 - 1-col; 2-col; 3-col; ) [Ref: 6] -->Profil des ministres - journée d'assermentation
Basé sur la version 2.0 en excluant Intro #3 (liste), #5 et En vedette #6 et en ajouter la classe mrgn-tp-lg au premier paragraphe.
Mise en page (Version 1.0)
- Titre
Ref: 1 - Photo
Ref: 2 - Intro
Ref: 3, 4, and 5 - Fil Twitter
Ref: 6 - Nouveautés
Ref: 7 - Activités récentes
Ref: 8 - Galerie
Ref: 9
<!-- Titre [Réf: 1] -->
<div class="row">
<div class="col-md-3">
<!-- Intro - Photo du Ministre [Ref: 2] -->
</div>
<div class="col-md-6">
<!-- Intro - Texte [Réf: 3 and 4] -->
<!-- Contact us [Réf: 5] -->
</div>
<div class="col-md-3">
<!-- Fil Twitter [Réf: 6] -->
</div>
</div>
<div class="row">
<div class="col-sm-12">
<!-- Nouveautés [Réf: 7] -->
</div>
</div>
<section>
<!-- Activités récentes [Réf: 8] -->
</section>
<section>
<!-- Galerie [Réf: 9] -->
</section>Composants
Titre
- Version courante:
- 1.1 (en date du 2021-10-06)
- Changement :
- Addition de la config 3
Configuration
- [Config 1] Ministre
- [Config 2] Secrétaire parlementaire
- [Config 3] Chef de l'institution ou de l'organisation
Sémantique
Titre niveau 1 :
<h1></h1>
Modèle d'interaction
N/A
Style
N/A
Données statiques:
- [Config 1] Ministre
- L’honorable
- , député
- [Config 2] Secrétaire parlementaire
- [Config 3] Chef de l'institution ou de l'organisation
Schéma
- [Config 1] Ministre
- Nom du ministre
- [Config 2] Secrétaire parlementaire
- Nom du secrétaire parlementaire
- [Config 3] Chef de l'institution ou de l'organisation
- Nom du chef de l'institution ou de l'organisation
Mise en page
N/A
Contexte d'utilisation
Dans le modèle de page de profil des ministres.
Photo
Version 1.0
Style
- Classes
img-responsive
Sémantique
Balise d'image :
<img src="" >Intro
Version 1.0
Code
<p class="mrgn-tp-lg"><strong>Ministre de <a href="#">[nom du portefeuille no1]</a> et <a href="#">[nom du portefeuille no2]</a></strong></p>
<p>Représente la circonscription de <a href="#">[nom de la circonscription]</a></p>
<ul>
<li><a href="#">Lettre de mandat adressées aux ministres</a></li>
<li><a href="#">Cahier de breffage ministériel</a></li>
<li><a href="#">Nomination ministérielle</a></li>
</ul>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore amet ducimus nihil, voluptate quibusdam? Excepturi in aspernatur rem ipsam aperiam voluptates fugit officiis culpa, ratione, et maxime impedit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore amet ducimus nihil, voluptate quibusdam? Excepturi in aspernatur rem ipsam aperiam voluptates fugit officiis culpa, ratione, et maxime impedit.</p>
<section>
<h2>Coordonnées</h2>
<p> Chambre des communes<br>
Ottawa (Ontario) K1A 0A6<br>
<strong>Téléphone :</strong> 123-456-7890<br>
<strong>Courriel :</strong> <a href="mailto:">[prénom.nom@canada.ca]</a> <span class="glyphicon glyphicon-envelope"></span></p>
</section>Nouveautés - [Obsolète depuis la V2.0]
Version 1.0
Sémantique
Code
<div class="col-sm-12">
<section>
<h2>Nouveautés</h2>
<div class="gc-nws row">
<div class="col-md-8">
<div class="row">
<div class="col-md-6">
<a href="#">
<img src="./img/360x203.png" alt="" class="img-responsive thumbnail">
<p>[Titre de l’article]</p>
</a>
<p><small class="text-muted"><time>2018-06-05 19:00</time> - Type de produit médiatique</small><br>
Brève description de la nouvelle.</p>
</div>
<div class="col-md-6">
<a href="#">
<img src="./img/360x203.png" alt="" class= "img-responsive thumbnail">
<p>[Titre de l’article]</p>
</a>
<p><small class="text-muted"><time>2018-06-05 19:00</time> - Type de produit médiatique</small><br> Brève description de la nouvelle.</p>
</div>
</div>
</div>
<div class="wb-feeds limit-3 col-md-4">
<ul class="feeds-cont list-unstyled lst-spcd">
<li> <a href="http://news.gc.ca/web/fd-fr.do?mthd=dpt&ft=atom&crtr.dpt1D=6675" rel="external">Nouvelles du Gouvernement du Canada </a> </li>
</ul>
<p class="text-right"><strong><a href="#">Toutes les nouvelles</a></strong></p>
</div>
</div>
</section>
</div>Activités récentes - [Obsolète depuis la V2.0]
Version 1.0
Sémantique
Code
<section>
<h2>Activités récentes</h2>
<div class="row">
<section class="col-sm-4">
<h3>Initiatives</h3>
<ul class="lst-spcd">
<li><a href="#">[Initiatives 1]</a></li>
<li><a href="#">[Initiatives 2 contenant un texte plus long à insérer]</a></li>
<li><a href="#">[Initiatives 3]</a></li>
<li><a href="#">[Initiatives 4 contenant un texte plus long à insérer]</a></li>
</ul>
</section>
<section class="col-sm-4">
<h3>Discours</h3>
<ul class="lst-spcd">
<li><a href="#">[Discours 1]</a></li>
<li><a href="#">[Discours 2 contenant un texte plus long à insérer]</a></li>
<li><a href="#">[Discours 3]</a></li>
<li><a href="#">[Discours 4 contenant un texte plus long à insérer]</a></li>
</ul>
</section>
<section class="col-sm-4">
<h3>Avis aux médias</h3>
<ul class="lst-spcd">
<li><a href="#">[Avis aux médias 1]</a></li>
<li><a href="#">[Avis aux médias 2 contenant un texte plus long à insérer]</a></li>
<li><a href="#">[Avis aux médias 3]</a></li>
<li><a href="#">[Avis aux médias 4 contenant un texte plus long à insérer]</a></li>
</ul>
</section>
</div>
</section>Gallerie - [Obsolète depuis la V2.0]
Version 1.0
Sémantique
Code
<section>
<h2>Galerie</h2>
<div class="row">
<div class="col-lg-3 col-md-6 mrgn-bttm-lg">
<a href="#">
<figure>
<img src="./img/250x250.png" alt="" class="img-responsive thumbnail mrgn-bttm-sm">
<figcaption>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum, fugiat!</figcaption>
</figure>
</a>
</div>
<div class="col-lg-3 col-md-6 mrgn-bttm-lg">
<a href="#">
<figure>
<img src="./img/250x250.png" alt="" class="img-responsive thumbnail mrgn-bttm-sm">
<figcaption>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum, fugiat!</figcaption>
</figure>
</a>
</div>
<div class="col-lg-3 col-md-6 mrgn-bttm-lg">
<a href="#">
<figure>
<img src="./img/250x250.png" alt="" class="img-responsive thumbnail mrgn-bttm-sm">
<figcaption>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum, fugiat!</figcaption>
</figure>
</a>
</div>
<div class="col-lg-3 col-md-6 mrgn-bttm-lg">
<a href="#">
<figure>
<img src="./img/250x250.png" alt="" class="img-responsive thumbnail mrgn-bttm-sm">
<figcaption>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum, fugiat!</figcaption>
</figure>
</a>
</div>
</div>
<p><strong><a href="#">Toutes les photos et vidéos</a></strong></p>
</section>Raport et évaluation
Il n'y aucun raport ou évaluation disponible pour ce gabarit.
Détails de la page
- Date de modification :