Search

Services and information - Working examples

The following working examples are based on the services and information technical specification. The content and structure of this page might not consistant with the rest of this site.

Example 1: Doormat links in 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 2: 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 3: Sequential doormat links in single column pattern

Services and information

  1. [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.

  2. [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.

  3. [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 4: 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.

Services for Canadians abroad

[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>
Report a problem on this page
Please select all that apply:

Thank you for your help!

You will not receive a reply. For enquiries, please contact us.

Date modified: