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]

Utilisez des verbes d'action, ou inscrivez simplement des mots clés pour résumer les renseignements ou les tâches qui peuvent être accomplies sur la page liée

[Texte de l'hyperlien]

Utilisez des verbes d'action, ou inscrivez simplement des mots clés pour résumer les renseignements ou les tâches qui peuvent être accomplies sur la page liée

[Texte de l'hyperlien]

Utilisez des verbes d'action, ou inscrivez simplement des mots clés pour résumer les renseignements ou les tâches qui peuvent être accomplies sur la page liée

[Texte de l'hyperlien]

Utilisez des verbes d'action, ou inscrivez simplement des mots clés pour résumer les renseignements ou les tâches qui peuvent être accomplies sur la page liée

[Texte de l'hyperlien]

Utilisez des verbes d'action, ou inscrivez simplement des mots clés pour résumer les renseignements ou les tâches qui peuvent être accomplies sur la page liée

[Texte de l'hyperlien]

Utilisez des verbes d'action, ou inscrivez simplement des mots clés pour résumer les renseignements ou les tâches qui peuvent être accomplies sur la page liée

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]</a></h3>
			<p>Utilisez des verbes d'action, ou inscrivez simplement des mots clés pour résumer les renseignements ou les tâches qui peuvent être accomplies sur la page liée</p>
		</div>
		<div class="col-md-6 col-lg-4">
			<h3><a href="#">[Texte de l'hyperlien]</a></h3>
			<p>Utilisez des verbes d'action, ou inscrivez simplement des mots clés pour résumer les renseignements ou les tâches qui peuvent être accomplies sur la page liée</p>
		</div>
		<div class="col-md-6 col-lg-4">
			<h3><a href="#">[Texte de l'hyperlien]</a></h3>
			<p>Utilisez des verbes d'action, ou inscrivez simplement des mots clés pour résumer les renseignements ou les tâches qui peuvent être accomplies sur la page liée</p>
		</div>
		<div class="col-md-6 col-lg-4">
			<h3><a href="#">[Texte de l'hyperlien]</a></h3>
			<p>Utilisez des verbes d'action, ou inscrivez simplement des mots clés pour résumer les renseignements ou les tâches qui peuvent être accomplies sur la page liée</p>
		</div>
		<div class="col-md-6 col-lg-4">
			<h3><a href="#">[Texte de l'hyperlien]</a></h3>
			<p>Utilisez des verbes d'action, ou inscrivez simplement des mots clés pour résumer les renseignements ou les tâches qui peuvent être accomplies sur la page liée</p>
		</div>
		<div class="col-md-6 col-lg-4">
			<h3><a href="#">[Texte de l'hyperlien]</a></h3>
			<p>Utilisez des verbes d'action, ou inscrivez simplement des mots clés pour résumer les renseignements ou les tâches qui peuvent être accomplies sur la page liée</p>
		</div>
	</div>
</section>

Exemple 2: disposition sur 2 colonnes

Services et renseignements

[Texte de l'hyperlien]

Utilisez des verbes d'action, ou inscrivez simplement des mots clés pour résumer les renseignements ou les tâches qui peuvent être accomplies sur la page liée

[Texte de l'hyperlien]

Utilisez des verbes d'action, ou inscrivez simplement des mots clés pour résumer les renseignements ou les tâches qui peuvent être accomplies sur la page liée

[Texte de l'hyperlien]

Utilisez des verbes d'action, ou inscrivez simplement des mots clés pour résumer les renseignements ou les tâches qui peuvent être accomplies sur la page liée

[Texte de l'hyperlien]

Utilisez des verbes d'action, ou inscrivez simplement des mots clés pour résumer les renseignements ou les tâches qui peuvent être accomplies sur la page liée

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]</a></h3>
			<p>Utilisez des verbes d'action, ou inscrivez simplement des mots clés pour résumer les renseignements ou les tâches qui peuvent être accomplies sur la page liée</p>
		</div>
		<div class="col-md-6">
			<h3><a href="#">[Texte de l'hyperlien]</a></h3>
			<p>Utilisez des verbes d'action, ou inscrivez simplement des mots clés pour résumer les renseignements ou les tâches qui peuvent être accomplies sur la page liée</p>
		</div>
		<div class="col-md-6">
			<h3><a href="#">[Texte de l'hyperlien]</a></h3>
			<p>Utilisez des verbes d'action, ou inscrivez simplement des mots clés pour résumer les renseignements ou les tâches qui peuvent être accomplies sur la page liée</p>
		</div>
		<div class="col-md-6">
			<h3><a href="#">[Texte de l'hyperlien]</a></h3>
			<p>Utilisez des verbes d'action, ou inscrivez simplement des mots clés pour résumer les renseignements ou les tâches qui peuvent être accomplies sur la page liée</p>
		</div>
	</div>
</section>

Exemple 3: disposition sur 1 colonne

Services et renseignements

[Texte de l'hyperlien]

Utilisez des verbes d'action, ou inscrivez simplement des mots clés pour résumer les renseignements ou les tâches qui peuvent être accomplies sur la page liée

[Texte de l'hyperlien]

Utilisez des verbes d'action, ou inscrivez simplement des mots clés pour résumer les renseignements ou les tâches qui peuvent être accomplies sur la page liée

[Texte de l'hyperlien]

Utilisez des verbes d'action, ou inscrivez simplement des mots clés pour résumer les renseignements ou les tâches qui peuvent être accomplies sur la page liée

Code

<section class="gc-srvinfo">
	<h3><a href="#">[Texte de l'hyperlien]</a></h3>
	<p>Utilisez des verbes d'action, ou inscrivez simplement des mots clés pour résumer les renseignements ou les tâches qui peuvent être accomplies sur la page liée</p>
	<h3><a href="#">[Texte de l'hyperlien]</a></h3>
	<p>Utilisez des verbes d'action, ou inscrivez simplement des mots clés pour résumer les renseignements ou les tâches qui peuvent être accomplies sur la page liée</p>
	<h3><a href="#">[Texte de l'hyperlien]</a></h3>
	<p>Utilisez des verbes d'action, ou inscrivez simplement des mots clés pour résumer les renseignements ou les tâches qui peuvent être accomplies sur la page liée</p>
</section>

Exemple 4: liens séquentiels avec disposition sur 1 colonne

Services et renseignements

[Texte de l'hyperlien]

Utilisez des verbes d'action, ou inscrivez simplement des mots clés pour résumer les renseignements ou les tâches qui peuvent être accomplies sur la page liée
[Texte de l'hyperlien]

Utilisez des verbes d'action, ou inscrivez simplement des mots clés pour résumer les renseignements ou les tâches qui peuvent être accomplies sur la page liée
[Texte de l'hyperlien]

Utilisez des verbes d'action, ou inscrivez simplement des mots clés pour résumer les renseignements ou les tâches qui peuvent être accomplies sur la page liée

Code

<section class="gc-srvinfo">
	<h2>Services et renseignements</h2>
	<ol>
		<li>
			<h3><a href="#">[Texte de l'hyperlien]</a></h3>
			<p>Utilisez des verbes d'action, ou inscrivez simplement des mots clés pour résumer les renseignements ou les tâches qui peuvent être accomplies sur la page liée</p>
		</li>
		<li>
			<h3><a href="#">[Texte de l'hyperlien]</a></h3>
			<p>Utilisez des verbes d'action, ou inscrivez simplement des mots clés pour résumer les renseignements ou les tâches qui peuvent être accomplies sur la page liée</p>
		</li>
		<li>
			<h3><a href="#">[Texte de l'hyperlien]</a></h3>
			<p>Utilisez des verbes d'action, ou inscrivez simplement des mots clés pour résumer les renseignements ou les tâches qui peuvent être accomplies sur la page liée</p>
		</li>
	</ol>
</section>

Exemple 5: disposition groupée avec titres, sur 3 colonnes

Services pour les Canadiens au Canada

[Texte de l'hyperlien]

Utilisez des verbes d'action, ou inscrivez simplement des mots clés pour résumer les renseignements ou les tâches qui peuvent être accomplies sur la page liée

[Texte de l'hyperlien]

Utilisez des verbes d'action, ou inscrivez simplement des mots clés pour résumer les renseignements ou les tâches qui peuvent être accomplies sur la page liée

[Texte de l'hyperlien]

Utilisez des verbes d'action, ou inscrivez simplement des mots clés pour résumer les renseignements ou les tâches qui peuvent être accomplies sur la page liée

Services pour les Canadiens à l'étranger

[Texte de l'hyperlien]

Utilisez des verbes d'action, ou inscrivez simplement des mots clés pour résumer les renseignements ou les tâches qui peuvent être accomplies sur la page liée

[Texte de l'hyperlien]

Utilisez des verbes d'action, ou inscrivez simplement des mots clés pour résumer les renseignements ou les tâches qui peuvent être accomplies sur la page liée

[Texte de l'hyperlien]

Utilisez des verbes d'action, ou inscrivez simplement des mots clés pour résumer les renseignements ou les tâches qui peuvent être accomplies sur la page liée

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]</a></h3>
			<p>Utilisez des verbes d'action, ou inscrivez simplement des mots clés pour résumer les renseignements ou les tâches qui peuvent être accomplies sur la page liée </p>
		</div>
		<div class="col-md-6 col-lg-4">
			<h3><a href="#">[Texte de l'hyperlien]</a></h3>
			<p>Utilisez des verbes d'action, ou inscrivez simplement des mots clés pour résumer les renseignements ou les tâches qui peuvent être accomplies sur la page liée </p>
		</div>
		<div class="col-md-6 col-lg-4">
			<h3><a href="#">[Texte de l'hyperlien]</a></h3>
			<p>Utilisez des verbes d'action, ou inscrivez simplement des mots clés pour résumer les renseignements ou les tâches qui peuvent être accomplies sur la page liée </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]</a></h3>
			<p>Utilisez des verbes d'action, ou inscrivez simplement des mots clés pour résumer les renseignements ou les tâches qui peuvent être accomplies sur la page liée </p>
		</div>
		<div class="col-md-6 col-lg-4">
			<h3><a href="#">[Texte de l'hyperlien]</a></h3>
			<p>Utilisez des verbes d'action, ou inscrivez simplement des mots clés pour résumer les renseignements ou les tâches qui peuvent être accomplies sur la page liée </p>
		</div>
		<div class="col-md-6 col-lg-4">
			<h3><a href="#">[Texte de l'hyperlien]</a></h3>
			<p>Utilisez des verbes d'action, ou inscrivez simplement des mots clés pour résumer les renseignements ou les tâches qui peuvent être accomplies sur la page liée </p>
		</div>
	</div>
</section>

Exemple 6: disposition sur 3 colonnes avec en-tête invisible

Code

<section class="gc-srvinfo">
	<h2 class="wb-inv">Services et renseignements</h2>
	<div class="wb-eqht row">
		<div class="col-md-6 col-lg-4">
			<h3><a href="#">[Texte de l'hyperlien]</a></h3>
			<p>Utilisez des verbes d'action, ou inscrivez simplement des mots clés pour résumer les renseignements ou les tâches qui peuvent être accomplies sur la page liée</p>
		</div>
		<div class="col-md-6 col-lg-4">
			<h3><a href="#">[Texte de l'hyperlien]</a></h3>
			<p>Utilisez des verbes d'action, ou inscrivez simplement des mots clés pour résumer les renseignements ou les tâches qui peuvent être accomplies sur la page liée</p>
		</div>
		<div class="col-md-6 col-lg-4">
			<h3><a href="#">[Texte de l'hyperlien]</a></h3>
			<p>Utilisez des verbes d'action, ou inscrivez simplement des mots clés pour résumer les renseignements ou les tâches qui peuvent être accomplies sur la page liée</p>
		</div>
		<div class="col-md-6 col-lg-4">
			<h3><a href="#">[Texte de l'hyperlien]</a></h3>
			<p>Utilisez des verbes d'action, ou inscrivez simplement des mots clés pour résumer les renseignements ou les tâches qui peuvent être accomplies sur la page liée</p>
		</div>
		<div class="col-md-6 col-lg-4">
			<h3><a href="#">[Texte de l'hyperlien]</a></h3>
			<p>Utilisez des verbes d'action, ou inscrivez simplement des mots clés pour résumer les renseignements ou les tâches qui peuvent être accomplies sur la page liée</p>
		</div>
		<div class="col-md-6 col-lg-4">
			<h3><a href="#">[Texte de l'hyperlien]</a></h3>
			<p>Utilisez des verbes d'action, ou inscrivez simplement des mots clés pour résumer les renseignements ou les tâches qui peuvent être accomplies sur la page liée</p>
		</div>
	</div>
</section>

Détails de la page

Date de modification :: 2019-01-16