Webflow Style Guide
Voici le "Style Guide" pour visualiser les différents styles utilisés pour la conception du site hygena franchise.
Template de base :https://webflow.com/templates/html/company-x-startup-website-template
Colors
Text color
Primary color
Secondary colors
Neutral colors
System colors
Typography
Special headings
Display 60
Donec etdolr odio pelle ntesqu.
Display 2
Donec et odio lom pellen tesqu diam.
Display 3
Donec et odio pellen tesqu diam lorem ipsum dolor.
Display 4
Donec et odio pellentesqu diam lorem ipsum dolor consectur drakong.
Headings
Heading H1
Donec et odio dolor pelle ntesqu. 60/60
Donec et odio dolor pelle ntesqu.
Donec et odio dolor pelle ntesqu.
Donec et odio dolor pelle ntesqu.
Donec et odio dolor pelle ntesqu.
Heading H2
Donec et odio pellen tesqu diam lorem ipsum dolor consectur 44/50
H2 -> Heading 2
Donec et odio pellen tesqu diam lorem ipsum dolor consectur 44/50
Heading H3
Donec et odio pellentesqu diam lorem ipsum dolor consectur drakong dolor sit amet consec. 36/44
Heading H4
Donec et odio pellentesqu diam lorem ipsum dolor 28/38
Heading H5
Donec et odio pellentesqu diam lorem ipsum dolor consectur drakong.
Heading H6
Donec et odio pellentesqu diam lorem ipsum dolor consectur drakong.
Body -> Paragraphe
Body Large
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 cursu.
Body Default
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.
Body Small
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.
Body X Small
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.
Text single
Text 24px
Text 20px
Text 16px
Text 14px
Rich Text
Text Bold
H1 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.
H2 Static and dynamic content editing
H3 Static and dynamic content editing
H4 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.
SEO Title
Text Bold
Bullet List
- Lorem ipsum dolor sit amet consectetur
- Posuere enim mi pharetra neque proin dic
- Mauris aliquet faucibus iaculis dui vitae ullamco
Numbered List
- Lorem ipsum dolor sit amet consectetur
- Posuere enim mi pharetra neque proin dic
- Mauris aliquet faucibus iaculis dui vitae ullamco
Blockquote
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
Image & Caption
Text Uppercase
Text Strikethrough
Text Underline
Shadows
General shadows
Button shadows
Buttons
Primary buttons
Secondary buttons
Primary circle buttons
Secondary circle buttons
Badges
Primary badges
Secondary badges
Inputs
Input text
Text area
Checkboxes
Radio buttons
Avatars
Avatars circle
Icons
Square icons
Square icons
