Documentation JeChange Classes

Mis à jour le 09/05/2023

minutes de lecture

JeChange Classes

Buttons

btn--change-all + btn (only in LG and XL)

btn--primary + btn

btn--secondary + btn

btn + btn--light

btn + btn-alternative

This is a btn inside class rounded-link-list

					
						<button class="btn"> Button class btn only </button>
						<a href="#buttons" class="btn">
							<span class="btn__prefix">Btn prefix class:</span>
							00 00 00 00 00
							<span class="btn__suffix">Btn suffix class</span>
						</a>
						<a href="#buttons" class="btn btn--change-all">btn--change-all + btn (only in XL)</a>
						<a href="#buttons" class="btn btn--primary btn--md">btn--primary + btn</a>
						<a href="#buttons" class="btn btn--primary btn--md">
							<span class="btn__prefix">Btn prefix class:</span>
							00 00 00 00 00
							<span class="btn__suffix">Btn suffix class</span>
						</a>
						<a href="#buttons" class="btn btn--secondary">btn--secondary + btn</a>
						<a href="#buttons" class="btn btn--light">btn + btn--light</a>
						<a href="#buttons" class="btn btn-alternative">btn + btn-alternative</a>
						<div class="rounded-link-list">
							<a href="#buttons" class="btn">This is a btn inside class rounded-link-list</a>
						</div>

Buttons with prefix and suffix

Btn prefix class 00 00 00 00 00 Btn suffix class

					
						<div>
							<a href="#buttons" class="btn">
								<span class="btn__prefix">Btn prefix class</span>
								00 00 00 00 00
								<span class="btn__suffix">Btn suffix class</span>
							</a>
						</div>
						<div>
							<a href="#buttons" class="btn btn--primary btn--md">
								<span class="btn__prefix">Btn prefix class</span>
								00 00 00 00 00
								<span class="btn__suffix">Btn suffix class</span>
							</a>
						</div>

wp-block-button__link

This is wp-block-button__link

This is wp-block-button__link and text--center

This is wp-block-button__link and alignright

wp-block-button__link and is-style-outline

					
						<a href="#buttons" class="wp-block-button__link">
							This is wp-block-button__link
						</a>
						<a href="#buttons" class="wp-block-button__link text--center">
							This is wp-block-button__link and text--center
						</a>
						<a href="#buttons" class="wp-block-button__link alignright">
							This is wp-block-button__link and alignright
						</a>
						<a href="#buttons" class="wp-block-button__link is-style-outline">wp-block-button__link and is-style-outline</a>

wp-block-buttons

class wp-block-button alone

class wp-block-button and has-custom-width (auto) class wp-block-button andwp-block-button__width-25 class wp-block-button andwp-block-button__width-50 class wp-block-button andwp-block-button__width-75 class wp-block-button andwp-block-button__width-100

					
						<a href="#buttons" class="wp-block-button">class wp-block-button alone</a>
						<a href="#buttons" class="wp-block-button has-custom-width wp-block-button__link">class wp-block-button and has-custom-width (auto)</a>
						<a href="#buttons" class="wp-block-button wp-block-button__width-25 wp-block-button__link">class wp-block-button andwp-block-button__width-25</a>
						<a href="#buttons" class="wp-block-button wp-block-button__width-50 wp-block-button__link">class wp-block-button andwp-block-button__width-50</a>
						<a href="#buttons" class="wp-block-button wp-block-button__width-75 wp-block-button__link">class wp-block-button andwp-block-button__width-75</a>
						<a href="#buttons" class="wp-block-button wp-block-button__width-100 wp-block-button__link">class wp-block-button andwp-block-button__width-100</a>

Titles

Subheader

Lead

Stat

					
						<div class="h1">h1</div>
						<div class="h2">h2</div>
						<div class="h3">h3</div>
						<div class="h4">h4</div>
						<div class="h5">h5</div>
						<div class="h6">h6</div>
						<div class="subheader">Subheader</div>
						<div class="intro">Lead</div>
						<div class="stat">Stat</div>

Hide classes

Display block always

Class is-hidden:

Display none always

Class invisble:

visibility hidden always

		
			<div class="is-visible">Display block always</div>
			<p>Class is-hidden:</p>
			<div class="is-hidden">Display none always</div>
			<p>Class invisble:</p>
			<div class="invisible">visibility hidden always</div>

Responsive utilities

You can use the same classes we use in Agrippa to display things in terms of the windows size.

Animation

class rotate

class rotation

					
						<p class="rotate"> class rotate </p>
						<p class="rotation"> class rotation </p>

blockquote

hello
I'm a p tag

					
						<blockquote>
							hello
							<p>I'm a p tag</p>
						</blockquote>

Cite

Div class cite-block

p with code-inline class

p with code-block class

					
						<cite>Cite</cite>
						<div class="cite-block">Div class cite-block</div>
						<p class="code-inline">p with code-inline class</p>
						<p class="code-block">p with code-block class</p>

List

List UL no bullet
Item 1
Item 2
Item 3

List UL list-disc
Item 1
Item 2
Item 3

List UL list-circle
Item 1
Item 2
Item 3

List UL list-square
Item 1
Item 2
Item 3

List UL arrows
Item 1
Item 2
Item 3

List UL link
Item 1
Item 2
Item 3

List UL list-link
Item 1
Item 2
Item 3

List UL list-link and list-link--full
Item 1
Item 2
Item 3

List UL list-link and list-link--apart
Item 1
Item 2
Item 3

List OL no bullet
Item 1
Item 2
Item 3

List OL list-decimal
Item 1
Item 2
Item 3

List OL list-lower-latin
Item 1
Item 2
Item 3

List OL list-lower-roman
Item 1
Item 2
Item 3

List OL list-upper-latin
Item 1
Item 2
Item 3

List OL list-upper-roman
Item 1
Item 2
Item 3

List OL arrows
Item 1
Item 2
Item 3

