Lien en vedette
Fonctionnalité instable
À être utilisé à vos propres risques. Toutes les fonctionnalités décrites ci-dessous pourraient être retirées à n'importe quelle version mineur/majeur ultérieure et l'ensemble des fonctionnalités provisoires sont exclues de l'API publique de GCWeb.
La documentation et/ou les exemples pratiques pourraient être incomplets ou être non disponible.
- Statut
- Provisoire
- Type
- Conception de Canada.ca
- Dernière revue
- 2021-07-07
- Est conforme à
- Spécifications du contenu et de l'architecture de l'information 2.1.2
- Directives
- n/a
- Nom technique
gc-featured-link
Objectif
Ceci ajoute un lien en vedette court et descriptif vers une page que votre institution doit mettre en évidence. Il doit être utilisé pour attirer l'attention sur les avertissements ou les avis.
Exemples pratiques
Lien en vedette (Provisiore v1.0)
La structure sémantique logique des en-têtes n'a pas été suivie afin de s'adapter à l'exemple pratique suivant. Vous pouvez aller directement au code source.
Code
<section class="provisional gc-featured-link">
<div class="container">
<div class="row">
<div class="col-xs-12">
<h2 class="wb-inv">En vedette</h2>
<p><a class="stretched-link" href="#">[Titre de la promotion]</a></p>
<p>Description longue [Facultatif]</p>
</div>
</div>
</div>
</section>Couleur d'arrière-plan personnalisée
Pour personnaliser la couleur d'arrière-pla, ajoutez l'attribut data-bg-color. La valeur doit être le code hexadécimal de la couleur souhaitée.
Le plugiciel appliquera automatiquement la bonne couleur au texte : #FFFFFF pour les couleurs sombres, #333333 pour les couleurs claires, #000000 pour les couleurs intermédiaires.
La structure sémantique logique des en-têtes n'a pas été suivie afin de s'adapter à chaque exemples pratiques. Vous pouvez aller directement au code source.
Exemple avec couleur sombre :
Exemple avec couleur claire :
Exemple avec couleur intermédiaire :
Code
<section class="provisional gc-featured-link" data-bg-color="#005B61">
<div class="container">
<div class="row">
<div class="col-xs-12">
<h2 class="wb-inv">En vedette</h2>
<p><a class="stretched-link" href="#">[Titre de la promotion]</a></p>
<p>Description longue [Facultatif]</p>
</div>
</div>
</div>
</section>
<section class="provisional gc-featured-link" data-bg-color="#99dade">
<div class="container">
<div class="row">
<div class="col-xs-12">
<h2 class="wb-inv">En vedette</h2>
<p><a class="stretched-link" href="#">[Titre de la promotion]</a></p>
<p>Description longue [Facultatif]</p>
</div>
</div>
</div>
</section>
<section class="provisional gc-featured-link" data-bg-color="#8F8F8F">
<div class="container">
<div class="row">
<div class="col-xs-12">
<h2 class="wb-inv">En vedette</h2>
<p><a class="stretched-link" href="#">[Titre de la promotion]</a></p>
<p>Description longue [Facultatif]</p>
</div>
</div>
</div>
</section>Modèles de conception précédents
Modèle précédent (Page d'accueil)
Modèle utilisant les "helpers":
En vedette :
<div class="bg-gctheme opct-90">
<div class="container">
<div class="row">
<div class="mrgn-tp-md mrgn-bttm-md col-xs-12">
<p class="pull-left text-white mrgn-bttm-0">En vedette : </p>
<p class="pull-left mrgn-bttm-0"><a class="stretched-link text-white" href="#">[Titre de la promotion]</a></p>
</div>
</div>
</div>
</div>
Evaluation and report
- Accessibility pre-assessment #1
- Accessibility assessment #1
Détails de la page
- Date de modification :