Style guide
The following page is ideal for previewing the results of all site-wide style changes at a glance. (p1)
Squarespace provides 4 levels of headings and 3 styles of paragraphs. (p2)
This is a major heading 1
This is a sample post. It is designed to test the presentation of range of standard content elements. To be specific, these are the non-structured, elements that would make up the main content of a generic page, post, or article. A properly configured editor should support (and perhaps even be limited to) the set of elements on this page.
Vanilla HTML, No classes.
All content can be generated from basic Markdown.
No external requirements, e.g. normalize, reset.
This is a major heading 2
If you peek at it with a web inspector, you'll see that it is an H2. There should only be one first level heading per page and it should be reserved for the page title itself. In most CMSes this title field is separate from the main content body and its placement is controlled at the template level, ideally with a custom class attribute. Consult the HTML5 outlining algorithm for best practice.
This is a third-level heading 3
Here, have some slipsum in a <blockquote>:
Now that we know who you are, I know who I am. I'm not a mistake! It all makes sense! In a comic, you know how you can tell who the arch-villain's going to be? He's the exact opposite of the hero. And most times they're friends, like you and me! I should've known way back when... You know why, David? Because of the kids. They called me Mr Glass.
Here are some multi-line headings (p2)
Heading 1 ~ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore.
This paragraph is here to space out the headers. This is the default paragraph 2 size. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint (p2)
Heading 2 ~ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.
This paragraph is here to space out the headers. This is the default paragraph 2 size. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint (p2)
Heading 3 ~ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
This paragraph is here to space out the headers. This is the default paragraph 2 size. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint (p2)
Heading 4 ~ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.
Here are some italic headings (p2)
Heading 1 ~ Lorem ipsum dolor sit amet, con
Heading 2 ~ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Heading 3 ~ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
Heading 4 ~ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.
Here are the 3 levels of paragraphs
Paragraph 1 ~ This is the largest paragraph size. See guidelines for usage. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint ocest laborum. (p1)
Paragraph 2 ~ This is the default paragraph size. Use this for most body content. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa. (p2)
Paragraph 3 ~ This is the smallest paragroph size. See guidelines for usage. ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. (p3)
Check line-height and before and after paragraph spacing.
Example form
It all begins with an idea. Maybe you want to launch a business. Maybe you want to turn a hobby into something more. Or maybe you have a creative project to share with the world. Whatever it is, the way you tell your story online can make all the difference.
Upcoming events
-
Dream it.
10.21 7:00-8:00PM
It all begins with an idea. Maybe you want to launch a business. Maybe you want to turn a hobby into something more.
-
Build it.
10.21 7:00-8:00PM
It all begins with an idea. Maybe you want to launch a business. Maybe you want to turn a hobby into something more.
-
Grow it.
10.21 7:00-8:00PM
It all begins with an idea. Maybe you want to launch a business. Maybe you want to turn a hobby into something more.
Section Color: Lightest 1
There are a total of 10 default section colors. They are automatically generated from the site-wide color palette. See the documentation about these features. In fact, it wouldn’t be a terrible idea to read through all of the Squarespace styling documentation before going any further.
Section Color: Lightest 2
There are a total of 10 default section colors. They are automatically generated from the site-wide color palette. See the documentation about these features. In fact, it wouldn’t be a terrible idea to read through all of the Squarespace styling documentation before going any further.
Section Color: Light 1
There are a total of 10 default section colors. They are automatically generated from the site-wide color palette. See the documentation about these features. In fact, it wouldn’t be a terrible idea to read through all of the Squarespace styling documentation before going any further.
Section Color: Light 2
There are a total of 10 default section colors. They are automatically generated from the site-wide color palette. See the documentation about these features. In fact, it wouldn’t be a terrible idea to read through all of the Squarespace styling documentation before going any further.
Section Color: Bright 1
There are a total of 10 default section colors. They are automatically generated from the site-wide color palette. See the documentation about these features. In fact, it wouldn’t be a terrible idea to read through all of the Squarespace styling documentation before going any further.
Section Color: Bright 2
There are a total of 10 default section colors. They are automatically generated from the site-wide color palette. See the documentation about these features. In fact, it wouldn’t be a terrible idea to read through all of the Squarespace styling documentation before going any further.
Section Color: Dark 1
There are a total of 10 default section colors. They are automatically generated from the site-wide color palette. See the documentation about these features. In fact, it wouldn’t be a terrible idea to read through all of the Squarespace styling documentation before going any further.
Section Color: Dark 2
There are a total of 10 default section colors. They are automatically generated from the site-wide color palette. See the documentation about these features. In fact, it wouldn’t be a terrible idea to read through all of the Squarespace styling documentation before going any further.
Section Color: Darkest 1
There are a total of 10 default section colors. They are automatically generated from the site-wide color palette. See the documentation about these features. In fact, it wouldn’t be a terrible idea to read through all of the Squarespace styling documentation before going any further.
Section Color: Darkest 2
There are a total of 10 default section colors. They are automatically generated from the site-wide color palette. See the documentation about these features. In fact, it wouldn’t be a terrible idea to read through all of the Squarespace styling documentation before going any further.
This is the last section on the page before the footer.