Ideo3.2 Framework Documentation

#section

Toggle example guides Toggle HTML markup

Mixins permettant de styler des sections

// 2 colonnes
// Appliquer sur une row contenant deux colonnes avec contenus dans la première colonne et blk-image dans la seconde colonne
// les mixins sont compatibles avec les options de row tel que revers, screen, full-broad, backgrounds, ...

#section#2columns.cta1(); // L'image rempira la section comme fond dans un dégradé transparent vers la gauche
#section#2columns.cta2(); // L'image rempira la section comme fond dans un dégradé transparent vers le bas
#section#2columns.cta3(); // L'image rempira la section comme fond dans un dégradé flou vers la gauche !pas compatible avec les backgrounds.

usage :
.my-class {
	#section#2columns.cta1();
}
<insert-markup>mixin.section-</insert-markup>

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Proin vel diam vulputate, venenatis tortor condimentum, sagittis libero. Donec egestas vel erat vitae varius.

Nulla hendrerit purus ut leo mollis scelerisque. Quisque rutrum est ac auctor imperdiet. Fusce congue, nulla sed dapibus ultrices, metus turpis adipiscing justo, sit amet semper eros mi quis urna.

Mon bouton
.no-class
Affichage standard de la row
<insert-markup>mixin.section-0</insert-markup>

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Proin vel diam vulputate, venenatis tortor condimentum, sagittis libero. Donec egestas vel erat vitae varius.

Nulla hendrerit purus ut leo mollis scelerisque. Quisque rutrum est ac auctor imperdiet. Fusce congue, nulla sed dapibus ultrices, metus turpis adipiscing justo, sit amet semper eros mi quis urna.

Mon bouton
.exemple-section-cta1
cta1, l'image se fond dans la couleur de la page
<insert-markup>mixin.section-1</insert-markup>

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Proin vel diam vulputate, venenatis tortor condimentum, sagittis libero. Donec egestas vel erat vitae varius.

Nulla hendrerit purus ut leo mollis scelerisque. Quisque rutrum est ac auctor imperdiet. Fusce congue, nulla sed dapibus ultrices, metus turpis adipiscing justo, sit amet semper eros mi quis urna.

Mon bouton
.exemple-section-cta1.bg-contrast-1
cta1 + bg-contrast-1, l'image se fond dans la couleur de la row
<insert-markup>mixin.section-2</insert-markup>

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Proin vel diam vulputate, venenatis tortor condimentum, sagittis libero. Donec egestas vel erat vitae varius.

Nulla hendrerit purus ut leo mollis scelerisque. Quisque rutrum est ac auctor imperdiet. Fusce congue, nulla sed dapibus ultrices, metus turpis adipiscing justo, sit amet semper eros mi quis urna.

Mon bouton
.exemple-section-cta2
cta2, l'image se fond dans la couleur de la page
<insert-markup>mixin.section-3</insert-markup>

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Proin vel diam vulputate, venenatis tortor condimentum, sagittis libero. Donec egestas vel erat vitae varius.

Nulla hendrerit purus ut leo mollis scelerisque. Quisque rutrum est ac auctor imperdiet. Fusce congue, nulla sed dapibus ultrices, metus turpis adipiscing justo, sit amet semper eros mi quis urna.

Mon bouton
.exemple-section-cta2.bg-accent-0
cta2 + bg-accent-0, l'image se fond dans la couleur de la row
<insert-markup>mixin.section-4</insert-markup>

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Proin vel diam vulputate, venenatis tortor condimentum, sagittis libero. Donec egestas vel erat vitae varius.

Nulla hendrerit purus ut leo mollis scelerisque. Quisque rutrum est ac auctor imperdiet. Fusce congue, nulla sed dapibus ultrices, metus turpis adipiscing justo, sit amet semper eros mi quis urna.

Mon bouton
.exemple-section-cta3
cta3 dégradé floue !pas compatible avec les backgrounds de rows.
<insert-markup>mixin.section-5</insert-markup>

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Proin vel diam vulputate, venenatis tortor condimentum, sagittis libero. Donec egestas vel erat vitae varius.

Nulla hendrerit purus ut leo mollis scelerisque. Quisque rutrum est ac auctor imperdiet. Fusce congue, nulla sed dapibus ultrices, metus turpis adipiscing justo, sit amet semper eros mi quis urna.

Mon bouton
Markup: ../../../snippets/components/mixin-section.hbs 
<div class="row {{modifier_class}}">
	<div class="large-6 columns">
		<div class="blk-text xl">
			<h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2>
		</div>
		<div class="blk-text">
			<p><strong>Proin vel diam vulputate, venenatis tortor condimentum, sagittis libero. Donec egestas vel erat vitae varius.</strong></p>
			<p>Nulla hendrerit purus ut leo mollis scelerisque. Quisque rutrum est ac auctor imperdiet. Fusce congue, nulla sed dapibus ultrices, metus turpis adipiscing justo, sit amet semper eros mi quis urna.</p>
		</div>
		<div class="blk-button medium  text-center blk-button--bold">
			<a class="button blk-button__link">
				<span class="ico blk-button__icon" aria-hidden="true">
				</span>
				<span class="txt blk-button__label"><span>Mon bouton</span></span>
			</a>
		</div>
	</div>
	<div class="large-6 columns">
		<figure class="blk-image 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/hero-media.jpg" class="blk-image__image" width="720" height="441" loading="lazy">
			</picture>
		</figure>
	</div>
</div>
Source: src/cssframework_v2/less/mixins/section.less, line 1