Lead-in Page Title
This is the Main Page Title of the Demo Page
This is the Page Short Description of 155 characters it can be displayed in the page itself but if Meta Description is left empty will also populate that
12 Column Cell (H1)
Heading 1 is only used in the Page Title as shown above. There should be no requirement to use a 12 colomn layout purely for text.
9 Column Cell (H2 Block)
A heading three directly below the heading two for comparison
When it comes to web typography, the ideal line length for text typically falls within 50 to 75 characters per line, including spaces. This range is based on research showing that readers are more comfortable and can read faster when the lines of text are neither too short nor too long.
Another heading three
However, for desktop devices, a slightly broader range of 60 to 80 characters is also considered suitable, depending on the typeface you’re using. Remember, though, that there’s no one-size-fits-all solution; it’s essential to find a balance that works well for your specific design.
Another heading three
A heading four directly below the heading three for comparison
As a general guideline, aim for a line height (line spacing) of around 1.5 to 1.6 for optimal readability2. Keep it compact but not too tight!
Often used for grouping items common to the heading three
As a general guideline, aim for a line height (line spacing) of around 1.5 to 1.6 for optimal readability2. Keep it compact but not too tight!
Often easier to find in page than a bulleted list
As a general guideline, aim for a line height (line spacing) of around 1.5 to 1.6 for optimal readability2. Keep it compact but not too tight!
A heading two with an underline
As a general guideline, aim for a line height (line spacing) of around 1.5 to 1.6 for optimal readability2. Keep it compact but not too tight!
Vertical rhythm
Vertical rhythm is a concept in typography and web design that refers to the vertical spacing and alignment of text on a page.
It’s about creating a consistent pattern of spacing between lines of text, headings, images, and other elements to ensure a harmonious and visually appealing layout. This practice helps guide the reader’s eye down the page and improves readability and overall aesthetic of the content.
It typically involves setting a base line-height, which is used as a unit of measurement for vertical spacing.
In web design, achieving a responsive vertical rhythm is important because it maintains visual consistency across different devices and screen sizes.
This base line-height is then applied consistently throughout the design to create a rhythm that feels natural and balanced. The process of creating a vertical rhythm can be broken down into several steps, such as defining default font sizes, using media queries to adjust for different screen sizes, and employing a combination of margin, padding, and line-height to keep elements aligned1. It’s a technique that not only improves the design but can also enhance user experience by making content more accessible and easier to navigate.
Heading 2 in a 3 Column Cell
When it comes to web typography, the ideal line length for text typically falls within 50 to 75 characters per line, including spaces. This range is based on research showing that readers are more comfortable and can read faster when the lines of text are neither too short nor too long.
However, for desktop devices, a slightly broader range of 60 to 80 characters is also considered suitable, depending on the typeface you’re using. Remember, though, that there’s no one-size-fits-all solution; it’s essential to find a balance that works well for your specific design.
As a general guideline, aim for a line height (line spacing) of around 1.5 to 1.6 for optimal readability2. Keep it compact but not too tight!
Heading 2 in an 8 Column Cell
When it comes to web typography, the ideal line length for text typically falls within 50 to 75 characters per line, including spaces. This range is based on research showing that readers are more comfortable and can read faster when the lines of text are neither too short nor too long.
However, for desktop devices, a slightly broader range of 60 to 80 characters is also considered suitable, depending on the typeface you’re using. Remember, though, that there’s no one-size-fits-all solution; it’s essential to find a balance that works well for your specific design.
As a general guideline, aim for a line height (line spacing) of around 1.5 to 1.6 for optimal readability2. Keep it compact but not too tight!
Heading 2
When it comes to web typography, the ideal line length for text typically falls within 50 to 75 characters per line, including spaces. This range is based on research showing that readers are more comfortable and can read faster when the lines of text are neither too short nor too long.
However, for desktop devices, a slightly broader range of 60 to 80 characters is also considered suitable, depending on the typeface you’re using. Remember, though, that there’s no one-size-fits-all solution; it’s essential to find a balance that works well for your specific design.
As a general guideline, aim for a line height (line spacing) of around 1.5 to 1.6 for optimal readability2. Keep it compact but not too tight!
Heading 2
When it comes to web typography, the ideal line length for text typically falls within 50 to 75 characters per line, including spaces. This range is based on research showing that readers are more comfortable and can read faster when the lines of text are neither too short nor too long.
However, for desktop devices, a slightly broader range of 60 to 80 characters is also considered suitable, depending on the typeface you’re using. Remember, though, that there’s no one-size-fits-all solution; it’s essential to find a balance that works well for your specific design.
As a general guideline, aim for a line height (line spacing) of around 1.5 to 1.6 for optimal readability2. Keep it compact but not too tight!
Heading 2
When it comes to web typography, the ideal line length for text typically falls within 50 to 75 characters per line, including spaces. This range is based on research showing that readers are more comfortable and can read faster when the lines of text are neither too short nor too long.
However, for desktop devices, a slightly broader range of 60 to 80 characters is also considered suitable, depending on the typeface you’re using. Remember, though, that there’s no one-size-fits-all solution; it’s essential to find a balance that works well for your specific design.
As a general guideline, aim for a line height (line spacing) of around 1.5 to 1.6 for optimal readability2. Keep it compact but not too tight!
Heading Three
Heading Four
Heading Three
Heading Four
Heading Three
Heading Four
Heading Three
Heading Four
Heading Three
Heading Four
Heading Three
Heading Four
Rich Text Editor Block
This is text from an rte. You can see how paragraphs of text will be formatted, along with things like inline links and lists 2.
This is a bulleted list:
- List Item
- List Item
- List Item
- List Item
- List Item
And now a numbered list:
- List Item
- List Item
- List Item
- List Item
- List Item
RTE Heading 1
RTE Heading 2
RTE Heading 3
RTE Heading 4
RTE Heading 5
Rich Text Editor Block
This is text from an rte. You can see how paragraphs of text will be formatted, along with things like inline links and lists 2.
This is a bulleted list:
- List Item
- List Item
- List Item
- List Item
- List Item
And now a numbered list:
- List Item
- List Item
- List Item
- List Item
- List Item
RTE Heading 1
RTE Heading 2
RTE Heading 3
RTE Heading 4
RTE Heading 5
Section Colors and Styling
Sections and Grid Columns can be assigned a background color (which gets applied as a class at the section or column level) as well as general padding classes. Here are examples of the various colors and paddings.
"Primary" BG Color
Padding: Large Both
"Secondary" BG Color
Padding: Medium Both
"Luxor Gold" BG Color
Padding: Small Both
"Alice Blue" BG Color
Padding: default (none specified)
"Gray" BG Color
Padding: Medium Both
"White" BG Color
Padding: Medium Both
"Black" BG Color
Padding: Medium Both
Column Alignment Styles
Grid areas can have an Alignment option specified which will determine how to display the columns if they add up to less than full-width (12). Or if the column content is not the same height, how to align it (using Top/Middle/Bottom). Here are examples of each option.
Align Right
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ipsum augue, volutpat eu aliquam vitae, ornare ac turpis. Mauris ac maximus nibh. Etiam id mattis magna. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras vel interdum est, eu finibus diam. Cras pharetra velit mi, in congue leo congue non. Vestibulum sit amet metus at nisl consequat egestas. Pellentesque vitae pretium mi, vel sagittis dui. Quisque laoreet diam non elementum facilisis. Nullam egestas nibh id velit ultricies placerat vitae et erat. Sed arcu dui, elementum vel ligula a, porta pulvinar dolor. Curabitur id ex luctus, scelerisque erat eu, fringilla urna.
Quisque ultricies orci ut risus porta, commodo egestas dolor iaculis. Suspendisse non congue est. In faucibus arcu ac orci mollis, sit amet pulvinar leo lobortis. Sed feugiat auctor tellus, et scelerisque augue dictum eu. Nulla facilisi. Cras sollicitudin id velit vestibulum auctor.
Pellentesque pulvinar ex velit, eget vehicula velit interdum sit amet. Ut tincidunt convallis laoreet. Quisque nisl odio, sagittis quis dapibus id, congue sed neque. Suspendisse rhoncus ornare nunc et facilisis. Quisque tempor, elit vitae rhoncus fermentum, dui turpis viverra purus, aliquam suscipit felis justo at augue. Vestibulum non ligula eu arcu volutpat rhoncus in sed ante. Etiam volutpat euismod velit, sit amet pellentesque turpis.
Align Center
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ipsum augue, volutpat eu aliquam vitae, ornare ac turpis. Mauris ac maximus nibh. Etiam id mattis magna. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras vel interdum est, eu finibus diam. Cras pharetra velit mi, in congue leo congue non. Vestibulum sit amet metus at nisl consequat egestas. Pellentesque vitae pretium mi, vel sagittis dui. Quisque laoreet diam non elementum facilisis. Nullam egestas nibh id velit ultricies placerat vitae et erat. Sed arcu dui, elementum vel ligula a, porta pulvinar dolor. Curabitur id ex luctus, scelerisque erat eu, fringilla urna.
Quisque ultricies orci ut risus porta, commodo egestas dolor iaculis. Suspendisse non congue est. In faucibus arcu ac orci mollis, sit amet pulvinar leo lobortis. Sed feugiat auctor tellus, et scelerisque augue dictum eu. Nulla facilisi. Cras sollicitudin id velit vestibulum auctor.
Pellentesque pulvinar ex velit, eget vehicula velit interdum sit amet. Ut tincidunt convallis laoreet. Quisque nisl odio, sagittis quis dapibus id, congue sed neque. Suspendisse rhoncus ornare nunc et facilisis. Quisque tempor, elit vitae rhoncus fermentum, dui turpis viverra purus, aliquam suscipit felis justo at augue. Vestibulum non ligula eu arcu volutpat rhoncus in sed ante. Etiam volutpat euismod velit, sit amet pellentesque turpis.
Align To Outside Edges
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ipsum augue, volutpat eu aliquam vitae, ornare ac turpis. Mauris ac maximus nibh. Etiam id mattis magna. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras vel interdum est, eu finibus diam. Cras pharetra velit mi, in congue leo congue non. Vestibulum sit amet metus at nisl consequat egestas. Pellentesque vitae pretium mi, vel sagittis dui. Quisque laoreet diam non elementum facilisis. Nullam egestas nibh id velit ultricies placerat vitae et erat. Sed arcu dui, elementum vel ligula a, porta pulvinar dolor. Curabitur id ex luctus, scelerisque erat eu, fringilla urna.
Quisque ultricies orci ut risus porta, commodo egestas dolor iaculis. Suspendisse non congue est. In faucibus arcu ac orci mollis, sit amet pulvinar leo lobortis. Sed feugiat auctor tellus, et scelerisque augue dictum eu. Nulla facilisi. Cras sollicitudin id velit vestibulum auctor.
Pellentesque pulvinar ex velit, eget vehicula velit interdum sit amet. Ut tincidunt convallis laoreet. Quisque nisl odio, sagittis quis dapibus id, congue sed neque. Suspendisse rhoncus ornare nunc et facilisis. Quisque tempor, elit vitae rhoncus fermentum, dui turpis viverra purus, aliquam suscipit felis justo at augue. Vestibulum non ligula eu arcu volutpat rhoncus in sed ante. Etiam volutpat euismod velit, sit amet pellentesque turpis.
Align Evenly Spaced
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ipsum augue, volutpat eu aliquam vitae, ornare ac turpis. Mauris ac maximus nibh. Etiam id mattis magna. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras vel interdum est, eu finibus diam. Cras pharetra velit mi, in congue leo congue non. Vestibulum sit amet metus at nisl consequat egestas. Pellentesque vitae pretium mi, vel sagittis dui. Quisque laoreet diam non elementum facilisis. Nullam egestas nibh id velit ultricies placerat vitae et erat. Sed arcu dui, elementum vel ligula a, porta pulvinar dolor. Curabitur id ex luctus, scelerisque erat eu, fringilla urna.
Quisque ultricies orci ut risus porta, commodo egestas dolor iaculis. Suspendisse non congue est. In faucibus arcu ac orci mollis, sit amet pulvinar leo lobortis. Sed feugiat auctor tellus, et scelerisque augue dictum eu. Nulla facilisi. Cras sollicitudin id velit vestibulum auctor.
Pellentesque pulvinar ex velit, eget vehicula velit interdum sit amet. Ut tincidunt convallis laoreet. Quisque nisl odio, sagittis quis dapibus id, congue sed neque. Suspendisse rhoncus ornare nunc et facilisis. Quisque tempor, elit vitae rhoncus fermentum, dui turpis viverra purus, aliquam suscipit felis justo at augue. Vestibulum non ligula eu arcu volutpat rhoncus in sed ante. Etiam volutpat euismod velit, sit amet pellentesque turpis.
Align To Top
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ipsum augue, volutpat eu aliquam vitae, ornare ac turpis. Mauris ac maximus nibh. Etiam id mattis magna. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras vel interdum est, eu finibus diam. Cras pharetra velit mi, in congue leo congue non. Vestibulum sit amet metus at nisl consequat egestas. Pellentesque vitae pretium mi, vel sagittis dui. Quisque laoreet diam non elementum facilisis. Nullam egestas nibh id velit ultricies placerat vitae et erat. Sed arcu dui, elementum vel ligula a, porta pulvinar dolor. Curabitur id ex luctus, scelerisque erat eu, fringilla urna.
Quisque ultricies orci ut risus porta, commodo egestas dolor iaculis. Suspendisse non congue est. In faucibus arcu ac orci mollis, sit amet pulvinar leo lobortis. Sed feugiat auctor tellus, et scelerisque augue dictum eu. Nulla facilisi. Cras sollicitudin id velit vestibulum auctor.
Align To Middle
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ipsum augue, volutpat eu aliquam vitae, ornare ac turpis. Mauris ac maximus nibh. Etiam id mattis magna. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras vel interdum est, eu finibus diam. Cras pharetra velit mi, in congue leo congue non. Vestibulum sit amet metus at nisl consequat egestas. Pellentesque vitae pretium mi, vel sagittis dui. Quisque laoreet diam non elementum facilisis. Nullam egestas nibh id velit ultricies placerat vitae et erat. Sed arcu dui, elementum vel ligula a, porta pulvinar dolor. Curabitur id ex luctus, scelerisque erat eu, fringilla urna.
Quisque ultricies orci ut risus porta, commodo egestas dolor iaculis. Suspendisse non congue est. In faucibus arcu ac orci mollis, sit amet pulvinar leo lobortis. Sed feugiat auctor tellus, et scelerisque augue dictum eu. Nulla facilisi. Cras sollicitudin id velit vestibulum auctor.
Align To Bottom
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ipsum augue, volutpat eu aliquam vitae, ornare ac turpis. Mauris ac maximus nibh. Etiam id mattis magna. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras vel interdum est, eu finibus diam. Cras pharetra velit mi, in congue leo congue non. Vestibulum sit amet metus at nisl consequat egestas. Pellentesque vitae pretium mi, vel sagittis dui. Quisque laoreet diam non elementum facilisis. Nullam egestas nibh id velit ultricies placerat vitae et erat. Sed arcu dui, elementum vel ligula a, porta pulvinar dolor. Curabitur id ex luctus, scelerisque erat eu, fringilla urna.
Quisque ultricies orci ut risus porta, commodo egestas dolor iaculis. Suspendisse non congue est. In faucibus arcu ac orci mollis, sit amet pulvinar leo lobortis. Sed feugiat auctor tellus, et scelerisque augue dictum eu. Nulla facilisi. Cras sollicitudin id velit vestibulum auctor.
Examples of Header Block
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading (strong)Heading 2
With Subheader Text
Cards
Card which uses a Content Node
Sprott Gold Equity Fund
Sprott Gold Equity Fund seeks to provide long-term capital appreciation by investing at least 80% of its net assets, plus borrowings for investment purposes, in gold and other precious metals and securities of companies located throughout the world that are engaged in mining or processing gold.
Card with provided content
A Card of Interesting Stuff
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ac nisl suscipit, semper purus nec, varius orci. Praesent mi nunc, aliquam ut lorem eget, viverra convallis nisi. Nam finibus felis vitae maximus maximus. Sed eget ipsum pellentesque, vehicula quam id, tristique ex. Nunc vehicula diam at sapien vestibulum volutpat. Morbi id turpis elit. In vitae dolor ac libero volutpat consectetur. Aliquam neque tellus, tristique quis bibendum in, placerat quis risus. Cras tempus, mi non vestibulum luctus, mauris sapien ullamcorper nulla, in facilisis eros neque vitae sapien. Ut porta dignissim magna, laoreet porttitor ante molestie sit amet. Sed volutpat pulvinar odio ultrices euismod. Aliquam erat volutpat.