Services et renseignements - Exemples pratiques
Structure des en-têtes
La structure sémantique logique des en-têtes n'a pas été suivie afin de s'adapter aux exemples pratiques suivants.
Exemple 1: disposition sur 3 colonnes
Services et renseignements
[Texte de l'hyperlien du sous-thème]
Résumé des informations ou des tâches pouvant être accomplies sur la page du sous-thème. Supprimez la prose ou les messages promotionnels. Utilisez des verbes d'action.
[Texte de l'hyperlien du sous-thème]
Résumé des informations ou des tâches pouvant être accomplies sur la page du sous-thème. Supprimez la prose ou les messages promotionnels. Utilisez des verbes d'action.
[Texte de l'hyperlien du sous-thème]
Résumé des informations ou des tâches pouvant être accomplies sur la page du sous-thème. Supprimez la prose ou les messages promotionnels. Utilisez des verbes d'action.
[Texte de l'hyperlien du sous-thème]
Résumé des informations ou des tâches pouvant être accomplies sur la page du sous-thème. Supprimez la prose ou les messages promotionnels. Utilisez des verbes d'action.
[Texte de l'hyperlien du sous-thème]
Résumé des informations ou des tâches pouvant être accomplies sur la page du sous-thème. Supprimez la prose ou les messages promotionnels. Utilisez des verbes d'action.
[Texte de l'hyperlien du sous-thème]
Résumé des informations ou des tâches pouvant être accomplies sur la page du sous-thème. Supprimez la prose ou les messages promotionnels. Utilisez des verbes d'action.
Code
<section class="gc-srvinfo">
<h2>Services et renseignements</h2>
<div class="wb-eqht row">
<div class="col-md-6 col-lg-4">
<h3><a href="#">[Texte de l'hyperlien du sous-thème]</a></h3>
<p>Résumé des informations ou des tâches pouvant être accomplies sur la page du sous-thème. Supprimez la prose ou les messages promotionnels. Utilisez des verbes d'action.</p>
</div>
<div class="col-md-6 col-lg-4">
<h3><a href="#">[Texte de l'hyperlien du sous-thème]</a></h3>
<p>Résumé des informations ou des tâches pouvant être accomplies sur la page du sous-thème. Supprimez la prose ou les messages promotionnels. Utilisez des verbes d'action.</p>
</div>
<div class="col-md-6 col-lg-4">
<h3><a href="#">[Texte de l'hyperlien du sous-thème]</a></h3>
<p>Résumé des informations ou des tâches pouvant être accomplies sur la page du sous-thème. Supprimez la prose ou les messages promotionnels. Utilisez des verbes d'action.</p>
</div>
<div class="col-md-6 col-lg-4">
<h3><a href="#">[Texte de l'hyperlien du sous-thème]</a></h3>
<p>Résumé des informations ou des tâches pouvant être accomplies sur la page du sous-thème. Supprimez la prose ou les messages promotionnels. Utilisez des verbes d'action.</p>
</div>
<div class="col-md-6 col-lg-4">
<h3><a href="#">[Texte de l'hyperlien du sous-thème]</a></h3>
<p>Résumé des informations ou des tâches pouvant être accomplies sur la page du sous-thème. Supprimez la prose ou les messages promotionnels. Utilisez des verbes d'action.</p>
</div>
<div class="col-md-6 col-lg-4">
<h3><a href="#">[Texte de l'hyperlien du sous-thème]</a></h3>
<p>Résumé des informations ou des tâches pouvant être accomplies sur la page du sous-thème. Supprimez la prose ou les messages promotionnels. Utilisez des verbes d'action.</p>
</div>
</div>
</section>Exemple 2: disposition sur 2 colonnes
Services et renseignements
[Texte de l'hyperlien du sous-thème]
Résumé des informations ou des tâches pouvant être accomplies sur la page du sous-thème. Supprimez la prose ou les messages promotionnels. Utilisez des verbes d'action.
[Texte de l'hyperlien du sous-thème]
Résumé des informations ou des tâches pouvant être accomplies sur la page du sous-thème. Supprimez la prose ou les messages promotionnels. Utilisez des verbes d'action.
[Texte de l'hyperlien du sous-thème]
Résumé des informations ou des tâches pouvant être accomplies sur la page du sous-thème. Supprimez la prose ou les messages promotionnels. Utilisez des verbes d'action.
[Texte de l'hyperlien du sous-thème]
Résumé des informations ou des tâches pouvant être accomplies sur la page du sous-thème. Supprimez la prose ou les messages promotionnels. Utilisez des verbes d'action.
Code
<section class="gc-srvinfo">
<h2>Services et renseignements</h2>
<div class="wb-eqht row">
<div class="col-md-6">
<h3><a href="#">[Texte de l'hyperlien du sous-thème]</a></h3>
<p>Résumé des informations ou des tâches pouvant être accomplies sur la page du sous-thème. Supprimez la prose ou les messages promotionnels. Utilisez des verbes d'action.</p>
</div>
<div class="col-md-6">
<h3><a href="#">[Texte de l'hyperlien du sous-thème]</a></h3>
<p>Résumé des informations ou des tâches pouvant être accomplies sur la page du sous-thème. Supprimez la prose ou les messages promotionnels. Utilisez des verbes d'action.</p>
</div>
<div class="col-md-6">
<h3><a href="#">[Texte de l'hyperlien du sous-thème]</a></h3>
<p>Résumé des informations ou des tâches pouvant être accomplies sur la page du sous-thème. Supprimez la prose ou les messages promotionnels. Utilisez des verbes d'action.</p>
</div>
<div class="col-md-6">
<h3><a href="#">[Texte de l'hyperlien du sous-thème]</a></h3>
<p>Résumé des informations ou des tâches pouvant être accomplies sur la page du sous-thème. Supprimez la prose ou les messages promotionnels. Utilisez des verbes d'action.</p>
</div>
</div>
</section>Exemple 3: disposition sur 1 colonne
Services et renseignements
[Texte de l'hyperlien du sous-thème]
Résumé des informations ou des tâches pouvant être accomplies sur la page du sous-thème. Supprimez la prose ou les messages promotionnels. Utilisez des verbes d'action.
[Texte de l'hyperlien du sous-thème]
Résumé des informations ou des tâches pouvant être accomplies sur la page du sous-thème. Supprimez la prose ou les messages promotionnels. Utilisez des verbes d'action.
[Texte de l'hyperlien du sous-thème]
Résumé des informations ou des tâches pouvant être accomplies sur la page du sous-thème. Supprimez la prose ou les messages promotionnels. Utilisez des verbes d'action.
Code
<section class="gc-srvinfo">
<h3><a href="#">[Texte de l'hyperlien du sous-thème]</a></h3>
<p>Résumé des informations ou des tâches pouvant être accomplies sur la page du sous-thème. Supprimez la prose ou les messages promotionnels. Utilisez des verbes d'action.</p>
<h3><a href="#">[Texte de l'hyperlien du sous-thème]</a></h3>
<p>Résumé des informations ou des tâches pouvant être accomplies sur la page du sous-thème. Supprimez la prose ou les messages promotionnels. Utilisez des verbes d'action.</p>
<h3><a href="#">[Texte de l'hyperlien du sous-thème]</a></h3>
<p>Résumé des informations ou des tâches pouvant être accomplies sur la page du sous-thème. Supprimez la prose ou les messages promotionnels. Utilisez des verbes d'action.</p>
</section>Exemple 4: liens séquentiels avec disposition sur 1 colonne
Services et renseignements
-
[Texte de l'hyperlien du sous-thème]
Résumé des informations ou des tâches pouvant être accomplies sur la page du sous-thème. Supprimez la prose ou les messages promotionnels. Utilisez des verbes d'action.
-
[Texte de l'hyperlien du sous-thème]
Résumé des informations ou des tâches pouvant être accomplies sur la page du sous-thème. Supprimez la prose ou les messages promotionnels. Utilisez des verbes d'action.
-
[Texte de l'hyperlien du sous-thème]
Résumé des informations ou des tâches pouvant être accomplies sur la page du sous-thème. Supprimez la prose ou les messages promotionnels. Utilisez des verbes d'action.
Code
<section class="gc-srvinfo">
<h2>Services et renseignements</h2>
<ol>
<li>
<h3><a href="#">[Texte de l'hyperlien du sous-thème]</a></h3>
<p>Résumé des informations ou des tâches pouvant être accomplies sur la page du sous-thème. Supprimez la prose ou les messages promotionnels. Utilisez des verbes d'action.</p>
</li>
<li>
<h3><a href="#">[Texte de l'hyperlien du sous-thème]</a></h3>
<p>Résumé des informations ou des tâches pouvant être accomplies sur la page du sous-thème. Supprimez la prose ou les messages promotionnels. Utilisez des verbes d'action.</p>
</li>
<li>
<h3><a href="#">[Texte de l'hyperlien du sous-thème]</a></h3>
<p>Résumé des informations ou des tâches pouvant être accomplies sur la page du sous-thème. Supprimez la prose ou les messages promotionnels. Utilisez des verbes d'action.</p>
</li>
</ol>
</section>Exemple 5: disposition groupée avec titres, sur 3 colonnes
Services pour les Canadiens au Canada
[Texte de l'hyperlien du sous-thème]
Résumé des informations ou des tâches pouvant être accomplies sur la page du sous-thème. Supprimez la prose ou les messages promotionnels. Utilisez des verbes d'action.
[Texte de l'hyperlien du sous-thème]
Résumé des informations ou des tâches pouvant être accomplies sur la page du sous-thème. Supprimez la prose ou les messages promotionnels. Utilisez des verbes d'action.
[Texte de l'hyperlien du sous-thème]
Résumé des informations ou des tâches pouvant être accomplies sur la page du sous-thème. Supprimez la prose ou les messages promotionnels. Utilisez des verbes d'action.
Services pour les Canadiens à l'étranger
[Texte de l'hyperlien du sous-thème]
Résumé des informations ou des tâches pouvant être accomplies sur la page du sous-thème. Supprimez la prose ou les messages promotionnels. Utilisez des verbes d'action.
[Texte de l'hyperlien du sous-thème]
Résumé des informations ou des tâches pouvant être accomplies sur la page du sous-thème. Supprimez la prose ou les messages promotionnels. Utilisez des verbes d'action.
[Texte de l'hyperlien du sous-thème]
Résumé des informations ou des tâches pouvant être accomplies sur la page du sous-thème. Supprimez la prose ou les messages promotionnels. Utilisez des verbes d'action.
Code
<section class="gc-srvinfo">
<h2>Services for Canadians in Canada</h2>
<div class="wb-eqht row">
<div class="col-md-6 col-lg-4">
<h3><a href="#">[Texte de l'hyperlien du sous-thème]</a></h3>
<p>Résumé des informations ou des tâches pouvant être accomplies sur la page du sous-thème. Supprimez la prose ou les messages promotionnels. Utilisez des verbes d'action. </p>
</div>
<div class="col-md-6 col-lg-4">
<h3><a href="#">[Texte de l'hyperlien du sous-thème]</a></h3>
<p>Résumé des informations ou des tâches pouvant être accomplies sur la page du sous-thème. Supprimez la prose ou les messages promotionnels. Utilisez des verbes d'action. </p>
</div>
<div class="col-md-6 col-lg-4">
<h3><a href="#">[Texte de l'hyperlien du sous-thème]</a></h3>
<p>Résumé des informations ou des tâches pouvant être accomplies sur la page du sous-thème. Supprimez la prose ou les messages promotionnels. Utilisez des verbes d'action. </p>
</div>
</div>
</section>
<section class="gc-srvinfo">
<h2>Services for Canadians abroad</h2>
<div class="wb-eqht row">
<div class="col-md-6 col-lg-4">
<h3><a href="#">[Texte de l'hyperlien du sous-thème]</a></h3>
<p>Résumé des informations ou des tâches pouvant être accomplies sur la page du sous-thème. Supprimez la prose ou les messages promotionnels. Utilisez des verbes d'action. </p>
</div>
<div class="col-md-6 col-lg-4">
<h3><a href="#">[Texte de l'hyperlien du sous-thème]</a></h3>
<p>Résumé des informations ou des tâches pouvant être accomplies sur la page du sous-thème. Supprimez la prose ou les messages promotionnels. Utilisez des verbes d'action. </p>
</div>
<div class="col-md-6 col-lg-4">
<h3><a href="#">[Texte de l'hyperlien du sous-thème]</a></h3>
<p>Résumé des informations ou des tâches pouvant être accomplies sur la page du sous-thème. Supprimez la prose ou les messages promotionnels. Utilisez des verbes d'action. </p>
</div>
</div>
</section>Détails de la page
- Date de modification :