Services and information - Working examples

Headings structure

The logic semantic structure of headings have not been followed to accommodate the following working examples.

Example 1: 3 columns pattern

Services and information

[Subtopic hyperlink text]

Summary of the information or tasks that can be accomplished on the sub-topic page. Remove prose or promotional messaging. Use action verbs.

[Subtopic hyperlink text]

Summary of the information or tasks that can be accomplished on the sub-topic page. Remove prose or promotional messaging. Use action verbs.

[Subtopic hyperlink text]

Summary of the information or tasks that can be accomplished on the sub-topic page. Remove prose or promotional messaging. Use action verbs.

[Subtopic hyperlink text]

Summary of the information or tasks that can be accomplished on the sub-topic page. Remove prose or promotional messaging. Use action verbs.

[Subtopic hyperlink text]

Summary of the information or tasks that can be accomplished on the sub-topic page. Remove prose or promotional messaging. Use action verbs.

[Subtopic hyperlink text]

Summary of the information or tasks that can be accomplished on the sub-topic page. Remove prose or promotional messaging. Use action verbs.

Code

<section class="gc-srvinfo">
	<h2>Services and information</h2>
		<div class="wb-eqht row">
		<div class="col-md-6 col-lg-4">
			<h3><a href="#">[Subtopic hyperlink text]</a></h3>
			<p>Summary of the information or tasks that can be accomplished on the sub-topic page. Remove prose or promotional messaging. Use action verbs.</p>
		</div>
		<div class="col-md-6 col-lg-4">
			<h3><a href="#">[Subtopic hyperlink text]</a></h3>
			<p>Summary of the information or tasks that can be accomplished on the sub-topic page. Remove prose or promotional messaging. Use action verbs.</p>
		</div>
		<div class="col-md-6 col-lg-4">
			<h3><a href="#">[Subtopic hyperlink text]</a></h3>
			<p>Summary of the information or tasks that can be accomplished on the sub-topic page. Remove prose or promotional messaging. Use action verbs.</p>
		</div>
		<div class="col-md-6 col-lg-4">
			<h3><a href="#">[Subtopic hyperlink text]</a></h3>
			<p>Summary of the information or tasks that can be accomplished on the sub-topic page. Remove prose or promotional messaging. Use action verbs.</p>
		</div>
		<div class="col-md-6 col-lg-4">
			<h3><a href="#">[Subtopic hyperlink text]</a></h3>
			<p>Summary of the information or tasks that can be accomplished on the sub-topic page. Remove prose or promotional messaging. Use action verbs.</p>
		</div>
		<div class="col-md-6 col-lg-4">
			<h3><a href="#">[Subtopic hyperlink text]</a></h3>
			<p>Summary of the information or tasks that can be accomplished on the sub-topic page. Remove prose or promotional messaging. Use action verbs.</p>
		</div>
	</div>
</section>

Example 2: 2 columns pattern

Services and information

[Subtopic hyperlink text]

Summary of the information or tasks that can be accomplished on the sub-topic page. Remove prose or promotional messaging. Use action verbs.

[Subtopic hyperlink text]

Summary of the information or tasks that can be accomplished on the sub-topic page. Remove prose or promotional messaging. Use action verbs.

[Subtopic hyperlink text]

Summary of the information or tasks that can be accomplished on the sub-topic page. Remove prose or promotional messaging. Use action verbs.

[Subtopic hyperlink text]

Summary of the information or tasks that can be accomplished on the sub-topic page. Remove prose or promotional messaging. Use action verbs.

Code

<section class="gc-srvinfo">
	<h2>Services and information</h2>
	<div class="wb-eqht row">
		<div class="col-md-6">
			<h3><a href="#">[Subtopic hyperlink text]</a></h3>
			<p>Summary of the information or tasks that can be accomplished on the sub-topic page. Remove prose or promotional messaging. Use action verbs.</p>
		</div>
		<div class="col-md-6">
			<h3><a href="#">[Subtopic hyperlink text]</a></h3>
			<p>Summary of the information or tasks that can be accomplished on the sub-topic page. Remove prose or promotional messaging. Use action verbs.</p>
		</div>
		<div class="col-md-6">
			<h3><a href="#">[Subtopic hyperlink text]</a></h3>
			<p>Summary of the information or tasks that can be accomplished on the sub-topic page. Remove prose or promotional messaging. Use action verbs.</p>
		</div>
		<div class="col-md-6">
			<h3><a href="#">[Subtopic hyperlink text]</a></h3>
			<p>Summary of the information or tasks that can be accomplished on the sub-topic page. Remove prose or promotional messaging. Use action verbs.</p>
		</div>
	</div>
</section>

