Style Guide
This is a template designed to demonstrate the site's global settings set within the Theme Settings. The following sections will showcase the global text, buttons, and form styling as well the headers, footers, modules, and sections available in the theme.
This Style Guide template should NOT be used for creating a page.
Typography
H1: The Quick Brown Fox Jumps Over The Lazy Dog.
H2: The Quick Brown Fox Jumps Over The Lazy Dog.
H3: The Quick Brown Fox Jumps Over The Lazy Dog.
H4: The Quick Brown Fox Jumps Over The Lazy Dog.
H5: The Quick Brown Fox Jumps Over The Lazy Dog.
H6: The Quick Brown Fox Jumps Over The Lazy Dog.
Subeadline: The Quick Brown Fox Jumps Over The Lazy Dog.
Eyebrow: The Quick Brown Fox Jumps Over The Lazy Dog.
Body: The Quick Brown Fox Jumps Over The Lazy Dog.
Default ModeHeading Lorem Ipsum Dolor
Subheading sit amet consectetuer adipiscing
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque volutpat mattis eros. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- Lorem ipsum dolor sit amet
- Consectetuer adipiscing elit
- Donec odio quisque
- Volutpat mattis eros
Eyebrow goes here Headline Goes Here Lorem
Subheadline text goes here lorem ipsum dolor.
Dark ModeHeading Lorem Ipsum Dolor
Subheading sit amet consectetuer adipiscing
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque volutpat mattis eros. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- Lorem ipsum dolor sit amet
- Consectetuer adipiscing elit
- Donec odio quisque
- Volutpat mattis eros
Eyebrow goes here Headline Goes Here Lorem
Subheadline text goes here lorem ipsum dolor.
Modules
The following are all the modules available in this theme, in their default state (not including blog-specific modules).
Accordion
Adds collapsible text to your page with an option to show 1, 2, 3, or 4 collapsible items in a row.
Nunc interdum lacus sit
Fusce egestas elit eget lorem. Nunc nonummy metus. Curabitur ullamcorper ultricies nisi. Aliquam eu nunc. Sed cursus turpis vitae tortor. In consectetuer turpis ut velit. Cras varius. Nullam sagittis.
Morbi ut turpis eget
Fusce egestas elit eget lorem. Nunc nonummy metus. Curabitur ullamcorper ultricies nisi. Aliquam eu nunc. Sed cursus turpis vitae tortor. In consectetuer turpis ut velit. Cras varius. Nullam sagittis.
Curabitur iaculis dolor sit amet mauris interdum
Fusce egestas elit eget lorem. Nunc nonummy metus. Curabitur ullamcorper ultricies nisi. Aliquam eu nunc. Sed cursus turpis vitae tortor. In consectetuer turpis ut velit. Cras varius. Nullam sagittis.
Donec sed mauris vel mi facilisis
Fusce egestas elit eget lorem. Nunc nonummy metus. Curabitur ullamcorper ultricies nisi. Aliquam eu nunc. Sed cursus turpis vitae tortor. In consectetuer turpis ut velit. Cras varius. Nullam sagittis.
CTA Box
Adds a styled box your box that includes call to action text and button. Background can be changed to a color, gradient, or image.
Headline Goes Here Lorem
Subheadline text goes here lorem ipsum dolor.
Hero Banner
Adds a hero banner to your page. Background can be an image and include an overlay. Main content can include a call to action button and/or author info. Content opposite the main text can be a form or image.
Impactful Headline Here
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore.
Icons with Text
Adds a box of text with an icon that can be above the text or to the left or right of the text.
Lorem ipsum dolor sit amet consetetur Elit
Lorem ipsum dolor sit amet dolor, elit consectetuer adipiscing elit. Donec odio. Nullam malesuada erat ut...
Page Nav
Adds an in page navigation. Links can be added manually or be dynamically created based on Section Anchor modules added to the page.
Related Posts
Adds dynamically generated posts related to the content of the current page.
![[Marketplace] Spark - Style Guide](https://themes.lyntonweb.com/hubfs/Blog%20Images/lynton-blog-600x400-hubspot-workflows-2.png)
![[Marketplace] Spark - Style Guide](https://themes.lyntonweb.com/hubfs/Blog%20Images/best-practice-forms-600x400.png)
Simple Menu
A simple menu that is ADA compliant.
Site Search Form
Adds a search form that leads to the domain's site results page.
Tabs
Adds tabular content to the page. Each tab can contain text, CTAs, an image, and/or a form.
Aliquam Tincidunt Mauris Eu Vivamus Risus.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
- Sed semper lorem at felis
- Phasellus pede arcu, dapibus eu, fermentum
- Morbi interdum mollis sapien
Aliquam Tincidunt Mauris Eu Vivamus Risus.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
- Sed semper lorem at felis
- Phasellus pede arcu, dapibus eu, fermentum
- Morbi interdum mollis sapien
Testimonials Slider
Adds a slider of testimonials including a quote and meta content (name and title).
"Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede."
Steve Harrington
Project Manager
"Duis dignissim nulla odio. Vivamus pulvinar enim id varius euismod. Vestibulum blandit vel urna vitae rutrum. Nunc vel quam aliquet, euismod ex ut, ultrices lorem."
Nancy Wheeler
Strategist
"Pellentesque ipsum urna, semper vel vestibulum ac, euismod non metus. Quisque vitae nibh a justo interdum volutpat. Pellentesque vehicula fringilla est ut sollicitudin."
Jonathan Byers
UX Designer
Theme Form
A form module with extra options not available in HubSpot's default module.
Eyebrow goes here Headline Goes Here Lorem
Subheadline text goes here lorem ipsum dolor.
Theme Rich Text
A rich text module with extra options not available in HubSpot's default module.
Eyebrow Goes HereHeadline Goes Here Lorem
Subheadline text goes here lorem ipsum dolor.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget
- Lorem ipsum dolor sit amet
- Consetetur sadipscing elitr
- Sed diam nonumy eirmod
- Labore et dolore
Sections
The following are all the saved sections available in this theme.
Contact Information
Text, form, and callouts for address and phone.
Eyebrow Goes HereHeadline Goes Here Lorem
Subheadline text goes here lorem ipsum dolor.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget
- Lorem ipsum dolor sit amet
- Consetetur sadipscing elitr
- Sed diam nonumy eirmod
- Labore et dolore
Lorem Ipsum
2717 Commercial Center Blvd
Suite E200
Katy, TX 77494
Lorem Ipsum
Eyebrow goes here Headline Goes Here Lorem
Subheadline text goes here lorem ipsum dolor.
Three Column - Icons
A three column section of Icons with Text modules
Lorem ipsum dolor sit amet consetetur Elit
Lorem ipsum dolor sit amet dolor, elit consectetuer adipiscing elit. Donec odio. Nullam malesuada erat ut...
Lorem ipsum dolor sit amet consetetur Elit
Lorem ipsum dolor sit amet dolor, elit consectetuer adipiscing elit. Donec odio. Nullam malesuada erat ut...
Lorem ipsum dolor sit amet consetetur Elit
Lorem ipsum dolor sit amet dolor, elit consectetuer adipiscing elit. Donec odio. Nullam malesuada erat ut...
Two Column - Icons - Left Heading
A two column section of Icons with Text modules with a left side heading.
Eyebrow Goes HereHeadline Goes Here Lorem Impsum
Subheadline text goes here lorem ipsum dolor.
Lorem ipsum dolor sit amet consetetur Elit
Lorem ipsum dolor sit amet consetetur Elit
Lorem ipsum dolor sit amet consetetur Elit
Lorem ipsum dolor sit amet consetetur Elit
Lorem ipsum dolor sit amet consetetur Elit
Lorem ipsum dolor sit amet consetetur Elit
Two Column - Image Left
A two column section image on the left and text on the right.
Eyebrow Goes HereHeadline Goes Here Lorem
Subheadline text goes here lorem ipsum dolor.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis.
Two Column - Image Right
A two column section image on the right and text on the left.
Eyebrow Goes HereHeadline Goes Here Lorem
Subheadline text goes here lorem ipsum dolor.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis.