Page de contenu

Note

Cette page présente des exemples de classes CSS, de composants et d'autres éléments de GCWeb qui ont été personnalisés ou modifiés pour ce projet. Ces modifications ont été effectuées afin de mieux répondre aux exigences spécifiques et aux objectifs de conception du projet.

Pour une liste complète des fonctionnalités, veuillez visiter le site web de GCWeb. Consultez la documentation pour obtenir des informations détaillées sur chaque changement.

Échafaudage

Titres

Titre h2

Titre h3

Titre h4

Titre h5

Titre h6

Paragraphe - apparence par défaut avec un lien

Citation

Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...

— Auteur
Exemple de texte

Code

<figure>
	<blockquote>
		<p>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...</p>
	</blockquote>
	<figcaption>
		<p>— Auteur<br> Exemple de texte</p>
	</figcaption>
</figure>

Détails

Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio ipsum fugiat facilis dolorum voluptatem maiores blanditiis aspernatur quod, dicta explicabo!

Code

<details>
	<summary>Détails</summary>
	<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio ipsum fugiat facilis dolorum voluptatem maiores blanditiis aspernatur quod, dicta explicabo!</p>
</details>

Boutons

Code

<h3>Régulier</h3>
<p><a href="#" class="btn btn-primary">Primaire</a> <a href="#" class="btn btn-default">Par défaut</a> <a href="#" class="btn btn-link">Lien</a></p>
<h3>Large</h3>
<p><a href="#" class="btn btn-primary btn-lg">Primaire</a> <a href="#" class="btn btn-default btn-lg">Par défaut</a> <a href="#" class="btn btn-link btn-lg">Lien</a></p>
<h3>Petit</h3>
<p><a href="#" class="btn btn-primary btn-sm">Primaire</a> <a href="#" class="btn btn-default btn-sm">Par défaut</a> <a href="#" class="btn btn-link btn-sm">Lien</a></p>

Avis (était alertes)

Alerte informative

Détails de l'alerte.

Alerte informative

Détails de l'alerte.

Détails de l'alerte avec 2 paragraphes.

Code

<section class="alert alert-info">
	<h3>Alerte informative</h3>
	<p>Détails de l'alerte.</p>
</section>
<section class="alert alert-info">
	<h3>Alerte informative</h3>
	<p>Détails de l'alerte.</p>
	<p>Détails de l'alerte avec 2 paragraphes.</p>
</section>

Libellés

Libellé par défaut

Libellé primaire

Libellé Auditor general reports

Libellé Rapports du commissaire à l'environnement et au développement durable

Libellé Rapports des assemblées législatives du Nord

Libellé Rapports d’examen spécial des sociétés d’État

Code

<p><span class="label label-default">Libellé par défaut</span></p>
<p><span class="label label-primary">Libellé primaire</span></p>
<p><span class="label label-default" data-report-type="auditor-general-reports">Libellé Rapports du vérificateur général</span></p>
<p><span class="label label-default" data-report-type="commissioner-of-the-environment-and-sustainable-development-reports">Libellé Rapports du commissaire à l'environnement et au développement durable</span></p>
<p><span class="label label-default" data-report-type="northern-legislative-assembly-reports">Libellé Rapports des assemblées législatives du Nord</span></p>
<p><span class="label label-default" data-report-type="special-examinations-of-crown-corporations">Libellé Rapports d’examen spécial des sociétés d’État</span></p>

Interface à onglets - variante verticale

Avec stockage de session pour mémoriser le dernier onglet consulté.

Exemple 1

Lorem ipsum dolor sit amet Exemple 3 were among the most daring and skilful mariners ever known. They built great wooden boats with tall, sweeping bows and sterns. These ships, though open and without decks, were yet stout and seaworthy. Their remains have been found, at times lying deeply buried under the sand and preserved almost intact. One such vessel, discovered on the shore of Denmark, measured 72 feet in length. Another Viking ship, which was dug up in Norway, and which is preserved in the museum at Christiania, was 78 feet long and 17 feet wide. One of the old Norse sagas, or stories, tells how King Olaf Tryggvesson built a ship, the keel of which, as it lay on the grass, was 74 ells long; in modern measure, it would be a vessel of about 942 tons burden. Even if we make allowance for the exaggeration or ignorance of the writer of the saga, there is still a vast contrast between this vessel and the little ship Centurion in which Anson sailed round the world.

