Web Style Guide

First tab

Second tab

Third tab

Content of 1st tab

Content of 2nd tab

Content of 3rd tab

First tab

Content of 1st accordion tab

Second tab

Content of 2nd accordion tab

Third tab

Content of 3rd accordion tab

Introduction

Here's a glimpse at some major elements of our pattern library that, with the exception of site navigation. You'll also find dimensions for images used around the site, as well as examples of our variuos page templates and promo sections.

To view the mobile version of any page simply add ?mobile=1 to the end of a URL, while ?mobile=0 will revert the page back to the desktop view

Typography

Header 1

Header 2

Header 3

Header 4

Header 5

Paragraph

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Etiam porta sem malesuada magna mollis euismod. Sed posuere consectetur est at lobortis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis risus eget urna mollis ornare vel eu leo. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nullam quis risus eget urna mollis ornare vel eu leo.

Buttons

Button   Big-Button

Lists

Ordered List

  1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio porro vero ipsa ab, eveniet. Amet ad quas officiis fugit facere quasi suscipit consequatur quae. Nam beatae voluptas sapiente quam ipsum!
  2. Recusandae, sapiente in molestiae consequuntur delectus, eum maiores laboriosam assumenda nostrum quisquam accusantium repellendus. Soluta non nam repellendus quas necessitatibus expedita quasi quos vel iste, recusandae id. Neque, deserunt, cumque!
  3. Perferendis fuga dicta incidunt vero rem sit magni, ea ipsa laborum vel error quasi cupiditate ad ipsum totam dignissimos. Voluptates nam ipsum quaerat magnam officiis, ab delectus, aspernatur laborum nesciunt.
  4. Suscipit voluptates, pariatur nemo officia, maiores dignissimos harum nulla error iste aliquid repudiandae. Suscipit temporibus culpa, cupiditate omnis maiores molestiae, reiciendis sint accusamus eos veritatis hic. Iure debitis, expedita sapiente.
  5. Pariatur excepturi nobis debitis omnis voluptatibus adipisci quas eaque. Vel consequuntur architecto veritatis? Non nihil vel voluptatem saepe, natus omnis quibusdam harum quae, ducimus, animi in facere dolorem, mollitia quos?

Unordered List

  • Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum ipsum deserunt ut quo distinctio odio aut, nam tempora totam error eaque at animi, iure rem quasi saepe voluptas obcaecati quidem.
  • Odit dolor accusamus rem, veniam, deserunt assumenda ipsum explicabo cumque repellendus corrupti ex. Nemo provident nihil, quidem quam cum laboriosam maxime recusandae hic error illo mollitia dolorem aliquid exercitationem ab.
  • Quis et doloribus unde tempora tenetur sed perferendis similique aspernatur incidunt ex veritatis, deleniti recusandae molestiae necessitatibus! Nesciunt, voluptas, unde vel, aut molestias earum vero maiores esse neque corrupti iusto.
  • Expedita praesentium ex assumenda obcaecati repellendus, voluptates, illo ab odit! Quam, provident, dolorem, blanditiis minus animi saepe maiores atque harum ipsa quo facere recusandae possimus totam, dolor. Magnam, natus, voluptatibus.
  • Voluptas molestiae quas sequi laborum, cupiditate, repellat ex minima velit sapiente quisquam eveniet alias excepturi aut mollitia ducimus voluptatibus similique qui. Debitis totam porro minus. Asperiores saepe nulla, alias veniam.

Accordions, Tables, Tabs & More!

Accordion

Purus Condimentum Ornare Egestas Fringilla

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem facilis, incidunt veritatis ipsum nulla deleniti esse eius dolorem, inventore ex maxime sapiente hic dolores, recusandae nam temporibus rerum non excepturi?


Tables with Alternating Shaded Row

One Two
Three Four
Five Six

Tables with Black Header

Column1 Column2 Column3 Column4 Column5
FPO Image

Heading

Text

  • List1
  • List2
  • List3
Content2 Content3 Content4 Button
Button

Tabs

VisibleText1

VisibleText2


Tabs Plus Accordions

Item1

HiddenText


Item2

HiddenText

Item1

HiddenText


Item2

HiddenText


Tabs Plus Thumbnails

Example

Item1

VisibleText

HiddenText


Item2

VisibleText

HiddenText

Item3

VisibleText

HiddenText


Item4

VisibleText

HiddenText


Tabs Plus Accordions with Thumbnails and Reviews

Example

Item1

VisibleText

HiddenText

4105392000

Learn More


Item2

VisibleText

HiddenText

4105392000

Learn More

Item3

VisibleText

HiddenText

4105392000

Learn More


Item4

VisibleText

HiddenText

4105392000

Learn More


Lightbox

Example


Horizontal Rule


Promos

Homepage

Found on the desktop homepage.

See Example

Right Rail

Used on most page templates.

See Example

Middle Rail

Used on Landing Page template

See Example

Mobile Home

This is section does not pull from promos on the desktop homepage. We manually populate this section with content.

See Example

Mobile Interior Page

Located after the body content of pages on the mobile site, these promos use the same content that populates the promo sections of the desktop pages.

See Example

Image Dimensions

Homepage Header

Interior Page Header/Slider

Calendar Header

Promo

Thumbnails

Animal Explore

Animal Slide

Blog Feature

Blog Thumbnail

Mobile Header

Page Templates

Homepage

The desktop version of the homepage.

See Example

Content

General purpose interior page

See Example

Landing

Typically a page composed entirely of promos, that then leads to a related child pages

See Example

Animal Explore

A landing page specifically for our animals.

See Example

Animal Item

Feature pages to showcase our animals.

See Example

Exhibit Item

Feature pages to showcase our exhibits. The "Animals in This Exhibit" section content is populated automatically.

See Example

Blog Home

The "Featured Story" and "Recent" images are manually set on each post in Sitecore.

See Example

Blog Post

See Example

Calendar

See Example

Calendar Item

See Example

Mobile Home

See Example

Mobile Interior Page

See Example

Mobile Blog Home

See Example

Mobile Blog Post

See Example

Tickets Landing

Siriusware page

See Example

Membership

Siriusware page

See Example

Form Elements



This is an example title of a form

Fields with an asterisk (*) are required.



This is an example of how help text displays below a label.


*



This is an example of alert / error text.



This is an example of how help text displays below a label.

This is an example of alert / error text.










Option 1
Option 2
Option 3


Option 1
Option 2
Option 3