Atoms
Table of content
What are Atoms?
Atoms are the very basic elements of the stylesheet. Imagine every single-class element or selector rules as an atom. Examples could be buttons, links, headlines, inputs ... you get it, right?
To mark an element as an atom, annotate it with the @atom tag, followed by the name of the component. Special atoms are @icons.
Background
Background colors
</> Show Example
Aliqua aliquip aliquip amet amet. Aute aute cillum commodo commodo. Consectetur consequat culpa culpa cupidatat deserunt.
Aliqua aliquip aliquip amet amet. Aute aute cillum commodo commodo. Consectetur consequat culpa culpa cupidatat deserunt.
Aliqua aliquip aliquip amet amet. Aute aute cillum commodo commodo. Consectetur consequat culpa culpa cupidatat deserunt.
Aliqua aliquip aliquip amet amet. Aute aute cillum commodo commodo. Consectetur consequat culpa culpa cupidatat deserunt.
Aliqua aliquip aliquip amet amet. Aute aute cillum commodo commodo. Consectetur consequat culpa culpa cupidatat deserunt.
Aliqua aliquip aliquip amet amet. Aute aute cillum commodo commodo. Consectetur consequat culpa culpa cupidatat deserunt.
Aliqua aliquip aliquip amet amet. Aute aute cillum commodo commodo. Consectetur consequat culpa culpa cupidatat deserunt.
Aliqua aliquip aliquip amet amet. Aute aute cillum commodo commodo. Consectetur consequat culpa culpa cupidatat deserunt.
Aliqua aliquip aliquip amet amet. Aute aute cillum commodo commodo. Consectetur consequat culpa culpa cupidatat deserunt.
Aliqua aliquip aliquip amet amet. Aute aute cillum commodo commodo. Consectetur consequat culpa culpa cupidatat deserunt.
Aliqua aliquip aliquip amet amet. Aute aute cillum commodo commodo. Consectetur consequat culpa culpa cupidatat deserunt.
Aliqua aliquip aliquip amet amet. Aute aute cillum commodo commodo. Consectetur consequat culpa culpa cupidatat deserunt.
Aliqua aliquip aliquip amet amet. Aute aute cillum commodo commodo. Consectetur consequat culpa culpa cupidatat deserunt.
Aliqua aliquip aliquip amet amet. Aute aute cillum commodo commodo. Consectetur consequat culpa culpa cupidatat deserunt.
Aliqua aliquip aliquip amet amet. Aute aute cillum commodo commodo. Consectetur consequat culpa culpa cupidatat deserunt.
Aliqua aliquip aliquip amet amet. Aute aute cillum commodo commodo. Consectetur consequat culpa culpa cupidatat deserunt.
Aliqua aliquip aliquip amet amet. Aute aute cillum commodo commodo. Consectetur consequat culpa culpa cupidatat deserunt.
Aliqua aliquip aliquip amet amet. Aute aute cillum commodo commodo. Consectetur consequat culpa culpa cupidatat deserunt.
Aliqua aliquip aliquip amet amet. Aute aute cillum commodo commodo. Consectetur consequat culpa culpa cupidatat deserunt.
<div class="p-5 m-5 bg__primary--300"> Aliqua aliquip aliquip amet amet. Aute aute cillum commodo commodo. Consectetur consequat culpa culpa cupidatat deserunt. </div> <div class="p-5 m-5 bg__primary"> Aliqua aliquip aliquip amet amet. Aute aute cillum commodo commodo. Consectetur consequat culpa culpa cupidatat deserunt. </div> <div class="p-5 m-5 bg__primary--200"> Aliqua aliquip aliquip amet amet. Aute aute cillum commodo commodo. Consectetur consequat culpa culpa cupidatat deserunt. </div> <div class="p-5 m-5 bg__primary--100"> Aliqua aliquip aliquip amet amet. Aute aute cillum commodo commodo. Consectetur consequat culpa culpa cupidatat deserunt. </div> <div class="p-5 m-5 bg__warning--300"> Aliqua aliquip aliquip amet amet. Aute aute cillum commodo commodo. Consectetur consequat culpa culpa cupidatat deserunt. </div> <div class="p-5 m-5 bg__warning--200"> Aliqua aliquip aliquip amet amet. Aute aute cillum commodo commodo. Consectetur consequat culpa culpa cupidatat deserunt. </div> <div class="p-5 m-5 bg__warning--100"> Aliqua aliquip aliquip amet amet. Aute aute cillum commodo commodo. Consectetur consequat culpa culpa cupidatat deserunt. </div> <div class="p-5 m-5 bg__danger--300"> Aliqua aliquip aliquip amet amet. Aute aute cillum commodo commodo. Consectetur consequat culpa culpa cupidatat deserunt. </div> <div class="p-5 m-5 bg__danger--200"> Aliqua aliquip aliquip amet amet. Aute aute cillum commodo commodo. Consectetur consequat culpa culpa cupidatat deserunt. </div> <div class="p-5 m-5 bg__danger--100"> Aliqua aliquip aliquip amet amet. Aute aute cillum commodo commodo. Consectetur consequat culpa culpa cupidatat deserunt. </div> <div class="p-5 m-5 bg__success--300"> Aliqua aliquip aliquip amet amet. Aute aute cillum commodo commodo. Consectetur consequat culpa culpa cupidatat deserunt. </div> <div class="p-5 m-5 bg__success--200"> Aliqua aliquip aliquip amet amet. Aute aute cillum commodo commodo. Consectetur consequat culpa culpa cupidatat deserunt. </div> <div class="p-5 m-5 bg__success--100"> Aliqua aliquip aliquip amet amet. Aute aute cillum commodo commodo. Consectetur consequat culpa culpa cupidatat deserunt. </div> <div class="p-5 m-5 bg__data--300"> Aliqua aliquip aliquip amet amet. Aute aute cillum commodo commodo. Consectetur consequat culpa culpa cupidatat deserunt. </div> <div class="p-5 m-5 bg__data--200"> Aliqua aliquip aliquip amet amet. Aute aute cillum commodo commodo. Consectetur consequat culpa culpa cupidatat deserunt. </div> <div class="p-5 m-5 bg__data--100"> Aliqua aliquip aliquip amet amet. Aute aute cillum commodo commodo. Consectetur consequat culpa culpa cupidatat deserunt. </div> <div class="p-5 m-5 bg__bg"> Aliqua aliquip aliquip amet amet. Aute aute cillum commodo commodo. Consectetur consequat culpa culpa cupidatat deserunt. </div> <div class="p-5 m-5 bg__primary--text"> Aliqua aliquip aliquip amet amet. Aute aute cillum commodo commodo. Consectetur consequat culpa culpa cupidatat deserunt. </div> <div class="p-5 m-5 bg__secondary--text"> Aliqua aliquip aliquip amet amet. Aute aute cillum commodo commodo. Consectetur consequat culpa culpa cupidatat deserunt. </div>
Hover colors
</> Show Example
Aliqua aliquip aliquip amet amet. Aute aute cillum commodo commodo. Consectetur consequat culpa culpa cupidatat deserunt.
Aliqua aliquip aliquip amet amet. Aute aute cillum commodo commodo. Consectetur consequat culpa culpa cupidatat deserunt.
Aliqua aliquip aliquip amet amet. Aute aute cillum commodo commodo. Consectetur consequat culpa culpa cupidatat deserunt.
Aliqua aliquip aliquip amet amet. Aute aute cillum commodo commodo. Consectetur consequat culpa culpa cupidatat deserunt.
Aliqua aliquip aliquip amet amet. Aute aute cillum commodo commodo. Consectetur consequat culpa culpa cupidatat deserunt.
Aliqua aliquip aliquip amet amet. Aute aute cillum commodo commodo. Consectetur consequat culpa culpa cupidatat deserunt.
Aliqua aliquip aliquip amet amet. Aute aute cillum commodo commodo. Consectetur consequat culpa culpa cupidatat deserunt.
Aliqua aliquip aliquip amet amet. Aute aute cillum commodo commodo. Consectetur consequat culpa culpa cupidatat deserunt.
Aliqua aliquip aliquip amet amet. Aute aute cillum commodo commodo. Consectetur consequat culpa culpa cupidatat deserunt.
Aliqua aliquip aliquip amet amet. Aute aute cillum commodo commodo. Consectetur consequat culpa culpa cupidatat deserunt.
Aliqua aliquip aliquip amet amet. Aute aute cillum commodo commodo. Consectetur consequat culpa culpa cupidatat deserunt.
Aliqua aliquip aliquip amet amet. Aute aute cillum commodo commodo. Consectetur consequat culpa culpa cupidatat deserunt.
Aliqua aliquip aliquip amet amet. Aute aute cillum commodo commodo. Consectetur consequat culpa culpa cupidatat deserunt.
Aliqua aliquip aliquip amet amet. Aute aute cillum commodo commodo. Consectetur consequat culpa culpa cupidatat deserunt.
Aliqua aliquip aliquip amet amet. Aute aute cillum commodo commodo. Consectetur consequat culpa culpa cupidatat deserunt.
Aliqua aliquip aliquip amet amet. Aute aute cillum commodo commodo. Consectetur consequat culpa culpa cupidatat deserunt.
Aliqua aliquip aliquip amet amet. Aute aute cillum commodo commodo. Consectetur consequat culpa culpa cupidatat deserunt.
Aliqua aliquip aliquip amet amet. Aute aute cillum commodo commodo. Consectetur consequat culpa culpa cupidatat deserunt.
Aliqua aliquip aliquip amet amet. Aute aute cillum commodo commodo. Consectetur consequat culpa culpa cupidatat deserunt.
<div class="p-5 m-5 hover__primary--300"> Aliqua aliquip aliquip amet amet. Aute aute cillum commodo commodo. Consectetur consequat culpa culpa cupidatat deserunt. </div> <div class="p-5 m-5 hover__primary"> Aliqua aliquip aliquip amet amet. Aute aute cillum commodo commodo. Consectetur consequat culpa culpa cupidatat deserunt. </div> <div class="p-5 m-5 hover__primary--200"> Aliqua aliquip aliquip amet amet. Aute aute cillum commodo commodo. Consectetur consequat culpa culpa cupidatat deserunt. </div> <div class="p-5 m-5 hover__primary--100"> Aliqua aliquip aliquip amet amet. Aute aute cillum commodo commodo. Consectetur consequat culpa culpa cupidatat deserunt. </div> <div class="p-5 m-5 hover__warning--300"> Aliqua aliquip aliquip amet amet. Aute aute cillum commodo commodo. Consectetur consequat culpa culpa cupidatat deserunt. </div> <div class="p-5 m-5 hover__warning--200"> Aliqua aliquip aliquip amet amet. Aute aute cillum commodo commodo. Consectetur consequat culpa culpa cupidatat deserunt. </div> <div class="p-5 m-5 hover__warning--100"> Aliqua aliquip aliquip amet amet. Aute aute cillum commodo commodo. Consectetur consequat culpa culpa cupidatat deserunt. </div> <div class="p-5 m-5 hover__danger--300"> Aliqua aliquip aliquip amet amet. Aute aute cillum commodo commodo. Consectetur consequat culpa culpa cupidatat deserunt. </div> <div class="p-5 m-5 hover__danger--200"> Aliqua aliquip aliquip amet amet. Aute aute cillum commodo commodo. Consectetur consequat culpa culpa cupidatat deserunt. </div> <div class="p-5 m-5 hover__danger--100"> Aliqua aliquip aliquip amet amet. Aute aute cillum commodo commodo. Consectetur consequat culpa culpa cupidatat deserunt. </div> <div class="p-5 m-5 hover__success--300"> Aliqua aliquip aliquip amet amet. Aute aute cillum commodo commodo. Consectetur consequat culpa culpa cupidatat deserunt. </div> <div class="p-5 m-5 hover__success--200"> Aliqua aliquip aliquip amet amet. Aute aute cillum commodo commodo. Consectetur consequat culpa culpa cupidatat deserunt. </div> <div class="p-5 m-5 hover__success--100"> Aliqua aliquip aliquip amet amet. Aute aute cillum commodo commodo. Consectetur consequat culpa culpa cupidatat deserunt. </div> <div class="p-5 m-5 hover__data--300"> Aliqua aliquip aliquip amet amet. Aute aute cillum commodo commodo. Consectetur consequat culpa culpa cupidatat deserunt. </div> <div class="p-5 m-5 hover__data--200"> Aliqua aliquip aliquip amet amet. Aute aute cillum commodo commodo. Consectetur consequat culpa culpa cupidatat deserunt. </div> <div class="p-5 m-5 hover__data--100"> Aliqua aliquip aliquip amet amet. Aute aute cillum commodo commodo. Consectetur consequat culpa culpa cupidatat deserunt. </div> <div class="p-5 m-5 hover__bg"> Aliqua aliquip aliquip amet amet. Aute aute cillum commodo commodo. Consectetur consequat culpa culpa cupidatat deserunt. </div> <div class="p-5 m-5 hover__primary--text"> Aliqua aliquip aliquip amet amet. Aute aute cillum commodo commodo. Consectetur consequat culpa culpa cupidatat deserunt. </div> <div class="p-5 m-5 hover__secondary--text"> Aliqua aliquip aliquip amet amet. Aute aute cillum commodo commodo. Consectetur consequat culpa culpa cupidatat deserunt. </div>
Borders
Border colors, position and thickness
</> Show Example
Border classes defining border thickness and position:
.border-[top|right|left|bottom]-[0-5]
Border classes defining border color:
.border__[primary|primary--200|warning--300...]
<div class="p-5 m-5 border-2 border__primary"> Border classes defining border thickness and position: <br> <i><strong>.border-[top|right|left|bottom]-[0-5]</strong></i> </div> <div class="p-5 m-5 border-bottom-1 border__danger--300"> Border classes defining border color: <br> <i><strong>.border__[primary|primary--200|warning--300...]</strong></i> </div>
Buttons
Button
</> Show Example
<button class="btn btn__primary--300"> adipisicing </button> <button class="btn btn__primary"> adipisicing </button> <button class="btn btn__primary--200"> adipisicing </button> <button class="btn btn__primary--100"> adipisicing </button> <button class="btn btn__warning--300"> adipisicing </button> <button class="btn btn__warning--200"> adipisicing </button> <button class="btn btn__warning--100"> adipisicing </button> <button class="btn btn__danger--300"> adipisicing </button> <button class="btn btn__danger--200"> adipisicing </button> <button class="btn btn__danger--100"> adipisicing </button> <button class="btn btn__success--300"> adipisicing </button> <button class="btn btn__success--200"> adipisicing </button> <button class="btn btn__success--100"> adipisicing </button> <button class="btn btn__data--300"> adipisicing </button> <button class="btn btn__data--200"> adipisicing </button> <button class="btn btn__data--100"> adipisicing </button> <button class="btn btn__bg"> adipisicing </button> <button class="btn btn__white"> adipisicing </button> <button class="btn btn__primary--text"> adipisicing </button> <button class="btn btn__secondary--text"> adipisicing </button>
Inverted Button
</> Show Example
<button class="btn btn__primary--300 btn__inverted"> adipisicing </button> <button class="btn btn__primary btn__inverted"> adipisicing </button> <button class="btn btn__warning--300 btn__inverted"> adipisicing </button> <button class="btn btn__danger--300 btn__inverted"> adipisicing </button> <button class="btn btn__success--300 btn__inverted"> adipisicing </button> <button class="btn btn__data--300 btn__inverted"> adipisicing </button> <button class="btn btn__primary--text btn__inverted"> adipisicing </button> <button class="btn btn__secondary--text btn__inverted"> adipisicing </button>
Button variations
</> Show Example
customize to fit your need
<button class="btn btn-lg btn__primary font-size--big "> <strong>adipisicing</strong> </button> <button class="btn btn-sm btn__primary font-size--small"> adipisicing </button> <button class="btn btn-xs btn__primary_light font-size--smaller"> adipisicing </button> <a class="btn btn-lg p-left-40 btn__white border__danger--300 border-1 font-size--big text__primary hover__warning--300 text__hover-bg text--bold"> customize to fit your need </a>
Button spécial
</> Show Example
<el-radio-group class="switch-button" v-model="switchButtonModel"> <el-radio-button :label="false">adipisicing</el-radio-button> <el-radio-button :label="true">adipisicing</el-radio-button> </el-radio-group>
Cursors
Cursor
</> Show Example
cursor-not-allowed
cursor-pointer
cursor-help
cursor-move
cursor-none
cursor-progress
cursor-text
cursor-col resize
cursor-row-resize
cursor-copy
cursor-crosshair
cursor-default
cursor-n-resize
cursor-ne-resize
cursor-nesw-resize
cursor-ns-resize
cursor-nw-resize
cursor-nwse-resize
cursor-e-resize
cursor-ew-resize
cursor-s-resize
cursor-se-resize
cursor-sw-resize
cursor-w-resize
cursor-grab
cursor-grabbing
cursor-wait
<div class="flex-container flex-wrap"> <div class="flex-1 border-1 border__primary cursor-not-allowed">cursor-not-allowed</div> <div class="flex-1 border-1 border__primary cursor-pointer">cursor-pointer</div> <div class="flex-1 border-1 border__primary cursor-help">cursor-help</div> <div class="flex-1 border-1 border__primary cursor-move">cursor-move</div> <div class="flex-1 border-1 border__primary cursor-none">cursor-none</div> <div class="flex-1 border-1 border__primary cursor-progress">cursor-progress</div> <div class="flex-1 border-1 border__primary cursor-text">cursor-text</div> <div class="flex-1 border-1 border__primary cursor-col-resize">cursor-col resize</div> <div class="flex-1 border-1 border__primary cursor-row-resize">cursor-row-resize</div> <div class="flex-1 border-1 border__primary cursor-copy">cursor-copy</div> <div class="flex-1 border-1 border__primary cursor-crosshair">cursor-crosshair</div> <div class="flex-1 border-1 border__primary cursor-default">cursor-default</div> <div class="flex-1 border-1 border__primary cursor-n-resize">cursor-n-resize</div> <div class="flex-1 border-1 border__primary cursor-ne-resize">cursor-ne-resize</div> <div class="flex-1 border-1 border__primary cursor-nesw-resize">cursor-nesw-resize</div> <div class="flex-1 border-1 border__primary cursor-ns-resize">cursor-ns-resize</div> <div class="flex-1 border-1 border__primary cursor-nw-resize">cursor-nw-resize</div> <div class="flex-1 border-1 border__primary cursor-nwse-resize">cursor-nwse-resize</div> <div class="flex-1 border-1 border__primary cursor-e-resize">cursor-e-resize</div> <div class="flex-1 border-1 border__primary cursor-ew-resize">cursor-ew-resize</div> <div class="flex-1 border-1 border__primary cursor-s-resize">cursor-s-resize</div> <div class="flex-1 border-1 border__primary cursor-se-resize">cursor-se-resize</div> <div class="flex-1 border-1 border__primary cursor-sw-resize">cursor-sw-resize</div> <div class="flex-1 border-1 border__primary cursor-w-resize">cursor-w-resize</div> <div class="flex-1 border-1 border__primary cursor-grab">cursor-grab</div> <div class="flex-1 border-1 border__primary cursor-grabbing">cursor-grabbing</div> <div class="flex-1 border-1 border__primary cursor-wait">cursor-wait</div> </div>
Evolution badges
evolution-positive
</> Show Example
+12
<span class="evolution-positive">+12</span>
evolution-negative
</> Show Example
-12
<span class="evolution-negative">-12</span>
evolution-neutral
</> Show Example
0
<span class="evolution-neutral">0</span>
Icons
flag icon fr
</> Show Example
<span class="flag-icon flag-icon--fr" title="English"></span>
flag icon us
</> Show Example
<span class="flag-icon flag-icon--us" title="English"></span>
flag icon uk
</> Show Example
<span class="flag-icon flag-icon--uk" title="English"></span>
Flex
Flex Align
</> Show Example

