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
-
[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 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>Page details
- Date modified: