Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam modi, ipsum sit adipisci expedita repellendus minus quidem maxime praesentium repellat.
Content page
Note
This page showcases examples of CSS classes, components, and other elements from GCWeb that have been customized or overwritten for this project. These modifications were made to better align with the specific requirements and design goals of the project.
For a complete list of features, please visit the GCWeb website. Refer to the documentation for detailed information on each change.
On this page
- Scaffolding
- Buttons
- Notices (was alerts)
- Labels
- Tabbed interface - vertical variant
- Cards
- Pagination
- Download link
- Existing utilities
- OAG specific utilities
Scaffolding
Headings
Heading h2
Heading h3
Heading h4
Heading h5
Heading h6
Paragraph - default appearance with a link
Blockquote
Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...
— Author
Example text
Code
<figure>
<blockquote>
<p>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...</p>
</blockquote>
<figcaption>
<p>— Author<br> Example text</p>
</figcaption>
</figure>Details
Details
Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio ipsum fugiat facilis dolorum voluptatem maiores blanditiis aspernatur quod, dicta explicabo!
Code
<details>
<summary>Details</summary>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio ipsum fugiat facilis dolorum voluptatem maiores blanditiis aspernatur quod, dicta explicabo!</p>
</details>Buttons
Regular
Large
Small
Code
<h3>Regular</h3>
<p><a href="#" class="btn btn-primary">Primary</a> <a href="#" class="btn btn-default">Default</a> <a href="#" class="btn btn-link">Link</a></p>
<h3>Large</h3>
<p><a href="#" class="btn btn-primary btn-lg">Primary</a> <a href="#" class="btn btn-default btn-lg">Default</a> <a href="#" class="btn btn-link btn-lg">Link</a></p>
<h3>Small</h3>
<p><a href="#" class="btn btn-primary btn-sm">Primary</a> <a href="#" class="btn btn-default btn-sm">Default</a> <a href="#" class="btn btn-link btn-sm">Link</a></p>Notices (was alerts)
Info alert
Alert details.
Info alert
Alert details.
Alert details with 2 paragraphs.
Code
<section class="alert alert-info">
<h3>Info alert</h3>
<p>Alert details.</p>
</section>
<section class="alert alert-info">
<h3>Info alert</h3>
<p>Alert details.</p>
<p>Alert details with 2 paragraphs.</p>
</section>Labels
Default label
Primary label
Auditor general reports label
Commissioner of the environment and sustainable development reports label
Northern legislative assembly reports label
Special examinations of crown corporations
Code
<p><span class="label label-default">Default label</span></p>
<p><span class="label label-primary">Primary label</span></p>
<p><span class="label label-default" data-report-type="auditor-general-reports">Auditor general reports label</span></p>
<p><span class="label label-default" data-report-type="commissioner-of-the-environment-and-sustainable-development-reports">Commissioner of the environment and sustainable development reports label</span></p>
<p><span class="label label-default" data-report-type="northern-legislative-assembly-reports">Northern legislative assembly reports label</span></p>
<p><span class="label label-default" data-report-type="special-examinations-of-crown-corporations">Special examinations of crown corporations</span></p>
Tabbed interface - vertical variant
With session storage to remember last tab viewed.
Example 1
Lorem ipsum dolor sit amet consectetur Example 3. Consectetur corrupti ea tempore ex consequatur pariatur adipisci, distinctio expedita, facere officiis dolor, amet possimus dignissimos repudiandae rerum eligendi nisi maiores sequi temporibus accusamus porro itaque voluptate est? Dolorem, inventore, aut perferendis enim natus a vel vero, quae minima ex voluptatibus suscipit.
Example 2
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nisi odio autem obcaecati inventore expedita maxime quos. Perspiciatis quos est nulla, voluptate tenetur laborum dolorum omnis consequuntur laboriosam amet libero vitae adipisci accusamus ex veritatis. Nulla magnam debitis quisquam perspiciatis perferendis repellendus corporis ipsam! Perferendis molestiae nisi beatae fugiat voluptate voluptas.
Example 3
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam, officia maiores, illum nulla doloremque possimus ipsam minima soluta harum provident fugiat optio enim facilis beatae cumque esse magnam ea sunt ipsa fugit deleniti magni error, minus iusto. Nisi laborum optio assumenda saepe accusantium consequatur ipsa asperiores facilis vitae animi atque, illo non minima quos ipsum dolore eius illum quas voluptate dolor. Quasi quisquam, reiciendis omnis itaque incidunt expedita quod a maxime consectetur, rerum eos, placeat aliquid fugiat aliquam sequi. Eligendi obcaecati, minima tenetur non sunt architecto aliquam repellendus laudantium, sapiente placeat iste ad odit est voluptatibus? Velit voluptas optio alias veniam sequi nesciunt error nemo expedita architecto dolore. Enim veritatis soluta at labore voluptas, assumenda sunt laudantium architecto, aliquid ratione id mollitia iure incidunt quos illo? Maxime, illo. Iste, culpa porro sed at quos mollitia, sit omnis molestias voluptatibus facere consequatur saepe quod, nihil ratione. Officia debitis doloribus facilis itaque voluptates pariatur beatae iure enim nihil amet quod ipsam officiis modi dolore, asperiores laudantium sint? Odit repellendus molestias quas in facere assumenda dolore iusto, quisquam vero deserunt porro quibusdam commodi reiciendis excepturi cupiditate perferendis placeat sapiente, obcaecati fugit culpa autem. Perferendis laborum nemo odio ipsa minima error, dignissimos dolorum non!
Code
<div class="wb-tabs vertical">
<div class="tabpanels">
<details id="details-panel1">
<summary>Example 1</summary>
<p>...</p>
</details>
<details id="details-panel2" open="open">
<summary>Example 2</summary>
<p>...</p>
</details>
<details id="details-panel3">
<summary>Example 3</summary>
<p>...</p>
</details>
</div>
</div>Default card
Code
<article class="oag-card">
<h3 class="mb-3"><a href="#">Lorem ipsum dolor sit amet</a></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam modi, ipsum sit adipisci expedita repellendus minus quidem maxime praesentium repellat.</p>
</article>Card with background
Lorem ipsum dolor
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, ab.
Read more →Code
<article class="oag-card bg-light">
<h3 class="h4">Lorem ipsum dolor</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, ab.</p>
<a href="#" class="pull-right stretched-link btn btn-link ml-auto mt-auto">Read more →</a>
</article>Card with heading styled as body text
News Release
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.
Read more →Code
<article class="oag-card oag-heading-as-body bg-light">
<div class="mb-3">
<span class="label label-default">News Release</span>
<time datetime="2025-03-18">April 18, 2025</time>
</div>
<h3 class="mb-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</h3>
<a href="#" class="pull-right stretched-link btn btn-link ml-auto mt-auto">Read more →</a>
</article>Card with image on the top
Media Inquiries
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do.
Code
<article class="oag-card bg-light oag-heading-as-body">
<img src="https://dummyimage.com/500x300" alt="media icon">
<div class="mb-2"><span class="label label-default">Media Inquiries</span></div>
<h3><a href="#" class="stretched-link">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do.</a></h3>
</article>Card with image on the left side
Public Inquiries
Lorem ipsum dolor sit amet, consectetur adipiscing elit, integer id est vitae magna.
Code
<article class="oag-card bg-light">
<div class="media">
<div class="media-left">
<a href="#" class="stretched-link"><img src="https://dummyimage.com/80x80" alt="media icon" class="oag-rds-sm"></a>
</div>
<div class="media-body pl-2">
<h3 class="h6">Public Inquiries</h3>
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, integer id est vitae magna.</p>
</div>
</div>
</article>Pagination
- Lorem ipsum, dolor sit amet consectetur adipisicing elit. Illum, at!
- Soluta maiores deserunt fugit dolorum ratione cum necessitatibus dolore ipsum?
- Libero debitis dicta porro modi nobis odit labore dolor eveniet.
- Corrupti est quos ad vero. Hic repellendus numquam officia beatae.
- Amet ullam, ipsam adipisci ad nisi facere veritatis fuga pariatur?
- Eum ipsum doloribus nisi natus dolorum maxime omnis, mollitia hic!
- Aperiam odit, sapiente cum modi amet labore iste dolorum minima.
- Sunt praesentium voluptatibus aliquid cumque quae eaque aspernatur incidunt sint?
- Quae illo veritatis deserunt optio corporis repellendus! Qui, deleniti suscipit?
- Expedita quae temporibus ex labore ipsa excepturi inventore deleniti magnam!
- Facere reprehenderit natus voluptatibus perspiciatis. Ipsam id quam facilis maxime?
- Provident assumenda fugiat, nulla temporibus accusantium incidunt laudantium ea consequuntur!
- Nulla, non aspernatur ipsam provident libero ratione corrupti necessitatibus dicta.
- Possimus minus autem voluptate suscipit porro non culpa officiis doloribus?
- Alias modi eius repudiandae natus molestiae ad, unde aliquid praesentium.
- Ut incidunt corporis quos vel accusantium non assumenda dolorum vitae?
- Velit magnam laudantium expedita recusandae similique voluptates est, doloribus odit!
- Officia quasi non, ex dolore fuga reiciendis unde alias blanditiis!
- Repellendus, libero sint at nam tempore blanditiis recusandae ipsa cupiditate?
- Maiores exercitationem ipsa fuga accusamus impedit dolorum cum voluptatum alias.
- Nulla blanditiis ut ipsa nesciunt officiis error quisquam, reprehenderit quam!
- Libero sint optio sunt beatae ex, quibusdam autem dignissimos et?
- Mollitia cum tenetur sed blanditiis unde sint tempore quaerat ratione?
- Optio dicta harum placeat tempore dolorem? Temporibus enim libero vel.
Code
<ul class="wb-paginate provisional">
<li>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Illum, at!</li>
<li>Soluta maiores deserunt fugit dolorum ratione cum necessitatibus dolore ipsum?</li>
<li>Libero debitis dicta porro modi nobis odit labore dolor eveniet.</li>
<li>Corrupti est quos ad vero. Hic repellendus numquam officia beatae.</li>
<li>Amet ullam, ipsam adipisci ad nisi facere veritatis fuga pariatur?</li>
<li>Eum ipsum doloribus nisi natus dolorum maxime omnis, mollitia hic!</li>
<li>Aperiam odit, sapiente cum modi amet labore iste dolorum minima.</li>
...
</ul>Download link
Default
(PDF, 273 KB)
Code
<a class="gc-dwnld" href="#" download>
<img src="https://dummyimage.com/200x200" alt="" />
<span>Download Report <br>(<abbr title="Portable Document Format">PDF</abbr>, 273 <abbr title="KiloByte">KB</abbr>)</span>
</a>Vertical
(PDF, 273 KB)
Code
<a class="gc-dwnld vertical" href="#" download>
<img src="https://dummyimage.com/200x200" alt="" />
<span>Download Report <br>(<abbr title="Portable Document Format">PDF</abbr>, 273 <abbr title="KiloByte">KB</abbr>)</span>
</a>No image
Media Assets(273 KB)
Code
<a class="gc-dwnld" href="#" download>
<span>Media Assets <br>(273 <abbr title="KiloByte">KB</abbr>)</span>
</a>Existing utilities
.lead
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Note: the lead class font-size will change depending of the view port: xsmall, small medium and large
Code
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>.text-primary
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Code
<p class="text-primary">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>.text-white
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Code
<p class="text-white">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>.fnt-hdng
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Expedita reiciendis nobis ipsum?
Code
<p class="fnt-hdng">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Expedita reiciendis nobis ipsum?</p>.bg-light
Code
<div class="bg-light p-4"></div>OAG specific utilities
.oag-rds
Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa, nisi?
Code
<div class="bg-light oag-rds p-4">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa, nisi?</p>
</div>.oag-rds-sm
Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa, nisi?
Code
<div class="bg-light oag-rds-sm p-4">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa, nisi?</p>
</div>.oag-brdr
Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa, nisi?
Code
<div class="oag-brdr p-4">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa, nisi?</p>
</div>.oag-shadow
Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa, nisi?
Code
<div class="bg-light oag-shadow p-4">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa, nisi?</p>
</div>Page details
- Date modified: