Components

Liste des composants IDEO3.2

Button

Le bouton fonctionne dans deux formats, le type liens <a> et le type actions <button>.

Dans les deux cas, il est possible d'avoir un texte plus long sur desktop et plus cours sur mobile via <span class="lg:show"> ..., d'avoir une icon svg, ou d'ajouter un tooltip

Par défaut, le bouton est "inline". Lorsqu'une class d'alignement est appliquée, le bouton devient "block".

<div class="blk-button">
	<a href="#" class="button blk-button__link">
		<span class="ico blk-button__icon" aria-hidden="true">
			<svg></svg>
		</span>
		<span class="txt blk-button__label">
			<span>Button text</span>
		</span>
	</a>
</div>

<div class="blk-button">
	<button class="button blk-button__link">
		<span class="ico blk-button__icon" aria-hidden="true">
			<svg></svg>
		</span>
		<span class="txt blk-button__label">
			<span class="lg:show">Desktop long text</span>
			<span class="lg:hide">Mobile short text</span>
		</span>
		<span class="txt blk-button__tooltip">
			<span>Additional tolltip informations if needed</span>
		</span>
	</button>
</div>

<insert-markup>components.button-</insert-markup>

Markup: ../../../snippets/components/button.hbs

<div class="blk-button {{modifier_class}}">
	<button type="button" id="navSheetTrigger" class="button blk-button__link tab-mobile-bottom-toggle"
		aria-label="Open navigation menu" aria-controls="navSheet" aria-expanded="false">
		<span class="ico blk-button__icon" aria-hidden="true">
			<svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg"
				class="icon icon-tabler icon-tabler-menu" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5"
				stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
				<path stroke="none" d="M0 0h24v24H0z"></path>
				<line x1="4" y1="8" x2="20" y2="8"></line>
				<line x1="4" y1="16" x2="20" y2="16"></line>
			</svg>
		</span>
		<span class="txt blk-button__label">
			<span>Menu</span>
		</span>
		<span class="txt blk-button__tooltip">
			<span>Tooltip text</span>
		</span>
	</button>
</div>

<div class="blk-button {{modifier_class}}">
	<a href="tel:" class="button blk-button__link">
		<span class="ico blk-button__icon" aria-hidden="true">
			<svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg"
				class="icon icon-tabler icon-tabler-phone-outgoing" width="24" height="24" viewBox="0 0 24 24"
				stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
				<path stroke="none" d="M0 0h24v24H0z"></path>
				<path d="M5 4h4l2 5l-2.5 1.5a11 11 0 0 0 5 5l1.5 -2.5l5 2v4a2 2 0 0 1 -2 2a16 16 0 0 1 -15 -15a2 2 0 0 1 2 -2">
				</path>
				<line x1="15" y1="9" x2="20" y2="4"></line>
				<polyline points="16 4 20 4 20 8"></polyline>
			</svg>
		</span>
		<span class="txt blk-button__label">
			<span class="lg:show">0800.949.848</span>
			<span class="lg:hide">Call</span>
		</span>
	</a>
</div>

<div class="blk-button {{modifier_class}}">
	<a href="#" class="button blk-button__link">
		<span class="txt blk-button__label">
			<span>Button text</span>
		</span>
	</a>
</div>

Source: src/cssframework_v2/less/components/button.less, line 1

Le bouton existe en deux couleurs.
Le bouton standard basé sur la couleur accent
Le bouton du CTA principal basé sur la couleur lead
Chaque couleur est décliné en 4 styles, normal, bold, text et outline

<insert-markup>components.button.colors-</insert-markup>

Markup: ../../../snippets/components/button.hbs

<div class="blk-button {{modifier_class}}">
	<button type="button" id="navSheetTrigger" class="button blk-button__link tab-mobile-bottom-toggle"
		aria-label="Open navigation menu" aria-controls="navSheet" aria-expanded="false">
		<span class="ico blk-button__icon" aria-hidden="true">
			<svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg"
				class="icon icon-tabler icon-tabler-menu" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5"
				stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
				<path stroke="none" d="M0 0h24v24H0z"></path>
				<line x1="4" y1="8" x2="20" y2="8"></line>
				<line x1="4" y1="16" x2="20" y2="16"></line>
			</svg>
		</span>
		<span class="txt blk-button__label">
			<span>Menu</span>
		</span>
		<span class="txt blk-button__tooltip">
			<span>Tooltip text</span>
		</span>
	</button>
</div>

<div class="blk-button {{modifier_class}}">
	<a href="tel:" class="button blk-button__link">
		<span class="ico blk-button__icon" aria-hidden="true">
			<svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg"
				class="icon icon-tabler icon-tabler-phone-outgoing" width="24" height="24" viewBox="0 0 24 24"
				stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
				<path stroke="none" d="M0 0h24v24H0z"></path>
				<path d="M5 4h4l2 5l-2.5 1.5a11 11 0 0 0 5 5l1.5 -2.5l5 2v4a2 2 0 0 1 -2 2a16 16 0 0 1 -15 -15a2 2 0 0 1 2 -2">
				</path>
				<line x1="15" y1="9" x2="20" y2="4"></line>
				<polyline points="16 4 20 4 20 8"></polyline>
			</svg>
		</span>
		<span class="txt blk-button__label">
			<span class="lg:show">0800.949.848</span>
			<span class="lg:hide">Call</span>
		</span>
	</a>
</div>

<div class="blk-button {{modifier_class}}">
	<a href="#" class="button blk-button__link">
		<span class="txt blk-button__label">
			<span>Button text</span>
		</span>
	</a>
</div>

Source: src/cssframework_v2/less/components/button.less, line 649

Button Styles

Styles additionnels qui peuvent être combinés aux couleurs.
C'est styles ne foctionnent qu'avez des boutons ayant une icone

<insert-markup>components.button.styles-</insert-markup>

Markup: ../../../snippets/components/button.hbs

<div class="blk-button {{modifier_class}}">
	<button type="button" id="navSheetTrigger" class="button blk-button__link tab-mobile-bottom-toggle"
		aria-label="Open navigation menu" aria-controls="navSheet" aria-expanded="false">
		<span class="ico blk-button__icon" aria-hidden="true">
			<svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg"
				class="icon icon-tabler icon-tabler-menu" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5"
				stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
				<path stroke="none" d="M0 0h24v24H0z"></path>
				<line x1="4" y1="8" x2="20" y2="8"></line>
				<line x1="4" y1="16" x2="20" y2="16"></line>
			</svg>
		</span>
		<span class="txt blk-button__label">
			<span>Menu</span>
		</span>
		<span class="txt blk-button__tooltip">
			<span>Tooltip text</span>
		</span>
	</button>
</div>

<div class="blk-button {{modifier_class}}">
	<a href="tel:" class="button blk-button__link">
		<span class="ico blk-button__icon" aria-hidden="true">
			<svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg"
				class="icon icon-tabler icon-tabler-phone-outgoing" width="24" height="24" viewBox="0 0 24 24"
				stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
				<path stroke="none" d="M0 0h24v24H0z"></path>
				<path d="M5 4h4l2 5l-2.5 1.5a11 11 0 0 0 5 5l1.5 -2.5l5 2v4a2 2 0 0 1 -2 2a16 16 0 0 1 -15 -15a2 2 0 0 1 2 -2">
				</path>
				<line x1="15" y1="9" x2="20" y2="4"></line>
				<polyline points="16 4 20 4 20 8"></polyline>
			</svg>
		</span>
		<span class="txt blk-button__label">
			<span class="lg:show">0800.949.848</span>
			<span class="lg:hide">Call</span>
		</span>
	</a>
</div>

<div class="blk-button {{modifier_class}}">
	<a href="#" class="button blk-button__link">
		<span class="txt blk-button__label">
			<span>Button text</span>
		</span>
	</a>
</div>

Source: src/cssframework_v2/less/components/button.less, line 489

Buttons Group

Différents cas d'utilisation de boutons dans des groupes.
Les groupes de boutons permettent notamment de gérer l'alignement inline.

.buttons-group = Groupe de bouton standard. Les boutons passeront à la ligne si l'espace disponible n'est pas suffisant.
.buttons-group-collapse = Groupe de bouton sans espaces. les boutons resteront toujours sur une même ligne.
.buttons-group-collapse-wrap = Groupe de bouton sans espaces. Les boutons passent en colonnes sur mobile.

<div class="buttons-group">
	<div class="blk-button"></div>
	<div class="blk-button"></div>
	<div class="blk-button"></div>
	...
</div>

<insert-markup>components.button.buttonsgroup-</insert-markup>

0800.949.848 Call

Markup: ../../../snippets/components/buttons-group.hbs

<div class="{{modifier_class}}">

	<div class="blk-button">
	<button type="button" id="navSheetTrigger" class="button blk-button__link tab-mobile-bottom-toggle"
		aria-label="Open navigation menu" aria-controls="navSheet" aria-expanded="false">
		<span class="ico blk-button__icon" aria-hidden="true">
			<svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg"
				class="icon icon-tabler icon-tabler-menu" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5"
				stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
				<path stroke="none" d="M0 0h24v24H0z"></path>
				<line x1="4" y1="8" x2="20" y2="8"></line>
				<line x1="4" y1="16" x2="20" y2="16"></line>
			</svg>
		</span>
		<span class="txt blk-button__label">
			<span>Menu</span>
		</span>
	</button>
	</div>
	<div class="blk-button">
	<button type="button" id="contactSheetTrigger" class="button blk-button__link" aria-expanded="false"
		aria-label="Open contact information" aria-controls="contactSheet">
		<span class="ico blk-button__icon" aria-hidden="true">
			<svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg"
				class="icon icon-tabler icon-tabler-messages" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5"
				stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
				<path stroke="none" d="M0 0h24v24H0z"></path>
				<path d="M21 14l-3 -3h-7a1 1 0 0 1 -1 -1v-6a1 1 0 0 1 1 -1h9a1 1 0 0 1 1 1v10"></path>
				<path d="M14 15v2a1 1 0 0 1 -1 1h-7l-3 3v-10a1 1 0 0 1 1 -1h2"></path>
			</svg>
		</span>
		<span class="txt blk-button__label">
			<span class="lg:show">Contact Us</span>
			<span class="lg:hide">Contact</span>
		</span>
		<span class="txt blk-button__tooltip center">
			<span>Contact details, useful info, social networks…</span>
		</span>
	</button>
	</div>
	<div class="blk-button blk-button--lead-bold">
	<a href="tel:" class="button blk-button__link">
		<span class="ico blk-button__icon" aria-hidden="true">
			<svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg"
				class="icon icon-tabler icon-tabler-phone-outgoing" width="24" height="24" viewBox="0 0 24 24"
				stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
				<path stroke="none" d="M0 0h24v24H0z"></path>
				<path d="M5 4h4l2 5l-2.5 1.5a11 11 0 0 0 5 5l1.5 -2.5l5 2v4a2 2 0 0 1 -2 2a16 16 0 0 1 -15 -15a2 2 0 0 1 2 -2">
				</path>
				<line x1="15" y1="9" x2="20" y2="4"></line>
				<polyline points="16 4 20 4 20 8"></polyline>
			</svg>
		</span>
		<span class="txt blk-button__label">
			<span class="lg:show">0800.949.848</span>
			<span class="lg:hide">Call</span>
		</span>
	</a>
	</div>
	<div class="blk-button">
	<button type="button" id="configSheetTrigger" class="button blk-button__link" aria-expanded="false"
		aria-label="Open user settings" aria-controls="configSheet">
		<span class="ico blk-button__icon" aria-hidden="true">
			<svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg"
				class="icon icon-tabler icon-tabler-settings" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5"
				stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
				<path stroke="none" d="M0 0h24v24H0z"></path>
				<path
					d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z">
				</path>
				<circle cx="12" cy="12" r="3"></circle>
			</svg>
		</span>
		<span class="txt blk-button__label">
			<span class="lg:show">Options</span>
			<span class="lg:hide">Options</span>
		</span>
	</button>
	</div>

</div>

Source: src/cssframework_v2/less/components/button.less, line 730

Carousel

Remplace les anciens sliders.
Il n'y a pas d'autoplay (car pas accessibility-friendly).

L'affichage par défaut des images est au format d'environ 21/9 pour garantir par défaut des images pas trop hautes dans la page.
Il faut ajouter des class de style, de format ... pour adapter l'affichage (voir ci-dessous).
N'hésitez pas à tester en plein écran, au format mobile ... pour bien voir les différences de fonctionnement.

Important : tous les exemples présentés ici auront une combinaison de plusieurs class.
Il y aura à minima les controls affichés pour faciliter les tests.

<insert-markup>components.carousel-</insert-markup>

Affichage par défaut

Titre Fusce ullamcorper Description Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Affichage avec "débordement" dans une .row.screen

.controls

Présente les boutons de navigations.
Sur desktop ils s'affichent au survol.
Sur mobile, les contrôles sont toujours visibles lorsque la .row n'est pas "screen", et toujours invisibles lorsque la .row est "screen".

Important : Comme vous pouvez le voir dans l'affichage par défaut ci-dessus, les controls sont optionnels en .row.screen car on peut cliquer sur les images de débordement. En revanche ils sont obligatoires dans tous les autres cas pour pouvoir naviguer et indiquer qu'il y a d'autres images.

<insert-markup>components.carousel-0</insert-markup>

Affichage par défaut

Affichage avec "débordement" dans une .row.screen

Affichage par défaut

Affichage avec "débordement" dans une .row.screen

Affichage par défaut

Affichage avec "débordement" dans une .row.screen

Affichage par défaut

Affichage avec "débordement" dans une .row.screen

Affichage par défaut

Affichage avec "débordement" dans une .row.screen

Affichage par défaut

Affichage avec "débordement" dans une .row.screen

Affichage par défaut

Affichage avec "débordement" dans une .row.screen

Affichage par défaut

Affichage avec "débordement" dans une .row.screen

Affichage par défaut

Affichage avec "débordement" dans une .row.screen

Affichage par défaut

Affichage avec "débordement" dans une .row.screen

Affichage par défaut

Affichage avec "débordement" dans une .row.screen

Markup: ../../../snippets/components/carousel.hbs

