Services and information with labels - 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] (Default label)
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] (Primary label)
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] (Success label)
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] (Information label)
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] (Warning label)
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] (Danger label)
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> <span class="label label-default">(Default label)</span></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> <span class="label label-primary">(Primary label)</span></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> <span class="label label-success">(Success label)</span></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> <span class="label label-info">(Information label)</span></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> <span class="label label-warning">(Warning label)</span></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> <span class="label label-danger">(Danger label)</span></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: