Style Guide

Use this style guide to access, edit or adjust styles that are used throughout the template.

Style Guide

Use this style guide to access, edit or adjust styles that are used throughout the template.

Colors

Use this section to edit the colors for the entire template.

Primary

Secondary

Hover

Typography

Use this section to edit the typography for the entire site.

Heading

This is some body text. This is a body link.

This is some small text. This is a small link.

Big Text

Rich Text

Rich text sections are styled to be used throughout the template.

Heading one

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

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.

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.

Heading

This is a quote

H2 headings will look like this.

Illo eos tempore magnam qui dolorum tenetur. Sed architecto inventore. Qui voluptatem aut in neque magni non aut provident molestiae. Numquam maiores rem accusantium nobis non sit laboriosam sed molestiae.

Example of an H3 in use.

This is what quotes look like. Deleniti voluptas neque iure voluptatum tempore quasi repellendus. Aut dolorem sint veritatis vel autem quia sit reiciendis. Non hic cum enim adipisci quas corporis. Atque qui itaque tenetur aut occaecati quaerat.

Eveniet harum et perspiciatis est. Autem aut cum placeat veritatis. Quibusdam deserunt quo ea cum maiores dolore rerum voluptatem est. Libero voluptatem distinctio recusandae sint.

Bulleted lists are formatted like this
Lorem ipsum dolor sit amet
Consectetur adipiscing elit

Eveniet harum et perspiciatis est. Autem aut cum placeat veritatis. Quibusdam deserunt quo ea cum maiores dolore rerum voluptatem est. Libero voluptatem distinctio recusandae sint.

Numbered lists will look like this
Eveniet harum et perspiciatis est
Autem aut cum placeat veritatis

‍

Text Link

Blog rich text

Illo eos tempore magnam qui dolorum tenetur. Sed architecto inventore. Qui voluptatem aut in neque magni non aut provident molestiae. Numquam maiores rem accusantium nobis non sit laboriosam sed molestiae.

Example of an H3 in use.

This is what quotes look like. Deleniti voluptas neque iure voluptatum tempore quasi repellendus. Aut dolorem sint veritatis vel autem quia sit reiciendis. Non hic cum enim adipisci quas corporis. Atque qui itaque tenetur aut occaecati quaerat.

Eveniet harum et perspiciatis est. Autem aut cum placeat veritatis. Quibusdam deserunt quo ea cum maiores dolore rerum voluptatem est. Libero voluptatem distinctio recusandae sint.

Quibusdam deserunt quo ea cum maiores dolore rerum voluptatem est. Libero voluptatem distinctio recusandae sint.

Bulleted lists are formatted like this
Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Process Optimization: Standardizing and improving design workflows to ensure consistency, reduce redundancies, and eliminate bottlenecks.
Tool Management: Selecting, implementing, and maintaining design tools that facilitate seamless collaboration and efficiency.
Team Coordination: Ensuring that design teams are well-organized, with clear roles, responsibilities, and communication channels, also with design team stakeholders.

Eveniet harum et perspiciatis est. Autem aut cum placeat veritatis. Quibusdam deserunt quo ea cum maiores dolore rerum voluptatem est. Libero voluptatem distinctio recusandae sint.

Numbered lists will look like this
Eveniet harum et perspiciatis est
Autem aut cum placeat veritatis

‍

Text Link

Project rich text

Illo eos tempore magnam qui dolorum tenetur. Sed architecto inventore. Qui voluptatem aut in neque magni non aut provident molestiae. Numquam maiores rem accusantium nobis non sit laboriosam sed molestiae.

Example of an H3 in use.

This is what quotes look like. Deleniti voluptas neque iure voluptatum tempore quasi repellendus. Aut dolorem sint veritatis vel autem quia sit reiciendis. Non hic cum enim adipisci quas corporis. Atque qui itaque tenetur aut occaecati quaerat.

Eveniet harum et perspiciatis est. Autem aut cum placeat veritatis. Quibusdam deserunt quo ea cum maiores dolore rerum voluptatem est. Libero voluptatem distinctio recusandae sint.

Bulleted lists are formatted like this
Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Process Optimization: Standardizing and improving design workflows to ensure consistency, reduce redundancies, and eliminate bottlenecks.
Tool Management: Selecting, implementing, and maintaining design tools that facilitate seamless collaboration and efficiency.
Team Coordination: Ensuring that design teams are well-organized, with clear roles, responsibilities, and communication channels, also with design team stakeholders.

Eveniet harum et perspiciatis est. Autem aut cum placeat veritatis. Quibusdam deserunt quo ea cum maiores dolore rerum voluptatem est. Libero voluptatem distinctio recusandae sint.

Numbered lists will look like this
Eveniet harum et perspiciatis est
Autem aut cum placeat veritatis

‍

Project rich text

Illo eos tempore magnam qui dolorum tenetur. Sed architecto inventore. Qui voluptatem aut in neque magni non aut provident molestiae. Numquam maiores rem accusantium nobis non sit laboriosam sed molestiae.

Example of an H3 in use.

This is what quotes look like. Deleniti voluptas neque iure voluptatum tempore quasi repellendus. Aut dolorem sint veritatis vel autem quia sit reiciendis. Non hic cum enim adipisci quas corporis. Atque qui itaque tenetur aut occaecati quaerat.

Eveniet harum et perspiciatis est. Autem aut cum placeat veritatis. Quibusdam deserunt quo ea cum maiores dolore rerum voluptatem est. Libero voluptatem distinctio recusandae sint.

Bulleted lists are formatted like this
Lorem ipsum dolor sit amet
Consectetur adipiscing elit

Eveniet harum et perspiciatis est. Autem aut cum placeat veritatis. Quibusdam deserunt quo ea cum maiores dolore rerum voluptatem est. Libero voluptatem distinctio recusandae sint.