<section class="container-grid">

	<div class="row">
		<div class="large-12 columns">
			<h4>Affichage par défaut</h4>
		</div>
		<div class="large-12 columns">

			<div class="blk-carousel {{modifier_class}}">
				<div class="blk-carousel__scene">

					<div class="collection-item">
						<figure class="lazy">
							<picture>
								<img
									src="data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20720%20441%27%3E%3C%2Fsvg%3E"
									data-src="ideo-assets/img/01.jpg" width="720" height="441" loading="lazy">
							</picture>
							<figcaption>
								<span class="title">Titre Fusce ullamcorper</span>
								<span class="description">Description Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
							</figcaption>
						</figure>
					</div>

					<div class="collection-item">
						<figure class="lazy">
							<picture>
								<img
									src="data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20720%20441%27%3E%3C%2Fsvg%3E"
									data-src="ideo-assets/img/02.jpg" width="720" height="441" loading="lazy">
							</picture>
							<figcaption>
								<span class="title">Titre Fusce ullamcorper</span>
								<span class="description">Description Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
							</figcaption>
						</figure>
					</div>

					<div class="collection-item">
						<figure class="lazy">
							<picture>
								<img
									src="data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20720%20441%27%3E%3C%2Fsvg%3E"
									data-src="ideo-assets/img/03.jpg" width="720" height="441" loading="lazy">
							</picture>
							<figcaption>
								<span class="title">Titre Fusce ullamcorper</span>
								<span class="description">Description Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
							</figcaption>
						</figure>
					</div>

					<div class="collection-item">
						<figure class="lazy">
							<picture>
								<img
									src="data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20720%20441%27%3E%3C%2Fsvg%3E"
									data-src="ideo-assets/img/04.jpg" width="720" height="441" loading="lazy">
							</picture>
							<figcaption>
								<span class="title">Titre Fusce ullamcorper</span>
								<span class="description">Description Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
							</figcaption>
						</figure>
					</div>

					<div class="collection-item">
						<figure class="lazy">
							<picture>
								<img
									src="data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20720%20441%27%3E%3C%2Fsvg%3E"
									data-src="ideo-assets/img/01.jpg" width="720" height="441" loading="lazy">
							</picture>
							<figcaption>
								<span class="title">Titre Fusce ullamcorper</span>
								<span class="description">Description Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
							</figcaption>
						</figure>
					</div>

					<div class="collection-item">
						<figure class="lazy">
							<picture>
								<img
									src="data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20720%20441%27%3E%3C%2Fsvg%3E"
									data-src="ideo-assets/img/02.jpg" width="720" height="441" loading="lazy">
							</picture>
							<figcaption>
								<span class="title">Titre Fusce ullamcorper</span>
								<span class="description">Description Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
							</figcaption>
						</figure>
					</div>

					<div class="collection-item">
						<figure class="lazy">
							<picture>
								<img
									src="data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20720%20441%27%3E%3C%2Fsvg%3E"
									data-src="ideo-assets/img/03.jpg" width="720" height="441" loading="lazy">
							</picture>
							<figcaption>
								<span class="title">Titre Fusce ullamcorper</span>
								<span class="description">Description Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
							</figcaption>
						</figure>
					</div>

					<div class="collection-item">
						<figure class="lazy">
							<picture>
								<img
									src="data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20720%20441%27%3E%3C%2Fsvg%3E"
									data-src="ideo-assets/img/04.jpg" width="720" height="441" loading="lazy">
							</picture>
							<figcaption>
								<span class="title">Titre Fusce ullamcorper</span>
								<span class="description">Description Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
							</figcaption>
						</figure>
					</div>

				</div>
			</div>

		</div>
	</div>

	<div class="row screen">
		<div class="large-12 columns">
			<h4>&nbsp;&nbsp;&nbsp; Affichage avec "débordement" dans une .row.screen </h4>
		</div>
		<div class="large-12 columns">

			<div class="blk-carousel {{modifier_class}}">
				<div class="blk-carousel__scene">

					<div class="collection-item">
						<figure class="lazy">
							<picture>
								<img
									src="data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20720%20441%27%3E%3C%2Fsvg%3E"
									data-src="ideo-assets/img/01.jpg" width="720" height="441" loading="lazy">
							</picture>
							<figcaption>
								<span class="title">Titre Fusce ullamcorper</span>
								<span class="description">Description Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
							</figcaption>
						</figure>
					</div>

					<div class="collection-item">
						<figure class="lazy">
							<picture>
								<img
									src="data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20720%20441%27%3E%3C%2Fsvg%3E"
									data-src="ideo-assets/img/02.jpg" width="720" height="441" loading="lazy">
							</picture>
							<figcaption>
								<span class="title">Titre Fusce ullamcorper</span>
								<span class="description">Description Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
							</figcaption>
						</figure>
					</div>

					<div class="collection-item">
						<figure class="lazy">
							<picture>
								<img
									src="data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20720%20441%27%3E%3C%2Fsvg%3E"
									data-src="ideo-assets/img/03.jpg" width="720" height="441" loading="lazy">
							</picture>
							<figcaption>
								<span class="title">Titre Fusce ullamcorper</span>
								<span class="description">Description Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
							</figcaption>
						</figure>
					</div>

					<div class="collection-item">
						<figure class="lazy">
							<picture>
								<img
									src="data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20720%20441%27%3E%3C%2Fsvg%3E"
									data-src="ideo-assets/img/04.jpg" width="720" height="441" loading="lazy">
							</picture>
							<figcaption>
								<span class="title">Titre Fusce ullamcorper</span>
								<span class="description">Description Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
							</figcaption>
						</figure>
					</div>

					<div class="collection-item">
						<figure class="lazy">
							<picture>
								<img
									src="data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20720%20441%27%3E%3C%2Fsvg%3E"
									data-src="ideo-assets/img/01.jpg" width="720" height="441" loading="lazy">
							</picture>
							<figcaption>
								<span class="title">Titre Fusce ullamcorper</span>
								<span class="description">Description Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
							</figcaption>
						</figure>
					</div>

					<div class="collection-item">
						<figure class="lazy">
							<picture>
								<img
									src="data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20720%20441%27%3E%3C%2Fsvg%3E"
									data-src="ideo-assets/img/02.jpg" width="720" height="441" loading="lazy">
							</picture>
							<figcaption>
								<span class="title">Titre Fusce ullamcorper</span>
								<span class="description">Description Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
							</figcaption>
						</figure>
					</div>

					<div class="collection-item">
						<figure class="lazy">
							<picture>
								<img
									src="data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20720%20441%27%3E%3C%2Fsvg%3E"
									data-src="ideo-assets/img/03.jpg" width="720" height="441" loading="lazy">
							</picture>
							<figcaption>
								<span class="title">Titre Fusce ullamcorper</span>
								<span class="description">Description Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
							</figcaption>
						</figure>
					</div>

					<div class="collection-item">
						<figure class="lazy">
							<picture>
								<img
									src="data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20720%20441%27%3E%3C%2Fsvg%3E"
									data-src="ideo-assets/img/04.jpg" width="720" height="441" loading="lazy">
							</picture>
							<figcaption>
								<span class="title">Titre Fusce ullamcorper</span>
								<span class="description">Description Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
							</figcaption>
						</figure>
					</div>

				</div>
			</div>

		</div>
	</div>
</section>

Source: src/cssframework_v2/less/components/carousel.less, line 1

Grille

Afficher une collection d'image en grille de photos.
Remplace les anciens justified gallery.

Tous les exemples présentés ici auront une combinaison de plusieurs class.

<insert-markup>components.grille-</insert-markup>

Markup: ../../../snippets/components/grille.hbs

<div class="blk-grid {{modifier_class}}">
	<div class="blk-grid__container">

		<div class="collection-item">
			<figure class="lazy">
				<picture>
					<img
						src="data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20720%20441%27%3E%3C%2Fsvg%3E"
						data-src="ideo-assets/img/01.jpg" width="720" height="441" loading="lazy">
				</picture>
				<figcaption>
					<span class="title">Titre Fusce ullamcorper</span>
					<span class="description">Description Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
				</figcaption>
			</figure>
		</div>

		<div class="collection-item">
			<figure class="lazy">
				<picture>
					<img
						src="data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20720%20441%27%3E%3C%2Fsvg%3E"
						data-src="ideo-assets/img/02.jpg" width="720" height="441" loading="lazy">
				</picture>
				<figcaption>
					<span class="title">Titre Fusce ullamcorper</span>
					<span class="description">Description Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
				</figcaption>
			</figure>
		</div>

		<div class="collection-item">
			<figure class="lazy">
				<picture>
					<img
						src="data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20720%20441%27%3E%3C%2Fsvg%3E"
						data-src="ideo-assets/img/03.jpg" width="720" height="441" loading="lazy">
				</picture>
				<figcaption>
					<span class="title">Titre Fusce ullamcorper</span>
					<span class="description">Description Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
				</figcaption>
			</figure>
		</div>

		<div class="collection-item">
			<figure class="lazy">
				<picture>
					<img
						src="data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20720%20441%27%3E%3C%2Fsvg%3E"
						data-src="ideo-assets/img/04.jpg" width="720" height="441" loading="lazy">
				</picture>
				<figcaption>
					<span class="title">Titre Fusce ullamcorper</span>
					<span class="description">Description Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
				</figcaption>
			</figure>
		</div>

		<div class="collection-item">
			<figure class="lazy">
				<picture>
					<img
						src="data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20720%20441%27%3E%3C%2Fsvg%3E"
						data-src="ideo-assets/img/01.jpg" width="720" height="441" loading="lazy">
				</picture>
				<figcaption>
					<span class="title">Titre Fusce ullamcorper</span>
					<span class="description">Description Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
				</figcaption>
			</figure>
		</div>

		<div class="collection-item">
			<figure class="lazy">
				<picture>
					<img
						src="data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20720%20441%27%3E%3C%2Fsvg%3E"
						data-src="ideo-assets/img/02.jpg" width="720" height="441" loading="lazy">
				</picture>
				<figcaption>
					<span class="title">Titre Fusce ullamcorper</span>
					<span class="description">Description Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
				</figcaption>
			</figure>
		</div>

		<div class="collection-item">
			<figure class="lazy">
				<picture>
					<img
						src="data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20720%20441%27%3E%3C%2Fsvg%3E"
						data-src="ideo-assets/img/03.jpg" width="720" height="441" loading="lazy">
				</picture>
				<figcaption>
					<span class="title">Titre Fusce ullamcorper</span>
					<span class="description">Description Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
				</figcaption>
			</figure>
		</div>

		<div class="collection-item">
			<figure class="lazy">
				<picture>
					<img
						src="data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20720%20441%27%3E%3C%2Fsvg%3E"
						data-src="ideo-assets/img/04.jpg" width="720" height="441" loading="lazy">
				</picture>
				<figcaption>
					<span class="title">Titre Fusce ullamcorper</span>
					<span class="description">Description Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
				</figcaption>
			</figure>
		</div>

	</div>
</div>

Source: src/cssframework_v2/less/components/grid.less, line 1

Language

Barre de langues du site.
Liste de liens affichés sous forme de boutons dans le "Config Sheet"
Il n'y a pas de class modifiers.

[[language_link|context=sheet]]

Le paramètre |context=sheet est nécessaire pour générer le texte autour de la barre de liens de langues .

<insert-markup>components.language-</insert-markup>

Langue

Choisir la langue

Langue

Choisir la langue

Markup: ../../../snippets/components/language.hbs

<div class="blk-sheet__section">
	<h3>Langue</h3>
	<p>Choisir la langue</p>
	<nav class="blk-language {{modifier_class}}">
		<ul>
			<li class="fr has-dropdown">
				<a href="fr_FR-homeTop.php" target="_self" class="active" tabindex="0">
					<span	class="txt">fr</span>
				</a>
				<ul class="dropdown">
					<li class="en"><a href="fr_FR-homeTop.php" target="_self" tabindex="0"><span class="txt">en</span></a></li>
					<li class="de"><a href="fr_FR-homeTop.php" target="_self" tabindex="0"><span class="txt">de</span></a></li>
					<li class="es"><a href="fr_FR-homeTop.php" target="_self" tabindex="0"><span class="txt">sp</span></a></li>
				</ul>
			</li>
		</ul>
	</nav>
</div>

Source: src/cssframework_v2/less/components/language.less, line 1

