What is a Style Guide? (This is an H1 heading.)

The style guide is your handy-dandy reference guide to the details of your website. Our designers and developers will create a palette of colors, fonts, and styles specific to your website. 

Note the use of headers, which are an important structural element of your site. The first sentence, "What is a Style Guide" is formatted as an H1. Headers help break up the text so your content is easy to read. They also are important for good Search Engine Optimization (SEO), which helps search engines like Google understand how you organize your content. Read more about headers in our blog post about guidelines for content structure. Make your most important keyword, content or headline an H1 (usually we will do this for you.). H1s can be the same as the title of your page. 

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

H3: Just maintain the numerical order (don't skip) and include a keyword

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
This is a caption. Don't forget alternative text!

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.

Unordered List

Most people know these as a bulleted list. 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. 

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. List Item One. 
  2. 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.

Test Header Test Header
Test Test
Test Test
Test Test

Tabs

Tab 1

Content 1

Tab 2

Content 2

Tab 3

Content 3

Accordions

Accordion Title

Content

Accordion Title

Content

Accordion Title

Content

Accordion Title

Content

Two Column - Grid

Column 1

Columns 2

Two Column - Snippets

Column 1

Column 2

Form Styles



Modals

Modals are those smaller panels that automatically pop up on a webpage. 

Here's an example: One of our developers, AJ, volunteered to explain modals.  

By the way, he loves Ramen Noodles. 

How much does he love Ramen?

Read his blog post about how to create modals.