Align (vertical on flex-direction: row, horizontal on flex-direction: column)

align content evenly
.align-content__space-evenly
.align-content__space-evenly
.align-content__space-evenly
.align-content__space-evenly
.align-content__space-evenly
.align-content__space-evenly
.align-content__space-evenly
.align-content__space-evenly
align content around
.align-content__space-around
.align-content__space-around
.align-content__space-around
.align-content__space-around
.align-content__space-around
.align-content__space-around
.align-content__space-around
.align-content__space-around
align content between
.align-content__space-between
.align-content__space-between
.align-content__space-between
.align-content__space-between
.align-content__space-between
.align-content__space-between
.align-content__space-between
.align-content__space-between
align items end
.align-items__flex-end
.align-items__flex-end
.align-items__flex-end
.align items center
.align-items__center
.align-items__center
.align-items__center
.align items start
.align-items__flex-start
.align-items__flex-start
.align-items__flex-start
self align
.align__flex-start
.align__center
.align__flex-end
.align__center
.align__flex-start
<h3>Align (vertical on flex-direction: row, horizontal on flex-direction: column)</h3> <h5>align content evenly</h5> <div class="demo88-container flex-container border-1 border__warning--300 flex-wrap align-content__space-evenly"> <div class="demo88 border-1 border__primary">.align-content__space-evenly</div> <div class="demo88 border-1 border__primary">.align-content__space-evenly</div> <div class="demo88 border-1 border__primary">.align-content__space-evenly</div> <div class="demo88 border-1 border__primary">.align-content__space-evenly</div> <div class="demo88 border-1 border__primary">.align-content__space-evenly</div> <div class="demo88 border-1 border__primary">.align-content__space-evenly</div> <div class="demo88 border-1 border__primary">.align-content__space-evenly</div> <div class="demo88 border-1 border__primary">.align-content__space-evenly</div> </div> <h5>align content around</h5> <div class="demo88-container flex-container border-1 border__warning--300 flex-wrap align-content__space-around"> <div class="demo88 border-1 border__primary">.align-content__space-around</div> <div class="demo88 border-1 border__primary">.align-content__space-around</div> <div class="demo88 border-1 border__primary">.align-content__space-around</div> <div class="demo88 border-1 border__primary">.align-content__space-around</div> <div class="demo88 border-1 border__primary">.align-content__space-around</div> <div class="demo88 border-1 border__primary">.align-content__space-around</div> <div class="demo88 border-1 border__primary">.align-content__space-around</div> <div class="demo88 border-1 border__primary">.align-content__space-around</div> </div> <h5>align content between</h5> <div class="demo88-container flex-container border-1 border__warning--300 flex-wrap align-content__space-between"> <div class="demo88 border-1 border__primary">.align-content__space-between</div> <div class="demo88 border-1 border__primary">.align-content__space-between</div> <div class="demo88 border-1 border__primary">.align-content__space-between</div> <div class="demo88 border-1 border__primary">.align-content__space-between</div> <div class="demo88 border-1 border__primary">.align-content__space-between</div> <div class="demo88 border-1 border__primary">.align-content__space-between</div> <div class="demo88 border-1 border__primary">.align-content__space-between</div> <div class="demo88 border-1 border__primary">.align-content__space-between</div> </div> <h5>align items end</h5> <div class="demo88-container flex-container border-1 border__warning--300 align-items__flex-end"> <div class="demo88 border-1 border__primary">.align-items__flex-end</div> <div class="demo88 border-1 border__primary">.align-items__flex-end</div> <div class="demo88 border-1 border__primary">.align-items__flex-end</div> </div> <h5>.align items center</h5> <div class="demo88-container flex-container border-1 border__warning--300 align-items__center"> <div class="demo88 border-1 border__primary">.align-items__center</div> <div class="demo88 border-1 border__primary">.align-items__center</div> <div class="demo88 border-1 border__primary">.align-items__center</div> </div> <h5>.align items start</h5> <div class="demo88-container flex-container border-1 border__warning--300 align-items__flex-start"> <div class="demo88 border-1 border__primary">.align-items__flex-start</div> <div class="demo88 border-1 border__primary">.align-items__flex-start</div> <div class="demo88 border-1 border__primary">.align-items__flex-start</div> </div> <h5>self align</h5> <div class="demo88-container flex-container border-1 border__warning--300"> <div class="demo88 border-1 border__primary align__flex-start">.align__flex-start</div> <div class="demo88 border-1 border__primary align__center">.align__center</div> <div class="demo88 border-1 border__primary align__flex-end">.align__flex-end</div> <div class="demo88 border-1 border__primary align__center">.align__center</div> <div class="demo88 border-1 border__primary align__flex-start">.align__flex-start</div> </div>
Flex Justify
</> Show Example

