CSS Styles Showcase Page
The intent of this CSS Styles Showcase page is to demonstrate all the possible text, image, and other widget styles for this website. In Elementor, these settings can be found in Site Settings -> Global Fonts and Site Settings -> Global Colors and CSS customizations that can’t be covered in either of those places should be set in Site Settings -> Custom CSS.
Certain key text types can be logically grouped. For example, a Services H1 text followed by some Services H2 text show how they will typically be stacked and spaced on a Services page. Line dividers are also used to clearly separate the various styles. Particularly pesky CSS styles like bulleted lists within paragraph text and image caption text should also be demonstrated.
Standard Header Tag Styles
This section is meant to demonstrate dark-on-light background header tags, as well as light-on-dark background header tags. Most designs will use both types at various spots to break up long pages.
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Body Text 16px
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Body Text 16px
Special Header Tag Style
The following header tags are “special” because they are used purposefully on landing pages for a variety of reasons. On the Health Analytics website, “About H1” tags are used on all Services pages as search engine food, while the About H2 is the line that humans will tend to absorb first. Similarly, we have a Learning H1 and a Learning H2. The learning content is typically more verbose, so we needed smaller fonts.
HEADING 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Body Text 18px
HEADING 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Body Text 18px
This is regular body text. This is bold body text. Here’s a body text hyperlink. This shows what text looks like after a paragraph break.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur rutrum blandit urna, quis ultrices turpis venenatis eget. Vestibulum in ullamcorper enim. Maecenas convallis diam nec odio laoreet, ut ornare arcu porta. Morbi sagittis leo eget feugiat ultrices. Praesent interdum ex felis, ut semper metus fringilla ut.
Here is a demonstration of how body text should wrap around a photo inserted into the body text.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur rutrum blandit urna, quis ultrices turpis venenatis eget.
Vestibulum in ullamcorper enim. Maecenas convallis diam nec odio laoreet, ut ornare arcu porta. Morbi sagittis leo eget feugiat ultrices. Praesent interdum ex felis, ut semper metus fringilla ut.
This looks pretty good, though the caption on the image can sometimes really mess things up.
Here’s some more text to show the following lines: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur rutrum blandit urna, quis ultrices turpis venenatis eget. Vestibulum in ullamcorper enim. Maecenas convallis diam nec odio laoreet, ut ornare arcu porta. Morbi sagittis leo eget feugiat ultrices. Praesent interdum ex felis, ut semper metus fringilla ut. Vestibulum in ullamcorper enim. Maecenas convallis diam nec odio laoreet, ut ornare arcu porta. Morbi sagittis leo eget feugiat ultrices. Praesent interdum ex felis, ut semper metus fringilla ut. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur rutrum blandit urna, quis ultrices turpis venenatis eget. Vestibulum in ullamcorper enim. Maecenas convallis diam nec odio laoreet, ut ornare arcu porta. Morbi sagittis leo eget feugiat ultrices. Praesent interdum ex felis, ut semper metus fringilla ut.
- Vestibulum in ullamcorper enim. Maecenas convallis diam nec odio laoreet
- Lorem ipsum dolor sit amet, consectetur adipiscing elit
- Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo
Lines that stretch all the way across the page, like these lines, should never be allowed. The best rule of thumb is to have between 70-80 characters max in width, or it’s just too hard for most people to read. Mobile devices have made this problem worse on desktop because they discourage column layouts; everything is simply best put in a single column on mobile.
H1 SUB-PAGE HEADING
Sub-Page Hero Section
In Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Featured image
Google Ads.
Image Style
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus nec ullamcorper mattis, pulvinar dapibus leo.luctus nec ullamcorper mattis, pulvinar dapibus leo.
News post Title H1
