Ideo3.2 Framework Documentation

Distribution des couleurs

Toggle example guides Toggle HTML markup

Les couleurs sont distribuée sur différentes variables qui sont utilisées dans les différentes composants.
Ces variables sont identiques, que l'on utilise le systeme de couleur générée (v1) ou le systeme de couleur nuancier (v2).

Le jeux de couleurs "Lead" doit être réservé au CTA principal ou à des sections invitant à l'action du CTA principal.

<insert-markup>design.couleurs.couleurs.distribution-</insert-markup>

Default

--dark

--light


--highlight

--highlight-contrast


--error

--error-contrast


--success

--success-contrast


--warning

--warning-contrast


--notice

--notice-contrast

Brand

--brand


--brand-surface0

--brand-surface1


--brand-text0

--brand-text1

Base

--theme

--background


--surface0

--surface1

--surface2

--surface3

--surface4

--surface5

--surface6


--text0

--text1

--text2

----tooltip-text


--overlay-RGB
(+ opacity 50%)

--surface-RGB
(+ opacity 50%)

--surfaceTransparent

--shadow

--separator

--tooltip-surface

Exemples

--brand-text0
sur --brand-surface0

--brand-text1
sur --brand-surface1


--text0
sur --surface1

--text1
sur --surface3

--text2
sur --surface3

--tooltip-text
sur --tooltip-surface

Contrast

--contrast-surface0

--contrast-surface1

--contrast-surface-0-RGB
(+ opacity 50%)

--contrast-surface-1-RGB
(+ opacity 50%)


--contrast-text0

--contrast-text1

--contrast-text0-RGB
(+ opacity 50%)

--contrast-text1-RGB
(+ opacity 50%)


--contrast-shadow

Accent

--accent-surface0

--accent-surface0-RGB
(+ opacity 50%)

--accent-surface1

--accent-surface1-RGB
(+ opacity 50%)


--accent-hover

--accent-border

--accent-highlight

--accent-shadow


--accent-text0

--accent-text0-RGB
(+ opacity 50%)

--accent-text1

--accent-text1-RGB
(+ opacity 50%)

--accent-text2

--accent-text2-RGB
(+ opacity 50%)

Lead

--lead-surface0

--lead-surface0-RGB
(+ opacity 50%)

--lead-surface1

--lead-surface1-RGB
(+ opacity 50%)


--lead-hover

--lead-border

--lead-highlight

--lead-shadow


--lead-text0

--lead-text0-RGB
(+ opacity 50%)

--lead-text1

--lead-text1-RGB
(+ opacity 50%)

--lead-text2

--lead-text2-RGB
(+ opacity 50%)

Exemples

--contrast-text1
sur --contrast-surface0

--contrast-text1
sur --accent-surface1


--accent-text0
sur --accent-surface0

--accent-text1
sur --accent-surface1


--lead-text0
sur --lead-surface0

--lead-text1
sur --lead-surface1


Default usage : Foregrounds

--fg-color: var(--text1);

--fg-bright-color: var(--accent);

--fg-vivid-color: var(--text2);

--fg-highlight: var(--text2);

--fg-selection: var(--accent-text1);

--fg-placeholder: var(--text1);

--fg-separator: var(--separator);

--fg-tooltip: var(--surface0);

--fg-brand: var(--brand-text0);

--fg-headings: var(--text0);

--fg-headings-alt: var(--text2);

--fg-focus: var(--accent);

--fg-links: var(--accent-text2);

--fg-actions: var(--accent-text0);

--fg-nav: var(--text1);

Default usage : Backgrounds

--theme-color: var(--theme);

--bg-body: var(--theme);

--bg-content: var(--background);

--bg-brand: var(--brand-surface0);

--bg-form: var(--surface0);

--bg-input: var(--surface2);

--bg-block: var(--surface0);

--bg-block-alt: var(--surface3);

--bg-actions: var(--accent-surface0);

--border-actions: var(--accent-border);

--bg-hover: var(--accent-hover);

--bg-highlight: var(--surface6);

--bg-selection: var(--accent-surface1);

--bg-tooltip: var(--tooltip-surface);

