Sélection de la langue

Gouvernement du Canada / Government of Canada

Recherche

Bloc des réseaux de médias sociaux

Disposition verticale

Dans les médias sociaux

Code 
<section class="gc-followus">
	<h2>Dans les médias sociaux</h2>
	<ul>
		<li>
			<a href="#facebook" class="facebook wb-lbx"><span class="wb-inv">Facebook&nbsp;: </span>NomPageFacebook</a>
		</li>
		<li>
			<a href="#" rel="external" class="x-social"><span class="wb-inv">X&nbsp;: </span>@CompteX</a>
		</li>
		<li>
			<a href="#" rel="external" class="youtube"><span class="wb-inv">Youtube&nbsp;: </span>NomYouTube</a>
		</li>
		<li>
			<a href="#" rel="external" class="instagram"><span class="wb-inv">Instagram&nbsp;: </span>NomInstagram</a>
		</li>
		<li>
			<a href="#" rel="external" class="linkedin"><span class="wb-inv">LinkedIn&nbsp;: </span>NomLinkedIn</a>
		</li>
		
	</ul>
</section>
<section id="facebook" class="modal-dialog modal-content overlay-def mfp-hide">
	<header class="modal-header">
		<h2 class="modal-title" id="lbx-title">Facebook</h2>
	</header>
	<div class="modal-body">
		<ul class="list-unstyled lst-spcd">
			<li>
				<a href="#" rel="external">[Titre du premier compte Facebook]</a>
			</li>
			<li>
				<a href="#" rel="external">[Titre du deuxième compte Facebook]</a>
			</li>
		</ul>
	</div>
	<div class="modal-footer">
		<button type="button" class="btn btn-sm btn-primary pull-left popup-modal-dismiss">Fermer<span class="wb-inv">Fermer la fenêtre superposée</span></button>
	</div>
</section>

Disposition horizontale

Dans les médias sociaux

Code 
<section class="gc-followus">
	<h2>Dans les médias sociaux</h2>
	<ul class="list-inline">
		<li>
			<a href="#facebook" class="facebook wb-lbx"><span class="wb-inv">Facebook&nbsp;: </span>NomPageFacebook</a>
		</li>
		<li>
			<a href="#" rel="external" class="x-social"><span class="wb-inv">X&nbsp;: </span>@CompteX</a>
		</li>
		<li>
			<a href="#" rel="external" class="youtube"><span class="wb-inv">Youtube&nbsp;: </span>NomYouTube</a>
		</li>
		<li>
			<a href="#" rel="external" class="instagram"><span class="wb-inv">Instagram&nbsp;: </span>NomInstagram</a>
		</li>
		<li>
			<a href="#" rel="external" class="linkedin"><span class="wb-inv">LinkedIn&nbsp;: </span>NomLinkedIn</a>
		</li>
		
	</ul>
</section>
<section id="facebook" class="modal-dialog modal-content overlay-def mfp-hide">
	<header class="modal-header">
		<h2 class="modal-title" id="lbx-title">Facebook</h2>
	</header>
	<div class="modal-body">
		<ul class="list-unstyled lst-spcd">
			<li>
				<a href="#" rel="external">[Titre du premier compte Facebook]</a>
			</li>
			<li>
				<a href="#" rel="external">[Titre du deuxième compte Facebook]</a>
			</li>
		</ul>
	</div>
	<div class="modal-footer">
		<button type="button" class="btn btn-sm btn-primary pull-left popup-modal-dismiss">Fermer<span class="wb-inv">Fermer la fenêtre superposée</span></button>
	</div>
</section>

Disposition verticale avec « D'autres moyens de rester en contact »

Dans les médias sociaux

Code 
<section class="gc-followus">
	<h2>Dans les médias sociaux</h2>
	<ul>
		<li>
			<a href="#facebook" class="facebook wb-lbx"><span class="wb-inv">Facebook&nbsp;: </span>NomPageFacebook</a>
		</li>
		<li>
			<a href="#" rel="external" class="x-social"><span class="wb-inv">X&nbsp;: </span>@CompteX</a>
		</li>
		<li>
			<a href="#" rel="external" class="youtube"><span class="wb-inv">Youtube&nbsp;: </span>NomYouTube</a>
		</li>
		<li>
			<a href="#" rel="external" class="instagram"><span class="wb-inv">Instagram&nbsp;: </span>NomInstagram</a>
		</li>
		<li>
			<a href="#" rel="external" class="linkedin"><span class="wb-inv">LinkedIn&nbsp;: </span>NomLinkedIn</a>
		</li>
		
		<li class="more-ways">
			<a href="#">D'autres moyens de rester en contact</a>
		</li>
		
	</ul>
</section>
<section id="facebook" class="modal-dialog modal-content overlay-def mfp-hide">
	<header class="modal-header">
		<h2 class="modal-title" id="lbx-title">Facebook</h2>
	</header>
	<div class="modal-body">
		<ul class="list-unstyled lst-spcd">
			<li>
				<a href="#" rel="external">[Titre du premier compte Facebook]</a>
			</li>
			<li>
				<a href="#" rel="external">[Titre du deuxième compte Facebook]</a>
			</li>
		</ul>
	</div>
	<div class="modal-footer">
		<button type="button" class="btn btn-sm btn-primary pull-left popup-modal-dismiss">Fermer<span class="wb-inv">Fermer la fenêtre superposée</span></button>
	</div>
</section>

Disposition horizontale avec « D'autres moyens de rester en contact »

Dans les médias sociaux

Code 
<section class="gc-followus">
	<h2>Dans les médias sociaux</h2>
	<ul class="list-inline">
		<li>
			<a href="#facebook" class="facebook wb-lbx"><span class="wb-inv">Facebook&nbsp;: </span>NomPageFacebook</a>
		</li>
		<li>
			<a href="#" rel="external" class="x-social"><span class="wb-inv">X&nbsp;: </span>@CompteX</a>
		</li>
		<li>
			<a href="#" rel="external" class="youtube"><span class="wb-inv">Youtube&nbsp;: </span>NomYouTube</a>
		</li>
		<li>
			<a href="#" rel="external" class="instagram"><span class="wb-inv">Instagram&nbsp;: </span>NomInstagram</a>
		</li>
		<li>
			<a href="#" rel="external" class="linkedin"><span class="wb-inv">LinkedIn&nbsp;: </span>NomLinkedIn</a>
		</li>
		
		<li class="more-ways">
			<a href="#">D'autres moyens de rester en contact</a>
		</li>
		
	</ul>
</section>
<section id="facebook" class="modal-dialog modal-content overlay-def mfp-hide">
	<header class="modal-header">
		<h2 class="modal-title" id="lbx-title">Facebook</h2>
	</header>
	<div class="modal-body">
		<ul class="list-unstyled lst-spcd">
			<li>
				<a href="#" rel="external">[Titre du premier compte Facebook]</a>
			</li>
			<li>
				<a href="#" rel="external">[Titre du deuxième compte Facebook]</a>
			</li>
		</ul>
	</div>
	<div class="modal-footer">
		<button type="button" class="btn btn-sm btn-primary pull-left popup-modal-dismiss">Fermer<span class="wb-inv">Fermer la fenêtre superposée</span></button>
	</div>
</section>

Détails de la page

Date de modification :