This is your style guide that will be customized with your brand identity and the other design elements you approve. Read more about headers in our blog post about guidelines for content structure.

Heading 1: The Most Important Information 

Headers are important factors for search engine optimization (SEO).

Heading 1 (H1) can be similar to your Page Title and indicates what your page is about. Usually it is the title of your blog post, article, or the target keyword of the page. Only use one H1 heading. 

Use other headers (H2-H6) can be used to structure the page content to help the algorithms understand the page's structure and help you organize your content. 

H2: Continue to structure your content as needed with headers. 

Do not skip numbers. That is, don't go from H1 to H4. Use the Headers in sequence. 

H3: Include a keyword in headers

H4: Contact us at LRS for help structuring your content

H5: This is a Header
H6: This is a Header

Images

Lorem Ipsum Dolor Sit Amet
Lorem ipsum dolor sit amet

Images are just as important than text when it comes to your website. Images can be the difference between a fast loading site and one that drives your users away. Read our blog post about how to optimize images. It includes a video for LRS Antilles users about how to upload photos. Happy images = happy website = happy users.

Block Quote

Block quotes give distinction and draw attention to quotes, facts, and statistics you want the reader to notice. Choose these carefully and don't overuse them. Keywords included always help. 

Use keywords in block quotes.


Bullets: Unordered List

Bullets are a popular way to create content. People can read items in a bulleted or numbered list more easily than in long paragraphs. More people are skimming, rather than reading web pages. Bulleted lists are a good way to simplify your content, avoid writing long paragraphs of text and keep readers skimming. One study found that using bullets increased reader attention by 15%. 

  • Bulleted List Item One. 
  • Bulleted List Item Two. 
  • Bulleted List Item Two. 
  • Bulleted List Item Three. 

Numbers: Ordered List

Ordered lists are simply numbered lists. They are good to outline processes. (Google also loves to use ordered lists as featured snippets!)

  1. Bulleted List Item One. 
  2. Bulleted List Item Two. 
    1. Bulleted List Item Two. 
  3. Bulleted List Item Three.

Table

Tables are still usable for websites, but better options exist to present content. If you plan on using a lot of tables in your site, talk to our web developers about possible other options.

Heading 1 Heading 2 Heading 3 Heading 4
Cell Content Cell Content Cell Content Cell Content
Cell Content Cell Content Cell Content Cell Content
Cell Content Cell Content Cell Content Cell Content

Tabs

     

Tab 1

Tabs are another way to design and organize your content. It can help readability when you're writing long-form content.

Tab 2

Peek-a-boo!

Tab 3

Readers like to use tabs to interact with your content and have some control over when they see the content. 

Tab 4

Tabs are good to use to online steps in a process, such as applying for a job.


Accordions

Accordion 1

Another option to design and organize content is by using accordions. Watch this 1-minute video to see how to create accordions.

Accordion 2

Accordions can help prevent the page looking like long walls of text, which can frustrate your website visitor.

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.

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.

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.

Accordion 3

Accordions can provide a good user experience by giving them control over when they consume the content and are a good option when you have to explain a process, procedure or product with several paragraphs of words.

Two Column

Columns are yet another way to organize content and give your user a visual separation to compare or contrast a product.

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.

Form Styles




Modals

Modals are those smaller panels that automatically pop up on a webpage. Read this blog post about how to create modals.

What does a Modal look like?