Justify (horizontal on flex-direction: row, vertical on flex-direction: column)

.justify-content__flex-end
.justify-content__center
.justify-content__flex-start
.justify-content__space-around
.justify-content__space-around
.justify-content__space-around
.justify-content__space-between
.justify-content__space-between
.justify-content__space-between
.justify-content__space-evenly
.justify-content__space-evenly
.justify-content__space-evenly
<h3>Justify (horizontal on flex-direction: row, vertical on flex-direction: column)</h3> <div class="flex-container border-1 border__warning--300 justify-content__flex-end"> <div class="demo88 border-1 border__primary">.justify-content__flex-end</div> </div> <div class="flex-container border-1 border__warning--300 justify-content__center"> <div class="demo88 border-1 border__primary">.justify-content__center</div> </div> <div class="flex-container border-1 border__warning--300 justify-content__flex-start"> <div class="demo88 border-1 border__primary">.justify-content__flex-start</div> </div> <div class="flex-container border-1 border__warning--300 justify-content__space-around"> <div class="demo88 border-1 border__primary">.justify-content__space-around</div> <div class="demo88 border-1 border__primary">.justify-content__space-around</div> <div class="demo88 border-1 border__primary">.justify-content__space-around</div> </div> <div class="flex-container border-1 border__warning--300 justify-content__space-between"> <div class="demo88 border-1 border__primary">.justify-content__space-between</div> <div class="demo88 border-1 border__primary">.justify-content__space-between</div> <div class="demo88 border-1 border__primary">.justify-content__space-between</div> </div> <div class="flex-container border-1 border__warning--300 justify-content__space-evenly"> <div class="demo88 border-1 border__primary">.justify-content__space-evenly</div> <div class="demo88 border-1 border__primary">.justify-content__space-evenly</div> <div class="demo88 border-1 border__primary">.justify-content__space-evenly</div> </div>
Flex ordering, sizing, direction
</> Show Example

