Guide des styles

Cette page contient tous les styles et composants utilisés sur le site web. Sur cette page, vous pouvez modifier n'importe quel style de ce guide de style, qui s'appliquera alors à l'ensemble du site web.

Couleurs

Primary
Seconday
Tertiary
White
Black
Grey 50

Couleurs - Thème

Grey Scale
100%
Grey Scale
80%
Grey Scale
60%
Grey Scale
40%
Grey Scale
20%
Grey Scale
15%
Grey Scale
8%
White Scale
100%
White Scale
75%
White Scale
50%
White Scale
25%

COLORED

Brand
Primary
Brand
Brand BG

Typography

Heading 1

Looks like this.
Interlignage

Heading 2

Looks like this.
Interlignage

Heading 2 - bIG pp neue

Looks like this.
Interlignage

Heading 2 - bIG PS Time

Looks like this.
Interlignage

Heading 3

H3 Looks like this.
Interlignage

Heading 3 - PP Neue

H3 Looks like this.
Interlignage

Heading 4

H4 Looks like this.
Interlignage

Heading 5

H5 Looks like this.

Heading 6

H6 Looks like this.

LARGE PARAGRAPH – 30

Tempus vitae morbi volutpat, amet pretium et ut amet. Ac viverra nulla cursus feugiat bibendum eget velit.

LARGE PARAGRAPH – 40

Tempus vitae morbi volutpat, amet pretium et ut amet. Ac viverra nulla cursus feugiat bibendum eget velit.

LARGE X PARAGRAPH – 50

Tempus vitae morbi volutpat, amet pretium et ut amet. Ac viverra nulla cursus feugiat bibendum eget velit.

LARGE PARAGRAPH – 50

Tempus vitae morbi volutpat, amet pretium et ut amet. Ac viverra nulla cursus feugiat bibendum eget velit.

LARGE PARAGRAPH – Medium

Tempus vitae morbi volutpat, amet pretium et ut amet. Ac viverra nulla cursus feugiat bibendum eget velit.

PARAGRAPH - 18 px (20 px maquettes)

Tempus vitae morbi volutpat, amet pretium et ut amet. Ac viverra nulla cursus feugiat bibendum eget velit.

PARAGRAPH - 21 px (26 px maquettes)

Tempus vitae morbi volutpat, amet pretium et ut amet. Ac viverra nulla cursus feugiat bibendum eget velit.

PARAGRAPH - 24 px (30 px maquettes)

Tempus vitae morbi volutpat, amet pretium et ut amet. Ac viverra nulla cursus feugiat bibendum eget velit.

Small PARAGRAPH

Tempus vitae morbi volutpat, amet pretium et ut amet. Ac viverra nulla cursus feugiat bibendum eget velit.

Small PARAGRAPH Title

Tempus vitae morbi volutpat, amet pretium et ut amet. Ac viverra nulla cursus feugiat bibendum eget velit.

Extra Small PARAGRAPH

Tempus vitae morbi volutpat, amet pretium et ut amet. Ac viverra nulla cursus feugiat bibendum eget velit.

Decorative

Tempus vitae morbi volutpat, amet pretium et ut amet. Ac viverra nulla cursus feugiat bibendum eget velit.

Decorative Large

98%

Text inline Link

Rich Text

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.
How to customize formatting for each rich text

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

Minimal interior
  • Lorem ipsum
  • Lorem ipsum dolor sit amet
How to customize formatting for each rich text

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!