Style

A style guide serves to catalog the total of all decisions related to one’s preferred approaches to writing and webpage construction. Its utility is determined by its ability to simply communicate these conventions — and the logic behind them — among the members of a team. A resource of such complexity requires maintenance and should continue to evolve.

This page includes a wide range of common web elements. The descriptions provide some guidance on how best to utilize those components and the tags and associated classes.

Sections

• Lists
• Blockquotes
• Tables
• Calls to action
• Headings
• Images
• Cards
• Posts
• Colors
• Endgraphs

Paragraphs

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turpis nunc eget lorem dolor sed viverra ipsum nunc. Facilisis magna etiam tempor orci eu. Pulvinar mattis nunc sed blandit.

Blandit massa enim nec dui nunc. Varius duis at consectetur lorem donec massa sapien faucibus. Vel elit scelerisque mauris pellentesque pulvinar. Penatibus et magnis dis parturient montes nascetur ridiculus mus mauris. Turpis egestas sed tempus urna et pharetra. Sem fringilla ut morbi tincidunt augue interdum velit euismod. Hendrerit dolor magna eget est lorem ipsum dolor sit amet. Non odio euismod lacinia at quis risus sed.

Statement class. Neque gravida in fermentum et sollicitudin ac orci phasellus egestas augue lacus. Viverra orci phasellus egestas felis.

Vivamus arcu felis bibendum ut. Sed viverra ipsum nunc aliquet bibendum enim facilisis. A diam maecenas sed enim ut sem viverra aliquet eget. Hendrerit dolor magna eget est lorem ipsum dolor. Varius duis at consectetur lorem donec massa sapien faucibus. Lacinia at quis risus sed vulputate odio ut enim blandit. Sollicitudin ac orci phasellus egestas tellus rutrum tellus. Sem integer vitae justo eget magna fermentum iaculis eu non. Sollicitudin tempor id eu nisl. Etiam non quam lacus suspendisse faucibus. A lacus vestibulum sed arcu non odio euismod lacinia.

Viverra mauris in aliquam sem fringilla ut. Amet nisl purus in mollis nunc. Ullamcorper malesuada proin libero nunc consequat interdum varius. Ac orci phasellus egestas tellus rutrum tellus pellentesque eu. In est ante in nibh mauris cursus mattis. Pretium viverra suspendisse potenti nullam ac tortor vitae. Iaculis at erat pellentesque adipiscing commodo. Elit scelerisque mauris pellentesque pulvinar. Non curabitur gravida arcu ac tortor dignissim convallis aenean. Praesent semper feugiat nibh sed pulvinar.

Lists

Unordered Lists

Lists are commonly used on websites. They convey information to a reader more quickly than lists in sentence structure. If ease of use is most important, rather than quality of prose, consider a bulleted unordered list.

• List
• One
• Two
• Three

The bullets demarcating each list item can be adjusted. The most common are disc and circle. Also be sure to consider what type of padding and margins you want for your lists, as browsers often have default settings that are different than heading and paragraph texts.

If you have some complexity or hierarchy to your lists, you may want to determine how you establish sections and headings.

Subheading (h6)

• List
• Two
• Three

Subheading (p italic)

• List
• Two
• Three

Ordered Lists

Ordered lists include a number before each item. Only use them if the order is of critical importance, such as for steps in a process. It’s recommended to style unordered and ordered lists the same, but you may have reason to deviate if your list items include images or if they include a great deal of text and you want to accentuate the different steps.

1. List
2. One
3. Two
4. Three

Blockquotes

The blockquote is an interesting content type. If you decide to use it, be sure to clearly define when it can be used. Its visual presentation should also be sufficiently different from basic paragraph text. Indents and secondary colors are often used to highlight these special types of information.

So, this is what the fuss is about. And traditionally its used for blocks of sufficient size, although, not always. But those are style rules, parameters per se, that you should determine. Blockquotes don’t require citations, but sometimes it’ll be necessary and it can also be styled specifically.

Blockquote attribution, affiliation

So, this is what the fuss is about. And traditionally its used for blocks of sufficient size, although, not always. But those are style rules, parameters per se, that you should determine. Blockquotes don’t require citations, but sometimes it’ll be necessary and it can also be styled specifically.

Blockquotes don’t require citations, but sometimes it’ll be necessary and it can also be styled specifically. So, this is what the fuss is about. And traditionally its used for blocks of sufficient size

Attribution, affiliation for the blockquote

Tables

Fusce sit amet dui ut felis tincidunt faucibus nec in tortor. Pellentesque sodales ligula et risus blandit laoreet. Donec velit nisl, varius vel arcu in, vestibulum vulputate purus.

Column Guide	Column Header
Column data	Column data
Another data	Another data