Ordering, Relative sizing, Direction

change the order of elements in the page:
position in html: 1, .order-4
position in html: 2, .order-5
position in html: 3, .order-1
position in html: 4, .order-3
position in html: 5, .order-2
specify the size of element relative to each other. Flex-2 will be twice the size of flex-1, flex-12 will be twice the size of flex-6 ... (max flex-12). Also not that setting elements will grow to fill all the space.
.flex-1
.flex-2
.flex-3
.flex-4
.flex-8
.flex-12
.flex-5
.flex-10
.flex-12
.flex-12
.flex-1
.flex-1
no class
.flex-1
no class
no class
Allow elements to wrap in container when out of space (default behavior) or not
.flex-nowrap
.flex-nowrap
.flex-nowrap
.flex-nowrap
.flex-nowrap
.flex-nowrap
.flex-nowrap
.flex-nowrap
.flex-nowrap
.flex-nowrap
.flex-nowrap
.flex-nowrap
.flex-nowrap
.flex-nowrap
.flex-wrap
.flex-wrap
.flex-wrap
.flex-wrap
.flex-wrap
.flex-wrap
.flex-wrap
.flex-wrap
.flex-wrap
.flex-wrap
Specify flex flow direction. !! Row is default, Changing to column reverses all directions, so align now controls horizontal layout and justify controls vertical layout. Wrapping is top to bottom instead of left to right etc...
.flex-column
.flex-column
.flex-column
.flex-column
.flex-row
.flex-row
.flex-row
.flex-row
<h3>Ordering, Relative sizing, Direction</h3> <h5>change the order of elements in the page:</h5> <div class="flex-container border-1 border__warning--300"> <div class="demo88 border-1 border__primary order-4">position in html: 1, .order-4</div> <div class="demo88 border-1 border__primary order-5">position in html: 2, .order-5</div> <div class="demo88 border-1 border__primary order-1">position in html: 3, .order-1</div> <div class="demo88 border-1 border__primary order-3">position in html: 4, .order-3</div> <div class="demo88 border-1 border__primary order-2">position in html: 5, .order-2</div> </div> <h5>specify the size of element <strong>relative to each other</strong>. Flex-2 will be twice the size of flex-1, flex-12 will be twice the size of flex-6 ... (max flex-12). Also not that setting elements will grow to fill all the space.</h5> <div class="flex-container border-1 border__warning--300"> <div class="demo88 border-1 border__primary flex-1">.flex-1</div> <div class="demo88 border-1 border__primary flex-2">.flex-2</div> <div class="demo88 border-1 border__primary flex-3">.flex-3</div> </div> <div class="flex-container border-1 border__warning--300"> <div class="demo88 border-1 border__primary flex-4">.flex-4</div> <div class="demo88 border-1 border__primary flex-8">.flex-8</div> <div class="demo88 border-1 border__primary flex-12">.flex-12</div> </div> <div class="flex-container border-1 border__warning--300"> <div class="demo88 border-1 border__primary flex-5">.flex-5</div> <div class="demo88 border-1 border__primary flex-10">.flex-10</div> </div> <div class="flex-container border-1 border__warning--300"> <div class="demo88 border-1 border__primary flex-12">.flex-12</div> <div class="demo88 border-1 border__primary flex-12">.flex-12</div> </div> <div class="flex-container border-1 border__warning--300"> <div class="demo88 border-1 border__primary flex-1">.flex-1</div> <div class="demo88 border-1 border__primary flex-1">.flex-1</div> </div> <div class="flex-container border-1 border__warning--300"> <div class="demo88 border-1 border__primary"style="width: auto">no class</div> <div class="demo88 border-1 border__primary flex-1">.flex-1</div> <div class="demo88 border-1 border__primary"style="width: auto">no class</div> <div class="demo88 border-1 border__primary"style="width: auto">no class</div> </div> <h5>Allow elements to wrap in container when out of space (default behavior) or not</h5> <div class="flex-container border-1 border__warning--300 flex-nowrap"> <div class="demo88 border-1 border__primary">.flex-nowrap</div> <div class="demo88 border-1 border__primary">.flex-nowrap</div> <div class="demo88 border-1 border__primary">.flex-nowrap</div> <div class="demo88 border-1 border__primary">.flex-nowrap</div> <div class="demo88 border-1 border__primary">.flex-nowrap</div> <div class="demo88 border-1 border__primary">.flex-nowrap</div> <div class="demo88 border-1 border__primary">.flex-nowrap</div> <div class="demo88 border-1 border__primary">.flex-nowrap</div> <div class="demo88 border-1 border__primary">.flex-nowrap</div> <div class="demo88 border-1 border__primary">.flex-nowrap</div> <div class="demo88 border-1 border__primary">.flex-nowrap</div> <div class="demo88 border-1 border__primary">.flex-nowrap</div> <div class="demo88 border-1 border__primary">.flex-nowrap</div> <div class="demo88 border-1 border__primary">.flex-nowrap</div> </div> <div class="flex-container border-1 border__warning--300 flex-wrap"> <div class="demo88 border-1 border__primary">.flex-wrap</div> <div class="demo88 border-1 border__primary">.flex-wrap</div> <div class="demo88 border-1 border__primary">.flex-wrap</div> <div class="demo88 border-1 border__primary">.flex-wrap</div> <div class="demo88 border-1 border__primary">.flex-wrap</div> <div class="demo88 border-1 border__primary">.flex-wrap</div> <div class="demo88 border-1 border__primary">.flex-wrap</div> <div class="demo88 border-1 border__primary">.flex-wrap</div> <div class="demo88 border-1 border__primary">.flex-wrap</div> <div class="demo88 border-1 border__primary">.flex-wrap</div> </div> <h5>Specify flex flow direction. !! Row is default, Changing to column reverses all directions, so align now controls horizontal layout and justify controls vertical layout. Wrapping is top to bottom instead of left to right etc...</h5> <div class="flex-container border-1 border__warning--300 flex-column"> <div class="demo88 border-1 border__primary">.flex-column</div> <div class="demo88 border-1 border__primary">.flex-column</div> <div class="demo88 border-1 border__primary">.flex-column</div> <div class="demo88 border-1 border__primary">.flex-column</div> </div> <div class="flex-container border-1 border__warning--300 flex-row"> <div class="demo88 border-1 border__primary">.flex-row</div> <div class="demo88 border-1 border__primary">.flex-row</div> <div class="demo88 border-1 border__primary">.flex-row</div> <div class="demo88 border-1 border__primary">.flex-row</div> </div>
Inputs
Text input
</> Show Example
<input class="text-input" type="text" placeholder="adipisicing adipisicing aliqua"> <input class="text-input text-input--has-bg" type="text" placeholder="adipisicing adipisicing aliqua">
Bubble text area
</> Show Example
<textarea class="bubble__textarea" placeholder="adipisicing adipisicing aliqua"></textarea>
Margin/Padding
Margin and Padding classes
</> Show Example
Margin classes:
.m-[top|left|right|bottom]-[0-100]
Padding classes:
.p-[top|left|right|bottom]-[0-100]
<div class="p-5 m-5"> Margin classes: <br> <i><strong>.m-[top|left|right|bottom]-[0-100]</strong></i> </div> <div class="p-5 m-5"> Padding classes: <br> <i><strong>.p-[top|left|right|bottom]-[0-100]</strong></i> </div>
Cards
Mood Verbatims
</> Show Example
<div class="mood-verbatims"> <div class="bloomin-nav-bar"> </div> </div>
Ornaments
Separator with arrow
</> Show Example

