This is a style guide for the owners/editors of Island Joe. This will help explain some layout and styling rules for the site to maintain visual consistency.
For a style guide for Island Joe’s print marketing materials click here to download.
Heading Styles:
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Text styles:
Bold: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus semper aliquet turpis, ut auctor enim. Praesent a bibendum mi. Aenean imperdiet gravida justo, quis scelerisque dui consequat at.
Italic: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus semper aliquet turpis, ut auctor enim. Praesent a bibendum mi. Aenean imperdiet gravida justo, quis scelerisque dui consequat at.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus semper aliquet turpis, ut auctor enim. Praesent a bibendum mi. Aenean imperdiet gravida justo, quis scelerisque dui consequat at.
Underline: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus semper aliquet turpis, ut auctor enim. Praesent a bibendum mi. Aenean imperdiet gravida justo, quis scelerisque dui consequat at.
Small tag applied: This text has the small tag applied.
Paragraph styles:
Left Aligned:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus semper aliquet turpis, ut auctor enim. Praesent a bibendum mi. Aenean imperdiet gravida justo, quis scelerisque dui consequat at.
Right Aligned:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus semper aliquet turpis, ut auctor enim. Praesent a bibendum mi. Aenean imperdiet gravida justo, quis scelerisque dui consequat at.
Justified
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus semper aliquet turpis, ut auctor enim. Praesent a bibendum mi. Aenean imperdiet gravida justo, quis scelerisque dui consequat at.
Centered:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus semper aliquet turpis, ut auctor enim. Praesent a bibendum mi. Aenean imperdiet gravida justo, quis scelerisque dui consequat at.
Image Styles:
Aligned Left:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus semper aliquet turpis, ut auctor enim. Praesent a bibendum mi. Aenean imperdiet gravida justo, quis scelerisque dui consequat at. Suspendisse et magna ac est dignissim ultrices eu quis eros. Aenean imperdiet gravida justo, quis scelerisque dui consequat at. Suspendisse et magna ac est dignissim ultrices eu quis eros. Aenean imperdiet gravida justo, quis scelerisque dui consequat at. Suspendisse et magna ac est dignissim ultrices eu quis eros.
Aligned Right:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus semper aliquet turpis, ut auctor enim. Praesent a bibendum mi. Aenean imperdiet gravida justo, quis scelerisque dui consequat at. Suspendisse et magna ac est dignissim ultrices eu quis eros. Aenean imperdiet gravida justo, quis scelerisque dui consequat at. Suspendisse et magna ac est dignissim ultrices eu quis eros. Aenean imperdiet gravida justo, quis scelerisque dui consequat at. Suspendisse et magna ac est dignissim ultrices eu quis eros.
Not Aligned:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus semper aliquet turpis, ut auctor enim. Praesent a bibendum mi. Aenean imperdiet gravida justo, quis scelerisque dui consequat at. Suspendisse et magna ac est dignissim ultrices eu quis eros. Aenean imperdiet gravida justo, quis scelerisque dui consequat at. Suspendisse et magna ac est dignissim ultrices eu quis eros. Aenean imperdiet gravida justo, quis scelerisque dui consequat at. Suspendisse et magna ac est dignissim ultrices eu quis eros.
Centered:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus semper aliquet turpis, ut auctor enim. Praesent a bibendum mi. Aenean imperdiet gravida justo, quis scelerisque dui consequat at. Suspendisse et magna ac est dignissim ultrices eu quis eros. Aenean imperdiet gravida justo, quis scelerisque dui consequat at. Suspendisse et magna ac est dignissim ultrices eu quis eros. Aenean imperdiet gravida justo, quis scelerisque dui consequat at. Suspendisse et magna ac est dignissim ultrices eu quis eros.
List styles:
Unordered list:
- Lorem ipsum dolor sit amet,
- consectetur adipiscing elit.
- Phasellus semper aliquet turpis
- consectetur adipiscing elit.
- Phasellus semper aliquet turpis
- ut auctor enim.
Ordered list:
- Lorem ipsum dolor sit amet,
- consectetur adipiscing elit.
- Phasellus semper aliquet turpis
- consectetur adipiscing elit.
- Phasellus semper aliquet turpis
- ut auctor enim.
Miscellaneous Styles:
Intro paragraph style applied:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus semper aliquet turpis, ut auctor enim. Praesent a bibendum mi. Aenean imperdiet gravida justo, quis scelerisque dui consequat at. Suspendisse et magna ac est dignissim ultrices eu quis eros.
HTML used (Text view in the WordPress page editor):
<p class=”intro”>Intro paragraph style applied: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus semper aliquet turpis, ut auctor enim. Praesent a bibendum mi. Aenean imperdiet gravida justo, quis scelerisque dui consequat at. Suspendisse et magna ac est dignissim ultrices eu quis eros.</p>
This is a link with the “more-link” class applied to it:
HTML used (Text view in the WordPress page editor):
<a href=”#” class=”more-link”>Learn more >></a>
Multi-Column Layout
Two Column:
Title
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Three Column:
Title
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Title
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.