The style guide defines the basic design elements. Here we will find colors, fonts and text styles.
Modify the elements that already exist to adapt them to your own design. You can also add and / or remove any element you need.
Add all the fonts that you are going to use in the project.
First set the body font going to the Body (html tag), this will work as the default font.
Second, you can creat a global class to change whatever element to the font you want, to do that creat a class with the font set.
Noto Sans
Noto Serif
Defining the styles directly in the H labels is a very common practice, but this can lead to extra classes when we want to have H labels of the same level with different sizes. With this class system for the text, we can define the size regardless of the level of the H tag. That is, we can have two <H2> tags, which by hierarchy of contents have to be <h2> but by design they need to have different sizes. . And it also serves us for other texts within our website, not just headlines. You can use modularscale.com to define your size scale.
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.
The following are global classes, you can add to any text of the page to change colors.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Creat Global Background to apply to any element in the design with the class name structure bg-...
Use the next rich text to customize the default rich text of the website. If you need to create a new one because you have custom css, please creat a new rich text class, ex: c-blog-richtext, then select the html tag and change the css with the nest selector.
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real 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!
The spacer elements give the sections more room to breathe. This is not a global combo class, it's an element separated from others.