pas de publication .com
ColorsFont Families & StylesTexts SizesTexts ColorsButtonsSticky LevelsComponentsMargesSectionsContainersFormsRich Texts

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
Capitalize
Italic
Italicize
Bold
Bold
Underline
Underline
Overline
Overline
Strikethrough
Strikethrough
Spaced letters
Spaced letters

Texts Sizes

Title 1

Headings 1

Title 2

Headings 2

Title 3

Headings 3

Title 4

Headings 4

Title 5

Title 5
Title 6
Title 6
Title 7
Title 7
Title 8
Title 8
Title 9
Title 9
Title 10
Title 10
Title 11
Title 11
Title 12
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
Button
Square Button
Black
Primary
White
Button Pill Outlined
Button Pill Filled
Button
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
Label
Label
Label
Label
Labels et Labels Wrap
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

Forms

Label
m
i
i
i
Fields
Button
Wraps and dividers

form_wrap : créer de l'espace entre différentes parties du formulaire
form_field-wrap : rassembler un input et son label
form_subwrap : regrouper plusieurs "form_field-wrap" et ajouter de l'espace + une bordure si ce n'est pas le dernier
form_buttons : rassemble les boutons en bas d'un formulaire en ajoutant de l'espace
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
  1. Item 1
  2. 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
  1. Item 1
  2. 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
  1. Item 1
  2. 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
  1. Item 1
  2. 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
  1. Item 1
  2. Item 2
Quote block

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Legal Richtext