<div class="separator-with-arrow"></div> <br> <div class="separator-with-arrow separator-with-arrow--has-bg"></div>
Shadow
Shadow colors
</> Show Example
Aliqua aliquip aliquip amet amet. Aute aute cillum commodo commodo. Consectetur consequat culpa culpa cupidatat deserunt.
Aliqua aliquip aliquip amet amet. Aute aute cillum commodo commodo. Consectetur consequat culpa culpa cupidatat deserunt.
Aliqua aliquip aliquip amet amet. Aute aute cillum commodo commodo. Consectetur consequat culpa culpa cupidatat deserunt.
Aliqua aliquip aliquip amet amet. Aute aute cillum commodo commodo. Consectetur consequat culpa culpa cupidatat deserunt.
Aliqua aliquip aliquip amet amet. Aute aute cillum commodo commodo. Consectetur consequat culpa culpa cupidatat deserunt.
Aliqua aliquip aliquip amet amet. Aute aute cillum commodo commodo. Consectetur consequat culpa culpa cupidatat deserunt.
Aliqua aliquip aliquip amet amet. Aute aute cillum commodo commodo. Consectetur consequat culpa culpa cupidatat deserunt.
Aliqua aliquip aliquip amet amet. Aute aute cillum commodo commodo. Consectetur consequat culpa culpa cupidatat deserunt.
<div class="m-5 p-5 shadow__primary--300"> Aliqua aliquip aliquip amet amet. Aute aute cillum commodo commodo. Consectetur consequat culpa culpa cupidatat deserunt. </div> <div class="m-5 p-5 shadow__primary"> Aliqua aliquip aliquip amet amet. Aute aute cillum commodo commodo. Consectetur consequat culpa culpa cupidatat deserunt. </div> <div class="m-5 p-5 shadow__warning--300"> Aliqua aliquip aliquip amet amet. Aute aute cillum commodo commodo. Consectetur consequat culpa culpa cupidatat deserunt. </div> <div class="m-5 p-5 shadow__danger--300"> Aliqua aliquip aliquip amet amet. Aute aute cillum commodo commodo. Consectetur consequat culpa culpa cupidatat deserunt. </div> <div class="m-5 p-5 shadow__success--300"> Aliqua aliquip aliquip amet amet. Aute aute cillum commodo commodo. Consectetur consequat culpa culpa cupidatat deserunt. </div> <div class="m-5 p-5 shadow__data--300"> Aliqua aliquip aliquip amet amet. Aute aute cillum commodo commodo. Consectetur consequat culpa culpa cupidatat deserunt. </div> <div class="m-5 p-5 shadow__primary--text"> Aliqua aliquip aliquip amet amet. Aute aute cillum commodo commodo. Consectetur consequat culpa culpa cupidatat deserunt. </div> <div class="m-5 p-5 shadow__secondary--text"> Aliqua aliquip aliquip amet amet. Aute aute cillum commodo commodo. Consectetur consequat culpa culpa cupidatat deserunt. </div>
Charts
Stars
</> Show Example
Star chart
<div class="stars"> <div class="star-chart"> <div class="star-chart-star" data-star-type="full"></div> <div class="star-chart-star" data-star-type="half"></div> <div class="star-chart-star" data-star-type="empty"></div> </div> </div>
Stats item
Stats item
</> Show Example
15% Taux de participation
<div class="stats-item"> <span class="stats-item-value">15%</span> <span class="stats-item-label">Taux de participation</span> </div>
Stats item XL
</> Show Example
15% Taux de participation
<div class="stats-item--xl"> <span class="stats-item-value">15%</span> <span class="stats-item-label">Taux de participation</span> </div>
Subtheme badge
subtheme-badge
</> Show Example
Intérêt et sens du travail au quotidien
<span class="subtheme-badge"style="background-color: #b2f3b8">Intérêt et sens du travail au quotidien</span>
Typography
epic
</> Show Example