Nav

Menu de navigation. Présentation des différents styles disponibles.

L'affichage par défaut est vertical. La class .blk-nav--horizontal permet l'affichage horizontal
Pour le menu mobile, un symbole "🔗" (lien) est ajouté à côté du lien pour faciliter ton identification VS les dossiers de pages.

Important : Les styles de nav s'uttilisent dans un site via des mixins.
Les class .nav-style01, ... n'exsitent pas dans le framework.
Elles ne sont présentent ici que pour montrer les styles dans le documentation.

...
<div class="header__body--nav xl:show">
	<nav class="blk-nav blk-nav--main blk-nav--horizontal">
		[[menu_1]]
	</nav>
</div>
...

...
<div class="blk-sheet__content">
	<nav class="blk-nav blk-nav--main">
		[[menu_4]]
	</nav>
</div>
...

<insert-markup>components.nav-</insert-markup>

Version "desktop" dans le `<header>`

Version "mobile" dans le `<div class="blk-sheet">`

Version "desktop" dans le `<header>`

Version "mobile" dans le `<div class="blk-sheet">`

Version "desktop" dans le `<header>`

Version "mobile" dans le `<div class="blk-sheet">`

Version "desktop" dans le `<header>`

Version "mobile" dans le `<div class="blk-sheet">`

Version "desktop" dans le `<header>`

Version "mobile" dans le `<div class="blk-sheet">`

Version "desktop" dans le `<header>`

Version "mobile" dans le `<div class="blk-sheet">`

Version "desktop" dans le `<header>`

Version "mobile" dans le `<div class="blk-sheet">`

Version "desktop" dans le `<header>`

Version "mobile" dans le `<div class="blk-sheet">`

Markup: ../../../snippets/components/nav.hbs

<h4>Version "desktop" dans le <code>&lt;header&gt;</code> </h4>

<header class="header container-grid">
	<div class="header__body screen">
		<!-- Menu ======= -->
		<div class="header__body--nav {{modifier_class}}">
			<nav class="blk-nav blk-nav--horizontal blk-nav--main">
				<ul>
					<li><a href="fr_FR-homeTop.php" target="_self" class="active">Accueil</a></li>
					<li class="has-dropdown"><a href="#">Produits et services</a>
						<ul class="dropdown">
							<li class="has-dropdown"><a href="fr_FR-contentTop.php">Façadier</a>
								<ul class="dropdown">
									<li><a href="fr_FR-contentTop.php">Level 2</a></li>
									<li><a href="fr_FR-contentTop.php" target="_blank">Subdropdown Option</a></li>
									<li class="has-dropdown"><a href="#">Façadier 2</a>
										<ul class="dropdown">
											<li><a href="fr_FR-contentTop.php">Level 2</a></li>
											<li><a href="fr_FR-contentTop.php" target="_blank">Subdropdown Option</a></li>
											<li><a href="fr_FR-contentTop.php">Subdropdown Option</a></li>
											<li><a href="fr_FR-contentTop.php">Subdropdown Option</a></li>
										</ul>
									</li>
									<li><a href="fr_FR-contentTop.php">Subdropdown Option</a></li>
								</ul>
							</li>
						</ul>
					</li>
					<li class="has-dropdown"><a href="#">Références</a>
						<ul class="dropdown">
							<li><a href="fr_FR-contentTop.php">Level 2</a></li>
							<li><a href="fr_FR-contentTop.php">Subdropdown Option</a></li>
							<li><a href="fr_FR-contentTop.php">Subdropdown Option</a></li>
							<li><a href="fr_FR-contentTop.php">Subdropdown Option</a></li>
						</ul>
					</li>
					<li><a href="fr_FR-contentTop.php">Notre équipe</a></li>
					<li><a href="fr_FR-contentTop.php">Devis</a></li>
				</ul>
			</nav>
		</div>

	</div>
</header>

<h4>Version "mobile" dans le <code>&lt;div class="blk-sheet"&gt;</code> </h4>
<div class="blk-sheet">
	<div class="blk-sheet__content {{modifier_class}}">
		<nav class="blk-nav blk-nav--main">
			<ul>
				<li><a href="fr_FR-homeTop.php" target="_self" class="active">Accueil</a></li>
				<li class="has-dropdown"><a href="#">Produits et services</a>
					<ul class="dropdown">
						<li class="has-dropdown"><a href="fr_FR-contentTop.php">Façadier</a>
							<ul class="dropdown">
								<li><a href="fr_FR-contentTop.php">Level 2</a></li>
								<li><a href="fr_FR-contentTop.php" target="_blank">Subdropdown Option</a></li>
								<li class="has-dropdown"><a href="#">Façadier 2</a>
									<ul class="dropdown">
										<li><a href="fr_FR-contentTop.php">Level 2</a></li>
										<li><a href="fr_FR-contentTop.php" target="_blank">Subdropdown Option</a></li>
										<li><a href="fr_FR-contentTop.php">Subdropdown Option</a></li>
										<li><a href="fr_FR-contentTop.php">Subdropdown Option</a></li>
									</ul>
								</li>
								<li><a href="fr_FR-contentTop.php">Subdropdown Option</a></li>
							</ul>
						</li>
					</ul>
				</li>
				<li class="has-dropdown"><a href="#">Références</a>
					<ul class="dropdown">
						<li><a href="fr_FR-contentTop.php">Level 2</a></li>
						<li><a href="fr_FR-contentTop.php">Subdropdown Option</a></li>
						<li><a href="fr_FR-contentTop.php">Subdropdown Option</a></li>
						<li><a href="fr_FR-contentTop.php">Subdropdown Option</a></li>
					</ul>
				</li>
				<li><a href="fr_FR-contentTop.php">Notre équipe</a></li>
				<li><a href="fr_FR-contentTop.php">Devis</a></li>
			</ul>
		</nav>
	</div>
</div>

Source: src/cssframework_v2/less/components/nav.less, line 1

Diaporama

Permet d'afficher un diaporama des photos à partir d'une collection d'images. Le Diaporama est un élément décoratif dont la seule intéraction est de mettre en pause l'animation.

L'affichage par défaut des images est au format d'environ 21/9 pour garantir par défaut des images pas trop hautes dans la page.
Des class supplémentaires permettent d'adapter le style, le format ... (voir ci-dessous).
Les Diaporamas sont présentés ici avec le "figcaption", celui-ci est optionnel.

Important : tous les exemples présentés ici auront une combinaison de plusieurs class.

<insert-markup>components.slideshow-</insert-markup>

Titre 1 Fusce ullamcorper Description Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Titre 2 Fusce ullamcorper Description Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Titre 3 Fusce ullamcorper Description Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Titre 4 Fusce ullamcorper Description Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Markup: ../../../snippets/components/slideshow.hbs

<section class="container-grid">

	<div class="row">
		<div class="large-12 columns">

			<div class="blk-slideshow {{modifier_class}}">
				<div class="blk-slideshow__container">
					<div class="blk-slideshow__controls">
						<div class="blk-button xxl blk-slideshow__play">
							<button type="button" class="button blk-button__link" title="Lire le diaporama ou mettre en pause">
								<span class="ico blk-button__icon play" aria-hidden="true">
									<svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24" class="play icon-solid"><path class="solid" fill="currentcolor" d="M8.524 4.938A1 1 0 0 0 7 5.79v12.42a1 1 0 0 0 1.524.852l10.092-6.21a1 1 0 0 0 0-1.704L8.524 4.938Z"></path></svg>
								</span>
								<span class="ico blk-button__icon pause" aria-hidden="true">
									<svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24" class="pause icon-solid"><path class="solid" fill="currentcolor" d="M9 5H7a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1Zm8 0h-2a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1Z"></path></svg>
								</span>
							</button>
						</div>
					</div>
					<div class="collection-item">
						<figure>
							<picture>
								<img src="data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20720%20441%27%3E%3C%2Fsvg%3E"data-src="ideo-assets/img/01.jpg" width="720" height="441" loading="lazy">
							</picture>
							<figcaption>
								<span class="title">Titre 1 Fusce ullamcorper</span>
								<span class="description">Description Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
							</figcaption>
						</figure>
					</div>
					<div class="collection-item">
						<figure>
							<picture>
								<img src="data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20720%20441%27%3E%3C%2Fsvg%3E"data-src="ideo-assets/img/02.jpg" width="720" height="441" loading="lazy">
							</picture>
							<figcaption>
								<span class="title">Titre 2 Fusce ullamcorper</span>
								<span class="description">Description Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
							</figcaption>
						</figure>
					</div>
					<div class="collection-item">
						<figure>
							<picture>
								<img src="data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20720%20441%27%3E%3C%2Fsvg%3E"data-src="ideo-assets/img/03.jpg" width="720" height="441" loading="lazy">
							</picture>
							<figcaption>
								<span class="title">Titre 3 Fusce ullamcorper</span>
								<span class="description">Description Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
							</figcaption>
						</figure>
					</div>
					<div class="collection-item">
						<figure>
							<picture>
								<img src="data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20720%20441%27%3E%3C%2Fsvg%3E"data-src="ideo-assets/img/04.jpg" width="720" height="441" loading="lazy">
							</picture>
							<figcaption>
								<span class="title">Titre 4 Fusce ullamcorper</span>
								<span class="description">Description Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
							</figcaption>
						</figure>
					</div>
				</div>
			</div>


		</div>
	</div>

