Style Guide
This Style Guide offers comprehensive instructions on various design elements, ranging from color schemes and typography to button styles and text sizes, pre-built utility classes, and a wide range of UI elements for a consistent design experience.
By adhering to these guidelines, you can maintain consistency, enhance visual appeal, and ensure seamless navigation throughout your website.
Color
Use colors to customise this template to match your brand identity.
Learn more about .
Typeface
Upload custom fonts to customise this template to match your brand identity.
Learn more about how to or in Modern.
HTML Headings
Use HTML tags to define default Heading styles and guide people and search engines through your content.
Learn more about .
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Heading Classes
Use Heading classes when typography style doesn't match the default HTML tag.
Other HTML Tags
HTML tags define default text styles.
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"
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Text Sizes
Use Text sizes classes to add, style, and format inline text.
Learn more about .
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. 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. 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. 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. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.
Text Weights
Text weight classes when typography weight doesn't match the default HTML tag.
Learn more about .
Text Styles
Text style classes when typography style doesn't match the default HTML tag.
Learn more about .
Text Alignment
Text alignment classes when typography alignment doesn't match the default HTML tag.
Learn more about .
Rich text
Use Rich Text to create long-form content.
Learn more about .
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
This is a block quote
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.
This is a link inside of a rich text
- List item
- List item
- List item
-
- List item
- List item
- List item
Buttons
Use Buttons to serve as your call to action (CTA) and links to pages, forms, assets, and more.
Learn more about .
Form
Use Form to capture information, like newsletter signups or work inquiries from potential clients.
Learn more about