List OL link
Item 1
Item 2
Item 3

List OL list-link
Item 1
Item 2
Item 3

List OL list-link and list-link--full
Item 1
Item 2
Item 3

List OL list-link and list-link--apart
Item 1
Item 2
Item 3

					
						<ul class="no-bullet">
							<li>List UL no bullet</li>
							<li>Item 1</li>
							<li>Item 2</li>
							<li>Item 3</li>
						</ul>
						<ul class="list-disc">
							<li>List UL list-disc</li>
							<li>Item 1</li>
							<li>Item 2</li>
							<li>Item 3</li>
						</ul>
						<ul class="list-circle">
							<li>List UL list-circle</li>
							<li>Item 1</li>
							<li>Item 2</li>
							<li>Item 3</li>
						</ul>
						<ul class="list-square">
							<li>List UL list-square</li>
							<li>Item 1</li>
							<li>Item 2</li>
							<li>Item 3</li>
						</ul>
						<ul class="arrows">
							<li>List UL arrows</li>
							<li>Item 1</li>
							<li>Item 2</li>
							<li>Item 3</li>
						</ul>
						<ul class="link">
							<li>List UL link</li>
							<li>Item 1</li>
							<li>Item 2</li>
							<li>Item 3</li>
						</ul>
						<ul class="list-link">
							<li>List UL list-link</li>
							<li>Item 1</li>
							<li>Item 2</li>
							<li>Item 3</li>
						</ul>
						<ul class="list-link list-link--full">
							<li>List UL list-link and list-link--full</li>
							<li>Item 1</li>
							<li>Item 2</li>
							<li>Item 3</li>
						</ul>
						<ul class="list-link list-link--apart">
							<li>List UL list-link and list-link--apart</li>
							<li>Item 1</li>
							<li>Item 2</li>
							<li>Item 3</li>
						</ul>

						<ol class="no-bullet">
							<li>List OL no bullet</li>
							<li>Item 1</li>
							<li>Item 2</li>
							<li>Item 3</li>
						</ol>
						<ol class="list-decimal">
							<li>List OL list-decimal</li>
							<li>Item 1</li>
							<li>Item 2</li>
							<li>Item 3</li>
						</ol>
						<ol class="list-lower-latin">
							<li>List OL list-lower-latin</li>
							<li>Item 1</li>
							<li>Item 2</li>
							<li>Item 3</li>
						</ol>
						<ol class="list-lower-roman">
							<li>List OL list-lower-roman</li>
							<li>Item 1</li>
							<li>Item 2</li>
							<li>Item 3</li>
						</ol>
						<ol class="list-upper-latin">
							<li>List OL list-upper-latin</li>
							<li>Item 1</li>
							<li>Item 2</li>
							<li>Item 3</li>
						</ol>
						<ol class="list-upper-roman">
							<li>List OL list-upper-roman</li>
							<li>Item 1</li>
							<li>Item 2</li>
							<li>Item 3</li>
						</ol>
						<ol class="arrows">
							<li>List OL arrows</li>
							<li>Item 1</li>
							<li>Item 2</li>
							<li>Item 3</li>
						</ol>
						<ol class="link">
							<li>List OL link</li>
							<li>Item 1</li>
							<li>Item 2</li>
							<li>Item 3</li>
						</ol>
						<ol class="list-link">
							<li>List OL list-link</li>
							<li>Item 1</li>
							<li>Item 2</li>
							<li>Item 3</li>
						</ol>
						<ol class="list-link list-link--full">
							<li>List OL list-link and list-link--full</li>
							<li>Item 1</li>
							<li>Item 2</li>
							<li>Item 3</li>
						</ol>
						<ol class="list-link list-link--apart">
							<li>List OL list-link and list-link--apart</li>
							<li>Item 1</li>
							<li>Item 2</li>
							<li>Item 3</li>
						</ol>

Text alignment

Alone classes align the text in whole window sizes

Text-left

Text-center

Text-right

Text-justify

Small

Small classes only align the text in SM, MD, LG and XL window size. Starting from 481px

Small Text Left

Small Text center

Small Text right

Small Text justify

Medium

Medium classes only align the text in MD, LG and XL window size. Starting from 801px

Small Text Left

Small Text center

Small Text right

Small Text justify

Large

Large classes only align the text in LG and XL window size. Starting from 1140px

Small Text Left

Small Text center

Small Text right

Small Text justify

					
						<p class="text-left">Text-left</p>
						<p class="text-center">Text-center</p>
						<p class="text-right">Text-right</p>
						<p class="text-justify">Text-justify</p>
						<h3 class="text-center text-underline">Small</h3>
						<p class="small-text-left">Small Text Left</p>
						<p class="small-text-center">Small Text center</p>
						<p class="small-text-right">Small Text right</p>
						<p class="small-text-justify">Small Text justify</p>
						<h3 class="text-center text-underline">Medium</h3>
						<p class="medium-text-left">Small Text Left</p>
						<p class="medium-text-center">Small Text center</p>
						<p class="medium-text-right">Small Text right</p>
						<p class="medium-text-justify">Small Text justify</p>
						<h3 class="text-center text-underline">Large</h3>
						<p class="large-text-left">Small Text Left</p>
						<p class="large-text-center">Small Text center</p>
						<p class="large-text-right">Small Text right</p>
						<p class="large-text-justify">Small Text justify</p>

Text

Text hide:

Text hide

Text truncate: overflow with ellipsis

Text truncate -> overflow with ellipsis

Text nowrap. Not allow long words to be able to break and wrap onto the next line

Text wrap. Allow long words to be able to break and wrap onto the next line

Text lowercase

Text uppercase

Text capitalize

Text overline

Text underline

Text line-through

font-wide (letter spacing .25rem)

font normal

font-weight-normal

font bold

font italic

small

font-size-small

font-size-large

font-size-xlarge

has-small-font-size

has-normal-font-size

has-medium-font-size

has-large-font-size

text--center

