Colors

Double clic and then clic the gear to edit your colors.

Background color

Text Color

Primary

Secondary

Tiertary

White

Grey

Font Families & Styles

Arial

Default font

Oswalt

Secondary font

Capitalize

Italic

Italicize

Bold

Bold

Underline

Overline

Strikethrough

Spaced letters

Texts Sizes

Title 1

Headings 1

Title 2

Headings 2

Title 3

Headings 3

Title 4

Headings 4

Title 5

Title 6

Title 7

Title 8

Title 9

Title 10

Title 11

Title 12

Title 13

Title 13 - App section title

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Default Paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Small Paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Small Capital Bold Paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Small Italic Paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Small Capital Paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Small Capital Underline Paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Medium Paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Capital Medium Bold Paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Capital Medium Paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Big Paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Tables Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Square Labels Paragraph

Texts Colors

Double clic and then clic the gear to edit your colors.

This is some text inside of a div block.

Primary Color

This is some text inside of a div block.

Secondary Color

This is some text inside of a div block.

Tiertary Color

Buttons

Button

Square Button

Button Pill Outlined

Button Pill Filled

Sticky Levels

Les stickies sont gérés avec du custom CSS pour être calculés automatiquement.
Pour rendre sticky un élément, ajoutez lui la classe correspondante au niveau souhaité.

Sticky-0

Sticky 0

Se sticky tout en haut de la page

Sticky-1

Sticky 1

Se sticky en dessous sous la barre de navigation principale

Sticky-2

Sticky 2

Se sticky juste en dessous de la barre de navigation secondaire (taille de la navbar + taille d'un bouton)

Sticky-3

Sticky 3

Se sticky juste en dessous des titres des pages ("poids", nom d'un programme, etc)

Sticky-3-1

Sticky "hybride", différent en mobile et desktop

Sticky 3 en desktop
Sticky 1 en mobile

Sticky-3-4

Sticky "hybride", différent en mobile et desktop
‍

Sticky 3 en desktop
Sticky 4 en mobile (juste en dessous des boutons dans la page évolution, niveau qui n'existe pas en desktop)

Components

Label

Labels et Labels Wrap

info

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Card

La marge appliquée autour de l'image est changeable depuis la partie "tailles".

Variantes des éléments
Card_img auto-height : la hauteur de l'image ne sera pas fixée à 18vw

Paddings & Margins

Double clic and then clic the gear to edit your margins and paddings.

Paddings Extra Small

Paddings Small

Paddings Medium

Paddings Large

Paddings Extra Large

Paddings Extra Extra Large

Sections

Vertical spacing

Default section

Containers

Horizontal spacing

Default container

No pad container

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Rich Texts

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Link

Intalicize

Bold

Item 1
Item 2

Item 1
Item 2

Quote block

Lorem ipsum dolor ^{sit amet}

Lorem ipsum dolor _{sit amet}

Default Richtext

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Link

Intalicize

Bold

Item 1
Item 2

Item 1
Item 2

Quote block

Lorem ipsum dolor ^{sit amet}

Lorem ipsum dolor _{sit amet}

Recette Richtxtx

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Link

Intalicize

Bold

Item 1
Item 2

Item 1
Item 2

Quote block

Lorem ipsum dolor ^{sit amet}

Lorem ipsum dolor _{sit amet}

Témoignages Richtext

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Link

Intalicize

Bold

Item 1
Item 2

Item 1
Item 2

Quote block

Lorem ipsum dolor ^{sit amet}

Lorem ipsum dolor _{sit amet}

Legal Richtext

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Link

Intalicize

Bold

Item 1
Item 2

Item 1
Item 2

Quote block

Lorem ipsum dolor ^{sit amet}

Lorem ipsum dolor _{sit amet}

Legal Richtext

Colors

Font Families & Styles

Texts Sizes

Title 1

Title 2

Title 3

Title 4

Title 5

Title 6

Title 7

Title 8

Title 9

Title 10

Title 11

Title 12

Title 13

Texts Colors

Buttons

Sticky Levels

Components

Paddings & Margins

Sections

Containers

Forms

Rich Texts

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6