Base Template
Style Guide
Foundation/Color
Static Colors
Foundation/Theme
Theme Base Colors
Theme Dark (Invert) Colors
Theme Warm Brown Colors
Theme Primary Blue Colors
Typography/Text
Text
Text Small
Text Regular
Text Regular Native (Paragraph): Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
Text Medium
Text Large
Typography/Heading
Heading
Special styles like "uppercase", that can not be controlled via variables, must be changed on the base class.
H6
Heading 6 Native
H5
Heading 5 Native
H4
Heading 4 Native
H3
Heading 3 Native
H2
Heading 2 Native
H1
Heading 1 Native
Typography/Display
Display
Special styles like "uppercase", that can not be controlled via variables, must be changed on the base class.
Display Small
Display Medium
Display Large
Typography/Various
Label
List Ordered
- List Ordered Class
- Native Lists are not styled
- Lorem ipsum dolor sit amet
List Unordered
- List Ordered Class
- Native Lists are not styled
- Consetetur sadipscing elitr
Block Quote
Block Quote
Rich Text
The Rich Text element (h1)
Paragraph: Rich Text (Bold) is your all-in-one (emphasis) content powerhouse! It lets you effortlessly create (link) and style headings (code), paragraphs, blockquotes, images, and videos in a single, unified element. Say goodbye to the hassle of individually adding and formatting each piece of content. Simply double-click, and you're ready to go!
Why Rich Text Rocks (h2)
Rich Text elements bring unmatched flexibility to your content creation process. Need a blog post? No problem. Writing an in-depth article? Easy. Rich Text handles everything from headings and paragraphs to images and captions, making it your go-to tool for crafting engaging, long-form content.
Static and Dynamic Content: A Perfect Fit (h3)
Rich Text isn't just versatile (Blockquote); it's adaptable too. Whether you're working with static or dynamic content, Rich Text has you covered. For static content, drop it on any page and start editing right away. For dynamic content, simply add a Rich Text field to any collection, connect it in the settings panel, and watch your content come to life!
Styling Made Simple (h4)
Customizing your Rich Text is a breeze. By adding a class and using the "When inside of" nested selector system, you can style headings, paragraphs, blockquotes, images, and captions to your heart's content. This ensures your content looks exactly how you want, every time.
Why You'll Love Rich Text (h5)
Rich Text elements make it easy to create visually stunning, cohesive content. Whether you’re building a blog, crafting a detailed report, or designing an interactive story, Rich Text gives you the tools to bring your vision to life. So go ahead, dive in, and let your creativity shine!
- Unordered List Items
- Lorem ipsum dolor sit amet
- Consetetur sadipscing elitr
Get Started (h6)
Headings, paragraphs, blockquotes, images, and figure captions—each styled just the way you like. With Rich Text, you’ve got everything you need to make your content look fantastic. So what are you waiting for? Start creating today and experience the magic of Rich Text!
- Ordered List Items
- Lorem ipsum dolor sit amet
- Consetetur sadipscing elitr
Form Elements
Basic styles applied. Focus styles handled via custom CSS inside the code embed found in the component "Layout: Site Code".
Form
Interactive Elements
Very basic foundation. No hover styles applied for Button. Focus styles handled via custom CSS inside the code embed found in the component "Layout: Site Code".
Button Simple
Link Underline
Link Underline Reversed
Layout/Container
View on larger a viewport ("1920 px" and above) to see the full max-width of these containers.
Container Small
Container Medium
Container Large
Layout/Space
Used to space out multiple elements evenly.
Space Small
Space Regular
Space Medium
Space Large
Layout/Margin
Used to space out single elements or for uneven spacing.