adipisicing adipisicing aliqua aliquip aliquip

<p class="font-size--epic">adipisicing adipisicing aliqua aliquip aliquip</p>
hero
</> Show Example

adipisicing adipisicing aliqua aliquip aliquip

<p class="font-size--hero">adipisicing adipisicing aliqua aliquip aliquip</p>
biggest
</> Show Example

adipisicing adipisicing aliqua aliquip aliquip

<p class="font-size--biggest">adipisicing adipisicing aliqua aliquip aliquip</p>
even bigger
</> Show Example

adipisicing adipisicing aliqua aliquip aliquip

<p class="font-size--even_bigger">adipisicing adipisicing aliqua aliquip aliquip</p>
bigger
</> Show Example

adipisicing adipisicing aliqua aliquip aliquip

<p class="font-size--bigger">adipisicing adipisicing aliqua aliquip aliquip</p>
big
</> Show Example

adipisicing adipisicing aliqua aliquip aliquip

<p class="font-size--big">adipisicing adipisicing aliqua aliquip aliquip</p>
standard (= 1em)
</> Show Example

adipisicing adipisicing aliqua aliquip aliquip

<p class="font-size--standard">adipisicing adipisicing aliqua aliquip aliquip</p>
small
</> Show Example

adipisicing adipisicing aliqua aliquip aliquip