has-text-align-left

has-text-align-right

					
						<p>Text hide: </p>
						<span class="text-hide">Text hide</span>
						<p>Text truncate: overflow with ellipsis</p>
						<div style="width:200px">
							<p class="text-truncate">Text truncate -> overflow with ellipsis</p>
						</div>
						<p class="text-nowrap">Text nowrap. Not allow long words to be able to break and wrap onto the next line</p>
						<p class="text-wrap">Text wrap. Allow long words to be able to break and wrap onto the next line</p>
						<p class="text-lowercase">Text lowercase</p>
						<p class="text-uppercase">Text uppercase</p>
						<p class="text-capitalize">Text capitalize</p>
						<p class="text-overline">Text overline</p>
						<p class="text-underline">Text underline</p>
						<p class="text-line-through">Text line-through</p>
						<p class="font-wide">font-wide (letter spacing .25rem)</p>
						<p class="font-normal">font normal</p>
						<p class="font-weight-normal">font-weight-normal</p>
						<p class="font-bold">font bold</p>
						<p class="font-italic">font italic</p>
						<p class="small">small</p>
						<p class="font-size-small">font-size-small</p>
						<p class="font-size-large">font-size-large</p>
						<p class="font-size-large">font-size-large</p>
						<p class="font-size-xlarge">font-size-xlarge</p>
						<p class="has-small-font-size">has-small-font-size</p>
						<p class="has-normal-font-size">has-normal-font-size</p>
						<p class="has-medium-font-size">has-medium-font-size</p>
						<p class="has-large-font-size">has-large-font-size</p>
						<p class="text--center">text--center</p>
						<p class="has-text-align-left">has-text-align-left</p>
						<p class="has-text-align-right">has-text-align-right</p>

Grid

↔️ Resize the window to see the differences between each GRID class ↔️

Grid container

Grid container Fluid

Grid container Full

					
						<div class="grid-container">Grid container</div>
						<div class="grid-container fluid">Grid container Fluid </div>
						<div class="grid-container full"> Grid container Full</div>

Responsive

↔️ Resize the window to see the difference ↔️

hide-on-mobile only (you can see it in tablet and desktop)

hide-on-mobile

hide-on-tablet only (you can see it in mobile and desktop)

hide-on-tablet

					
						<p>↔️ Resize the window to see the difference ↔️</p>
						<h3 class="text-center text-underline">hide-on-mobile only (you can see it in tablet and desktop)</h3>
						<p class="hide-on-mobile">hide-on-mobile</p>
						<h3 class="text-center text-underline">hide-on-tablet only (you can see it in mobile and desktop)</h3>
						<p class="hide-on-tablet">hide-on-tablet</p>

Article

this is an article article-image

					
						<div class="article">
							this is an article
							<img class="article-image" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAA1BMVEXoYI5vdnlCAAAASElEQVR4nO3BgQAAAADDoPlTX+AIVQEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADwDcaiAAFXD1ujAAAAAElFTkSuQmCC" alt="article-image">
						</div>

Cards

This is a basic card

This is a card divider

This is a card section

Class card-image: (width 100%)

The following img has class jc-card__picture

This is jc-card__content

This is a jc-card--rounded class (with has-primary-background-color to see the rounded border)

					
						<div class="card">This is a basic card</div>
						<div class="card-divider">This is a card divider</div>
						<div class="card">
							<div class="card-section">This is a card section</div>
							<p>Class card-image: (width 100%)</p>
							<img class="card-image" src="https://zinniaflors.com/246-medium_default/little-bag-pink.jpg" alt="card-image" />
						</div>

						<p>The following img has class jc-card__picture</p>
						<img class="jc-card__picture" src="https://zinniaflors.com/246-medium_default/little-bag-pink.jpg" alt="card-image" />
						<div class="jc-card__content">This is jc-card__content</div>
						<div class="jc-card--rounded has-primary-background-color">This is a jc-card--rounded class (with has-primary-background-color to see the rounded border)</div>

Sheet

This is a sheet

This is a sheet and sheet--alt

This is a sheet and sheet--clear (bg transparent)

This is a sheet and sheet--boom

This is a sheet and sheet--fill

This is a sheet and sheet--fill-white

This is a sheet and sheet--fill-light-green

This is a sheet and sheet--fill-light-blue

This is a sheet and sheet--fill-light-blue-variant

This is a sheet and sheet--fill-green

This is a sheet and sheet--fill-blue

This is a sheet and sheet--fill-white-variant

This is a sheet and sheet--fill-left

This is a sheet and sheet--alt-background

This is a sheet--rounded (with has-primary-background-color to see the rounded border)

					
						<div class="sheet">This is a sheet</div>
						<div class="sheet sheet--alt">This is a sheet and sheet--alt</div>
						<div class="sheet sheet--clear">This is a sheet and sheet--clear (bg transparent)</div>
						<div class="sheet sheet--boom">This is a sheet and sheet--boom</div>
						<div class="sheet sheet--fill">This is a sheet and sheet--fill</div>
						<div class="sheet sheet--fill-white">This is a sheet and sheet--fill-white</div>
						<div class="sheet sheet--fill-light-green">This is a sheet and sheet--fill-light-green</div>
						<div class="sheet sheet--fill-light-blue">This is a sheet and sheet--fill-light-blue</div>
						<div class="sheet sheet--fill-light-blue-variant">This is a sheet and sheet--fill-light-blue-variant</div>
						<div class="sheet sheet--fill-green">This is a sheet and sheet--fill-green</div>
						<div class="sheet sheet--fill-blue">This is a sheet and sheet--fill-blue</div>
						<div class="sheet sheet--fill-white-variant">This is a sheet and sheet--fill-white-variant</div>
						<div class="sheet sheet--fill-left">This is a sheet and sheet--fill-left</div>
						<div class="sheet sheet--alt-background">This is a sheet and sheet--alt-background</div>
						<div class="sheet--rounded has-primary-background-color">This is a sheet--rounded (with has-primary-background-color to see the rounded border)</div>