--bg-overlay: rgba(var(--overlay-RGB), .7);

--bg-sheet: var(--theme);

--bg-modal: var(--surface0);

--bg-scroll-track: var(--background);

--bg-scroll-thumb: var(--accent-surface1);

--bg-scroll-thumb-hover: var(--accent-surface1);

Exemples


0800.949.848 Call


Devis / Contact

Markup: ../../../snippets/components/colors.hbs 
<div class="row color-presentation tiny">
	<div class="large-3 columns">
		<div class="blk-text">
			<h2>Default</h2>
			<p class="color-name"><span class="color-thumb" style="background: var(--dark)"></span>--dark</p>
			<p class="color-name"><span class="color-thumb" style="background: var(--light)"></span>--light</p>
			<br>
			<p class="color-name"><span class="color-thumb" style="background: var(--highlight)"></span>--highlight</p>
			<p class="color-name"><span class="color-thumb" style="background: var(--highlight-contrast)"></span>--highlight-contrast</p>
			<br>
			<p class="color-name"><span class="color-thumb" style="background: var(--error)"></span>--error</p>
			<p class="color-name"><span class="color-thumb" style="background: var(--error-contrast)"></span>--error-contrast</p>
			<br>
			<p class="color-name"><span class="color-thumb" style="background: var(--success)"></span>--success</p>
			<p class="color-name"><span class="color-thumb" style="background: var(--success-contrast)"></span>--success-contrast</p>
			<br>
			<p class="color-name"><span class="color-thumb" style="background: var(--warning)"></span>--warning</p>
			<p class="color-name"><span class="color-thumb" style="background: var(--warning-contrast)"></span>--warning-contrast</p>
			<br>
			<p class="color-name"><span class="color-thumb" style="background: var(--notice)"></span>--notice</p>
			<p class="color-name"><span class="color-thumb" style="background: var(--notice-contrast)"></span>--notice-contrast</p>
		</div>
	</div>
	<div class="large-3 columns">
		<div class="blk-text">
			<h2>Brand</h2>
			<p class="color-name"><span class="color-thumb" style="background: var(--brand)"></span>--brand</p>
			<br>
			<p class="color-name"><span class="color-thumb" style="background: var(--brand-surface0)"></span>--brand-surface0</p>
			<p class="color-name"><span class="color-thumb" style="background: var(--brand-surface1)"></span>--brand-surface1</p>
			<br>
			<p class="color-name"><span class="color-thumb" style="background: var(--brand-text0)"></span>--brand-text0</p>
			<p class="color-name"><span class="color-thumb" style="background: var(--brand-text1)"></span>--brand-text1</p>
		</div>
	</div>
	<div class="large-3 columns">
		<div class="blk-text">
			<h2>Base</h2>
			<p class="color-name"><span class="color-thumb" style="background: var(--theme)"></span>--theme</p>
			<p class="color-name"><span class="color-thumb" style="background: var(--background)"></span>--background</p>
			<br>
			<p class="color-name"><span class="color-thumb" style="background: var(--surface0)"></span>--surface0</p>
			<p class="color-name"><span class="color-thumb" style="background: var(--surface1)"></span>--surface1</p>
			<p class="color-name"><span class="color-thumb" style="background: var(--surface2)"></span>--surface2</p>
			<p class="color-name"><span class="color-thumb" style="background: var(--surface3)"></span>--surface3</p>
			<p class="color-name"><span class="color-thumb" style="background: var(--surface4)"></span>--surface4</p>
			<p class="color-name"><span class="color-thumb" style="background: var(--surface5)"></span>--surface5</p>
			<p class="color-name"><span class="color-thumb" style="background: var(--surface6)"></span>--surface6</p>
			<br>
			<p class="color-name"><span class="color-thumb" style="background: var(--text0)"></span>--text0</p>
			<p class="color-name"><span class="color-thumb" style="background: var(--text1)"></span>--text1</p>
			<p class="color-name"><span class="color-thumb" style="background: var(--text2)"></span>--text2</p>
			<p class="color-name"><span class="color-thumb" style="background: var(----tooltip-text)"></span>----tooltip-text</p>
			<br>
			<p class="color-name"><span class="color-thumb" style="background: rgba(var(--overlay-RGB), 50%)"></span>--overlay-RGB <br>(+ opacity 50%)</p>
			<p class="color-name"><span class="color-thumb" style="background: rgba(var(--surface-RGB), 50%)"></span>--surface-RGB <br>(+ opacity 50%)</p>
			<p class="color-name"><span class="color-thumb" style="background: var(--surfaceTransparent)"></span>--surfaceTransparent</p>
			<p class="color-name"><span class="color-thumb" style="background: var(--shadow)"></span>--shadow</p>
			<p class="color-name"><span class="color-thumb" style="background: var(--separator)"></span>--separator</p>
			<p class="color-name"><span class="color-thumb" style="background: var(--tooltip-surface)"></span>--tooltip-surface</p>
		</div>
	</div>
	<div class="large-3 columns">
		<div class="blk-text">
			<h2>Exemples</h2>
			<p class="color-exemple" style="border: 1px solid var(--separator); background: var(--brand-surface0); color: var(--brand-text0)">--brand-text0 <br> sur --brand-surface0</p>
			<p class="color-exemple" style="border: 1px solid var(--separator); background: var(--brand-surface1); color: var(--brand-text1)">--brand-text1 <br> sur --brand-surface1</p>
			<br>
			<p class="color-exemple" style="border: 1px solid var(--separator); background: var(--surface1); color: var(--text0)">--text0 <br> sur --surface1</p>
			<p class="color-exemple" style="border: 1px solid var(--separator); background: var(--surface3); color: var(--text1)">--text1 <br> sur --surface3</p>
			<p class="color-exemple" style="border: 1px solid var(--separator); background: var(--surface3); color: var(--text2)">--text2 <br> sur --surface3</p>
			<p class="color-exemple" style="border: 1px solid var(--separator); background: var(--tooltip-surface); color: var(--tooltip-text)">--tooltip-text <br> sur --tooltip-surface</p>
		</div>
	</div>
	<div class="large-3 columns">
		<div class="blk-text">
			<h2>Contrast</h2>
			<p class="color-name"><span class="color-thumb" style="background: var(--contrast-surface0)"></span>--contrast-surface0</p>
			<p class="color-name"><span class="color-thumb" style="background: var(--contrast-surface1)"></span>--contrast-surface1</p>
			<p class="color-name"><span class="color-thumb" style="background: rgba(var(--contrast-surface-0-RGB), 50%)"></span>--contrast-surface-0-RGB <br>(+ opacity 50%)</p>
			<p class="color-name"><span class="color-thumb" style="background: rgba(var(--contrast-surface-1-RGB), 50%)"></span>--contrast-surface-1-RGB <br>(+ opacity 50%)</p>
			<br>
			<p class="color-name"><span class="color-thumb" style="background: var(--contrast-text0)"></span>--contrast-text0</p>
			<p class="color-name"><span class="color-thumb" style="background: var(--contrast-text1)"></span>--contrast-text1</p>
			<p class="color-name"><span class="color-thumb" style="background: rgba(var(--contrast-text0-RGB), 50%)"></span>--contrast-text0-RGB <br>(+ opacity 50%)</p>
			<p class="color-name"><span class="color-thumb" style="background: rgba(var(--contrast-text1-RGB), 50%)"></span>--contrast-text1-RGB <br>(+ opacity 50%)</p>
			<br>
			<p class="color-name"><span class="color-thumb" style="background: var(--contrast-shadow)"></span>--contrast-shadow</p>
		</div>
	</div>
	<div class="large-3 columns">
		<div class="blk-text">
			<h2>Accent</h2>
			<p class="color-name"><span class="color-thumb" style="background: var(--accent-surface0)"></span>--accent-surface0</p>
			<p class="color-name"><span class="color-thumb" style="background: rgba(var(--accent-surface0-RGB), 50%)"></span>--accent-surface0-RGB <br>(+ opacity 50%)</p>
			<p class="color-name"><span class="color-thumb" style="background: var(--accent-surface1)"></span>--accent-surface1</p>
			<p class="color-name"><span class="color-thumb" style="background: rgba(var(--accent-surface1-RGB), 50%)"></span>--accent-surface1-RGB <br>(+ opacity 50%)</p>
			<br>
			<p class="color-name"><span class="color-thumb" style="background: var(--accent-hover)"></span>--accent-hover</p>
			<p class="color-name"><span class="color-thumb" style="background: var(--accent-border)"></span>--accent-border</p>
			<p class="color-name"><span class="color-thumb" style="background: var(--accent-highlight)"></span>--accent-highlight</p>
			<p class="color-name"><span class="color-thumb" style="background: var(--accent-shadow)"></span>--accent-shadow</p>
			<br>
			<p class="color-name"><span class="color-thumb" style="background: var(--accent-text0)"></span>--accent-text0</p>
			<p class="color-name"><span class="color-thumb" style="background: rgba(var(--accent-text0-RGB), 50%)"></span>--accent-text0-RGB <br>(+ opacity 50%)</p>
			<p class="color-name"><span class="color-thumb" style="background: var(--accent-text1)"></span>--accent-text1</p>
			<p class="color-name"><span class="color-thumb" style="background: rgba(var(--accent-text1-RGB), 50%)"></span>--accent-text1-RGB <br>(+ opacity 50%)</p>
			<p class="color-name"><span class="color-thumb" style="background: var(--accent-text2)"></span>--accent-text2</p>
			<p class="color-name"><span class="color-thumb" style="background: rgba(var(--accent-text2-RGB), 50%)"></span>--accent-text2-RGB <br>(+ opacity 50%)</p>
		</div>
	</div>
	<div class="large-3 columns">
		<div class="blk-text">
			<h2>Lead</h2>
			<p class="color-name"><span class="color-thumb" style="background: var(--lead-surface0)"></span>--lead-surface0</p>
			<p class="color-name"><span class="color-thumb" style="background: rgba(var(--lead-surface0-RGB), 50%)"></span>--lead-surface0-RGB <br>(+ opacity 50%)</p>
			<p class="color-name"><span class="color-thumb" style="background: var(--lead-surface1)"></span>--lead-surface1</p>
			<p class="color-name"><span class="color-thumb" style="background: rgba(var(--lead-surface1-RGB), 50%)"></span>--lead-surface1-RGB <br>(+ opacity 50%)</p>
			<br>
			<p class="color-name"><span class="color-thumb" style="background: var(--lead-hover)"></span>--lead-hover</p>
			<p class="color-name"><span class="color-thumb" style="background: var(--lead-border)"></span>--lead-border</p>
			<p class="color-name"><span class="color-thumb" style="background: var(--lead-highlight)"></span>--lead-highlight</p>
			<p class="color-name"><span class="color-thumb" style="background: var(--lead-shadow)"></span>--lead-shadow</p>
			<br>
			<p class="color-name"><span class="color-thumb" style="background: var(--lead-text0)"></span>--lead-text0</p>
			<p class="color-name"><span class="color-thumb" style="background: rgba(var(--lead-text0-RGB), 50%)"></span>--lead-text0-RGB <br>(+ opacity 50%)</p>
			<p class="color-name"><span class="color-thumb" style="background: var(--lead-text1)"></span>--lead-text1</p>
			<p class="color-name"><span class="color-thumb" style="background: rgba(var(--lead-text1-RGB), 50%)"></span>--lead-text1-RGB <br>(+ opacity 50%)</p>
			<p class="color-name"><span class="color-thumb" style="background: var(--lead-text2)"></span>--lead-text2</p>
			<p class="color-name"><span class="color-thumb" style="background: rgba(var(--lead-text2-RGB), 50%)"></span>--lead-text2-RGB <br>(+ opacity 50%)</p>
		</div>
	</div>
	<div class="large-3 columns">
		<div class="blk-text">
			<h2>Exemples</h2>
			<p class="color-exemple" style="border: 1px solid var(--separator); background: var(--contrast-surface0); color: var(--contrast-text1)">--contrast-text1
			<br> sur --contrast-surface0</p>
			<p class="color-exemple" style="border: 1px solid var(--separator); background: var(--contrast-surface1); color: var(--contrast-text1)">--contrast-text1
			<br> sur --accent-surface1</p>
			<br>
			<p class="color-exemple" style="border: 1px solid var(--separator); background: var(--accent-surface0); color: var(--accent-text0)">--accent-text0
			<br> sur --accent-surface0</p>
			<p class="color-exemple" style="border: 1px solid var(--separator); background: var(--accent-surface1); color: var(--accent-text1)">--accent-text1
			<br> sur --accent-surface1</p>
			<br>
			<p class="color-exemple" style="border: 1px solid var(--separator); background: var(--lead-surface0); color: var(--lead-text0)">--lead-text0
			<br> sur --lead-surface0</p>
			<p class="color-exemple" style="border: 1px solid var(--separator); background: var(--lead-surface1); color: var(--lead-text1)">--lead-text1
			<br> sur --lead-surface1</p>
		</div>
	</div>