Column Guide	Column Header
Column data	Column data
Another data	Another data
If the explanation gets wordy, the fixed with may help	How does this verticalign?

Column Guide	Column Header
Column data	Column data
Another data	Another data
Third data	Third data
Fourth data	Fourth data
Footer note	Closing label

Column data	No header needed
Another data	No footer, no caption needed
Just rows	Upon rows of information

Column data	Column data	No header needed
Another data	Data again	No footer, no caption needed
Just rows	Rows again	Upon rows of information

Call to action and button

Vivamus sit amet dapibus diam. Ut scelerisque, magna at posuere lacinia, dui nisl pulvinar leo, a laoreet ipsum lorem eu est. In ut lacinia lorem. Fusce sit amet dui ut felis tincidunt faucibus nec in tortor. Pellentesque sodales ligula et risus blandit laoreet. Donec velit nisl, varius vel arcu in, vestibulum vulputate purus.

Headings (h2)

The smaller the text (h3)

The more you can comfortably write (h4)

Hypertext supports up to six heading styles, but some content management systems are offering fewer for regular use. Four headings (h1-h4) provides ample opportunity to construct the necessary hierarchy for your content sections and other headings (h5-h6) and classes can be used for special presentation formats and complex lists and schedules.

Major section (h2)

Another main section on a page should be denoted with an h2 heading. However, be sure to first assess whether or not it should be its own page.

The text that comes after an h2 should reinforce the heading above and orients the reader to the bulk of the content that come after, delineated appropriately with sections and subsections.

Subsection heading (h3)

Explanatory text may not be needed after the h2 heading, but it’s good practice to include something because there’s a good chance your anchor links will direct people to this spot on the page and it might be the first thing they encounter on your website.

This text, that’s under the h3 subsection, should have enough size if you’re going to have another h3 section immediately below. Consider other heading configurations like those below if your h3 headings are too close together.

Second subsection

The point here is that we have a heading level two (h2) and two heading threes (h3) in close proximity. The styling of each heading level must be distinct enough that you can differentiate them easily, both playing well when next to each other and still different enough when not both viewable at the same time.

Sub-subsection heading

Using the h2 + h3 configuration also works well if you need subsections to your subsections. Bold paragraph text (p, strong) is a simple approach, but if your items listed there under are lists or blocks of specialized content, then you might want to consider incorporating h5 or h6 headings.

Another Configuration

This configuration uses the heading level two (h2) and heading level four (h4). This can work well if your subsections don’t have a ton of content and you might see multiple h4 headings on the page at once — reducing heading text size and associated vertical spacing.

Smaller subsection heading (h4)

This is also a good approach if your subsection headings are relatively lengthy, such as sentences for frequently asked questions.

When do the h4 headings not look good?

The h4 heading is too close to the size of bold paragraph text, so it’s not recommended that you use if you need to have sub-subsections; use h3.

Images

This section includes images sizes and placement, but it is also a continuation of different heading hierarchy arrangements.

In in condimentum dui, quis pulvinar risus. Proin placerat mattis urna in tempus. Etiam euismod augue ac leo porta ultricies. Donec ac sapien vitae urna rutrum cursus non suscipit nibh.

Full width

Etiam scelerisque ultrices rutrum. Nunc posuere aliquam dui posuere pellentesque. Suspendisse ac nunc nisl. Duis a posuere nisl. Donec elit neque, pellentesque a tincidunt nec, egestas non mauris. Phasellus eget nulla sit amet erat hendrerit dignissim. Aenean ipsum mi, euismod in ante consectetur, pulvinar pretium sem.

Suspendisse ac nunc nisl. Duis a posuere nisl. Donec elit neque, pellentesque a tincidunt nec, egestas non mauris. Phasellus eget nulla sit amet erat hendrerit dignissim. Aenean ipsum mi, euismod in ante consectetur.

Ut iaculis condimentum venenatis. Nullam fermentum eros id tempor ullamcorper. Curabitur porttitor lorem nec sem maximus pretium. Cras elementum lacinia auctor. Phasellus dapibus nisi a diam rutrum, vestibulum vehicula lectus rhoncus. Praesent placerat dui eget cursus molestie.

Medium size, several alignments

Half width. Right align. Phasellus dapibus nisi a diam rutrum, vestibulum vehicula lectus rhoncus. Praesent placerat dui eget cursus molestie. Ut iaculis condimentum venenatis. Nullam fermentum eros id tempor ullamcorper. Curabitur porttitor lorem nec sem maximus pretium. Cras elementum lacinia auctor.

Ut iaculis condimentum venenatis. Nullam fermentum eros id tempor ullamcorper. Curabitur porttitor lorem nec sem maximus pretium. Cras elementum lacinia auctor.

Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed porttitor ligula sit amet massa placerat, eget suscipit dolor venenatis.