Example 3: Doormat links in single column pattern

Services and information

[Subtopic hyperlink text]

Summary of the information or tasks that can be accomplished on the sub-topic page. Remove prose or promotional messaging. Use action verbs.

[Subtopic hyperlink text]

Summary of the information or tasks that can be accomplished on the sub-topic page. Remove prose or promotional messaging. Use action verbs.

[Subtopic hyperlink text]

Summary of the information or tasks that can be accomplished on the sub-topic page. Remove prose or promotional messaging. Use action verbs.

Code

<section class="gc-srvinfo">
	<h3><a href="#">[Subtopic hyperlink text]</a></h3>
	<p>Summary of the information or tasks that can be accomplished on the sub-topic page. Remove prose or promotional messaging. Use action verbs.</p>
	<h3><a href="#">[Subtopic hyperlink text]</a></h3>
	<p>Summary of the information or tasks that can be accomplished on the sub-topic page. Remove prose or promotional messaging. Use action verbs.</p>
	<h3><a href="#">[Subtopic hyperlink text]</a></h3>
	<p>Summary of the information or tasks that can be accomplished on the sub-topic page. Remove prose or promotional messaging. Use action verbs.</p>
</section>

Example 4: Sequential doormat links in single column pattern

Services and information

[Subtopic hyperlink text]

Summary of the information or tasks that can be accomplished on the sub-topic page. Remove prose or promotional messaging. Use action verbs.
[Subtopic hyperlink text]

Summary of the information or tasks that can be accomplished on the sub-topic page. Remove prose or promotional messaging. Use action verbs.
[Subtopic hyperlink text]

Summary of the information or tasks that can be accomplished on the sub-topic page. Remove prose or promotional messaging. Use action verbs.

Code

<section class="gc-srvinfo">
	<h2>Services and information</h2>
	<ol>
		<li>
			<h3><a href="#">[Subtopic hyperlink text]</a></h3>
			<p>Summary of the information or tasks that can be accomplished on the sub-topic page. Remove prose or promotional messaging. Use action verbs.</p>
		</li>
		<li>
			<h3><a href="#">[Subtopic hyperlink text]</a></h3>
			<p>Summary of the information or tasks that can be accomplished on the sub-topic page. Remove prose or promotional messaging. Use action verbs.</p>
		</li>
		<li>
			<h3><a href="#">[Subtopic hyperlink text]</a></h3>
			<p>Summary of the information or tasks that can be accomplished on the sub-topic page. Remove prose or promotional messaging. Use action verbs.</p>
		</li>
	</ol>
</section>

Example 5: Doormat links in 3 columns grouped with headings pattern

Services for Canadians in Canada

[Subtopic hyperlink text]

Summary of the information or tasks that can be accomplished on the sub-topic page. Remove prose or promotional messaging. Use action verbs.

[Subtopic hyperlink text]

Summary of the information or tasks that can be accomplished on the sub-topic page. Remove prose or promotional messaging. Use action verbs.

[Subtopic hyperlink text]

Summary of the information or tasks that can be accomplished on the sub-topic page. Remove prose or promotional messaging. Use action verbs.

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="#">[Subtopic hyperlink text]</a></h3>
			<p>Summary of the information or tasks that can be accomplished on the sub-topic page. Remove prose or promotional messaging. Use action verbs. </p>
		</div>
		<div class="col-md-6 col-lg-4">
			<h3><a href="#">[Subtopic hyperlink text]</a></h3>
			<p>Summary of the information or tasks that can be accomplished on the sub-topic page. Remove prose or promotional messaging. Use action verbs. </p>
		</div>
		<div class="col-md-6 col-lg-4">
			<h3><a href="#">[Subtopic hyperlink text]</a></h3>
			<p>Summary of the information or tasks that can be accomplished on the sub-topic page. Remove prose or promotional messaging. Use action verbs. </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="#">[Subtopic hyperlink text]</a></h3>
			<p>Summary of the information or tasks that can be accomplished on the sub-topic page. Remove prose or promotional messaging. Use action verbs. </p>
		</div>
		<div class="col-md-6 col-lg-4">
			<h3><a href="#">[Subtopic hyperlink text]</a></h3>
			<p>Summary of the information or tasks that can be accomplished on the sub-topic page. Remove prose or promotional messaging. Use action verbs. </p>
		</div>
		<div class="col-md-6 col-lg-4">
			<h3><a href="#">[Subtopic hyperlink text]</a></h3>
			<p>Summary of the information or tasks that can be accomplished on the sub-topic page. Remove prose or promotional messaging. Use action verbs. </p>
		</div>
	</div>
</section>

Page details

Date modified:: 2019-01-16