Services et renseignements avec FieldFlow - 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

Trouvez le plugiciel qui répond à vos besoin:

[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 class="wb-fieldflow" data-wb-fieldflow='{"inline": true, "defaultselectedlabel":"Selectionner un"}'>
				<p>Trouvez le plugiciel qui répond à vos besoin:</p>
				<ul>
					<li><a href="#">Item 1</a></li>
					<li><a href="#">Item 2</a></li>
					<li><a href="#">Item 3</a></li>
					<li><a href="#">Item 4</a></li>
				</ul>
			</div>
		</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

Trouvez le plugiciel qui répond à vos besoin:

[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 class="wb-fieldflow" data-wb-fieldflow='{"inline": true, "defaultselectedlabel":"Selectionner un"}'>
				<p>Trouvez le plugiciel qui répond à vos besoin:</p>
				<ul>
					<li><a href="#">Item 1</a></li>
					<li><a href="#">Item 2</a></li>
					<li><a href="#">Item 3</a></li>
					<li><a href="#">Item 4</a></li>
				</ul>
			</div>
		</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

Trouvez le plugiciel qui répond à vos besoin:

[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>
	<div class="wb-fieldflow" data-wb-fieldflow='{"inline": true, "defaultselectedlabel":"Selectionner un"}'>
		<p>Trouvez le plugiciel qui répond à vos besoin:</p>
		<ul>
			<li><a href="#">Item 1</a></li>
			<li><a href="#">Item 2</a></li>
			<li><a href="#">Item 3</a></li>
			<li><a href="#">Item 4</a></li>
		</ul>
	</div>
	<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
Trouvez le plugiciel qui répond à vos besoin:
- Item 1
- Item 2
- Item 3
- Item 4
[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>
			<div class="wb-fieldflow" data-wb-fieldflow='{"inline": true, "defaultselectedlabel":"Selectionner un"}'>
				<p>Trouvez le plugiciel qui répond à vos besoin:</p>
				<ul>
					<li><a href="#">Item 1</a></li>
					<li><a href="#">Item 2</a></li>
					<li><a href="#">Item 3</a></li>
					<li><a href="#">Item 4</a></li>
				</ul>
			</div>
		</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

Trouvez le plugiciel qui répond à vos besoin:

[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 class="wb-fieldflow" data-wb-fieldflow='{"inline": true, "defaultselectedlabel":"Selectionner un"}'>
				<p>Trouvez le plugiciel qui répond à vos besoin:</p>
				<ul>
					<li><a href="#">Item 1</a></li>
					<li><a href="#">Item 2</a></li>
					<li><a href="#">Item 3</a></li>
					<li><a href="#">Item 4</a></li>
				</ul>
			</div>
		</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 class="wb-fieldflow" data-wb-fieldflow='{"inline": true, "defaultselectedlabel":"Selectionner un"}'>
				<p>Trouvez le plugiciel qui répond à vos besoin:</p>
				<ul>
					<li><a href="#">Item 1</a></li>
					<li><a href="#">Item 2</a></li>
					<li><a href="#">Item 3</a></li>
					<li><a href="#">Item 4</a></li>
				</ul>
			</div>
		</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 :: 2025-07-21