Sélection de la langue

Recherche


Nouveautés - Configuration de conception de Canada.ca: Système de conception de Canada.ca

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">Salle de presse de l’ARC</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.
  • 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.

Détails de la page

Date de modification :