Please note:
These are the base styles from the Style Guide for Elkay.com. This page was built using bootstrap v3.3.7 and the Style Guide.

This is H1 heading

This is H2 heading

This is H3 heading

This is H4 heading

This is H5 heading

This is H6 heading

This is a paragraph.

This is a link

Text Colors

This is elkayGrayText H4

This is elkayNavyBlueText H4

This is aquaBlueText H4

This is lightYellowText H4

This is slateBlueText H4

This is lightBlueText H4

This is softGreenText H4

This is sandText H4

This is accentOrangeText H4

This is whiteText on slateBlueBG H4

This is elkayNavyBlueText H4 link

This is lightYellowText H4 link

This is accentOrangeText H4 link

This is whiteText on slateBlueBG H4 link

Text Lists

This is a standard text listing
This is a standard text listing
This is a standard text listing
This is a standard text listing
This is a standard text listing

This is a standard text listing
This is a standard text listing
This is a standard text listing
This is a standard text listing
This is a standard text listing

! For best readability, please use whiteText class for dark backgrounds and dark colors on light backgrounds. Text should be kept inside a parent container of no more than 1024px in width !

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla euismod sagittis tristique. Nulla luctus erat ut ipsum laoreet fermentum. Nulla non lorem non velit euismod vehicula. Fusce eget facilisis augue, id pellentesque nunc. Mauris congue nisi nisl, at feugiat dolor feugiat vel. Nulla facilisi. Aenean tristique dignissim quam, non viverra massa aliquam quis. Quisque congue mi id consectetur laoreet. Etiam sit amet est nibh. Phasellus iaculis leo vel ullamcorper vestibulum. Nam pretium tincidunt facilisis.

IMAGE

Background Colors

elkayGrayBG

elkayGrayBGBright

elkayGrayBGLight

elkayGrayBGDark

elkayNavyBlueBG

elkayNavyBlueBGLight

elkayNavyBlueBGDark

aquaBlueBG

aquaBlueBGLight

aquaBlueBGDark

lightYellowBG

lightYellowBGLight

lightYellowBGDark

slateBlueBG

slateBlueBGLight

slateBlueBGDark

lightBlueBG

lightBlueBGLight

lightBlueBGDark

softGreenBG

softGreenBGLight

softGreenBGDark

sandBG

sandBGLight

sandBGDark

accentOrangeBG

accentOrangeBGLight

accentOrangeBGDark

Tabs

This is catTab

This is catTabActive

Buttons

Buttons can be used with any glyph from the Bootstrap Glyphs.

Glyphs have default colors, which may be overwritten by adding one of the text color styles.

Example:

For the teal glyph:

<span class="aquaBlueText"><span class="glyphicon glyphicon-leaf"></span></span>

and on a CTA: lightBGCTA lightBGCTA
For the orange glyph:

<a href="" class="lightBGCTA">
	lightBGCTA 
	<span class="accentOrangeText"><span class="glyphicon glyphicon-leaf" aria-hidden="true"></span></span>
</a>

Standard Buttons

Tables

Bootstrap responsive tables add a scroll bar to the container so the table can be scrolled from left to right. If a table needs to change to block-display td elements, use the example below instead. Remember to ensure that the header column information is repeated for mobile view.

.responsiveTable table

Table On Light Backgrounds

This is a TH 1	This is a TH 2	This is a TH 3	This is a TH 4
Header 1 This is a TD	Header 2 This is a TD	Header 3 This is a TD	Header 4 This is a TD
Header 1 This is a TD	Header 2 This is a TD	Header 3 This is a TD	Header 4 This is a TD
Header 1 This is a TD	Header 2 This is a TD	Header 3 This is a TD	Header 4 This is a TD
Header 1 This is a TD	Header 2 This is a TD	Header 3 This is a TD	Header 4 This is a TD

Table On Dark Background

This is a TH	This is a TH	This is a TH	This is a TH
Header 1 This is a TD	Header 2 This is a TD	Header 3 This is a TD	Header 4 This is a TD
Header 1 This is a TD	Header 2 This is a TD	Header 3 This is a TD	Header 4 This is a TD
Header 1 This is a TD	Header 2 This is a TD	Header 3 This is a TD	Header 4 This is a TD
Header 1 This is a TD	Header 2 This is a TD	Header 3 This is a TD	Header 4 This is a TD

Textures

blueBGquartz

greyBGquartz

greenBGquartz

blueBGstainlessSteel

greyBGstainlessSteel

greenBGstainlessSteel

Forms

<input type="text" placeholder="Generic Form Field" class="form-input" value="">

<button class="form-button softGreenBG whiteText">GO</button>

<a href="" class="a-button elkayNavyBlueBG whiteText">GO</a>

<a href="" class="a-button elkayNavyBlueBG whiteText">GO <span class="glyphicon glyphicon-share-alt"></span></a>

<div class="relative">
	<input type="search" placeholder="SEARCH" class="form-search">
	<a href="" class="a-form-search-button softGreenBG whiteText"><span class="glyphicon glyphicon-search"></span></a>
</div>

<div class="relative">
	<input type="search" placeholder="SEARCH" class="form-search" value="">
	<a href="" class="a-form-search-button softGreenText"><span class="glyphicon glyphicon-search"></span></span></a>
</div>

Radio Button
Radio Button
Radio Button

<label class="relative form-radio"><input type="radio" value="radio 1" name="radioname"> Radio Button</label><br>
<label class="relative form-radio"><input type="radio" value="radio 2" name="radioname"> Radio Button</label><br>
<label class="relative form-radio"><input type="radio" value="radio 3" name="radioname"> Radio Button</label>

Checkbox 1
Checkbox 2
Checkbox 3

<label class="relative form-check"><input type="checkbox" value="checkbox" name="checkboxname"> Checkbox 1</label><br>
<label class="relative form-check"><input type="checkbox" value="checkbox" name="checkboxname"> Checkbox 2</label><br>
<label class="relative form-check"><input type="checkbox" value="checkbox" name="checkboxname"> Checkbox 3</label>

Text Size