<p class="font-size--small">adipisicing adipisicing aliqua aliquip aliquip</p>
smaller
</> Show Example

adipisicing adipisicing aliqua aliquip aliquip

<p class="font-size--smaller">adipisicing adipisicing aliqua aliquip aliquip</p>
text colors
</> Show Example

adipisicing adipisicing aliqua aliquip aliquip

adipisicing adipisicing aliqua aliquip aliquip

adipisicing adipisicing aliqua aliquip aliquip

adipisicing adipisicing aliqua aliquip aliquip

adipisicing adipisicing aliqua aliquip aliquip

adipisicing adipisicing aliqua aliquip aliquip

adipisicing adipisicing aliqua aliquip aliquip

adipisicing adipisicing aliqua aliquip aliquip

adipisicing adipisicing aliqua aliquip aliquip

adipisicing adipisicing aliqua aliquip aliquip

adipisicing adipisicing aliqua aliquip aliquip

adipisicing adipisicing aliqua aliquip aliquip

adipisicing adipisicing aliqua aliquip aliquip

adipisicing adipisicing aliqua aliquip aliquip

adipisicing adipisicing aliqua aliquip aliquip

adipisicing adipisicing aliqua aliquip aliquip

adipisicing adipisicing aliqua aliquip aliquip

adipisicing adipisicing aliqua aliquip aliquip