</section>

Source: src/cssframework_v2/less/components/slideshow.less, line 1

Social bar

Liste de liens vers les réseaux sociaux.

Il s'agpit d'une <nav> s'utilisant avec le shortcode [[social_link]] ou ces variantes.

<nav class="blk-socialbar">
  <ul>
    [[social_link|network=facebook]]
  <ul>
</nav>


// Pour les RS custom, utiliser la mixin pour générer la couleur du bouton / de l'icon
// en premier paramètre, mettez le même nom que le custom RS
// en deuxième paramètre, mettez la couleur du bouton
// en troisième paramètre, mettez la couleur de contraste
.social-customrs(soundcloud, #a4e7ff, #e35f00);

<insert-markup>components.social-</insert-markup>

Markup: ../../../snippets/components/social.hbs

<nav class="blk-socialbar {{modifier_class}}">
	<ul>
		<li class="facebook">
			<a rel="noopener" href="https://www.facebook.com/LinkeoWebAgency" title="Facebook" target="_blank" tabindex="0">
				<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16" fill="#000000" class="icon-facebook1">
					<path class="color1" d="M6.067 15.765v-5.32H4.416V8h1.651V6.947c0-2.723 1.232-3.984 3.904-3.984.506 0 1.38.099 1.738.198v2.215c-.189-.02-.519-.03-.925-.03-1.312 0-1.818.497-1.818 1.79V8h2.615l-.448 2.445H8.97v5.497a8 8 0 1 0-2.903-.177Z"></path>
				</svg> </a>
		</li>
		<li class="slideshare">
			<a rel="noopener" href="https://fr.slideshare.net/zooka_france" title="Slideshare" target="_blank" tabindex="0">
				<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" width="16" height="16" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve" class="icon-slideshare1">
					<path class="color1" d="M187.86 155.513c-33.366 0-61.174 25.953-61.174 57.468 0 31.513 27.808 57.465 61.174 57.465 33.367 0 61.174-25.952 61.174-57.465C249.034 181.467 223.083 155.513 187.86 155.513z"></path>
					<path class="color1" d="M330.603 155.513c-33.366 0-61.174 25.953-61.174 57.468 0 31.513 27.808 57.465 61.174 57.465s61.174-25.952 61.174-57.465C391.777 181.467 363.969 155.513 330.603 155.513z"></path>
					<path class="color1" d="M486.323 246.348c-1.862 1.311-3.709 2.553-5.561 3.796V53.553c0-27.808-20.391-50.053-46.346-50.053H78.484c-25.951 0-46.342 22.245-46.342 50.053v196.594c-1.852-1.244-3.7-2.486-5.564-3.799 -14.827-11.122-25.951 3.708-16.683 16.683 18.539 22.247 51.906 50.055 105.668 70.445C59.948 522.567 250.89 554.077 249.034 455.829c0 2.419 0-55.017 0-95.311 0.627 0.351 1.249 0.632 1.856 0.766 4.82 1.204 9.016 2.398 12.976 3.477 0 39.952 0 93.403 0 91.068 -1.853 98.248 189.09 66.737 133.476-122.353 53.758-20.391 87.129-48.198 105.664-70.445C512.278 250.056 501.154 235.226 486.323 246.348zM297.237 294.551c-23.873-1.708-32.043 7.579-33.204 23.507 -5.487-4.063-11.094-8.773-16.851-14.243 -6.789-6.144-11.568-8.443-14.805-8.143 -4.446-1.185-9.934-1.604-16.71-1.121 -31.91 1.596-88.551 7.269-155.719-27.813V75.8c0-35.223 9.268-44.493 40.783-44.493h315.146c29.662 0 40.786 12.978 40.786 44.493v188.992C387.872 302.062 329.735 296.175 297.237 294.551z"></path>
				</svg> </a>
		</li>
		<li class="googlemybusiness">
			<a rel="noopener" href="https://www.google.com/maps/place/Agence+web+Linkeo+Si%C3%A8ge/@48.853871,2.3384173,17z/data=!3m1!4b1!4m5!3m4!1s0x0:0xfdf9481c90f0eb1e!8m2!3d48.853871!4d2.340606" title="Google my business" target="_blank" tabindex="0">
				<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 512 512" fill="#000000" class="icon-mybusiness1">
					<path class="color1" d="M142.9 196.3c0.3 27.5 22.8 49.7 50.4 49.7 27.8 0 50.4-22.6 50.4-50.4V43.5h-83.3L142.9 196.3zM68.1 246.1c23.7 0 43.6-16.3 48.9-38.3l1.6-13.4 17.2-150.7H81.6c-12.7 0-24 9-26.7 21.6l-0.3 1.2L19 192.7c-1 3.7-1.3 7.6-0.7 11.2C22.3 228.3 43.2 246.1 68.1 246.1zM318.6 246.1c27.5 0 49.9-22.2 50.4-49.6l-17.4-153h-83.3v152.2C268.2 223.4 290.7 246.1 318.6 246.1zM443.8 246.1c25.5 0 47-19.1 50.1-44.4 0.3-2.6 0.1-5.3-0.6-7.7L457.1 65.4l-0.1-0.3c-2.7-12.5-14-21.6-26.7-21.6h-54.2l17.2 150.8C397.1 227.2 415.4 246.1 443.8 246.1zM443.8 270.5c-27.4 0-49.3-12.6-62.3-34.4 -13.3 20.7-36.5 34.4-62.9 34.4 -26.1 0-49.3-13.5-62.6-34 -13.4 20.4-36.4 34-62.6 34s-49.3-13.5-62.6-34c-13.4 20.4-36.4 34-62.7 34 -13.2 0-26.1-3.5-37.4-10.1v190.7c0 9.6 7.8 17.3 17.3 17.3h403.7c9.6 0 17.3-7.8 17.3-17.3v-185C461.1 269 452.6 270.5 443.8 270.5zM440.9 395c-3.2 11.4-9.6 22.2-18.3 30.3 -8.4 7.6-18.7 13-29.7 15.4 -12.2 2.8-25 2.8-37.1-0.3 -37-9.9-59.9-46.9-52.4-84.5 1.2-6.4 3.4-12.5 6.4-18.2 8.3-16.3 22.3-28.9 39.4-35.4 0.6-0.2 1.1-0.4 1.7-0.6 15.9-5.5 33.1-5.3 48.9 0.4 8.7 3.2 16.6 8.2 23.4 14.5 -2.2 2.5-4.7 4.8-7 7.2l-13.3 13.3c-4.5-4.2-9.8-7.4-15.6-9.2 -15.3-4.6-31.8-0.3-43 11.2 -4.7 4.8-8.3 10.7-10.5 17.1 -3.1 9.2-3.1 19 0 28.2h-0.1v0.1c0.2 0.7 0.4 1.3 0.7 1.9 3.2 8.2 8.7 15.2 15.9 20.3 4.8 3.5 10.4 5.8 16.2 7 5.7 1.1 11.6 1.1 17.3 0.1 5.7-0.9 11.2-3 16-6.3v0.2c7.6-5.1 12.7-13.1 14.5-22.1h-39.7c0-9.6 0-20 0-29.5h68.3c0.6 3.5 0.9 6.1 1.1 9.2C444.6 375.2 443.7 385.3 440.9 395z"></path>
				</svg> </a>
		</li>
		<li class="x">
			<a rel="noopener" href="https://twitter.com/AgenceLinkeo" title="Twitter" target="_blank" tabindex="0">
				<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16" fill="#000000" class="icon-twitter1">
					<path class="color1" d="M9.33349 6.92867L14.5459 1H13.3109L8.78291 6.14671L5.16908 1H1L6.46604 8.78342L1 15H2.235L7.01369 9.56363L10.8309 15H15L9.33349 6.92867ZM7.64142 8.85175L7.08675 8.07621L2.68037 1.91102H4.57759L8.13472 6.88837L8.68705 7.66391L13.3103 14.1334H11.4131L7.64142 8.85175Z"></path>
				</svg> </a>
		</li>
		<li class="instagram">
			<a rel="noopener" href="https://www.instagram.com/linkeo.fr/" title="Instagram" target="_blank" tabindex="0">
				<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 512 512" fill="#000000" class="icon-instagram1">
					<path class="color1" d="M367.44,512H144.56C65.14,512,0.52,447.38,0.52,367.96V144.04C0.52,64.62,65.14,0,144.56,0h222.88 c79.42,0,144.04,64.62,144.04,144.04v223.92C511.48,447.38,446.86,512,367.44,512z M144.56,48.66c-52.59,0-95.38,42.79-95.38,95.38 v223.92c0,52.59,42.78,95.38,95.38,95.38h222.88c52.59,0,95.38-42.78,95.38-95.38V144.04c0-52.59-42.78-95.38-95.38-95.38H144.56z M256,389.35c-73.53,0-133.35-59.82-133.35-133.35S182.47,122.65,256,122.65S389.35,182.47,389.35,256S329.53,389.35,256,389.35z M256,171.31c-46.7,0-84.69,37.99-84.69,84.69s37.99,84.69,84.69,84.69s84.69-37.99,84.69-84.69S302.7,171.31,256,171.31z M392.32,86.23c-18.48,0-33.46,14.98-33.46,33.46s14.98,33.46,33.46,33.46c18.48,0,33.46-14.98,33.46-33.46 S410.8,86.23,392.32,86.23z"></path>
				</svg> </a>
		</li>
		<li class="pinterest">
			<a rel="noopener" href="https://www.pinterest.fr/pinterestfr/" title="Pinterest" target="_blank" tabindex="0">
				<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 512 512" fill="#000000" class="icon-pinterest1">
					<path class="color1" d="M267.1 18C137.4 18 71.9 111.1 71.9 188.8c0 47 17.8 88.9 55.9 104.4 6.3 2.6 11.9 0.1 13.7-6.8 1.3-4.8 4.2-16.9 5.6-22 1.8-6.8 1.1-9.2-3.9-15.2 -11-13-18-29.8-18-53.6 0-69.1 51.7-130.9 134.5-130.9 73.4 0 113.7 44.9 113.7 104.8 0 78.8-34.9 145.4-86.6 145.4 -28.6 0-50-23.7-43.1-52.7 8.2-34.6 24.1-72 24.1-97 0-22.4-12-41-36.8-41 -29.2 0-52.7 30.3-52.7 70.8 0 25.8 8.7 43.3 8.7 43.3s-29.9 126.8-35.1 149c-10.4 44.2-1.6 98.4-0.8 103.9 0.4 3.2 4.6 4 6.5 1.6 2.7-3.5 37.5-46.5 49.3-89.5 3.4-12.2 19.2-75.2 19.2-75.2 9.5 18.1 37.2 34.1 66.7 34.1 87.8 0 147.4-80.1 147.4-187.4C440.1 93.5 371.5 18 267.1 18z"></path>
				</svg> </a>
		</li>
		<li class="youtube">
			<a rel="noopener" href="https://www.youtube.com/channel/UCt2fHJDmqGo63N7nAOt19nA/?sub_confirmation=1" title="Youtube" target="_blank" tabindex="0">
				<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 512 512" fill="#000000" class="icon-youtube1">
					<path class="color1" d="M215.1 88.4c27.4 0 54.9 0 82.3 0 25.5 0.7 52.2 1.2 78.1 2.3 26.1 1.1 52.6-0.3 73 7.4 39.6 15 43 62.6 45.6 114.8 0 28.6 0 57.4 0 86 -2.6 53-6.3 100.7-46.9 115.3 -20.3 7.3-49 5.9-74.4 7 -26.2 1-52.9 1.7-78.6 2.3 -21.8 0-43.7 0-65.5 0 -27.7-0.9-57-1-85.1-2.3 -28.9-1.3-56.3-0.4-79-8.4C20.1 397.3 20.9 341.7 18 284.5c0-19.1 0-38.1 0-57.2 3-55 2-106.2 40-126.4 18.7-9.9 46.9-9.3 74.4-10.2C160 89.8 187.4 89.1 215.1 88.4zM207.2 317c42.1-20.5 85.1-44.2 127.8-65.5 -41.6-23.4-85.3-44.8-127.8-67.4C207.2 228.4 207.2 272.8 207.2 317z"></path>
				</svg> </a>
		</li>
		<li class="linkedin">
			<a rel="noopener" href="https://www.linkedin.com/company/linkeo.fr" title="Linkedin" target="_blank" tabindex="0">
				<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 512 512" fill="#000000" class="icon-linkedIn1">
					<rect class="color1" x="25.8" y="176.2" width="98.7" height="317.3"></rect>
					<path class="color1" d="M75.3 132.8c-31.7 0-57.3-25.6-57.3-57.2s25.6-57.2 57.3-57.2c31.5 0 57.1 25.6 57.1 57.2S106.8 132.8 75.3 132.8zM493.9 493.4h-98.6V339.1c0-36.8-0.7-84.1-51.2-84.1 -51.3 0-59.1 40.1-59.1 81.5v156.9h-98.5V176.2H281v43.4h1.4c13.1-24.9 45.4-51.2 93.3-51.2 99.8 0 118.3 65.7 118.3 151.1L493.9 493.4 493.9 493.4z"></path>
				</svg> </a>
		</li>
		<li class="viadeo">
			<a rel="noopener" href="http://www.viadeo.com/fr/company/linkeo" title="Viadeo" target="_blank" tabindex="0">
				<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 512 512" fill="#000000" class="icon-viadeo1">
					<path class="color1" d="M455.7 71.4c-3.6-13.4-8.6-26.1-15.6-38.1 -1-1.7-2.1-3.3-3.3-5.4 -0.9 1.8-1.8 3.1-2.5 4.5 -4.8 9.1-10.8 17.3-18.2 24.5 -11.2 10.8-24.1 18.7-39.3 22.4 -1.3 0.3-2.7 0.7-4 1 -11.2 3.3-22 7.5-32.3 13.4 -7 4.1-12.9 9.2-17.8 15.5 -9.2 11.9-13.6 25.3-12.9 40.3 0.6 12.3 4 23.7 9.9 34.4 0.3 0.6 0.7 0.9 1.3 1.8 48.2-11.8 84.3-39.3 109.3-82.9 -0.1 1.5-0.1 2.1-0.2 2.9 -0.8 3.8-2.1 7.3-3.8 10.9 -3.7 7.6-8.8 14.4-14.5 20.7 -9.8 11-20.9 20.5-32.5 29.4 -14.1 10.8-29 20.5-44.3 29.5 -1.1 0.7-2.5 1.1-3.3 2.5 2.1 1.9 4.1 3.7 6.1 5.5 7.9 6.6 16.5 12 26.3 15.2 9.2 3.1 18.7 3.9 28.3 2.2 11.7-2 21.8-7.2 30.8-14.9 8.6-7.4 15.4-16.5 21.2-26.3 3.3-5.7 6.4-11.4 8.6-17.8 4.5-13 7.1-26.4 7.9-40.1C461.9 105 460.2 88 455.7 71.4zM304.4 156.3c-0.1-0.6-0.1-0.9-0.2-1.1C304.2 155.5 304.3 155.8 304.4 156.3zM304.1 153.4c-1.6-15.1-4.4-29.9-8.5-44.5 -5.7-19.8-13.6-38.6-24.8-56C263.1 41 254.2 30 243.4 20.7c-1-0.9-2.1-1.7-3.3-2.7 -0.1 0.7-0.2 1.1-0.1 1.3 0.7 1.4 1.6 2.8 2.4 4.2 18.9 32.4 35.4 66.1 49.6 100.9 3.9 9.6 7.4 19.2 11.2 28.8l1.1 2v0.1c0-0.1 0-0.2 0-0.3C304.2 154.5 304.1 153.5 304.1 153.4zM306 161.8c-0.2-0.6-0.8-1.9-1.2-2.6 -0.2-1.3-0.3-2.2-0.4-2.9 0.1 0.7 0.2 1.6 0.4 3.1 0.2 5 0.5 10.3 0.6 14.8 0.6 26.4-0.2 52.7-2.9 78.9 -1.2 12.2-2.8 24.2-4.8 36.2 -2.6 15.1-5.9 29.9-10.1 44.6 -5.3 18-11.9 35.5-20.9 52.2 -8 14.7-17.6 28.3-29.7 40 -11.1 10.8-23.7 19.2-38 25.2 -1.6 0.7-3 0.8-4.6 0.5 11.5 2.1 22.1 2.4 27.3 2.2 0.2-0.7 0.1-0.8 0.2-0.9 1.6-1.2 3.2-2.3 4.7-3.5 32-24.3 57.3-54.3 75-90.4 14.8-29.9 22.3-61.7 23.1-95.2 0.4-16.4-1-32.5-3.9-48.6C317.4 197.1 312.4 179.2 306 161.8zM385.1 291.7c-2.2-11.8-5.2-23.3-9.7-34.4 -0.3-0.8-0.7-1.5-1.1-2.3 -4.4 2.2-8.5 4.6-12.7 6.5 -4.2 1.9-8.5 3.6-12.7 5.1 -4.4 1.6-8.9 2.7-13.4 4 0.1 0.4 0 0.7 0.1 0.9 0.2 0.6 0.4 1.2 0.7 1.8 6.2 15.7 8.9 32 9.1 48.8 0.2 13.9-1.7 27.8-5.8 41.2 -6.1 20.2-16.1 38.2-30.8 53.4 -21.5 22.1-47.9 34.1-78.5 36.9 -2.9 0.3-5.7 0.2-8.7 0.4 -5.2 0.2-15.8-0.1-27.3-2.2 -19.5-3.8-37.1-11.8-52.7-24.1 -13.5-10.6-24-23.7-32.1-38.8 -8.7-16-13.9-33.2-15.7-51.3 -1-10.7-0.8-21.3 0.5-32 1.6-13 4.8-25.6 10.2-37.6 7.9-17.8 19.6-33 34.1-46.1 11.2-10 23.7-17.9 37.8-23.3 9.1-3.4 18.5-5.6 28.2-6.8 8.6-1 17.1-1 25.7-0.4 11 0.8 21.6 3.3 31.9 7.3 0.9 0.4 1.9 0.6 3.2 0.9 0.9-7.2 2.3-13.9 4.4-20.5 2.1-6.6 4.9-12.9 7.9-19.2 -1.6-1.3-3.3-1.6-5-2 -13.9-4.5-28.2-6.9-42.8-7.7 -15.6-0.9-31.1 0.2-46.3 3.2 -18.3 3.6-35.4 10.4-51.3 20.4 -15.1 9.4-28.1 21.2-39.6 34.8 -25.5 30-39.1 64.7-41.3 104 -0.6 11.2-0.2 22.6 1.2 33.8 2 15.9 6 31.2 12.4 45.9 10.3 23.7 25.3 44.1 44.3 61.5 14 12.9 30 22.8 47.9 29.6 16.6 6.3 33.9 9.7 51.6 10.5 16.5 0.8 32.7-0.1 48.9-3.5 21.8-4.6 41.7-13.3 59.8-26.6 13.9-10.3 25.8-22.8 36.3-36.7 20.6-27.6 31.8-58.8 33.7-93.2C388 319.6 387.4 305.5 385.1 291.7z"></path>
				</svg> </a>
		</li>
		<li class="skype">
			<a rel="noopener" href="skype:yourskypename?call" title="Skype" target="_blank" tabindex="0">
				<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 512 512" fill="#000000" class="icon-skype1">
					<path class="color1" d="M381.5,307.7c0-53.9-52.4-72.5-96.3-82.4l-32.2-7.4c-23.5-5.6-41.2-9.6-41.2-27.6c0-16.4,17.3-23.9,44.6-23.9 c48.6,0,49.6,35.6,79.6,35.6c20.1,0,32.2-15.8,32.2-33.8c0-35.6-59.2-58.9-117.7-58.9c-53.6,0-115.9,23.2-115.9,86.1 c0,52,34.7,70.6,79.9,81.5l45.2,11.2c27.6,6.8,44.6,9.9,44.6,29.7c0,15.8-17.7,27.9-44.9,27.9c-57.3,0-60.4-47.7-93.6-47.7 c-21.7,0-31.3,15.5-31.3,32.5c0,38.1,58.2,69.1,127.9,69.1C320.7,399.7,381.5,370.6,381.5,307.7L381.5,307.7z M493.9,375 c0,65.7-53.3,119-119,119c-27.3,0-52.4-9.3-72.5-24.8c-14.9,3.1-30.7,5-46.5,5c-120.5,0-218.1-97.6-218.1-218.1 c0-15.8,1.9-31.6,5-46.5c-15.5-20.1-24.8-45.2-24.8-72.5c0-65.7,53.3-119,119-119c27.3,0,52.4,9.3,72.5,24.8c14.9-3.1,30.7-5,46.5-5 c120.5,0,218.1,97.6,218.1,218.1c0,15.8-1.9,31.6-5,46.5C484.6,322.6,493.9,347.7,493.9,375z"></path>
				</svg> </a>
		</li>
		<li class="thefork">
			<a rel="noopener" href="https://www.thefork.com.au/" title="Thefork" target="_blank" tabindex="0">
				<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16" fill="#000000" class="icon-thefork1">
					<path class="color1" d="M7.76682 6.34815H8.36139V0L7.76682 0L7.76682 6.34815ZM9.83646 0.16785L9.24189 0.0878123V6.26217L9.83646 6.14783V0.16785ZM6.88988 0.0785738L6.29531 0.158612L6.29531 6.12715L6.88988 6.24149L6.88988 0.0785738ZM7.36873 15.3242C7.3916 14.9354 7.41447 14.2951 7.41447 14.0893C7.41447 13.8835 7.4259 13.8721 7.36873 13.2318C7.323 12.6029 7.24296 12.3628 7.19722 12.1112C7.16292 11.8597 7.08288 11.5624 6.95711 11.1851C6.84277 10.8078 6.73986 10.602 6.57979 10.2361C6.41971 9.87019 6.12243 9.36709 5.84801 8.864C5.58503 8.37233 5.33348 7.7892 5.23058 7.2175C5.11624 6.56576 5.12767 5.81112 5.15054 5.38806C5.17341 4.96501 5.24201 3.89021 5.28775 3.32994C2.7494 4.3247 1 6.65724 1 9.41283C1 12.8316 3.75559 15.6558 7.30013 15.9988C7.323 16.0217 7.34586 15.713 7.36873 15.3242ZM8.75115 15.3242C8.72828 14.9354 8.70541 14.2951 8.70541 14.0893C8.70541 13.8835 8.69398 13.8721 8.75115 13.2318C8.79688 12.6029 8.87692 12.3628 8.92266 12.1112C8.95696 11.8597 9.037 11.5624 9.16277 11.1851C9.27711 10.8078 9.38002 10.602 9.54009 10.2361C9.70017 9.87019 9.99745 9.36709 10.2719 8.864C10.5349 8.37233 10.7864 7.7892 10.8893 7.2175C11.0036 6.56576 10.9922 5.81112 10.9693 5.38806C10.9465 4.96501 10.8779 3.89021 10.8321 3.32994C13.3705 4.3247 15.1199 6.65724 15.1199 9.41283C15.1199 12.8316 12.3643 15.6558 8.81975 15.9988C8.79688 16.0217 8.77402 15.713 8.75115 15.3242Z"></path>
				</svg> </a>
		</li>
		<li class="tiktok">
			<a rel="noopener" href="https://www.tiktok.com/" title="Tiktok" target="_blank" tabindex="0">
				<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16" fill="#000000" class="icon-tiktok1">
					<path class="color1" d="M14.4,6.6c-0.1,0-0.2,0-0.4,0c-1.3,0-2.6-0.7-3.3-1.8v6.1c0,2.5-2,4.5-4.5,4.5c-2.5,0-4.5-2-4.5-4.5s2-4.5,4.5-4.5 c0.1,0,0.2,0,0.3,0v2.2c-0.1,0-0.2,0-0.3,0c-1.3,0-2.3,1-2.3,2.3c0,1.3,1,2.3,2.3,2.3c1.3,0,2.4-1,2.4-2.3l0-10.4h2.1 c0.2,1.9,1.7,3.4,3.7,3.5L14.4,6.6"></path>
				</svg> </a>
		</li>
		<li class="tripadvisor">
			<a rel="noopener" href="https://www.tripadvisor.ca/" title="Tripadvisor" target="_blank" tabindex="0">
				<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16" fill="#000000" class="icon-tripadvisor1">
					<path class="color1" d="M16,4.4h-2.3C12.2,3.3,10.2,2.8,8,2.8S3.8,3.3,2.3,4.4H0C0.3,4.7,0.7,5.5,0.8,6C0.3,6.7,0,7.5,0,8.4c0,2.2,1.8,4,4,4 c1.1,0,2-0.4,2.7-1.1L8,13.2l1.3-1.9c0.7,0.7,1.7,1.1,2.7,1.1c2.2,0,4-1.8,4-4c0-0.9-0.3-1.7-0.8-2.4C15.3,5.5,15.7,4.7,16,4.4z M4,11.1c-1.5,0-2.7-1.2-2.7-2.7S2.5,5.7,4,5.7s2.7,1.2,2.7,2.7S5.5,11.1,4,11.1z M8,8.4c0-1.9-1.4-3.6-3.2-3.9C5.8,4.2,6.8,4,8,4 s2.2,0.2,3.2,0.5C9.4,4.9,8,6.5,8,8.4z M12,11.1c-1.5,0-2.7-1.2-2.7-2.7s1.2-2.7,2.7-2.7s2.7,1.2,2.7,2.7S13.5,11.1,12,11.1z M4,6.7c-0.9,0-1.7,0.8-1.7,1.7s0.8,1.7,1.7,1.7s1.7-0.8,1.7-1.7C5.7,7.5,4.9,6.7,4,6.7z M4,8.9c-0.3,0-0.5-0.2-0.5-0.5 c0-0.3,0.2-0.5,0.5-0.5s0.5,0.2,0.5,0.5S4.3,8.9,4,8.9z M12,6.7c-0.9,0-1.7,0.8-1.7,1.7s0.8,1.7,1.7,1.7s1.7-0.8,1.7-1.7 C13.7,7.5,12.9,6.7,12,6.7z M12,8.9c-0.3,0-0.5-0.2-0.5-0.5c0-0.3,0.2-0.5,0.5-0.5s0.5,0.2,0.5,0.5S12.3,8.9,12,8.9z"></path>
				</svg> </a>
		</li>
		<li class="waze">
			<a rel="noopener" href="https://waze.com/" title="Waze" target="_blank" tabindex="0">
				<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16" fill="#000000" class="icon-waze1"><path class="color1" d="M11.5 11.984c-.537.272-1.699.564-2.381.547-.069.003-.138.003-.206.003a23.52 23.52 0 0 1-2.525-.134c-.535-.092-1.63-.186-2.304-.425-1.49-.412-2.421-1.037-2.765-1.853.797-.178 1.29-.475 1.553-.931.256-.45.244-.979.225-1.541-.003-.144-.01-.29-.01-.44 0-2.938 2.613-5.326 5.826-5.326 3.212 0 5.828 2.388 5.828 5.325 0 2.044-1.26 3.879-3.24 4.775Z"/><path fill="#000" stroke-width="0" d="M7.15 6.54a.662.662 0 1 0 0-1.324.662.662 0 0 0 0 1.325Zm3.634 0a.662.662 0 1 0 0-1.324.662.662 0 0 0 0 1.325ZM5.04 14.858a1.604 1.604 0 1 0 0-3.207 1.604 1.604 0 0 0 0 3.207Zm4.079-2.327c.682.017 1.844-.275 2.381-.547h.002a1.604 1.604 0 1 1-2.41.549l.027-.002Zm2.328-5.156a.348.348 0 0 0-.347.347c0 .362-.2.71-.566.978-.397.29-.928.453-1.497.453-.568 0-1.1-.16-1.496-.453-.363-.269-.566-.616-.566-.978a.348.348 0 0 0-.347-.347.348.348 0 0 0-.347.347c0 .587.3 1.134.847 1.537.516.382 1.19.588 1.91.588.718 0 1.393-.21 1.909-.588.547-.403.847-.95.847-1.537a.346.346 0 0 0-.347-.347Z"/></svg>
			</a>
		</li>
		<li class="whatsapp">
			<a rel="noopener" href="https://api.whatsapp.com/" title="Whatsapp" target="_blank" tabindex="0">
				<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 512 512" fill="#000000" class="icon-whatsapp1">
					<path class="color1" d="M437.4 73.6C389.3 25.4 325.3-1.1 257.1-1.2 116.6-1.2 2.2 113.2 2.1 253.7c0 44.9 11.7 88.8 34 127.4L0 513.2l135.1-35.4c37.2 20.3 79.2 31 121.8 31h0.1c0 0 0 0 0 0 140.5 0 254.9-114.3 254.9-254.8C512 185.8 485.5 121.8 437.4 73.6zM257.1 465.7L257.1 465.7c-38.1 0-75.4-10.2-107.9-29.5l-7.7-4.6 -80.2 21 21.4-78.2 -5-8c-21.2-33.7-32.4-72.7-32.4-112.7 0-116.8 95.1-211.8 212-211.8C313.7 41.9 366.9 64 407 104c40 40 62 93.3 62 149.9C468.9 370.7 373.9 465.7 257.1 465.7zM373.3 307c-6.4-3.2-37.7-18.6-43.5-20.7 -5.8-2.1-10.1-3.2-14.3 3.2 -4.2 6.4-16.5 20.7-20.2 25 -3.7 4.2-7.4 4.8-13.8 1.6 -6.4-3.2-26.9-9.9-51.2-31.6 -18.9-16.9-31.7-37.7-35.4-44.1 -3.7-6.4-0.4-9.8 2.8-13 2.9-2.9 6.4-7.4 9.6-11.2 3.2-3.7 4.2-6.4 6.4-10.6 2.1-4.3 1.1-8-0.5-11.2 -1.6-3.2-14.3-34.5-19.6-47.3 -5.2-12.4-10.4-10.7-14.3-10.9 -3.7-0.2-8-0.2-12.2-0.2 -4.2 0-11.1 1.6-17 8 -5.8 6.4-22.3 21.8-22.3 53.1 0 31.3 22.8 61.6 26 65.9 3.2 4.3 44.9 68.6 108.8 96.2 15.2 6.6 27.1 10.5 36.3 13.4 15.3 4.8 29.1 4.2 40.1 2.5 12.2-1.8 37.7-15.4 43-30.3 5.3-14.9 5.3-27.6 3.7-30.3C383.9 311.8 379.7 310.2 373.3 307z"></path>
				</svg> </a>
		</li>
		<li class="pagesjaunes">
			<a rel="noopener" href="https://pagesjaunes.fr/" title="Pagesjaunes" target="_blank" tabindex="0">
				<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="#000000" class="icon-pagesjaune1"><path d="M1.16809 4.4467C0.545457 4.4467 0.0562483 3.95749 0.0562483 3.3571V2.11184C0.0562483 1.48921 0.567694 1 1.16809 1C1.76848 1 2.27992 1.51145 2.27992 2.11184V3.33486C2.27992 3.95749 1.79072 4.4467 1.19032 4.4467H1.16809ZM8.10595 14.3421C7.08306 14.3421 6.06017 14.1642 5.10399 13.8306C3.19163 13.1635 1.50164 11.9627 0.234143 10.3617C-0.143882 9.87246 -0.0549353 9.18312 0.434273 8.78286C0.901245 8.40484 1.61282 8.47155 1.99085 8.96076C1.99085 8.96076 1.99085 8.98299 2.01308 8.98299C4.01439 11.518 7.37214 12.6965 9.99608 11.8071C12.4421 10.9621 13.7763 8.53826 13.7763 4.98038V2.11184C13.7763 1.48921 14.2655 1 14.8882 1C15.5108 1 16 1.48921 16 2.11184V4.98038C16 9.51668 14.0654 12.7632 10.7077 13.9196C9.86266 14.2086 8.99542 14.3421 8.10595 14.3421Z"/></svg>
			</a>
		</li>
	</ul>
</nav>

Source: src/cssframework_v2/less/components/socialbar.less, line 1

Components

Button

Button Colors

Button Styles

Buttons Group

Carousel

Affichage par défaut

Affichage avec "débordement" dans une .row.screen

Affichage par défaut

Affichage avec "débordement" dans une .row.screen

Affichage par défaut

Affichage avec "débordement" dans une .row.screen

Affichage par défaut

Affichage avec "débordement" dans une .row.screen

Affichage par défaut

Affichage avec "débordement" dans une .row.screen

Affichage par défaut

Affichage avec "débordement" dans une .row.screen

Affichage par défaut

Affichage avec "débordement" dans une .row.screen

Affichage par défaut

Affichage avec "débordement" dans une .row.screen

Affichage par défaut

Affichage avec "débordement" dans une .row.screen

Affichage par défaut

Affichage avec "débordement" dans une .row.screen

Affichage par défaut

Affichage avec "débordement" dans une .row.screen

Affichage par défaut

Affichage avec "débordement" dans une .row.screen

Grille

Language

Langue

Langue

Nav

Version "desktop" dans le <header>

Version "mobile" dans le <div class="blk-sheet">

Version "desktop" dans le <header>

Version "mobile" dans le <div class="blk-sheet">

Version "desktop" dans le <header>

Version "mobile" dans le <div class="blk-sheet">

Version "desktop" dans le <header>

Version "mobile" dans le <div class="blk-sheet">

Version "desktop" dans le <header>

Version "mobile" dans le <div class="blk-sheet">

Version "desktop" dans le <header>

Version "mobile" dans le <div class="blk-sheet">

Version "desktop" dans le <header>

Version "mobile" dans le <div class="blk-sheet">

Version "desktop" dans le <header>

Version "mobile" dans le <div class="blk-sheet">

Diaporama

Social bar

Version "desktop" dans le `<header>`

Version "mobile" dans le `<div class="blk-sheet">`

Version "desktop" dans le `<header>`

Version "mobile" dans le `<div class="blk-sheet">`

Version "desktop" dans le `<header>`

Version "mobile" dans le `<div class="blk-sheet">`

Version "desktop" dans le `<header>`

Version "mobile" dans le `<div class="blk-sheet">`

Version "desktop" dans le `<header>`

Version "mobile" dans le `<div class="blk-sheet">`

Version "desktop" dans le `<header>`

Version "mobile" dans le `<div class="blk-sheet">`

Version "desktop" dans le `<header>`

Version "mobile" dans le `<div class="blk-sheet">`

Version "desktop" dans le `<header>`

Version "mobile" dans le `<div class="blk-sheet">`