What is your style guide?

Welcome to your Style Guide!

Here you will find information that may help you continue building your content on both pages and posts. This tool helps you create consistency across your website, building brand awareness and integrity. You will also find accessibility best-practice notes throughout the guide.

The block elements include:

Paragraph
Heading
List
Quote
Buttons
Accordion
Separator
Spacer
Image
Image Gallery
Call to Action
Table
Read More
Post and Pages Grid
Advanced Columns
Container
Cover
Layouts
Classic Editor
Code
Custom HTML
Shortcode
Forms
Yoast
Video
Embeds:
- YouTube
- Vimeo
- TED
- Twitter
- Facebook
- Instagram
- TikTok

Headings and Body Copy

Using headings throughout your page/post helps to create visual hierarchy. Breaking the content this way can enhance its readability. It also allows those using screen readers or other assistive technologies to navigate a website more easily.

Tips for Content Best Practice:

Do NOT use a Level 1 heading. These are to be used ONCE on a page/post as your page/post title. This is automatically done by WordPress when you create a page/post.
All pages/posts should have a Level 2 heading towards the top of the page/post. If you implement more headings, you’ll want to go in number order – Level 2 > Level 3 > Level 4. If you need to go back up to Level 2 to start a new section of content, you’ll need to “waterfall” your way back down in order.
- This not only helps with accessibility and screen readers, but also with AI and SEO.
Headings should be short, descriptive, and scannable. Body copy should not be styled to look like headings.

Here’s what your headings look like:

They are all prestyled, so you do not have to remember font sizes or color codes.

Level 2 Heading

Level 3 Heading

Level 4 Heading

Level 5 Heading

Level 6 Heading

Your content can include anything you want to share with your readers about your company, products or services. Be sure to make it engaging as you want people to continue to explore your website.

With your basic paragraph text, you can make words: bold, italic, and bold and italic. Do not use an underline, as this is specific to how your links are styled.

The fonts used on your website are: Open Sans (sans serif) and Caveat (script). These can both be downloaded for free from Google Fonts.

Buttons

Use buttons to make a link stand out from the rest of the content. The same rules for regular text links apply to buttons.

Solid Button

Outline Button

Ordered Lists

Vestibulum in mauris semper tortor interdum ultrices.
- Vestibulum in mauris semper tortor interdum ultrices.
- Sed vel lorem et justo laoreet bibendum. Donec dictum.
Etiam massa libero, lacinia at, commodo in, tincidunt a, purus.
Aenean eu libero nec lectus ultricies laoreet. Donec rutrum, nisi vel egestas ultrices, ipsum urna sagittis libero, vitae vestibulum dui dolor vel velit.

Unordered Lists

Vestibulum in mauris semper tortor interdum ultrices.
1. Vestibulum in mauris semper tortor interdum ultrices.
2. Sed vel lorem et justo laoreet bibendum. Donec dictum.
Etiam massa libero, lacinia at, commodo in, tincidunt a, purus.
Aenean eu libero nec lectus ultricies laoreet. Donec rutrum, nisi vel egestas ultrices, ipsum urna sagittis libero, vitae vestibulum dui dolor vel velit.

Your Colors

Use these colors to maintain branding consistency across your website and marketing materials. Your colors are currently configured to meet accessibility standards. Please be aware of how your text colors look when adding them on top of backgrounds or images. For more detailed information on which combinations pass, please reach out to your Account Director.

#fff

#000

Image Alt Text

Cozy dusk bookshop with a glowing chat icon overlay, surrounded by digital network effects. — This is a caption for this image. It can describe who or what is going on in it.

Whenever you are adding new images to your website, it is recommended that you add alt text. This is useful in a few ways: screen readers read the alt text as a description to users, alt text loads if an image can’t be displayed for some reason, and it can also help with AI and SEO.

Uploading an image directly to the Media Library and adding alt text there will carry that alt text over to any page or post you add that image to.
Uploading an image to a specific page/post will only have that alt text on that page/post. It will not carry over if you decide to add it elsewhere on your website.

You can also add captions to your images. This is a great way to add any additional descriptions or notes about the image.

Tips for Alt Text Best Practices:

A goal character count is roughly 120 characters.
Avoid starting your alt text with phrases such as “Image of…” or “Photo of…” This creates unneeded redundancy.
If your image is a decorative element, such as an icon or divider line, you can manually set the alt text to “”.
If an image contains text, it is best practice to include it in your alt text.
Logos should be the business name instead of a detailed description.

Accordions

Only use this if you are okay with the visitor not seeing this information unless they click on it. Suggested uses could include providing employee information if you have a large team, long paragraphs of directions or extra information about a service or product.

Vimm Accordion Block

Text in accordion. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Vimm Accordion Block

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

FAQs

If you plan to include Frequently Asked Questions (FAQs) on your site, use the Yoast FAQ block. This is specifically set up for SEO and AI to help your content be found easily.

Frequently Asked Questions

Block Quote

Use a block quote to pull out stats or important statements.

This is an example of a blockquote. Put a quote or small phrase you want your viewer to see. It’s an easy way to catch your reader’s attention.
Name, Company Title, Company Name

Table

Sometimes content just needs a table to organize its information. Keep in mind that tables aren’t ideal for accessibility as many users may encounter issues tabbing through the table in the correct order. If possible, keep tables to a minimum.

Column Title	Number	Title	Title
Text Here	25	No	x
Text	3	No	x
Longer Text Here	54	Yes
Longer Text Here Longer Text Here Longer Text Here	10	No	x

Example Data Table

Cover Image

Take an image, make it full-width, add a color overlay and text on top to highlight information on your site.

Please keep color contrast and accessibility in mind when using this block.

A person wearing a plaid shirt and black apron uses a tablet, tapping the screen with one finger. The background is blurred, suggesting an indoor or shop setting.

Highlight stats or information here.

Call To Action (CTA)

If you need another bold CTA, this block is available. Use with caution, as too many CTAs on a page can be overwhelming for visitors.

Add Your Title

And your CTA text in this area.

Button Text

Forms

Tips for Forms Best Practice:

Use a “ghost email” such as [email protected] for the “From email” and the “Reply to” fields. This prevents notifications from being stuck and not delivered.
If you have required fields, use the word “Required” and not an * symbol. This can be done in the Form Settings.
Add a short description above your form so users know what they are filling out and why.

Author Block

Adding an author to a post helps with AEO and gives authority to the content.

When the author block is added to your post, it will automatically default to the user who created the post. To change this, you need to change it in the post details. See the Post tab > Author.