adipisicing adipisicing aliqua aliquip aliquip

adipisicing adipisicing aliqua aliquip aliquip

adipisicing adipisicing aliqua aliquip aliquip

adipisicing adipisicing aliqua aliquip aliquip

adipisicing adipisicing aliqua aliquip aliquip

<p>adipisicing adipisicing aliqua aliquip aliquip</p> <p class="text__primary--text">adipisicing adipisicing aliqua aliquip aliquip</p> <p class="text__secondary--text">adipisicing adipisicing aliqua aliquip aliquip</p> <p class="text__secondary--text bg__primary--text">adipisicing adipisicing aliqua aliquip aliquip</p> <p class="text__primary--300">adipisicing adipisicing aliqua aliquip aliquip</p> <p class="text__primary">adipisicing adipisicing aliqua aliquip aliquip</p> <p class="text__primary--200">adipisicing adipisicing aliqua aliquip aliquip</p> <p class="text__primary--100">adipisicing adipisicing aliqua aliquip aliquip</p> <p class="text__primary--100 bg__primary--text">adipisicing adipisicing aliqua aliquip aliquip</p> <p class="text__warning--300">adipisicing adipisicing aliqua aliquip aliquip</p> <p class="text__warning--200">adipisicing adipisicing aliqua aliquip aliquip</p> <p class="text__warning--100">adipisicing adipisicing aliqua aliquip aliquip</p> <p class="text__danger--300">adipisicing adipisicing aliqua aliquip aliquip</p> <p class="text__danger--200">adipisicing adipisicing aliqua aliquip aliquip</p> <p class="text__danger--100">adipisicing adipisicing aliqua aliquip aliquip</p> <p class="text__success--300">adipisicing adipisicing aliqua aliquip aliquip</p> <p class="text__success--200">adipisicing adipisicing aliqua aliquip aliquip</p> <p class="text__success--100">adipisicing adipisicing aliqua aliquip aliquip</p> <p class="text__data--300">adipisicing adipisicing aliqua aliquip aliquip</p> <p class="text__data--200">adipisicing adipisicing aliqua aliquip aliquip</p> <p class="text__data--100">adipisicing adipisicing aliqua aliquip aliquip</p> <p class="text__bg">adipisicing adipisicing aliqua aliquip aliquip</p> <p class="text__bg bg__primary--text">adipisicing adipisicing aliqua aliquip aliquip</p>
Helpers
Helper classes
</> Show Example

Helper classes available but not usable in the style-guide because breaks everything:

  • .fixed-top {position: fixed; top:0; right:0; left:0;}
  • .h-100 {height: 100%}
  • .vh-100 {height: 100vh}
  • .min-heigt-1 to .min-height-100 {min-height: 1 to 100 px}
  • .scroll-y {overflow-y: auto}
  • .opacity--80/50/30 {opacity: 0.8/0.5/0.3}
  • .width--100/75/50/25 {width: 100%/75%/50%/25%}
  • .hide {display: none}
  • .invisible {visibility: hidden}
  • .border-radius-[0-10]
  • .display-block
  • .display-inline-block
  • .display-none
  • .text--bold
  • .break-word
  • .text-align--center/left/right
  • .z-index-0/1000/2000..9000
  • .rounded-item {border-radius: 50%}
  • .no-print @media print {display: none}
<div class="p-5 m-5"> <h3>Helper classes available but not usable in the style-guide because breaks everything:</h3> <ul> <li class="p-5"><i><strong>.fixed-top {position: fixed; top:0; right:0; left:0;}</strong></i></li> <li class="p-5"><i><strong>.h-100 {height: 100%}</strong></i></li> <li class="p-5"><i><strong>.vh-100 {height: 100vh}</strong></i></li> <li class="p-5"><i><strong>.min-heigt-1 to .min-height-100 {min-height: 1 to 100 px}</strong></i></li> <li class="p-5"><i><strong>.scroll-y {overflow-y: auto}</strong></i></li> <li class="p-5"><i><strong>.opacity--80/50/30 {opacity: 0.8/0.5/0.3}</strong></i></li> <li class="p-5"><i><strong>.width--100/75/50/25 {width: 100%/75%/50%/25%}</strong></i></li> <li class="p-5"><i><strong>.hide {display: none}</strong></i></li> <li class="p-5"><i><strong>.invisible {visibility: hidden}</strong></i></li> <li class="p-5"><i><strong>.border-radius-[0-10]</strong></i></li> <li class="p-5"><i><strong>.display-block</strong></i></li> <li class="p-5"><i><strong>.display-inline-block</strong></i></li> <li class="p-5"><i><strong>.display-none</strong></i></li> <li class="p-5"><i><strong>.text--bold</strong></i></li> <li class="p-5"><i><strong>.break-word</strong></i></li> <li class="p-5"><i><strong>.text-align--center/left/right</strong></i></li> <li class="p-5"><i><strong>.z-index-0/1000/2000..9000</strong></i></li> <li class="p-5"><i><strong>.rounded-item {border-radius: 50%}</strong></i></li> <li class="p-5"><i><strong>.no-print @media print {display: none}</strong></i></li> </ul> </div>