Nouveautés - Configuration de conception de Canada.ca

De : Secrétariat du Conseil du Trésor du Canada

Le modèle « Nouveautés » comprend les éléments de nouvelles les plus récents affichés par l’institution, l’organisation ou l’entité.

Sur cette page

Quand l'utiliser

Utilisez ce modèle dans les gabarits suivants :

Quoi éviter

Assurez-vous que ce modèle n'interfère pas avec le contenu de la tâche principale.

Comment mettre en œuvre

Vous pouvez utiliser soit la version bêta ou la version stable de ce modèle.

Nouveautés bêta

La version bêta est utilisée à la page d'accueil institutionnelle. Le code est toujours en révision. Il se peut que des modifications mineures y soient apportées.

La version bêta remplacera à terme la version stable.

Code
<div class="row col-lg-12">
	<section class="col-md-4 wb-feeds limit-3 gc-nws">
	 <h2 class="h3">Nouvelles</h2>
	<!-- demonstrate the look - use json feed where applicable -->
	<ul class="feeds-cont list-unstyled lst-spcd feed-active">
	 <li><a href="#">[Titre nouvelle]</a><br> <small class="feeds-date">AAAA-MM-JJ HH:MM</small></li>
	 <li><a href="#">[Titre nouvelle]]</a><br> <small class="feeds-date">AAAA-MM-JJ HH:MM</small></li>
	 <li><a href="#">[Titre nouvelle]]</a><br> <small class="feeds-date">AAAA-MM-JJ HH:MM</small></li>
	</ul>
	<!-- json feed for news example
	<ul class="feeds-cont list-unstyled lst-spcd">
	 <li> <a data-ajax="https://www.canada.ca/content/canadasite/api/nws/fds/en/web-feeds/revenue-agency.json" href="https://www.canada.ca/en/revenue-agency.atom.xml" rel="external">Canada Revenue Agency news items</a> </li>
	 </ul>
	-->
	<p>En savoir plus: <a href="#" class="admin">Nouvelles de [Institution]</a></p>
	</section>
	<section class="col-md-8 gc-prtts">
	 <h2 class="h3">En vedette</h2>
	  <div class="row wb-eqht">
	   <div class="col-md-6 mrgn-bttm-md">
	    <a class="figcaption hght-inhrt" href="#">
	     <figure class="well well-sm brdr-rds-0 hght-inhrt"><img class="img-responsive full-width" alt="#" src="https://wet-boew.github.io/themes-dist/GCWeb/img/360x203.png">
	      <figcaption class="h5">[Hyperlien de l'élément]</figcaption>
	        <p>Brève description de l'élément en vedette.</p>
	        </figure>
	       </a>
	      </div>
	    <div class="col-md-6 mrgn-bttm-md">
	     <a class="figcaption hght-inhrt" href="https://www.canada.ca/en/revenue-agency/campaigns/my-benefits-credits.html">
	     <figure class="well well-sm brdr-rds-0 hght-inhrt"><img class="img-responsive full-width" alt="#" src="https://wet-boew.github.io/themes-dist/GCWeb/img/360x203.png">
	      <figcaption class="h5">[Hyperlien de l'élément]</figcaption>
	      <p>Brève description de l'élément en vedette.</p>
	        </figure>
	     </a>
	     </div>
	    </div>
	  </section>
	 </div>
	</div>

Nouveautés stable

La version bêta remplacera à terme la version stable.

Directives de la version stable pour les nouveautés
  • Elle présente les éléments de nouvelles les plus récents affichés par l’entité.
  • L’étiquette de l’en-tête est « Nouveautés ».
  • Deux des éléments de nouvelles doivent comprendre une image, un titre assorti d’un hyperlien, des renseignements supplémentaires et un texte descriptif :
    • Peut comprendre du contenu promotionnel, et être priorisé à la discrétion de l’institution
    • Le texte de la description doit être court et concis.
    • Si plus de deux images sont requises, elles peuvent être affichées au moyen d’un carrousel.
    • Si le format de carrousel est utilisé, utilisez la configuration Carrousels.
  • Les types de produits liés aux nouvelles affichés comme texte seulement se limitent à ceux affichés sur nouvelles.gc.ca :
    • Avis aux médias
    • Documents d’information
    • Communiqués de presse
    • Discours
    • Déclarations
  • Veuillez consulter la page GitHub sur Canada.ca pour obtenir des détails sur le redimensionnement d’image.

Exemple concret

Exemples

Modèle des nouveautés avec deux images
Capture d’écran illustrant le modèle des dernières nouvelles avec deux images dans le site Canada.ca. Plus de détails au sujet de ce graphique se retrouvent dans le texte entourant l’image.
Modèle des nouveautés avec carrousel
Capture d’écran illustrant le modèle des dernières nouvelles avec carrousel dans le site Canada.ca. Plus de détails au sujet de ce graphique se retrouvent dans le texte entourant l’image.

Discussion

Discutez de ce modèle dans GitHub

Date de modification :