Half Width. Left align. Mauris porta iaculis justo sed finibus. Pellentesque congue ex ac turpis ullamcorper, at finibus nisi pulvinar. Vestibulum egestas mi vitae diam lobortis ornare. Sed sed erat vel arcu tristique euismod. Quisque pretium congue velit.

Mauris porta iaculis justo sed finibus. Pellentesque congue ex ac turpis ullamcorper, at finibus nisi pulvinar. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed porttitor ligula sit amet massa placerat, eget suscipit dolor venenatis.

Vestibulum egestas mi vitae diam lobortis ornare. Sed sed erat vel arcu tristique euismod. Quisque pretium congue velit.

Medium size. Align center. Vestibulum egestas mi vitae diam lobortis ornare. Sed sed erat vel arcu tristique euismod. Quisque pretium congue velit. Ut iaculis condimentum venenatis. Nullam fermentum eros id tempor ullamcorper. Curabitur porttitor lorem nec sem maximus pretium. Cras elementum lacinia auctor.

Phasellus dapibus nisi a diam rutrum, vestibulum vehicula lectus rhoncus. Praesent placerat dui eget cursus molestie.

Small sized images

Third size. Mauris porta iaculis justo sed finibus. Pellentesque congue ex ac turpis ullamcorper, at finibus nisi pulvinar. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed porttitor ligula sit amet massa placerat, eget suscipit dolor venenatis.

Sed sed erat vel arcu tristique euismod. Quisque pretium congue velit. Vestibulum egestas mi vitae diam lobortis ornare. Ut iaculis condimentum venenatis. Nullam fermentum eros id tempor ullamcorper. Vestibulum egestas mi vitae diam lobortis ornare. Sed sed erat vel arcu tristique euismod. Quisque pretium congue velit.

Quisque pretium congue velit. Vestibulum egestas mi vitae diam lobortis ornare. Ut iaculis condimentum venenatis. Nullam fermentum eros id tempor ullamcorper. Vestibulum egestas mi vitae diam lobortis ornare. Sed sed erat vel arcu tristique euismod. Quisque pretium congue velit.

Fourth size. Phasellus dapibus nisi a diam rutrum, vestibulum vehicula lectus rhoncus. Praesent placerat dui eget cursus molestie. Ut iaculis condimentum venenatis. Nullam fermentum eros id tempor ullamcorper. Curabitur porttitor lorem nec sem maximus pretium. Cras elementum lacinia auctor.

Sed sed erat vel arcu tristique euismod. Quisque pretium congue velit. Vestibulum egestas mi vitae diam lobortis ornare. Ut iaculis condimentum venenatis. Nullam fermentum eros id tempor ullamcorper.

Sed sed erat vel arcu tristique euismod. Quisque pretium congue velit. A egestas mi vitae diam lobortis ornare. Sed sed erat vel arcu tristique euismod. Quisque pretium congue velit.

Fifth size. Mauris porta iaculis justo sed finibus. Pellentesque congue ex ac turpis ullamcorper, at finibus nisi pulvinar. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed porttitor ligula sit amet massa placerat, eget suscipit dolor venenatis.

Ut iaculis condimentum venenatis. Nullam fermentum eros id tempor ullamcorper. Curabitur porttitor lorem nec sem maximus pretium. Cras elementum lacinia auctor. Sed sed erat vel arcu tristique euismod. Quisque pretium congue velit. Vestibulum egestas mi vitae diam lobortis ornare.

Sixth size. Phasellus dapibus nisi a diam rutrum, vestibulum vehicula lectus rhoncus. Praesent placerat dui eget cursus molestie. Ut iaculis condimentum venenatis. Nullam fermentum eros id tempor ullamcorper. Curabitur porttitor lorem nec sem maximus pretium. Cras elementum lacinia auctor.

Quisque pretium congue velit. Vestibulum egestas mi vitae diam lobortis ornare. Ut iaculis condimentum venenatis. Nullam fermentum eros id tempor ullamcorper. Vestibulum egestas mi vitae diam lobortis ornare. Sed sed erat vel arcu tristique euismod. Quisque pretium congue velit.

Cards

Basic

Event

Featured

Posts

A list of posts can be inserted to pages and posts with the Display Posts plugin and their shortcode parameters. Styling is similar to cards and has been set for image and title only. This configuration uses shortcode: display-posts tag=”homepage” image_size=”medium” wrapper=”div” wrapper_class=”display-posts”.

Colors

Primary

Secondary

Tertiary

Endgraphs

Because this is the final paragraph on the page, it needs to have a class added so there is additional space before the footer.