Borders

card Rounded

Class radius alone (I have added has-primary-background-color to see the rounded border)

card bordered

card no bordered

cardborder border--primary

Img with class rounded

Img with class radius

Img with class bordered

Has black border + border class -> border color white

Has white border + border class -> border color black

Class border alone

					
						<div class="card rounded">card Rounded</div>
						<div class="radius has-primary-background-color">Class radius alone (I have added has-primary-background-color to see the rounded border)</div>
						<div class="card bordered">card bordered</div>
						<div class="card border-none">card no bordered</div>
						<div class="card border border--primary">cardborder border--primary</div>
						<p>Img with class rounded</p>
						<img class="rounded" src="http://t1.gstatic.com/licensed-image?q=tbn:ANd9GcRQ1fUs8IJmaxOjeHXkLD2LeuZAYAGcE_CKNrip_xGQuV-jA0hy_aRrPLojO-VQ6S3EuShkKzh3EJzWa_KnP0E" alt="img rounded" style="width: 100px; height:100px" />
						<p>Img with class radius</p>
						<img class="radius" src="http://t1.gstatic.com/licensed-image?q=tbn:ANd9GcRQ1fUs8IJmaxOjeHXkLD2LeuZAYAGcE_CKNrip_xGQuV-jA0hy_aRrPLojO-VQ6S3EuShkKzh3EJzWa_KnP0E" alt="img radius" style="width: 100px; height:100px" />
						<p>Img with class bordered</p>
						<img class="bordered" src="http://t1.gstatic.com/licensed-image?q=tbn:ANd9GcRQ1fUs8IJmaxOjeHXkLD2LeuZAYAGcE_CKNrip_xGQuV-jA0hy_aRrPLojO-VQ6S3EuShkKzh3EJzWa_KnP0E" alt="img bordered" style="width: 100px; height:100px" />
						<div class="is-style-outline">
							<div class="has-black-color border">Has black border + border class -> border color white</div>
						</div>
						<div class="is-style-outline">
							<div class="has-white-color border">Has white border + border class -> border color black</div>
						</div>
						<div class="border">Class border alone</div>

Shadow

This is a basic card with shadow

					
						<p class="shadow">Shadow</p>
						<div class="card shadow">This is a basic card with shadow</div>
						<img src="http://t1.gstatic.com/licensed-image?q=tbn:ANd9GcRQ1fUs8IJmaxOjeHXkLD2LeuZAYAGcE_CKNrip_xGQuV-jA0hy_aRrPLojO-VQ6S3EuShkKzh3EJzWa_KnP0E" alt="img shadow" class="shadow" />

Arrow

					
						<div class="arrow-down"></div>
						<div class="arrow-up"></div>
						<div class="arrow-right"></div>
						<div class="arrow-left"></div>

Separator

Separator center

Separator right

Separator left

					
						<div class="separator-center">Separator center</div>
						<div class="separator-right">Separator right</div>
						<div class="separator-left">Separator left</div>

Background

class bg-dark

class reglemented

Sheet -> bg white and color text #4A5154