Exemple 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.

Exemple 3

Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore ipsum explicabo eius est voluptas eum autem, amet eveniet modi velit cupiditate, rerum illo facilis, at dolorem officia. Ea adipisci quisquam atque quasi vero odit porro perspiciatis consequatur veritatis ratione commodi iusto totam natus sequi veniam asperiores similique accusamus molestiae, necessitatibus voluptas perferendis ex tempora unde. Minima sapiente quasi harum quaerat sunt veniam! Saepe architecto inventore sapiente distinctio, illum, minus omnis veniam voluptatum laboriosam unde nesciunt neque perferendis, optio atque hic? Minima dolorum reiciendis mollitia, neque quia sed explicabo voluptatem blanditiis, ipsa, facere ex vel. Quas odit non illum quo doloribus esse nesciunt explicabo alias dolor consequuntur nisi dignissimos excepturi eligendi provident necessitatibus, nam eaque adipisci quasi qui sit expedita dolore velit deleniti? Repellat ea placeat quam sint adipisci reiciendis recusandae suscipit voluptatum odit iste laborum amet blanditiis rem quas excepturi culpa libero molestiae, doloribus facere voluptate voluptas, harum beatae quos! Cupiditate saepe, iusto architecto tempore porro ducimus consequuntur est nemo enim quae earum. Expedita nesciunt provident repellat ea aut animi voluptas beatae unde itaque. Qui error consequatur labore delectus, quae repellat nam deserunt sapiente et vel minus omnis similique molestias nihil eum aperiam aliquam fugit repudiandae! Dicta tempora hic excepturi?

Code

<div class="wb-tabs vertical">
	<div class="tabpanels">
		<details id="details-panel1">
			<summary>Exemple 1</summary>
			<p>...</p>
		</details>
		<details id="details-panel2" open="open">
			<summary>Exemple 2</summary>
			<p>...</p>
		</details>
		<details id="details-panel3">
			<summary>Exemple 3</summary>
			<p>...</p>
		</details>
	</div>
</div>

Carte par défaut

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.

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>

Carte avec arrière-plan

Lorem ipsum dolor

Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, ab.

En lire plus →

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">En lire plus →</a>
</article>

Carte avec titre stylisé comme corps de texte

Nouvelles 18 avril 2025

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.

En lire plus →

Code

<article class="oag-card oag-heading-as-body bg-light">
	<div class="mb-3">
		<span class="label label-default">Nouvelles</span>
		<time datetime="2025-03-18">18 avril 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">En lire plus →</a>
</article>

Carte avec image sur le dessus

Demandes des médias

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">Demandes des médias</span></div>
		<h3><a href="#" class="stretched-link">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do.</a></h3>
	</article>

Carte avec image sur le côté gauche

Demandes de renseignements du public

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">Demandes de renseignements du public</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>

Lien de téléchargement

Par défaut

Télécharger le rapport
(PDF, 273 KO)

Code

<a class="gc-dwnld" href="#" download>
	<img src="https://dummyimage.com/200x200" alt="" />
	<span>Télécharger le rapport <br>(<abbr title="Portable Document Format">PDF</abbr>, 273 <abbr title="Kilo-octet">KO</abbr>)</span>
</a>

Vertical

Télécharger le rapport
(PDF, 273 KO)

Code

<a class="gc-dwnld vertical" href="#" download>
	<img src="https://dummyimage.com/200x200" alt="" />
	<span>Télécharger le rapport <br>(<abbr title="Portable Document Format">PDF</abbr>, 273 <abbr title="Kilo-octet">KO</abbr>)</span>
</a>

Sans image

Ressources multimédias
(273 KO)

Code

<a class="gc-dwnld" href="#" download>
	<span>Ressources multimédias <br>(273 <abbr title="Kilo-octet">KO</abbr>)</span>
</a>

Utilitaires existants

`.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>

Utilitaires spécifiques au BVG

`.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:: 2025-04-08