Welcome to the style guide for your website. You can use this page to quickly make changes to things such as fonts, text sizes, colours, buttons, and more. These changes will then be applied across your website.
To ensure your site is responsive and adapts to all devices, some elements will have different stylings across different breakpoints. For example, heading sizes on desktop breakpoints are slightly different to those on mobile breakpoints.
Your style guide is not viewable to the public, and can only be accessed with a password.
If you have any questions about this style guide or your website in general, then please do not hesitate to email me - example@domain.com
The primary colour for all typography on your website is #EEEEEE.
As mentioned in the introduction, the sizing of your headings differ between desktop and mobile breakpoints. Both desktop and mobile breakpoints have a base font size of 18px (1em). All pixel values have been rounded.
Desktop - Major Third Scale (1.25)
44px | 35px | 28px | 23px | 18px | 14px | 12px
Mobile - Minor Third Scale (1.20)
37px | 31px | 26px | 22px | 18px | 15px | 12px
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.
The .p1 class can have a number of combo-classes applied to it, such as -
.small (reduces font size to 14px / 0.78em).
.tiny (reduces font size to 12px / 0.67em).
.centred (centre aligns the text).
.capitals (makes the the text all CAPS).
.no-max-width (disables the 65ch max-width setting).
.desktop-only (texts only displays on desktop breakpoints).
.mobile-only (text only displays on tablet & mobile breakpoints).
The .text class can also have the same combo-classes applied to it as the .p1 class.
Rich text blocks (RTBs) are different from regular paragraph and text elements. RTBs allow you to format headings, paragraphs, quotes, images, videos, captions, and lists all within the one element.
RTBs are what will be used for the primary body of your blog posts.
Après l’Accord de Paris en 2016, 82 pays dont la France se sont engagés à atteindre la « neutralité carbone » en 2050.
Pour atteindre cet ambitieux (et nécessaire) objectif, les particuliers comme les entreprises vont devoir réduire leurs émissions de gaz à effet de serre annuelles pour empêcher les désagréments qu'engendrerait une augmentation de la température de 2°.
Mais que faire des 800.000.000.000 tonnes d'excédent de CO2 atmosphérique accumulées lors des deux derniers siècles ? 🤔 C’est là que le mécanisme de la contribution intervient.
Pour pouvoir prétendre à la neutralité carbone, tout individu ou entreprise doit obligatoirement passer par trois étapes :
Par exemple, il pourra s’agir de prioriser un approvisionnement en plastique recyclé, de choisir un fournisseur d’énergie renouvelable, d’utiliser la digitalisation de manière raisonnée…
Réduire, réduire… d’accord, mais toute activité engendre forcément des émissions, même réduites au stricte minimum. C’est pour contrebalancer ces émissions inévitables (et uniquement celles-là) qu’existe la compensation carbone. D’ailleurs, ces émissions inévitables sont appelées incompressibles ou résiduelles.
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.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
This is an ordered list -
Rappel :
Voici un paragraph : Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Ici, une phrase avec un mot en gras en plein milieu. A noter que le gras est en vert.
Ici une phrase en italique. Et en gras + italique (en noir).
Voici une citation
Et un lien vers un autre site.
Voici une liste
You can use this section for any other important elements that you'll use throughout your client's website, such as -
• Navigation
• Footer
• Icons
• Cards
• Form elements
• Social media share buttons
Thank you for checking out this style guide template. You can clone it here. If you have any questions about it, please feel free to message me on Twitter.