</div>
<br>
<div class="row color-presentation tiny">
	<div class="large-4 columns">
		<div class="blk-text">
			<h2>Default usage : Foregrounds</h2>
			<p class="color-name" style="font-weight: bolder; color: var(--fg-color)"><span class="color-thumb" style="background: var(--fg-color)"></span> --fg-color: var(--text1);</p>
			<p class="color-name" style="font-weight: bolder; color: var(--fg-bright-color)"><span class="color-thumb" style="background: var(--fg-bright-color)"></span> --fg-bright-color: var(--accent);</p>
			<p class="color-name" style="font-weight: bolder; color: var(--fg-vivid-color)"><span class="color-thumb" style="background: var(--fg-vivid-color)"></span> --fg-vivid-color: var(--text2);</p>
			<p class="color-name" style="font-weight: bolder; color: var(--fg-highlight)"><span class="color-thumb" style="background: var(--fg-highlight)"></span> --fg-highlight: var(--text2);</p>
			<p class="color-name" style="font-weight: bolder; color: var(--fg-selection)"><span class="color-thumb" style="background: var(--fg-selection)"></span> --fg-selection: var(--accent-text1);</p>
			<p class="color-name" style="font-weight: bolder; color: var(--fg-placeholder)"><span class="color-thumb" style="background: var(--fg-placeholder)"></span> --fg-placeholder: var(--text1);</p>
			<p class="color-name" style="font-weight: bolder; color: var(--fg-separator)"><span class="color-thumb" style="background: var(--fg-separator)"></span> --fg-separator: var(--separator);</p>
			<p class="color-name" style="font-weight: bolder; color: var(--fg-tooltip)"><span class="color-thumb" style="background: var(--fg-tooltip)"></span> --fg-tooltip: var(--surface0);</p>
			<p class="color-name" style="font-weight: bolder; color: var(--fg-brand)"><span class="color-thumb" style="background: var(--fg-brand)"></span> --fg-brand: var(--brand-text0);</p>
			<p class="color-name" style="font-weight: bolder; color: var(--fg-headings)"><span class="color-thumb" style="background: var(--fg-headings)"></span> --fg-headings: var(--text0);</p>
			<p class="color-name" style="font-weight: bolder; color: var(--fg-headings-alt)"><span class="color-thumb" style="background: var(--fg-headings-alt)"></span> --fg-headings-alt: var(--text2);</p>
			<p class="color-name" style="font-weight: bolder; color: var(--fg-focus)"><span class="color-thumb" style="background: var(--fg-focus)"></span> --fg-focus: var(--accent);</p>
			<p class="color-name" style="font-weight: bolder; color: var(--fg-links)"><span class="color-thumb" style="background: var(--fg-links)"></span> --fg-links: var(--accent-text2);</p>
			<p class="color-name" style="font-weight: bolder; color: var(--fg-actions)"><span class="color-thumb" style="background: var(--fg-actions)"></span> --fg-actions: var(--accent-text0);</p>
			<p class="color-name" style="font-weight: bolder; color: var(--fg-nav)"><span class="color-thumb" style="background: var(--fg-nav)"></span> --fg-nav: var(--text1);</p>
		</div>
	</div>
	<div class="large-4 columns">
		<div class="blk-text">
			<h2>Default usage : Backgrounds</h2>
			<p class="color-name"><span class="color-thumb" style="background: var(--theme-color)"></span> --theme-color: var(--theme);</p>
			<p class="color-name"><span class="color-thumb" style="background: var(--bg-body)"></span> --bg-body: var(--theme);</p>
			<p class="color-name"><span class="color-thumb" style="background: var(--bg-content)"></span> --bg-content: var(--background);</p>
			<p class="color-name"><span class="color-thumb" style="background: var(--bg-brand)"></span> --bg-brand: var(--brand-surface0);</p>
			<p class="color-name"><span class="color-thumb" style="background: var(--bg-form)"></span> --bg-form: var(--surface0);</p>
			<p class="color-name"><span class="color-thumb" style="background: var(--bg-input)"></span> --bg-input: var(--surface2);</p>
			<p class="color-name"><span class="color-thumb" style="background: var(--bg-block)"></span> --bg-block: var(--surface0);</p>
			<p class="color-name"><span class="color-thumb" style="background: var(--bg-block-alt)"></span> --bg-block-alt: var(--surface3);</p>
			<p class="color-name"><span class="color-thumb" style="background: var(--bg-actions)"></span> --bg-actions: var(--accent-surface0);</p>
			<p class="color-name"><span class="color-thumb" style="background: var(--border-actions)"></span> --border-actions: var(--accent-border);</p>
			<p class="color-name"><span class="color-thumb" style="background: var(--bg-hover)"></span> --bg-hover: var(--accent-hover);</p>
			<p class="color-name"><span class="color-thumb" style="background: var(--bg-highlight)"></span> --bg-highlight: var(--surface6);</p>
			<p class="color-name"><span class="color-thumb" style="background: var(--bg-selection)"></span> --bg-selection: var(--accent-surface1);</p>
			<p class="color-name"><span class="color-thumb" style="background: var(--bg-tooltip)"></span> --bg-tooltip: var(--tooltip-surface);</p>
			<p class="color-name"><span class="color-thumb" style="background: var(--bg-overlay)"></span> --bg-overlay: rgba(var(--overlay-RGB), .7);</p>
			<p class="color-name"><span class="color-thumb" style="background: var(--bg-sheet)"></span> --bg-sheet: var(--theme);</p>
			<p class="color-name"><span class="color-thumb" style="background: var(--bg-modal)"></span> --bg-modal: var(--surface0);</p>
			<p class="color-name"><span class="color-thumb" style="background: var(--bg-scroll-track)"></span> --bg-scroll-track: var(--background);</p>
			<p class="color-name"><span class="color-thumb" style="background: var(--bg-scroll-thumb)"></span> --bg-scroll-thumb: var(--accent-surface1);</p>
			<p class="color-name"><span class="color-thumb" style="background: var(bg-scroll-thumb-hover)"></span> --bg-scroll-thumb-hover: var(--accent-surface1);</p>
		</div>
	</div>
	<div class="large-4 columns">
		<div class="blk-text">
			<h2>Exemples</h2>
			<br>
			<div class="blk-button">
				<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>
			<br><br>
			<div class="blk-form">
				<div class="row">
					<div class="large-12 columns">
						<form method="POST">
							<div class="form-hr">
								<h3>Devis / Contact</h3>
							</div>
							<div class="form-section data-row f1-c0-nom_4">
								<label for="f1-c0-nom_4">Nom *</label>
								<input type="text" name="f1-c0-nom_4" id="f1-c0-nom_4" placeholder="Votre nom complet" required="required"
									value="">
							</div>
							<div class="form-section data-row f1-c0-e-mail_6">
								<label for="f1-c0-e-mail_6">E-mail *</label>
								<input type="email" name="f1-c0-e-mail_6" id="f1-c0-e-mail_6" placeholder="Votre adresse e-mail"
									required="required" value="">
							</div>
							<div class="form-submit">
								<div class="blk-button align-center full-width">
									<button type="submit" name="submit-button" class="button blk-button__link" value=""><span
											class="txt blk-button__label"><span>Envoyer</span></span></button>
								</div>
							</div>
						</form>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
Source: src/cssframework_v2/less/doc.less, line 1402