Frame -> bg transparent (body: #f6f6f6) and color text #4A5154

has-blueberry-background-color

has-cherry-background-color

has-kiwi-background-color

has-lemon-background-color

has-orange-background-color

has-primary-background-color

has-light-gray-background-color

has-medium-gray-background-color

has-dark-grey-background-color

has-alternative-gray-background-color

has-white-background-color

has-black-background-color

has-pale-pink-background-color

has-vivid-red-background-color

has-luminous-vivid-orange-background-color

has-luminous-vivid-amber-background-color

has-light-green-cyan-background-color

has-light-vivid-cyan-background-color

has-pale-cyan-blue-background-color

has-vivid-cyan-blue-background-color

has-vivid-purple-background-color

has-very-light-gray-background-color

has-cyan-bluish-gray-background-color

has-very-dark-gray-background-color

dark-mint-background

blue-mint-background

fresh-mint-background

amber-background

white-orange-background

smoke-background

Gradient backgrounds colors:

has-vivid-cyan-blue-to-vivid-purple-gradient-background

has-vivid-green-cyan-to-vivid-cyan-blue-gradient-background

has-light-green-cyan-to-vivid-green-cyan-gradient-background

has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background

has-luminous-vivid-orange-to-vivid-red-gradient-background

has-very-light-gray-to-cyan-bluish-gray-gradient-background

has-cool-to-warm-spectrum-gradient-background

has-blush-bordeaux-gradient-background

has-purple-crush-gradient-background

has-luminous-dusk-gradient-background

has-hazy-dawn-gradient-background

has-pale-ocean-gradient-background

has-electric-grass-gradient-background

has-subdued-olive-gradient-background

has-atomic-cream-gradient-background

has-midnight-gradient-background

					
						<div class="bg-dark">class bg-dark</div>
						<div class="reglemented">class reglemented</div>
						<div class="sheet">Sheet -> bg white and color text #4A5154</div>
						<div class="frame">Frame -> bg transparent (body: #f6f6f6) and color text #4A5154</div>
						<div class="has-blueberry-background-color">has-blueberry-background-color</div>
						<div class="has-cherry-background-color">has-cherry-background-color</div>
						<div class="has-kiwi-background-color">has-kiwi-background-color</div>
						<div class="has-lemon-background-color">has-lemon-background-color</div>
						<div class="has-orange-background-color">has-orange-background-color</div>
						<div class="has-primary-background-color">has-primary-background-color</div>
						<div class="has-light-gray-background-color">has-light-gray-background-color</div>
						<div class="has-medium-gray-background-color">has-medium-gray-background-color</div>
						<div class="has-dark-grey-background-color">has-dark-grey-background-color</div>
						<div class="has-alternative-gray-background-color">has-alternative-gray-background-color</div>
						<div class="has-white-background-color">has-white-background-color</div>
						<div class="has-black-background-color">has-black-background-color</div>
						<div class="has-pale-pink-background-color">has-pale-pink-background-color</div>
						<div class="has-vivid-red-background-color">has-vivid-red-background-color</div>
						<div class="has-luminous-vivid-orange-background-color">has-luminous-vivid-orange-background-color</div>
						<div class="has-luminous-vivid-amber-background-color">has-luminous-vivid-amber-background-color</div>
						<div class="has-light-green-cyan-background-color">has-light-green-cyan-background-color</div>
						<div class="has-vivid-green-cyan-background-color">has-light-vivid-cyan-background-color</div>
						<div class="has-pale-cyan-blue-background-color">has-pale-cyan-blue-background-color</div>
						<div class="has-vivid-cyan-blue-background-color">has-vivid-cyan-blue-background-color</div>
						<div class="has-vivid-purple-background-color">has-vivid-purple-background-color</div>
						<div class="has-very-light-gray-background-color">has-very-light-gray-background-color</div>
						<div class="has-cyan-bluish-gray-background-color">has-cyan-bluish-gray-background-color</div>
						<div class="has-very-dark-gray-background-color">has-very-dark-gray-background-color</div>
						<div class="dark-mint-background">dark-mint-background</div>
						<div class="blue-mint-background">blue-mint-background</div>
						<div class="fresh-mint-background">fresh-mint-background</div>
						<div class="amber-background">amber-background</div>
						<div class="white-orange-background">white-orange-background</div>
						<div class="smoke-background">smoke-background</div>
						<p><strong>Gradient backgrounds colors:</strong></p>
						<div class="has-vivid-cyan-blue-to-vivid-purple-gradient-background">has-vivid-cyan-blue-to-vivid-purple-gradient-background</div>
						<div class="has-vivid-green-cyan-to-vivid-cyan-blue-gradient-background">has-vivid-green-cyan-to-vivid-cyan-blue-gradient-background</div>
						<div class="has-light-green-cyan-to-vivid-green-cyan-gradient-background">has-light-green-cyan-to-vivid-green-cyan-gradient-background</div>
						<div class="has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background">has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background</div>
						<div class="has-luminous-vivid-orange-to-vivid-red-gradient-background">has-luminous-vivid-orange-to-vivid-red-gradient-background</div>
						<div class="has-very-light-gray-to-cyan-bluish-gray-gradient-background">has-very-light-gray-to-cyan-bluish-gray-gradient-background</div>
						<div class="has-cool-to-warm-spectrum-gradient-background">has-cool-to-warm-spectrum-gradient-background</div>
						<div class="has-blush-bordeaux-gradient-background">has-blush-bordeaux-gradient-background</div>
						<div class="has-purple-crush-gradient-background">has-purple-crush-gradient-background</div>
						<div class="has-luminous-dusk-gradient-background">has-luminous-dusk-gradient-background</div>
						<div class="has-hazy-dawn-gradient-background">has-hazy-dawn-gradient-background</div>
						<div class="has-pale-ocean-gradient-background">has-pale-ocean-gradient-background</div>
						<div class="has-electric-grass-gradient-background">has-electric-grass-gradient-background</div>
						<div class="has-subdued-olive-gradient-background">has-subdued-olive-gradient-background</div>
						<div class="has-atomic-cream-gradient-background">has-atomic-cream-gradient-background</div>
						<div class="has-midnight-gradient-background">has-midnight-gradient-background</div>

single-post

h2 Inside div.single-post and then inside div.editorial

h3 Inside div.single-post and then inside div.editorial

h4 Inside div.single-post and then inside div.editorial

					
						<div class="single-post">
							<div class="editorial">
								<h2>h2 Inside div.single-post and then inside div.editorial</h2>
								<h3>h3 Inside div.single-post and then inside div.editorial</h2>
								<h4>h4 Inside div.single-post and then inside div.editorial</h2>
							</div>
						</div>

Colors

has-blueberry-color

has-cherry-color

has-kiwi-color

has-lemon-color

has-orange-color

has-primary-color

has-light-gray-color

has-medium-gray-color

has-dark-grey-color

has-alternative-gray-color

has-white-color

has-black-color

log (bold) and log--info

log (bold) and log--warning

log (bold) and log--error

log (bold) and log--success

green-color

orange-color

link-color

has-pale-pink-color

has-vivid-red-color

has-luminous-vivid-orange-color

has-luminous-vivid-amber-color

has-light-green-cyan-color

has-light-vivid-cyan-color

has-pale-cyan-blue-color

has-vivid-cyan-blue-color

has-vivid-purple-color

has-very-light-gray-color

has-cyan-bluish-gray-color

has-very-dark-gray-color

					
						<p class="has-blueberry-color">has-blueberry-color</p>
						<p class="has-cherry-color">has-cherry-color</p>
						<p class="has-kiwi-color">has-kiwi-color</p>
						<p class="has-lemon-color">has-lemon-color</p>
						<p class="has-orange-color">has-orange-color</p>
						<p class="has-primary-color">has-primary-color</p>
						<p class="has-light-gray-color">has-light-gray-color</p>
						<p class="has-medium-gray-color">has-medium-gray-color</p>
						<p class="has-dark-grey-color">has-dark-grey-color</p>
						<p class="has-alternative-gray-color">has-alternative-gray-color</p>
						<p class="has-white-color">has-white-color</p>
						<p class="has-black-color">has-black-color</p>
						<p class="log log--info">log (bold) and log--info</p>
						<p class="log log--warning">log (bold) and log--warning</p>
						<p class="log log--error">log (bold) and log--error</p>
						<p class="log log--success">log (bold) and log--success</p>
						<p class="green-color">green-color</p>
						<p class="orange-color">orange-color</p>
						<p class="link-color">link-color</p>
						<p class="has-pale-pink-color">has-pale-pink-color</p>
						<p class="has-vivid-red-color">has-vivid-red-color</p>
						<p class="has-luminous-vivid-orange-color">has-luminous-vivid-orange-color</p>
						<p class="has-luminous-vivid-amber-color">has-luminous-vivid-amber-color</p>
						<p class="has-light-green-cyan-color">has-light-green-cyan-color</p>
						<p class="has-vivid-green-cyan-color">has-light-vivid-cyan-color</p>
						<p class="has-pale-cyan-blue-color">has-pale-cyan-blue-color</p>
						<p class="has-vivid-cyan-blue-color">has-vivid-cyan-blue-color</p>
						<p class="has-vivid-purple-color">has-vivid-purple-color</p>
						<p class="has-very-light-gray-color">has-very-light-gray-color</p>
						<p class="has-cyan-bluish-gray-color">has-cyan-bluish-gray-color</p>
						<p class="has-very-dark-gray-color">has-very-dark-gray-color</p>

Icons

see-more

shape-elec

shape-monitor

shape-safebox

shape-insurance

shape-energy-elec

shape-webbox

shape-wallet

shape-poo

shape-mobile

shape-animal-insurance

shape-auto

shape-loan-insurance

shape-house

shape-health

shape-foresight

shape-moto

shape-life-insurance

shape-bank

shape-stock-exchange

shape-saving

shape-electricity

shape-gas

shape-dual

shape-internet

shape-gsm

shape-consumer-loan

shape-revolving

shape-personal-loan

shape-work-loan

shape-grouping-loan

shape-move

shape-termination

shape-change-all

shape-validate

banner-switch

jechange

jechange-baseline

					
						<span class="see-more">see-more</span>
						<svg class="icon">
							<use xlink:href="/themes/custom/jechange/img/sprite.svg#shape-elec"></use>
						</svg>
						<svg class="icon">
							<use xlink:href="/themes/custom/jechange/img/sprite.svg#shape-monitor"></use>
						</svg>
						<svg class="icon">
							<use xlink:href="/themes/custom/jechange/img/sprite.svg#shape-safebox"></use>
						</svg>
						<svg class="icon">
							<use xlink:href="/themes/custom/jechange/img/sprite.svg#shape-insurance"></use>
						</svg>
						<svg class="icon">
							<use xlink:href="/themes/custom/jechange/img/sprite.svg#shape-energy-elec"></use>
						</svg>
						<svg class="icon">
							<use xlink:href="/themes/custom/jechange/img/sprite.svg#shape-webbox"></use>
						</svg>
						<svg class="icon">
							<use xlink:href="/themes/custom/jechange/img/sprite.svg#shape-wallet"></use>
						</svg>
						<svg class="icon">
							<use xlink:href="/themes/custom/jechange/img/sprite.svg#shape-poo"></use>
						</svg>
						<svg class="icon">
							<use xlink:href="/themes/custom/jechange/img/sprite.svg#shape-mobile"></use>
						</svg>
						<svg class="icon">
							<use xlink:href="/themes/custom/jechange/img/sprite.svg#shape-animal-insurance"></use>
						</svg>
						<svg class="icon">
							<use xlink:href="/themes/custom/jechange/img/sprite.svg#shape-auto"></use>
						</svg>
						<svg class="icon">
							<use xlink:href="/themes/custom/jechange/img/sprite.svg#shape-loan-insurance"></use>
						</svg>
						<svg class="icon">
							<use xlink:href="/themes/custom/jechange/img/sprite.svg#shape-house"></use>
						</svg>
						<svg class="icon">
							<use xlink:href="/themes/custom/jechange/img/sprite.svg#shape-health"></use>
						</svg>
						<svg class="icon">
							<use xlink:href="/themes/custom/jechange/img/sprite.svg#shape-foresight"></use>
						</svg>
						<svg class="icon">
							<use xlink:href="/themes/custom/jechange/img/sprite.svg#shape-moto"></use>
						</svg>
						<svg class="icon">
							<use xlink:href="/themes/custom/jechange/img/sprite.svg#shape-life-insurance"></use>
						</svg>
						<svg class="icon">
							<use xlink:href="/themes/custom/jechange/img/sprite.svg#shape-bank"></use>
						</svg>
						<svg class="icon">
							<use xlink:href="/themes/custom/jechange/img/sprite.svg#shape-stock-exchange"></use>
						</svg>
						<svg class="icon">
							<use xlink:href="/themes/custom/jechange/img/sprite.svg#shape-saving"></use>
						</svg>
						<svg class="icon">
							<use xlink:href="/themes/custom/jechange/img/sprite.svg#shape-electricity"></use>
						</svg>
						<svg class="icon">
							<use xlink:href="/themes/custom/jechange/img/sprite.svg#shape-gas"></use>
						</svg>
						<svg class="icon">
							<use xlink:href="/themes/custom/jechange/img/sprite.svg#shape-dual"></use>
						</svg>
						<svg class="icon">
							<use xlink:href="/themes/custom/jechange/img/sprite.svg#shape-internet"></use>
						</svg>
						<svg class="icon">
							<use xlink:href="/themes/custom/jechange/img/sprite.svg#shape-gsm"></use>
						</svg>
						<svg class="icon">
							<use xlink:href="/themes/custom/jechange/img/sprite.svg#shape-consumer-loan"></use>
						</svg>
						<svg class="icon">
							<use xlink:href="/themes/custom/jechange/img/sprite.svg#shape-revolving"></use>
						</svg>
						<svg class="icon">
							<use xlink:href="/themes/custom/jechange/img/sprite.svg#shape-personal-loan"></use>
						</svg>
						<svg class="icon">
							<use xlink:href="/themes/custom/jechange/img/sprite.svg#shape-work-loan"></use>
						</svg>
						<svg class="icon">
							<use xlink:href="/themes/custom/jechange/img/sprite.svg#shape-grouping-loan"></use>
						</svg>
						<svg class="icon">
							<use xlink:href="/themes/custom/jechange/img/sprite.svg#shape-move"></use>
						</svg>
						<svg class="icon">
							<use xlink:href="/themes/custom/jechange/img/sprite.svg#shape-termination"></use>
						</svg>
						<svg class="icon">
							<use xlink:href="/themes/custom/jechange/img/sprite.svg#shape-change-all"></use>
						</svg>
						<svg class="icon">
							<use xlink:href="/themes/custom/jechange/img/sprite.svg#shape-validate"></use>
						</svg>
						<svg class="icon">
							<use xlink:href="/themes/custom/jechange/img/sprite.svg#banner-switch"></use>
						</svg>
						<svg class="icon">
							<use xlink:href="/themes/custom/jechange/img/sprite.svg#jechange"></use>
						</svg>
						<svg class="icon">
							<use xlink:href="/themes/custom/jechange/img/sprite.svg#jechange-baseline"></use>
						</svg>

Alert

Alert alone

Alert info

Alert warning

Alert error

Alert success

					
						<p class="alert">Alert alone</p>
						<p class="alert alert--info">Alert info</p>
						<p class="alert alert--warning">Alert warning</p>
						<p class="alert alert--error">Alert error</p>
						<p class="alert alert--success">Alert success</p>

Infobulle

infobulle alone

infobulle error

infobulle warning

					
						<div class="infobulle">infobulle alone</div>
						<div class="infobulle error">infobulle error</div>
						<div class="infobulle warning">infobulle warning</div>

Icon tooltip

Button tooltip

Normal Link tooltip

					
						<p>Icon tooltip</p>
						<span data-toggle="tooltip" title="Tooltip text here" tabindex="0">
							<svg class="icon">
								<use xlink:href="/themes/custom/jechange/img/sprite.svg#shape-auto"></use>
							</svg>
						</span>

						<p>Button tooltip</p>
						<button class="btn btn--md btn--pill btn--secondary tooltip-left" href="#" data-toggle="tooltip" title="Tooltip text here">Hover please</button>

						<p>Normal Link tooltip</p>
						<a href="#" class="tooltip-right" data-toggle="tooltip" title="Tooltip text here" title="Tooltip text here" tabindex="0">Hoverable link</a>

Author

Author item author item img

Author item TITLE

Author role

Author content

				
					<div class="author-item">Author item
						<img src="http://t1.gstatic.com/licensed-image?q=tbn:ANd9GcRQ1fUs8IJmaxOjeHXkLD2LeuZAYAGcE_CKNrip_xGQuV-jA0hy_aRrPLojO-VQ6S3EuShkKzh3EJzWa_KnP0E" alt="author item img">
						<p class="author-item__title"> Author item TITLE</p>
						<p class="author-role"> Author role</p>
						<p class="author-content">Author content</p>
					</div>

Tables

Table normal

Caption
lorem	lorem	lorem
lorem	lorem	lorem
lorem	lorem	lorem
lorem	lorem	lorem
lorem	lorem	lorem
lorem	lorem	lorem

					
						<table>
							<caption>Caption</caption>
							<thead>
								<tr>
									<th>lorem</th>
									<th>lorem</th>
									<th>lorem</th>
								</tr>
								<tr>
									<td>lorem</td>
									<td>lorem</td>
									<td>lorem</td>
								</tr>
							</thead>
							<tbody>
								<tr>
									<td>lorem</td>
									<td>lorem</td>
									<td>lorem</td>
								</tr>
								<tr>
									<td>lorem</td>
									<td>lorem</td>
									<td>lorem</td>
								</tr>
							</tbody>
							<tfoot>
								<tr>
									<td>lorem</td>
									<td>lorem</td>
									<td>lorem</td>
								</tr>
								<tr>
									<td>lorem</td>
									<td>lorem</td>
									<td>lorem</td>
								</tr>
							</tfoot>
						</table>

Table Details

Caption
lorem	lorem	lorem
lorem	lorem	lorem
lorem	lorem	lorem
lorem	lorem	lorem
lorem	lorem	lorem
lorem	lorem	lorem

				
					<table class="table-details">
						<caption>Caption</caption>
						<thead>
							<tr>
								<th>lorem</th>
								<th>lorem</th>
								<th>lorem</th>
							</tr>
							<tr>
								<td>lorem</td>
								<td>lorem</td>
								<td>lorem</td>
							</tr>
						</thead>
						<tbody>
							<tr>
								<td>lorem</td>
								<td>lorem</td>
								<td>lorem</td>
							</tr>
							<tr>
								<td>lorem</td>
								<td>lorem</td>
								<td>lorem</td>
							</tr>
						</tbody>
						<tfoot>
							<tr>
								<td>lorem</td>
								<td>lorem</td>
								<td>lorem</td>
							</tr>
							<tr>
								<td>lorem</td>
								<td>lorem</td>
								<td>lorem</td>
							</tr>
						</tfoot>
					</table>

Table Offers

Caption
lorem	lorem	lorem
class details	lorem	lorem
tr class no-offer	lorem	class text-wrap-right
class info-classement	lorem	class inner-row (no border-top)
class price-guaranty	lorem	class promo-label
class info-classement	lorem	lorem
class order	class economie	lorem
list criteria list criteria list criteria	lorem	lorem
lorem	lorem	lorem

					
						<table class="table-offers">
							<caption>Caption</caption>
							<thead>
								<tr>
									<th>lorem</th>
									<th>lorem</th>
									<th>lorem</th>
								</tr>
								<tr>
									<td class="details">class details</td>
									<td>lorem</td>
									<td>lorem</td>
								</tr>
								<tr class="no-offer">
									<td>tr class no-offer</td>
									<td>lorem</td>
									<td class="text-wrap-right">class text-wrap-right</td>
								</tr>
							</thead>
							<tbody>
								<tr>
									<td class="info-classement">class info-classement</td>
									<td>lorem</td>
									<td class="inner-row">class inner-row (no border-top)</td>
								</tr>
								<tr>
									<td class="price-guaranty">class price-guaranty</td>
									<td>lorem</td>
									<td class="promo-label">class promo-label</td>
								</tr>
								<tr>
									<td class="info-classement">class info-classement</td>
									<td>lorem</td>
									<td>lorem</td>
								</tr>
							</tbody>
							<tfoot>
								<tr>
									<td class="order">class order</td>
									<td class="economie">class economie</td>
									<td>lorem</td>
								</tr>
								<tr>
									<td class="criteria">
										<ul>
											<li>list criteria</li>
											<li>list criteria</li>
											<li>list criteria</li>
										</ul>
									</td>
									<td>lorem</td>
									<td>lorem</td>
								</tr>
								<tr>
									<td>lorem</td>
									<td>lorem</td>
									<td>lorem</td>
								</tr>
							</tfoot>
						</table>

Backboard

This is a backboard-header

This is a backboard-body

				
					<div class="backboard">
						<div class="backboard-header">This is a backboard-header</div>
						<div class="backboard-body">This is a backboard-body</div>
						<div class="backboard-footer">This is a backboard-footer</div>
					</div>

Carousel

Carousel Static

					
						<div class="carousel-static">
							<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAA1BMVEXoYI5vdnlCAAAASElEQVR4nO3BgQAAAADDoPlTX+AIVQEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADwDcaiAAFXD1ujAAAAAElFTkSuQmCC" alt="carousel-static img">
							<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAA1BMVEXoYI5vdnlCAAAASElEQVR4nO3BgQAAAADDoPlTX+AIVQEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADwDcaiAAFXD1ujAAAAAElFTkSuQmCC" alt="carousel-static img">
							<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAA1BMVEXoYI5vdnlCAAAASElEQVR4nO3BgQAAAADDoPlTX+AIVQEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADwDcaiAAFXD1ujAAAAAElFTkSuQmCC" alt="carousel-static img">
							<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAA1BMVEXoYI5vdnlCAAAASElEQVR4nO3BgQAAAADDoPlTX+AIVQEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADwDcaiAAFXD1ujAAAAAElFTkSuQmCC" alt="carousel-static img">
						</div>

Comment

This is a comment inside comment-wrapper

This is a comment__actions inside comment__content

This is a comment__reply

					
						<div class="comments-wrapper">
							<div class="comment">
								<div class="comment__content">
									<p>This is a comment inside comment-wrapper</p>
									<p class="comment__actions">This is a comment__actions inside comment__content</p>
								</div>
								<div class="comment__reply">
									<p>This is a comment__reply</p>
								</div>
							</div>
						</div>

Editorial

item inside ul > li
item inside ul > li
item inside ul > li

item inside ol > li
item inside ol > li
item inside ol > li

bg-light class	text-orange class	lorem
lorem	lorem	lorem

					
						<div class="editorial">
							<ul>
								<li>item inside ul > li</li>
								<li>item inside ul > li</li>
								<li>item inside ul > li</li>
							</ul>
							<ol>
								<li>item inside ol > li</li>
								<li>item inside ol > li</li>
								<li>item inside ol > li</li>
							</ol>
							<table class="table--light">
								<tr>
									<td class="bg-light">bg-light class</td>
									<td class="text-orange">text-orange class</td>
									<td>lorem</td>
								</tr>
								<tr>
									<td>lorem</td>
									<td>lorem</td>
									<td>lorem</td>
								</tr>
							</table>
						</div>

Banner

					
						<div class="banner">
							<p>This is a banner (sticky). Scroll to see it sticky </p>
							<div class="brand">This is brand inside a banner</div>
							<img class="brand__pict" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAA1BMVEXoYI5vdnlCAAAASElEQVR4nO3BgQAAAADDoPlTX+AIVQEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADwDcaiAAFXD1ujAAAAAElFTkSuQmCC" alt="brand__pict">
							<a href="#banner"> This is a link inside banner</a>
							<p class="banner__headline"> This is a banner__headline inside banner </p>
						</div>

banner__incoming-call

					
						<div class="banner">
							<div class="banner__incoming-call"> This is a banner__incoming-call |
								<a href="#banner">This is a link inside banner__incoming-call</a>
							</div>
						</div>

Timeline

List UL:

timeline alone (without summary)
timeline class current
item
item
item

List OL:

timeline alone (without summary)
timeline class current
item
item
item

						
							<div class="timeline">
								<p>List UL:</p>
								<ul>
									<li>timeline alone (without summary)</li>
									<li class="current">timeline class current</li>
									<li>item</li>
									<li>item</li>
									<li>item</li>
								</ul>
								<p>List OL:</p>
								<ol>
									<li>timeline alone (without summary)</li>
									<li class="current">timeline class current</li>
									<li>item</li>
									<li>item</li>
									<li>item</li>
								</ol>
							</div>

Timeline Summary

timeline-summary (is sticky). Scroll to see it sticky. I have added background-color to see the difference

timeline-summary with class timeline__bullet

timeline-summary with class timeline-main

timeline-summary class timeline__bullet This is a link inside class timeline__bullet

timeline-summary class timeline__bullet and timeline__bullet--orangeThis is a link inside class timeline__bullet

					
						<div class="timeline-summary">
							<p>timeline-summary (is sticky). Scroll to see it sticky. I have added background-color to see the difference</p>
							<p class="timeline__bullet">timeline-summary with class timeline__bullet</p>
							<p class="timeline-main">timeline-summary with class timeline-main</p>
							<p class="timeline__bullet">timeline-summary class timeline__bullet <a>This is a link inside class timeline__bullet </a></p>
							<p class="timeline__bullet timeline__bullet--orange">timeline-summary class timeline__bullet and timeline__bullet--orange
								<a>This is a link inside class timeline__bullet </a>
							</p>
						</div>

Cet article vous a-t-il été utile ?

Utile Pas utile

100% des 95 votes trouvent l'information utile.

Signaler une erreur