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
[Hyperlink text]
Use action verbs, or simply list keywords to summarize the information or tasks that can be accomplished on the page it links to
[Hyperlink text]
Use action verbs, or simply list keywords to summarize the information or tasks that can be accomplished on the page it links to
[Hyperlink text]
Use action verbs, or simply list keywords to summarize the information or tasks that can be accomplished on the page it links to
[Hyperlink text]
Use action verbs, or simply list keywords to summarize the information or tasks that can be accomplished on the page it links to
[Hyperlink text]
Use action verbs, or simply list keywords to summarize the information or tasks that can be accomplished on the page it links to
[Hyperlink text]
Use action verbs, or simply list keywords to summarize the information or tasks that can be accomplished on the page it links to
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="#">[Hyperlink text]</a></h3>
<p>Use action verbs, or simply list keywords to summarize the information or tasks that can be accomplished on the page it links to</p>
</div>
<div class="col-md-6 col-lg-4">
<h3><a href="#">[Hyperlink text]</a></h3>
<p>Use action verbs, or simply list keywords to summarize the information or tasks that can be accomplished on the page it links to</p>
</div>
<div class="col-md-6 col-lg-4">
<h3><a href="#">[Hyperlink text]</a></h3>
<p>Use action verbs, or simply list keywords to summarize the information or tasks that can be accomplished on the page it links to</p>
</div>
<div class="col-md-6 col-lg-4">
<h3><a href="#">[Hyperlink text]</a></h3>
<p>Use action verbs, or simply list keywords to summarize the information or tasks that can be accomplished on the page it links to</p>
</div>
<div class="col-md-6 col-lg-4">
<h3><a href="#">[Hyperlink text]</a></h3>
<p>Use action verbs, or simply list keywords to summarize the information or tasks that can be accomplished on the page it links to</p>
</div>
<div class="col-md-6 col-lg-4">
<h3><a href="#">[Hyperlink text]</a></h3>
<p>Use action verbs, or simply list keywords to summarize the information or tasks that can be accomplished on the page it links to</p>
</div>
</div>
</section>Example 2: 2 columns pattern
Services and information
[Hyperlink text]
Use action verbs, or simply list keywords to summarize the information or tasks that can be accomplished on the page it links to
[Hyperlink text]
Use action verbs, or simply list keywords to summarize the information or tasks that can be accomplished on the page it links to
[Hyperlink text]
Use action verbs, or simply list keywords to summarize the information or tasks that can be accomplished on the page it links to
[Hyperlink text]
Use action verbs, or simply list keywords to summarize the information or tasks that can be accomplished on the page it links to
Code
<section class="gc-srvinfo">
<h2>Services and information</h2>
<div class="wb-eqht row">
<div class="col-md-6">
<h3><a href="#">[Hyperlink text]</a></h3>
<p>Use action verbs, or simply list keywords to summarize the information or tasks that can be accomplished on the page it links to</p>
</div>
<div class="col-md-6">
<h3><a href="#">[Hyperlink text]</a></h3>
<p>Use action verbs, or simply list keywords to summarize the information or tasks that can be accomplished on the page it links to</p>
</div>
<div class="col-md-6">
<h3><a href="#">[Hyperlink text]</a></h3>
<p>Use action verbs, or simply list keywords to summarize the information or tasks that can be accomplished on the page it links to</p>
</div>
<div class="col-md-6">
<h3><a href="#">[Hyperlink text]</a></h3>
<p>Use action verbs, or simply list keywords to summarize the information or tasks that can be accomplished on the page it links to</p>
</div>
</div>
</section>Example 3: Doormat links in single column pattern
Services and information
[Hyperlink text]
Use action verbs, or simply list keywords to summarize the information or tasks that can be accomplished on the page it links to
[Hyperlink text]
Use action verbs, or simply list keywords to summarize the information or tasks that can be accomplished on the page it links to
[Hyperlink text]
Use action verbs, or simply list keywords to summarize the information or tasks that can be accomplished on the page it links to
Code
<section class="gc-srvinfo">
<h3><a href="#">[Hyperlink text]</a></h3>
<p>Use action verbs, or simply list keywords to summarize the information or tasks that can be accomplished on the page it links to</p>
<h3><a href="#">[Hyperlink text]</a></h3>
<p>Use action verbs, or simply list keywords to summarize the information or tasks that can be accomplished on the page it links to</p>
<h3><a href="#">[Hyperlink text]</a></h3>
<p>Use action verbs, or simply list keywords to summarize the information or tasks that can be accomplished on the page it links to</p>
</section>Example 4: Sequential doormat links in single column pattern
Services and information
-
[Hyperlink text]
Use action verbs, or simply list keywords to summarize the information or tasks that can be accomplished on the page it links to
-
[Hyperlink text]
Use action verbs, or simply list keywords to summarize the information or tasks that can be accomplished on the page it links to
-
[Hyperlink text]
Use action verbs, or simply list keywords to summarize the information or tasks that can be accomplished on the page it links to
Code
<section class="gc-srvinfo">
<h2>Services and information</h2>
<ol>
<li>
<h3><a href="#">[Hyperlink text]</a></h3>
<p>Use action verbs, or simply list keywords to summarize the information or tasks that can be accomplished on the page it links to</p>
</li>
<li>
<h3><a href="#">[Hyperlink text]</a></h3>
<p>Use action verbs, or simply list keywords to summarize the information or tasks that can be accomplished on the page it links to</p>
</li>
<li>
<h3><a href="#">[Hyperlink text]</a></h3>
<p>Use action verbs, or simply list keywords to summarize the information or tasks that can be accomplished on the page it links to</p>
</li>
</ol>
</section>Example 5: Doormat links in 3 columns grouped with headings pattern
Services for Canadians in Canada
[Hyperlink text]
Use action verbs, or simply list keywords to summarize the information or tasks that can be accomplished on the page it links to
[Hyperlink text]
Use action verbs, or simply list keywords to summarize the information or tasks that can be accomplished on the page it links to
[Hyperlink text]
Use action verbs, or simply list keywords to summarize the information or tasks that can be accomplished on the page it links to
Services for Canadians abroad
[Hyperlink text]
Use action verbs, or simply list keywords to summarize the information or tasks that can be accomplished on the page it links to
[Hyperlink text]
Use action verbs, or simply list keywords to summarize the information or tasks that can be accomplished on the page it links to
[Hyperlink text]
Use action verbs, or simply list keywords to summarize the information or tasks that can be accomplished on the page it links to
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="#">[Hyperlink text]</a></h3>
<p>Use action verbs, or simply list keywords to summarize the information or tasks that can be accomplished on the page it links to </p>
</div>
<div class="col-md-6 col-lg-4">
<h3><a href="#">[Hyperlink text]</a></h3>
<p>Use action verbs, or simply list keywords to summarize the information or tasks that can be accomplished on the page it links to </p>
</div>
<div class="col-md-6 col-lg-4">
<h3><a href="#">[Hyperlink text]</a></h3>
<p>Use action verbs, or simply list keywords to summarize the information or tasks that can be accomplished on the page it links to </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="#">[Hyperlink text]</a></h3>
<p>Use action verbs, or simply list keywords to summarize the information or tasks that can be accomplished on the page it links to </p>
</div>
<div class="col-md-6 col-lg-4">
<h3><a href="#">[Hyperlink text]</a></h3>
<p>Use action verbs, or simply list keywords to summarize the information or tasks that can be accomplished on the page it links to </p>
</div>
<div class="col-md-6 col-lg-4">
<h3><a href="#">[Hyperlink text]</a></h3>
<p>Use action verbs, or simply list keywords to summarize the information or tasks that can be accomplished on the page it links to </p>
</div>
</div>
</section>Example 6: 3 columns pattern with invisible header
Services and information
[Hyperlink text]
Use action verbs, or simply list keywords to summarize the information or tasks that can be accomplished on the page it links to
[Hyperlink text]
Use action verbs, or simply list keywords to summarize the information or tasks that can be accomplished on the page it links to
[Hyperlink text]
Use action verbs, or simply list keywords to summarize the information or tasks that can be accomplished on the page it links to
[Hyperlink text]
Use action verbs, or simply list keywords to summarize the information or tasks that can be accomplished on the page it links to
[Hyperlink text]
Use action verbs, or simply list keywords to summarize the information or tasks that can be accomplished on the page it links to
[Hyperlink text]
Use action verbs, or simply list keywords to summarize the information or tasks that can be accomplished on the page it links to
Code
<section class="gc-srvinfo">
<h2 class="wb-inv">Services and information</h2>
<div class="wb-eqht row">
<div class="col-md-6 col-lg-4">
<h3><a href="#">[Hyperlink text]</a></h3>
<p>Use action verbs, or simply list keywords to summarize the information or tasks that can be accomplished on the page it links to</p>
</div>
<div class="col-md-6 col-lg-4">
<h3><a href="#">[Hyperlink text]</a></h3>
<p>Use action verbs, or simply list keywords to summarize the information or tasks that can be accomplished on the page it links to</p>
</div>
<div class="col-md-6 col-lg-4">
<h3><a href="#">[Hyperlink text]</a></h3>
<p>Use action verbs, or simply list keywords to summarize the information or tasks that can be accomplished on the page it links to</p>
</div>
<div class="col-md-6 col-lg-4">
<h3><a href="#">[Hyperlink text]</a></h3>
<p>Use action verbs, or simply list keywords to summarize the information or tasks that can be accomplished on the page it links to</p>
</div>
<div class="col-md-6 col-lg-4">
<h3><a href="#">[Hyperlink text]</a></h3>
<p>Use action verbs, or simply list keywords to summarize the information or tasks that can be accomplished on the page it links to</p>
</div>
<div class="col-md-6 col-lg-4">
<h3><a href="#">[Hyperlink text]</a></h3>
<p>Use action verbs, or simply list keywords to summarize the information or tasks that can be accomplished on the page it links to</p>
</div>
</div>
</section>Page details
- Date modified: