Documentation JeChange Classes
JeChange Classes
Buttons
<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
<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
<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
<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
<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
Class is-hidden:
Class invisble:
<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
helloI'm a p tag
<blockquote>
hello
<p>I'm a p tag</p>
</blockquote>
Cite
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 hideText 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-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 ↔️
<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-tablet only (you can see it in mobile and desktop)
<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
<div class="article">
this is an article
<img class="article-image" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAA1BMVEXoYI5vdnlCAAAASElEQVR4nO3BgQAAAADDoPlTX+AIVQEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADwDcaiAAFXD1ujAAAAAElFTkSuQmCC" alt="article-image">
</div>
Cards
Class card-image: (width 100%)
The following img has class jc-card__picture
<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
<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
Img with class rounded
Img with class radius
Img with class bordered
<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
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
<div class="separator-center">Separator center</div>
<div class="separator-right">Separator right</div>
<div class="separator-left">Separator left</div>
Background
Gradient backgrounds colors:
<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
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
<div class="infobulle">infobulle alone</div>
<div class="infobulle error">infobulle error</div>
<div class="infobulle warning">infobulle warning</div>
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
<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
| 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
| 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
| 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 |
|
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
<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
<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>
- Buttons
- Titles
- Hide-classes
- Responsive utilities
- animation
- blockquote
- cite
- list
- text-alignment
- text
- grid
- responsive
- article
- cards
- sheet
- borders
- shadow
- arrow
- background
- single-post
- colors
- icons
- alert
- infobulle
- tooltip
- author
- tables
- backboard
- carousel
- comment
- editorial
- banner
- banner__incoming-call
- timeline
- timeline-summary
This is a comment inside comment-wrapper
This is a comment__actions inside comment__content
This is a comment__reply