This is the Style Guide for this Website. Here you have access to all the different Styles used for Typography, Color, Forms & more. To edit a style, select the Element on this Page. If you're editing an Element that does not have a Class applied to it, make sure to select the HTML Tag of the Element in the Style Selector and edit the Tag instead. All changes made here will be applied to every element with the Class or Tag applied to it across the entire Website, so proceed with Caution.
These are all the Colors that are, or can, be used across the Website. In this Project, the Tailwind CSS Color System is used, meaning that each Color comes with 11 Shades. These Shades go from 50 (lightest) to 950 (darkest). This gives you all the flexibility you need to make your Website cohesive & visually pleasing.
If you would like to change the Colors in this Template to fit your Brand, we highly recommend that you generate a fitting Color Palette that uses the Tailwind CSS System. This can easily be done here: https://uicolors.app/create
Here is a List of all the Text Styles used in this Template. All Elements that have an HTML Tag will have the Tag styled, not a Class. The Fonts are sourced from Google Fonts, the link can be found here.
The Font is set in the Body Tag, to change it across the Website make sure to change the Font in the Body Tag.
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.
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.
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.
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.
Here you can find & edit the Rich Text Elements across the Website. Simply select the Element you want to style and select the HTML Tag in the Style Selector. By default, a majority of the Typography Elements in this Template are styled using their respective HTML Tag.
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.
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!
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.
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.
Here you can make global Changes to all Forms used on this Template. Simply select the Element you want to edit and change the corresponding Tag or Class, it's that easy.
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.