extends template
block title
title GroundworkCSS ♥
block content
.container
.pad-left.pad-right
h1.AverageSans.zero The Kitchen Sink
p Example usage of just about everything but the kitchen sink
.row
.one.whole.padded
h2.AmericanTypewriter Typography
h4.AverageSans Text Elements
.row
.one.third.padded
h1 Heading 1
h2 Heading 2
h3 Heading 3
h4 Heading 4
h5 Heading 5
h6 Heading 6
.one.third.padded
p 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 cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
p
| Paragraph with
sup superscript
p
| Paragraph with
sub subscript
p
| Paragraph with
small small text
p
| Paragraph with
big large text
p
| Paragraph with
em emphasized text
p
| Paragraph with
b bold text
p
| Paragraph with
del deleted text
p
| Paragraph with
abbr.tooltip(title='Abreviated') abbr
| text
.one.third.padded
ul.unstyled
li Unstyled list item 1
li Unstyled list item 2
ol.unstyled
li Unstyled ordered list item 1
li Unstyled ordered list item 2
ul
li Normal list item 1
li Normal list item 2
ol
li Ordered list item 1
li Ordered list item 2
ul.list
li Styled list item 1
li Styled list item 2
ol.list
li Styled ordered list item 1
li Styled ordered list item 2
h4.AverageSans Colors
.row
.one.third.padded
b
span.yellow Yellow
br
span.orange Orange
br
span.red Red
br
span.pink Pink
br
span.purple Purple
br
span.asphalt Asphalt
br
span.blue Blue
br
span.turquoise Turquoise
br
span.green Green
.one.third.padded
ul
li.yellow Normal list item
li.orange Normal list item
li.red Normal list item
li.pink Normal list item
li.purple Normal list item
li.asphalt Normal list item
li.blue Normal list item
li.turquoise Normal list item
li.green Normal list item
.one.third.padded
ol
li.yellow Ordered list item
li.orange Ordered list item
li.red Ordered list item
li.pink Ordered list item
li.purple Ordered list item
li.asphalt Ordered list item
li.blue Ordered list item
li.turquoise Ordered list item
li.green Ordered list item
.row
.one.third.padded
b
span.info Info
br
span.alert Alert
br
span.warning Warning
br
span.error Error
br
span.success Success
br
span.disabled Disabled
.one.third.padded
ul.list
li.yellow Styled list item
li.orange Styled list item
li.red Styled list item
li.pink Styled list item
li.purple Styled list item
li.asphalt Styled list item
li.blue Styled list item
li.turquoise Styled list item
li.green Styled list item
.one.third.padded
ol.list
li.yellow Styled ordered list item
li.orange Styled ordered list item
li.red Styled ordered list item
li.pink Styled ordered list item
li.purple Styled ordered list item
li.asphalt Styled ordered list item
li.blue Styled ordered list item
li.turquoise Styled ordered list item
li.green Styled ordered list item
h4.AverageSans Links
.row
.one.third.padded
h1
a(href="#") Heading 1 link
h2
a(href="#") Heading 2 link
h3
a(href="#") Heading 3 link
h4
a(href="#") Heading 4 link
h5
a(href="#") Heading 5 link
h6
a(href="#") Heading 6 link
.one.third.padded
p
a(href="#") Paragraph link
p
a(href="#")
| Paragraph link with
sup superscript
p
a(href="#")
| Paragraph link with
sub subscript
p
a(href="#")
| Paragraph link with
small small text
p
a(href="#")
| Paragraph link with
big large text
p
a(href="#")
| Paragraph link with
em emphasized text
p
a(href="#")
| Paragraph link with
b bold text
.one.third.padded
ul
li
a(href="#") Normal list link item 1
li
a(href="#") Normal list link item 2
ol
li
a(href="#") Ordered list link item 1
li
a(href="#") Ordered list link item 2
ul.list
li
a(href="#") Styled list link item 1
li
a(href="#") Styled list link item 2
ol.list
li
a(href="#") Styled ordered link list item 1
li
a(href="#") Styled ordered link list item 2
hr
br
h2.AmericanTypewriter Web Fonts Usage
.row
.one.whole.padded
h5.AverageSans Average Sans webfont
h5.AmericanTypewriter American Typewriter webfont
hr
br
h2.AmericanTypewriter Quotes
blockquote
| A computer once beat me at chess, but it was no match for me at kick boxing.
cite
| Emo Phillips
br
h2.AmericanTypewriter Code
h4.AverageSans Blocks
pre
code
| $names: h1 h2 h3 h4 h5 h6 p blockquote cite small big large em italic b bold strong sup sub code pre info alert warning error invalid success valid;
code
| @for $i from 1 through length($names) {
code
| .\#{nth($names, $i)} {
code
| @extend %\#{nth($names, $i)};
code
| }
code
| }
br
h4.AverageSans Inline
p
| This is some text with some
code inline code
| automatic
hr
br
h2.AmericanTypewriter Buttons
.row
.one.third.padded
h4.AverageSans Button Sizes
p
button.small Small Button
p
button Medium Button
p
button.large Large Button
.one.third.padded
h4.AverageSans Button Types
p
button Normal Button
p
button.info Info Button
p
button.success Success Button
p
button.alert Alert Button
p
button.warning Warning Button
p
button.error Error Button
.one.third.padded
h4.AverageSans Button Styles
p
button Normal Button
p
button.square Square Button
p
button.round Round Button
p
button.block Block Button
h2.AmericanTypewriter Button States
.row
.one.third.padded
h4.AverageSans Disabled
p
button.disabled(tabindex='-1') Disabled Button
p
button.info.disabled Disabled Info
p
button.success.disabled Disabled Success
p
button.alert.disabled Disabled Alert
p
button.warning.disabled Disabled Warning
p
button.error.disabled Disabled Error
.one.third.padded
h4.AverageSans Active
p
button.active Active Button
p
button.info.active Active Info
p
button.success.active Active Success
p
button.alert.active Active Alert
p
button.warning.active Active Warning
p
button.error.active Active Error
.one.third.padded
h4.AverageSans Colors
p
button.yellow Yellow Button
p
button.orange Orange Button
p
button.red Red Button
p
button.pink Pink Button
p
button.purple Purple Button
p
button.asphalt Asphalt Button
p
button.blue Blue Button
p
button.turquoise Turquoise Button
p
button.green Green Button
h2.AmericanTypewriter Button Lists & Dropdowns
.row
.one.third.padded
ul.button-list
li
a(href='#') Button 1
li
a(href='#') Button 2
li
a(href='#') Button 3
br
ul.button-list
li
a.blue(href='#') Button 1
li
a.turquoise(href='#') Button 2
li
a.green(href='#') Button 3
br
.one.third.padded
ul.button-list
li
a(href='#')
i.icon-github-alt
li
a(href='#')
i.icon-twitter
li
a(href='#')
i.icon-linkedin-sign
li
a(href='#')
i.icon-google-plus
li
a(href='#')
i.icon-facebook-sign
li
a(href='#')
i.icon-pinterest
br
ul.button-list
li
a.yellow(href='#')
i.icon-github-alt
li
a.orange(href='#')
i.icon-twitter
li
a.red(href='#')
i.icon-linkedin-sign
li
a.pink(href='#')
i.icon-google-plus
li
a.purple(href='#')
i.icon-facebook-sign
li
a.asphalt(href='#')
i.icon-pinterest
br
.one.third.padded
.dropdown
button.button
| Dropdown Menu Button
ul
li
a(href='#')
i.icon-home
| Example Menu Item 1
li
a(href='#')
i.icon-envelope-alt
| Example Menu Item 2
li
hr
li
a(href='#')
i.icon-heart
| Seperated Menu Item
br
.dropdown.gap-top
button.button.blue.button
| Dropdown Menu Button
ul
li
a(href='#')
i.icon-home
| Example Menu Item 1
li
a(href='#')
i.icon-envelope-alt
| Example Menu Item 2
li
hr
li
a(href='#')
i.icon-heart
| Seperated Menu Item
br
hr
br
h2.AmericanTypewriter Forms
.row
.one.whole.padded
form(action='#', method='post')
fieldset
legend Example Form
.row
.one.whole.padded
label(for='name') First & Last Name
input#name(type='text', placeholder='First & Last Name')
.row
.one.whole.padded
label(for='email') Email Address
input#email(type='email', placeholder='you@example.com')
.row
.one.whole.padded
label(for='address') Address
input#address(type='text', placeholder='Street Address')
.row
.one.half.padded
input(type='text', placeholder='City')
.one.fourth.padded
span.select-wrap
select.unselected
option(value='', disabled='', selected='') State
option(value='AL') Alabama
option(value='AK') Alaska
option(value='AZ') Arizona
option(value='AR') Arkansas
option(value='CA') California
option(value='CO') Colorado
option(value='CT') Connecticut
option(value='DE') Delaware
option(value='FL') Florida
option(value='GA') Georgia
option(value='HI') Hawaii
option(value='ID') Idaho
option(value='IL') Illinois
option(value='IN') Indiana
option(value='IA') Iowa
option(value='KS') Kansas
option(value='KY') Kentucky
option(value='LA') Louisiana
option(value='ME') Maine
option(value='MD') Maryland
option(value='MA') Massachusetts
option(value='MI') Michigan
option(value='MN') Minnesota
option(value='MS') Mississippi
option(value='MO') Missouri
option(value='MT') Montana
option(value='NE') Nebraska
option(value='NV') Nevada
option(value='NH') New Hampshire
option(value='NJ') New Jersey
option(value='NM') New Mexico
option(value='NY') New York
option(value='NC') North Carolina
option(value='ND') North Dakota
option(value='OH') Ohio
option(value='OK') Oklahoma
option(value='OR') Oregon
option(value='PA') Pennsylvania
option(value='RI') Rhode Island
option(value='SC') South Carolina
option(value='SD') South Dakota
option(value='TN') Tennessee
option(value='TX') Texas
option(value='UT') Utah
option(value='VT') Vermont
option(value='VA') Virginia
option(value='WA') Washington
option(value='WV') West Virginia
option(value='WI') Wisconsin
option(value='WY') Wyoming
option(value='AS') American Samoa
option(value='DC') District of Columbia
option(value='FM') Federated States of Micronesia
option(value='GU') Guam
option(value='MH') Marshall Islands
option(value='MP') Northern Mariana Islands
option(value='PW') Palau
option(value='PR') Puerto Rico
option(value='VI') Virgin Islands
option(value='AE') Armed Forces Africa
option(value='AA') Armed Forces Americas
option(value='AE') Armed Forces Canada
option(value='AE') Armed Forces Europe
option(value='AE') Armed Forces Middle East
option(value='AP') Armed Forces Pacific
option(value='AB') Alberta
option(value='BC') British Columbia
option(value='MB') Manitoba
option(value='NB') New Brunswick
option(value='NL') Newfoundland and Labrador
option(value='NS') Nova Scotia
option(value='NT') Northwest Territories
option(value='NU') Nunavut
option(value='ON') Ontario
option(value='PE') Prince Edward Island
option(value='QC') Quebec
option(value='SK') Saskatchewan
option(value='YT') Yukon Territory
.one.fourth.padded
input(type='text', placeholder='Zip Code')
.row
.one.whole.padded
label(for='message') Special Instructions
textarea#message(placeholder='Enter your message...')
.row
.one.whole.padded
label(for='twitter') Twitter
.row
.one.half.pad-right.gap-bottom.no-pad-small-tablet
.row
.one.mobile.sixth
span.prefix @
.five.mobile.sixths
input#twitter(type='text', name='twitter', placeholder='username')
.one.half.pad-left.gap-bottom.no-pad-small-tablet
.row
.three.mobile.fifths
input(type='text', name='sidereel', placeholder='pick username')
.two.mobile.fifths
span.suffix @example.com
.row
.one.whole.padded
| Pick a thing:
ul.radio-list
li
input#thing1(type='radio', name='things', checked='')
label.inline(for='thing1') Thing one
li
input#thing2(type='radio', name='things')
label.inline(for='thing2') Thing two
.row
.one.whole.padded
button Submit
|
button.warning Cancel
.row
.one.whole.padded
input(type='submit')
|
input.warning(type='reset')
.row
.double.padded
h6 Small
a.small.button(href='#') Link
|
button.small Button
|
input.small(type='submit')
|
input.small.warning(type='reset')
hr
h6 Normal
a.button(href='#') Link
|
button Button
|
input(type='submit')
|
input.warning(type='reset')
hr
h6 Large
a.large.button(href='#') Link
|
button.large Button
|
input.large(type='submit')
|
input.large.warning(type='reset')
.row
.one.whole.padded
input(type='checkbox', name='things', checked='')
| I want all the things!
.row
.one.whole.padded
p.invalid
label Invalid entry field label
input(value='Invalid entry')
.invalid.row
.one.mobile.tenth
span.prefix @
.nine.mobile.tenths
input(value='Invalid entry')
.row
.one.whole.padded
p.valid
label Valid entry field label
input(value='Valid entry')
.valid.row
.one.mobile.tenth
span.prefix @
.nine.mobile.tenths
input(value='Valid entry')
hr
br
h2.AmericanTypewriter Navigation Components
h4.AverageSans Horizontal Grid Navigation (grid)
nav.small-tablet
ul.row
li.one.small-tablet.fourth
a(href='#nowhere', title='Lorum ipsum dolor sit amet') Lorem
li.menu.one.small-tablet.fourth
a(href='#nowhere', title='Aliquam tincidunt mauris eu risus') Aliquam
ul
li
a(href='#nowhere', title='Pellentesque fermentum dolor') Pellentesque
li
a(href='#nowhere', title='Aliquam tincidunt mauris eu risus') Aliquam
li
a.disabled(href='#nowhere', title='Lorum ipsum dolor sit amet') Lorem
li
a(href='#nowhere', title='Morbi in sem quis dui placerat ornare') Morbi
li.one.small-tablet.fourth
a.disabled(href='#nowhere', title='Praesent dapibus, neque id cursus faucibus') Praesent
li.one.small-tablet.fourth
a(href='#nowhere', title='Morbi in sem quis dui placerat ornare') Morbi
hr
h4.AverageSans Horizontal "Hamburger" Grid Navigation (menu + grid)
nav.small-tablet.menu
ul.row
li.one.small-tablet.fourth
a(href='#nowhere', title='Lorum ipsum dolor sit amet') Lorem
li.menu.one.small-tablet.fourth
a(href='#nowhere', title='Aliquam tincidunt mauris eu risus') Aliquam
ul
li
a(href='#nowhere', title='Pellentesque fermentum dolor') Pellentesque
li
a(href='#nowhere', title='Aliquam tincidunt mauris eu risus') Aliquam
li
a.disabled(href='#nowhere', title='Lorum ipsum dolor sit amet') Lorem
li
a(href='#nowhere', title='Morbi in sem quis dui placerat ornare') Morbi
li.one.small-tablet.fourth
a.disabled(href='#nowhere', title='Praesent dapibus, neque id cursus faucibus') Praesent
li.one.small-tablet.fourth
a(href='#nowhere', title='Morbi in sem quis dui placerat ornare') Morbi
hr
h4.AverageSans Horizontal Navigation (inline)
nav.inline
ul
li
a(href='#nowhere', title='Lorum ipsum dolor sit amet') Lorem
li
a.disabled(href='#nowhere', title='Aliquam tincidunt mauris eu risus') Aliquam
li.menu
a(href='#nowhere', title='Praesent dapibus, neque id cursus faucibus') Praesent
ul
li
a(href='#nowhere', title='Pellentesque fermentum dolor') Pellentesque
li
a(href='#nowhere', title='Aliquam tincidunt mauris eu risus') Aliquam
li
a.disabled(href='#nowhere', title='Lorum ipsum dolor sit amet') Lorem
li
a(href='#nowhere', title='Morbi in sem quis dui placerat ornare') Morbi
li
a(href='#nowhere', title='Morbi in sem quis dui placerat ornare') Morbi
hr
h4.AverageSans Horizontal "Hamburger" Navigation (inline + menu)
nav.inline.menu
ul
li
a(href='#nowhere', title='Lorum ipsum dolor sit amet') Lorem
li
a.disabled(href='#nowhere', title='Aliquam tincidunt mauris eu risus') Aliquam
li.menu
a(href='#nowhere', title='Praesent dapibus, neque id cursus faucibus') Praesent
ul
li
a(href='#nowhere', title='Pellentesque fermentum dolor') Pellentesque
li
a(href='#nowhere', title='Aliquam tincidunt mauris eu risus') Aliquam
li
a.disabled(href='#nowhere', title='Lorum ipsum dolor sit amet') Lorem
li
a(href='#nowhere', title='Morbi in sem quis dui placerat ornare') Morbi
li
a(href='#nowhere', title='Morbi in sem quis dui placerat ornare') Morbi
hr
h4.AverageSans Vertical Navigation
p
nav
ul
li
a(href='#nowhere', title='Lorum ipsum dolor sit amet') Lorem
li
a.disabled(href='#nowhere', title='Aliquam tincidunt mauris eu risus') Aliquam
li
a(href='#nowhere', title='Morbi in sem quis dui placerat ornare') Morbi
li.menu
a(href='#nowhere', title='Praesent dapibus, neque id cursus faucibus') Praesent
ul
li
a(href='#nowhere', title='Pellentesque fermentum dolor') Pellentesque
li
a(href='#nowhere', title='Aliquam tincidunt mauris eu risus') Aliquam
li
a.disabled(href='#nowhere', title='Lorum ipsum dolor sit amet') Lorem
li
a(href='#nowhere', title='Morbi in sem quis dui placerat ornare') Morbi
li
a(href='#nowhere', title='Pellentesque fermentum dolor') Pellentesque
hr
h4.AverageSans Vertical "Hamburger" Navigation (menu)
p
nav.menu
ul
li
a(href='#nowhere', title='Lorum ipsum dolor sit amet') Lorem
li
a.disabled(href='#nowhere', title='Aliquam tincidunt mauris eu risus') Aliquam
li
a(href='#nowhere', title='Morbi in sem quis dui placerat ornare') Morbi
li.menu
a(href='#nowhere', title='Praesent dapibus, neque id cursus faucibus') Praesent
ul
li
a(href='#nowhere', title='Pellentesque fermentum dolor') Pellentesque
li
a(href='#nowhere', title='Aliquam tincidunt mauris eu risus') Aliquam
li
a.disabled(href='#nowhere', title='Lorum ipsum dolor sit amet') Lorem
li
a(href='#nowhere', title='Morbi in sem quis dui placerat ornare') Morbi
li
a(href='#nowhere', title='Pellentesque fermentum dolor') Pellentesque
hr
h4.AverageSans Dropdown Button
.dropdown
button.button
| Dropdown Menu Button
ul
li
a(href='#')
i.icon-home
| Example Menu Item 1
li
a.disabled(href='#')
i.icon-envelope-alt
| Example Menu Item 2
li
hr
li
a(href='#')
i.icon-heart
| Seperated Menu Item
hr
h4.AverageSans Responsive Pagination
p
nav.pagination.align-center
ul
| «123456789101112131415161718192021222324252627282930313233343536373839»
hr
br
h2.AmericanTypewriter Tabs
.tabs
ul
li
a.active(href='#content-1') Tab 1
li
a(href='#content-2') Tab 2
li
a(href='#content-3') Tab 3
li
a.disabled(href='#content-4', tabindex='-1') Disabled Tab
li.pull-right
a(href='#content-6') Right 2
li.pull-right
a(href='#content-5') Right 1
#content-1.active
h1 Tab 1
p
| Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus
#content-2
h1 Tab 2
ul
li
| Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.
li
| Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.
li
| Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.
li
| Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.
#content-3
h1 Tab 3
dl
dt Definition list
dd
| 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.
dt Lorem ipsum dolor sit amet
dd
| 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.
#content-4
h1 Tab 4
p
| You should not be able to get to this content, because the tabs has been disabled.
#content-5
h1 Tab 5
h3 The tab for this content is aligned to the right.
ul
li Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
li Aliquam tincidunt mauris eu risus.
li Vestibulum auctor dapibus neque.
#content-6
h1 Tab 6
h3 The tab for this content is aligned to the right as well.
ul
li
| Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.
li
| Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.
li
| Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.
li
| Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.
hr
br
h2.AmericanTypewriter UI Components
.row
.one.half.pad-right.no-pad-small-tablet
h4.AverageSans Message Boxes
p.message This is an important message.
p.info.message This is an info message.
p.success.message This is a success message.
p.alert.message This is an alert message.
p.warning.message This is a warning message.
p.error.message This is an error message.
p.disabled.message This is a disabled message.
p.dismissible.message This is a dismissible message.
.one.half
h4.AverageSans Colors
p.dismissible.yellow.message This is a yellow message.
p.dismissible.orange.message This is an orange message.
p.dismissible.red.message This is a red message.
p.dismissible.pink.message This is a pink message.
p.dismissible.purple.message This is a purple message.
p.dismissible.asphalt.message This is an asphalt message.
p.dismissible.blue.message This is a blue message.
p.dismissible.turquoise.message This is a turquoise message.
p.dismissible.green.message This is a green message.
.row
.one.half.pad-right.no-pad-small-tablet
h4.AverageSans Callout Boxes
.callout
h4 This is a default callout box
p Use these to contain or call attention to special content.
.info.callout
h4 This is an info callout box
p Use these to contain or call attention to special content.
.success.callout
h4 This is a success callout box
p Use these to communicate multi-element success messages as a block.
.alert.callout
h4 This is an alert callout box
p Use these to contain or call attention to special content.
.warning.callout
h4 This is a warning callout box
p Use these to contain or call attention to special content.
.error.callout
h4 This is an error callout box
p Use these to contain or call attention to special content.
.disabled.callout
h4 This is a disabled callout box
p Use these to contain or call attention to special content.
.dismissible.callout
h4 This is a dismissible callout box
p Use these to contain or call attention to special content.
.one.half
h4.AverageSans Colors
.dismissible.yellow.callout
h4 This is a callout box
p Use these to contain or call attention to special content.
.dismissible.orange.callout
h4 This is a callout box
p Use these to contain or call attention to special content.
.dismissible.red.callout
h4 This is a callout box
p Use these to contain or call attention to special content.
.dismissible.pink.callout
h4 This is a callout box
p Use these to contain or call attention to special content.
.dismissible.purple.callout
h4 This is a callout box
p Use these to contain or call attention to special content.
.dismissible.asphalt.callout
h4 This is a callout box
p Use these to contain or call attention to special content.
.dismissible.blue.callout
h4 This is a callout box
p Use these to contain or call attention to special content.
.dismissible.turquoise.callout
h4 This is a callout box
p Use these to contain or call attention to special content.
.dismissible.green.callout
h4 This is a callout box
p Use these to contain or call attention to special content.
.row
.one.half.pad-right.no-pad-small-tablet
h4.AverageSans Square Boxes
p.info.message.square This is an info message.
.info.callout.square
h4 This is an info callout box
p Use these to contain or call attention to special content.
.one.half
h4.AverageSans Round Boxes
p.info.message.round.align-center This is a round info message.
.info.callout.round.align-center
h4 This is a round info callout box
p Use these to contain or call attention to special content.
hr
br
h2.AmericanTypewriter Tables
.row
.one.whole.padded
table.responsive.tooltip(title='responsive data table')
thead
tr
th Table Heading
th Table Heading
th Table Heading
th Table Heading
tbody
tr
td Table cell
td Table cell
td Table cell
td Table cell
tr
td Table cell
td Table cell
td Table cell
td Table cell
tr
td Table cell
td Table cell
td Table cell
td Table cell
tr
td Table cell
td Table cell
td Table cell
td Table cell
tfoot
tr
td Footer cell
td Footer cell
td Footer cell
td Footer cell
.row
.one.whole.padded
table.responsive.tooltip(title='responsive data table')
thead
tr
th(data-width='40%') Table Heading
th(data-width='20%') Table Heading
th(data-width='20%') Table Heading
th(data-width='20%') Table Heading
tbody
tr
td(data-width='40%') Table cell
td(data-width='20%') Table cell
td(data-width='20%') Table cell
td(data-width='20%') Table cell
tr
td(data-width='40%') Table cell
td(data-width='20%') Table cell
td(data-width='20%') Table cell
td(data-width='20%') Table cell
tr
td(data-width='40%') Table cell
td(data-width='20%') Table cell
td(data-width='20%') Table cell
td(data-width='20%') Table cell
tr
td(data-width='40%') Table cell
td(data-width='20%') Table cell
td(data-width='20%') Table cell
td(data-width='20%') Table cell
tfoot
tr
td(data-width='40%') Table cell
td(data-width='20%') Table cell
td(data-width='20%') Table cell
td(data-width='20%') Table cell
.row
.one.third.padded
table.responsive.yellow.tooltip(title='yellow')
thead
tr
th Table Heading
tbody
tr
td Table cell
tr
td Table cell
tr
td Table cell
tr
td Table cell
tfoot
tr
td Footer cell
.one.third.padded
table.responsive.orange.tooltip(title='orange')
thead
tr
th Table Heading
tbody
tr
td Table cell
tr
td Table cell
tr
td Table cell
tr
td Table cell
tfoot
tr
td Footer cell
.one.third.padded
table.responsive.red.tooltip(title='red')
thead
tr
th Table Heading
tbody
tr
td Table cell
tr
td Table cell
tr
td Table cell
tr
td Table cell
tfoot
tr
td Footer cell
.row
.one.third.padded
table.responsive.pink.tooltip(title='pink')
thead
tr
th Table Heading
tbody
tr
td Table cell
tr
td Table cell
tr
td Table cell
tr
td Table cell
tfoot
tr
td Footer cell
.one.third.padded
table.responsive.purple.tooltip(title='purple')
thead
tr
th Table Heading
tbody
tr
td Table cell
tr
td Table cell
tr
td Table cell
tr
td Table cell
tfoot
tr
td Footer cell
.one.third.padded
table.responsive.asphalt.tooltip(title='asphalt')
thead
tr
th Table Heading
tbody
tr
td Table cell
tr
td Table cell
tr
td Table cell
tr
td Table cell
tfoot
tr
td Footer cell
.row
.one.third.padded
table.responsive.blue.tooltip(title='blue')
thead
tr
th Table Heading
tbody
tr
td Table cell
tr
td Table cell
tr
td Table cell
tr
td Table cell
tfoot
tr
td Footer cell
.one.third.padded
table.responsive.turquoise.tooltip(title='turquoise')
thead
tr
th Table Heading
tbody
tr
td Table cell
tr
td Table cell
tr
td Table cell
tr
td Table cell
tfoot
tr
td Footer cell
.one.third.padded
table.responsive.green.tooltip(title='green')
thead
tr
th Table Heading
tbody
tr
td Table cell
tr
td Table cell
tr
td Table cell
tr
td Table cell
tfoot
tr
td Footer cell
hr
br
h2.AmericanTypewriter Font Awesome Icons
style(type="text/css")
.the-icons {
font-size: 1.1em;
line-height: 1.5;
}
.the-icons i {
font-size: 1.5em;
margin-right: 0.25em;
}
section#new
h4.AverageSans New Icons in 3.2
.row.the-icons
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-compass
| icon-compass
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-collapse
| icon-collapse
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-collapse-top
| icon-collapse-top
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-expand
| icon-expand
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-eur
| icon-eur
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-euro
| icon-euro
span.muted (alias)
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-gbp
| icon-gbp
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-usd
| icon-usd
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-dollar
| icon-dollar
span.muted (alias)
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-inr
| icon-inr
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-rupee
| icon-rupee
span.muted (alias)
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-jpy
| icon-jpy
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-yen
| icon-yen
span.muted (alias)
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-cny
| icon-cny
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-renminbi
| icon-renminbi
span.muted (alias)
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-krw
| icon-krw
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-won
| icon-won
span.muted (alias)
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-btc
| icon-btc
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-bitcoin
| icon-bitcoin
span.muted (alias)
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-file
| icon-file
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-file-text
| icon-file-text
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-sort-by-alphabet
| icon-sort-by-alphabet
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-sort-by-alphabet-alt
| icon-sort-by-alphabet-alt
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-sort-by-attributes
| icon-sort-by-attributes
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-sort-by-attributes-alt
| icon-sort-by-attributes-alt
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-sort-by-order
| icon-sort-by-order
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-sort-by-order-alt
| icon-sort-by-order-alt
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-thumbs-up
| icon-thumbs-up
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-thumbs-down
| icon-thumbs-down
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-youtube-sign
| icon-youtube-sign
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-youtube
| icon-youtube
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-xing
| icon-xing
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-xing-sign
| icon-xing-sign
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-youtube-play
| icon-youtube-play
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-dropbox
| icon-dropbox
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-stackexchange
| icon-stackexchange
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-instagram
| icon-instagram
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-flickr
| icon-flickr
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-adn
| icon-adn
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-bitbucket
| icon-bitbucket
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-bitbucket-sign
| icon-bitbucket-sign
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-tumblr
| icon-tumblr
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-tumblr-sign
| icon-tumblr-sign
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-long-arrow-down
| icon-long-arrow-down
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-long-arrow-up
| icon-long-arrow-up
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-long-arrow-left
| icon-long-arrow-left
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-long-arrow-right
| icon-long-arrow-right
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-apple
| icon-apple
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-windows
| icon-windows
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-android
| icon-android
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-linux
| icon-linux
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-dribbble
| icon-dribbble
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-skype
| icon-skype
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-foursquare
| icon-foursquare
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-trello
| icon-trello
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-female
| icon-female
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-male
| icon-male
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-gittip
| icon-gittip
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-sun
| icon-sun
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-moon
| icon-moon
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-archive
| icon-archive
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-bug
| icon-bug
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-vk
| icon-vk
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-weibo
| icon-weibo
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-renren
| icon-renren
hr
section#web-application
h4.AverageSans Web Application Icons
.row.the-icons
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-adjust
| icon-adjust
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-anchor
| icon-anchor
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-archive
| icon-archive
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-asterisk
| icon-asterisk
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-ban-circle
| icon-ban-circle
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-bar-chart
| icon-bar-chart
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-barcode
| icon-barcode
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-beaker
| icon-beaker
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-beer
| icon-beer
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-bell
| icon-bell
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-bell-alt
| icon-bell-alt
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-bolt
| icon-bolt
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-book
| icon-book
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-bookmark
| icon-bookmark
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-bookmark-empty
| icon-bookmark-empty
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-briefcase
| icon-briefcase
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-bug
| icon-bug
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-building
| icon-building
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-bullhorn
| icon-bullhorn
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-bullseye
| icon-bullseye
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-calendar
| icon-calendar
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-calendar-empty
| icon-calendar-empty
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-camera
| icon-camera
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-camera-retro
| icon-camera-retro
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-certificate
| icon-certificate
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-check
| icon-check
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-check-empty
| icon-check-empty
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-check-minus
| icon-check-minus
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-check-sign
| icon-check-sign
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-circle
| icon-circle
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-circle-blank
| icon-circle-blank
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-cloud
| icon-cloud
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-cloud-download
| icon-cloud-download
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-cloud-upload
| icon-cloud-upload
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-code
| icon-code
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-code-fork
| icon-code-fork
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-coffee
| icon-coffee
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-cog
| icon-cog
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-cogs
| icon-cogs
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-collapse
| icon-collapse
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-collapse-alt
| icon-collapse-alt
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-collapse-top
| icon-collapse-top
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-comment
| icon-comment
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-comment-alt
| icon-comment-alt
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-comments
| icon-comments
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-comments-alt
| icon-comments-alt
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-compass
| icon-compass
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-credit-card
| icon-credit-card
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-crop
| icon-crop
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-dashboard
| icon-dashboard
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-desktop
| icon-desktop
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-download
| icon-download
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-download-alt
| icon-download-alt
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-edit
| icon-edit
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-edit-sign
| icon-edit-sign
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-ellipsis-horizontal
| icon-ellipsis-horizontal
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-ellipsis-vertical
| icon-ellipsis-vertical
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-envelope
| icon-envelope
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-envelope-alt
| icon-envelope-alt
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-eraser
| icon-eraser
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-exchange
| icon-exchange
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-exclamation
| icon-exclamation
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-exclamation-sign
| icon-exclamation-sign
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-expand
| icon-expand
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-expand-alt
| icon-expand-alt
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-external-link
| icon-external-link
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-external-link-sign
| icon-external-link-sign
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-eye-close
| icon-eye-close
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-eye-open
| icon-eye-open
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-facetime-video
| icon-facetime-video
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-female
| icon-female
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-fighter-jet
| icon-fighter-jet
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-film
| icon-film
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-filter
| icon-filter
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-fire
| icon-fire
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-fire-extinguisher
| icon-fire-extinguisher
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-flag
| icon-flag
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-flag-alt
| icon-flag-alt
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-flag-checkered
| icon-flag-checkered
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-folder-close
| icon-folder-close
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-folder-close-alt
| icon-folder-close-alt
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-folder-open
| icon-folder-open
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-folder-open-alt
| icon-folder-open-alt
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-food
| icon-food
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-frown
| icon-frown
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-gamepad
| icon-gamepad
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-gear
| icon-gear
span.muted (alias)
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-gears
| icon-gears
span.muted (alias)
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-gift
| icon-gift
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-glass
| icon-glass
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-globe
| icon-globe
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-group
| icon-group
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-hdd
| icon-hdd
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-headphones
| icon-headphones
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-heart
| icon-heart
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-heart-empty
| icon-heart-empty
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-home
| icon-home
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-inbox
| icon-inbox
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-info
| icon-info
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-info-sign
| icon-info-sign
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-key
| icon-key
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-keyboard
| icon-keyboard
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-laptop
| icon-laptop
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-leaf
| icon-leaf
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-legal
| icon-legal
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-lemon
| icon-lemon
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-level-down
| icon-level-down
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-level-up
| icon-level-up
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-lightbulb
| icon-lightbulb
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-location-arrow
| icon-location-arrow
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-lock
| icon-lock
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-magic
| icon-magic
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-magnet
| icon-magnet
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-mail-forward
| icon-mail-forward
span.muted (alias)
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-mail-reply
| icon-mail-reply
span.muted (alias)
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-mail-reply-all
| icon-mail-reply-all
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-male
| icon-male
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-map-marker
| icon-map-marker
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-meh
| icon-meh
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-microphone
| icon-microphone
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-microphone-off
| icon-microphone-off
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-minus
| icon-minus
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-minus-sign
| icon-minus-sign
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-minus-sign-alt
| icon-minus-sign-alt
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-mobile-phone
| icon-mobile-phone
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-money
| icon-money
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-moon
| icon-moon
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-move
| icon-move
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-music
| icon-music
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-off
| icon-off
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-ok
| icon-ok
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-ok-circle
| icon-ok-circle
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-ok-sign
| icon-ok-sign
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-pencil
| icon-pencil
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-phone
| icon-phone
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-phone-sign
| icon-phone-sign
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-picture
| icon-picture
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-plane
| icon-plane
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-plus
| icon-plus
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-plus-sign
| icon-plus-sign
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-plus-sign-alt
| icon-plus-sign-alt
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-power-off
| icon-power-off
span.muted (alias)
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-print
| icon-print
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-pushpin
| icon-pushpin
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-puzzle-piece
| icon-puzzle-piece
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-qrcode
| icon-qrcode
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-question
| icon-question
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-question-sign
| icon-question-sign
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-quote-left
| icon-quote-left
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-quote-right
| icon-quote-right
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-random
| icon-random
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-refresh
| icon-refresh
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-remove
| icon-remove
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-remove-circle
| icon-remove-circle
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-remove-sign
| icon-remove-sign
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-reorder
| icon-reorder
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-reply
| icon-reply
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-reply-all
| icon-reply-all
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-resize-horizontal
| icon-resize-horizontal
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-resize-vertical
| icon-resize-vertical
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-retweet
| icon-retweet
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-road
| icon-road
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-rocket
| icon-rocket
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-rss
| icon-rss
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-rss-sign
| icon-rss-sign
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-screenshot
| icon-screenshot
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-search
| icon-search
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-share
| icon-share
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-share-alt
| icon-share-alt
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-share-sign
| icon-share-sign
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-shield
| icon-shield
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-shopping-cart
| icon-shopping-cart
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-sign-blank
| icon-sign-blank
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-signal
| icon-signal
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-signin
| icon-signin
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-signout
| icon-signout
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-sitemap
| icon-sitemap
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-smile
| icon-smile
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-sort
| icon-sort
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-sort-by-alphabet
| icon-sort-by-alphabet
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-sort-by-alphabet-alt
| icon-sort-by-alphabet-alt
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-sort-by-attributes
| icon-sort-by-attributes
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-sort-by-attributes-alt
| icon-sort-by-attributes-alt
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-sort-by-order
| icon-sort-by-order
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-sort-by-order-alt
| icon-sort-by-order-alt
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-sort-down
| icon-sort-down
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-sort-up
| icon-sort-up
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-spinner
| icon-spinner
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-star
| icon-star
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-star-empty
| icon-star-empty
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-star-half
| icon-star-half
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-star-half-empty
| icon-star-half-empty
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-star-half-full
| icon-star-half-full
span.muted (alias)
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-subscript
| icon-subscript
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-suitcase
| icon-suitcase
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-sun
| icon-sun
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-superscript
| icon-superscript
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-tablet
| icon-tablet
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-tag
| icon-tag
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-tags
| icon-tags
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-tasks
| icon-tasks
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-terminal
| icon-terminal
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-thumbs-down
| icon-thumbs-down
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-thumbs-down-alt
| icon-thumbs-down-alt
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-thumbs-up
| icon-thumbs-up
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-thumbs-up-alt
| icon-thumbs-up-alt
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-ticket
| icon-ticket
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-time
| icon-time
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-tint
| icon-tint
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-trash
| icon-trash
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-trophy
| icon-trophy
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-truck
| icon-truck
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-umbrella
| icon-umbrella
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-unchecked
| icon-unchecked
span.muted (alias)
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-unlock
| icon-unlock
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-unlock-alt
| icon-unlock-alt
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-upload
| icon-upload
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-upload-alt
| icon-upload-alt
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-user
| icon-user
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-volume-down
| icon-volume-down
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-volume-off
| icon-volume-off
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-volume-up
| icon-volume-up
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-warning-sign
| icon-warning-sign
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-wrench
| icon-wrench
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-zoom-in
| icon-zoom-in
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-zoom-out
| icon-zoom-out
hr
section#currency
h4.AverageSans Currency Icons
.row.the-icons
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-bitcoin
| icon-bitcoin
span.muted (alias)
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-btc
| icon-btc
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-cny
| icon-cny
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-dollar
| icon-dollar
span.muted (alias)
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-eur
| icon-eur
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-euro
| icon-euro
span.muted (alias)
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-gbp
| icon-gbp
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-inr
| icon-inr
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-jpy
| icon-jpy
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-krw
| icon-krw
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-renminbi
| icon-renminbi
span.muted (alias)
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-rupee
| icon-rupee
span.muted (alias)
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-usd
| icon-usd
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-won
| icon-won
span.muted (alias)
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-yen
| icon-yen
span.muted (alias)
hr
section#text-editor
h4.AverageSans Text Editor Icons
.row.the-icons
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-align-center
| icon-align-center
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-align-justify
| icon-align-justify
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-align-left
| icon-align-left
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-align-right
| icon-align-right
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-bold
| icon-bold
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-columns
| icon-columns
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-copy
| icon-copy
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-cut
| icon-cut
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-eraser
| icon-eraser
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-file
| icon-file
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-file-alt
| icon-file-alt
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-file-text
| icon-file-text
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-file-text-alt
| icon-file-text-alt
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-font
| icon-font
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-indent-left
| icon-indent-left
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-indent-right
| icon-indent-right
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-italic
| icon-italic
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-link
| icon-link
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-list
| icon-list
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-list-alt
| icon-list-alt
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-list-ol
| icon-list-ol
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-list-ul
| icon-list-ul
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-paper-clip
| icon-paper-clip
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-paperclip
| icon-paperclip
span.muted (alias)
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-paste
| icon-paste
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-repeat
| icon-repeat
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-rotate-left
| icon-rotate-left
span.muted (alias)
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-rotate-right
| icon-rotate-right
span.muted (alias)
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-save
| icon-save
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-strikethrough
| icon-strikethrough
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-table
| icon-table
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-text-height
| icon-text-height
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-text-width
| icon-text-width
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-th
| icon-th
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-th-large
| icon-th-large
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-th-list
| icon-th-list
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-underline
| icon-underline
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-undo
| icon-undo
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-unlink
| icon-unlink
hr
section#directional
h4.AverageSans Directional Icons
.row.the-icons
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-angle-down
| icon-angle-down
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-angle-left
| icon-angle-left
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-angle-right
| icon-angle-right
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-angle-up
| icon-angle-up
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-arrow-down
| icon-arrow-down
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-arrow-left
| icon-arrow-left
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-arrow-right
| icon-arrow-right
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-arrow-up
| icon-arrow-up
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-caret-down
| icon-caret-down
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-caret-left
| icon-caret-left
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-caret-right
| icon-caret-right
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-caret-up
| icon-caret-up
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-chevron-down
| icon-chevron-down
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-chevron-left
| icon-chevron-left
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-chevron-right
| icon-chevron-right
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-chevron-sign-down
| icon-chevron-sign-down
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-chevron-sign-left
| icon-chevron-sign-left
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-chevron-sign-right
| icon-chevron-sign-right
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-chevron-sign-up
| icon-chevron-sign-up
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-chevron-up
| icon-chevron-up
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-circle-arrow-down
| icon-circle-arrow-down
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-circle-arrow-left
| icon-circle-arrow-left
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-circle-arrow-right
| icon-circle-arrow-right
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-circle-arrow-up
| icon-circle-arrow-up
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-double-angle-down
| icon-double-angle-down
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-double-angle-left
| icon-double-angle-left
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-double-angle-right
| icon-double-angle-right
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-double-angle-up
| icon-double-angle-up
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-hand-down
| icon-hand-down
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-hand-left
| icon-hand-left
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-hand-right
| icon-hand-right
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-hand-up
| icon-hand-up
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-long-arrow-down
| icon-long-arrow-down
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-long-arrow-left
| icon-long-arrow-left
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-long-arrow-right
| icon-long-arrow-right
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-long-arrow-up
| icon-long-arrow-up
hr
section#video-player
h4.AverageSans Video Player Icons
.row.the-icons
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-backward
| icon-backward
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-eject
| icon-eject
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-fast-backward
| icon-fast-backward
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-fast-forward
| icon-fast-forward
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-forward
| icon-forward
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-fullscreen
| icon-fullscreen
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-pause
| icon-pause
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-play
| icon-play
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-play-circle
| icon-play-circle
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-play-sign
| icon-play-sign
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-resize-full
| icon-resize-full
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-resize-small
| icon-resize-small
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-step-backward
| icon-step-backward
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-step-forward
| icon-step-forward
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-stop
| icon-stop
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-youtube-play
| icon-youtube-play
hr
section#brand
h4.AverageSans Brand Icons
.row.the-icons
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-adn
| icon-adn
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-android
| icon-android
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-apple
| icon-apple
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-bitbucket
| icon-bitbucket
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-bitbucket-sign
| icon-bitbucket-sign
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-bitcoin
| icon-bitcoin
span.muted (alias)
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-btc
| icon-btc
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-css3
| icon-css3
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-dribbble
| icon-dribbble
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-dropbox
| icon-dropbox
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-facebook
| icon-facebook
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-facebook-sign
| icon-facebook-sign
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-flickr
| icon-flickr
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-foursquare
| icon-foursquare
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-github
| icon-github
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-github-alt
| icon-github-alt
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-github-sign
| icon-github-sign
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-gittip
| icon-gittip
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-google-plus
| icon-google-plus
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-google-plus-sign
| icon-google-plus-sign
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-html5
| icon-html5
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-instagram
| icon-instagram
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-linkedin
| icon-linkedin
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-linkedin-sign
| icon-linkedin-sign
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-linux
| icon-linux
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-maxcdn
| icon-maxcdn
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-pinterest
| icon-pinterest
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-pinterest-sign
| icon-pinterest-sign
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-renren
| icon-renren
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-skype
| icon-skype
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-stackexchange
| icon-stackexchange
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-trello
| icon-trello
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-tumblr
| icon-tumblr
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-tumblr-sign
| icon-tumblr-sign
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-twitter
| icon-twitter
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-twitter-sign
| icon-twitter-sign
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-vk
| icon-vk
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-weibo
| icon-weibo
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-windows
| icon-windows
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-xing
| icon-xing
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-xing-sign
| icon-xing-sign
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-youtube
| icon-youtube
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-youtube-play
| icon-youtube-play
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-youtube-sign
| icon-youtube-sign
hr
section#medical
h4.AverageSans Medical Icons
.row.the-icons
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-ambulance
| icon-ambulance
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-h-sign
| icon-h-sign
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-hospital
| icon-hospital
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-medkit
| icon-medkit
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-plus-sign-alt
| icon-plus-sign-alt
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-stethoscope
| icon-stethoscope
.one.fourth.two-up-small-tablet.two-up-mobile
p
i.icon-user-md
| icon-user-md
br
hr
h2.AmericanTypewriter Social Icons
h6.small Large Icons
a.social-icon.behance.large.tooltip(href='#', title='.social-icon.behance.large') Behance
|
a.social-icon.creativecloud.large.tooltip(href='#', title='.social-icon.creativecloud.large') Creative Cloud
|
a.social-icon.dribbble.large.tooltip(href='#', title='.social-icon.dribbble.large') Dribbble
|
a.social-icon.dropbox.large.tooltip(href='#', title='.social-icon.dropbox.large') Dropbox
|
a.social-icon.evernote.large.tooltip(href='#', title='.social-icon.evernote.large') Evernote
|
a.social-icon.facebook.large.tooltip(href='#', title='.social-icon.facebook.large') Facebook
|
a.social-icon.flickr.large.tooltip(href='#', title='.social-icon.flickr.large') Flickr
|
a.social-icon.github.large.tooltip(href='#', title='.social-icon.github.large') Github
|
a.social-icon.googleplus.large.tooltip(href='#', title='.social-icon.googleplus.large') GooglePlus
|
a.social-icon.icloud.large.tooltip(href='#', title='.social-icon.icloud.large') iCloud
|
a.social-icon.linkedin.large.tooltip(href='#', title='.social-icon.linkedin.large') LinkedIn
|
a.social-icon.mail.large.tooltip(href='#', title='.social-icon.mail.large') Mail
|
a.social-icon.msn.large.tooltip(href='#', title='.social-icon.msn.large') MSN
|
a.social-icon.pinterest.large.tooltip(href='#', title='.social-icon.pinterest.large') Pinterest
|
a.social-icon.rdio.large.tooltip(href='#', title='.social-icon.rdio.large') Rdio
|
a.social-icon.rss.large.tooltip(href='#', title='.social-icon.rss.large') RSS
|
a.social-icon.skitch.large.tooltip(href='#', title='.social-icon.skitch.large') Skitch
|
a.social-icon.skype.large.tooltip(href='#', title='.social-icon.skype.large') Skype
|
a.social-icon.spotify.large.tooltip(href='#', title='.social-icon.spotify.large') Spotify
|
a.social-icon.stumbleupon.large.tooltip(href='#', title='.social-icon.stumbleupon.large') StumbleUpon!
|
a.social-icon.twitter.large.tooltip(href='#', title='.social-icon.twitter.large') Twitter
|
a.social-icon.vimeo.large.tooltip(href='#', title='.social-icon.vimeo.large') Vimeo
|
a.social-icon.youtube.large.tooltip(href='#', title='.social-icon.youtube.large') YouTube
|
a.social-icon.youversion.large.tooltip(href='#', title='.social-icon.youversion.large') YouVersion
|
a.social-icon.zerply.large.tooltip(href='#', title='.social-icon.zerply.large') Zerply
|
a.social-icon.pocket.large.tooltip(href='#', title='.social-icon.pocket.large') Pocket App
hr
h6.small Medium Icons
a.social-icon.behance.medium.tooltip(href='#', title='.social-icon.behance.medium') Behance
|
a.social-icon.creativecloud.medium.tooltip(href='#', title='.social-icon.creativecloud.medium') Creative Cloud
|
a.social-icon.dribbble.medium.tooltip(href='#', title='.social-icon.dribbble.medium') Dribbble
|
a.social-icon.dropbox.medium.tooltip(href='#', title='.social-icon.dropbox.medium') Dropbox
|
a.social-icon.evernote.medium.tooltip(href='#', title='.social-icon.evernote.medium') Evernote
|
a.social-icon.facebook.medium.tooltip(href='#', title='.social-icon.facebook.medium') Facebook
|
a.social-icon.flickr.medium.tooltip(href='#', title='.social-icon.flickr.medium') Flickr
|
a.social-icon.github.medium.tooltip(href='#', title='.social-icon.github.medium') Github
|
a.social-icon.googleplus.medium.tooltip(href='#', title='.social-icon.googleplus.medium') GooglePlus
|
a.social-icon.icloud.medium.tooltip(href='#', title='.social-icon.icloud.medium') iCloud
|
a.social-icon.linkedin.medium.tooltip(href='#', title='.social-icon.linkedin.medium') LinkedIn
|
a.social-icon.mail.medium.tooltip(href='#', title='.social-icon.mail.medium') Mail
|
a.social-icon.msn.medium.tooltip(href='#', title='.social-icon.msn.medium') MSN
|
a.social-icon.pinterest.medium.tooltip(href='#', title='.social-icon.pinterest.medium') Pinterest
|
a.social-icon.rdio.medium.tooltip(href='#', title='.social-icon.rdio.medium') Rdio
|
a.social-icon.rss.medium.tooltip(href='#', title='.social-icon.rss.medium') RSS
|
a.social-icon.skitch.medium.tooltip(href='#', title='.social-icon.skitch.medium') Skitch
|
a.social-icon.skype.medium.tooltip(href='#', title='.social-icon.skype.medium') Skype
|
a.social-icon.spotify.medium.tooltip(href='#', title='.social-icon.spotify.medium') Spotify
|
a.social-icon.stumbleupon.medium.tooltip(href='#', title='.social-icon.stumbleupon.medium') StumbleUpon!
|
a.social-icon.twitter.medium.tooltip(href='#', title='.social-icon.twitter.medium') Twitter
|
a.social-icon.vimeo.medium.tooltip(href='#', title='.social-icon.vimeo.medium') Vimeo
|
a.social-icon.youtube.medium.tooltip(href='#', title='.social-icon.youtube.medium') YouTube
|
a.social-icon.youversion.medium.tooltip(href='#', title='.social-icon.youversion.medium') YouVersion
|
a.social-icon.zerply.medium.tooltip(href='#', title='.social-icon.zerply.medium') Zerply
|
a.social-icon.pocket.medium.tooltip(href='#', title='.social-icon.pocket.medium') Pocket App
hr
h6.small Small Icons
a.social-icon.behance.small.tooltip(href='#', title='.social-icon.behance.small') Behance
|
a.social-icon.creativecloud.small.tooltip(href='#', title='.social-icon.creativecloud.small') Creative Cloud
|
a.social-icon.dribbble.small.tooltip(href='#', title='.social-icon.dribbble.small') Dribbble
|
a.social-icon.dropbox.small.tooltip(href='#', title='.social-icon.dropbox.small') Dropbox
|
a.social-icon.evernote.small.tooltip(href='#', title='.social-icon.evernote.small') Evernote
|
a.social-icon.facebook.small.tooltip(href='#', title='.social-icon.facebook.small') Facebook
|
a.social-icon.flickr.small.tooltip(href='#', title='.social-icon.flickr.small') Flickr
|
a.social-icon.github.small.tooltip(href='#', title='.social-icon.github.small') Github
|
a.social-icon.googleplus.small.tooltip(href='#', title='.social-icon.googleplus.small') GooglePlus
|
a.social-icon.icloud.small.tooltip(href='#', title='.social-icon.icloud.small') iCloud
|
a.social-icon.linkedin.small.tooltip(href='#', title='.social-icon.linkedin.small') LinkedIn
|
a.social-icon.mail.small.tooltip(href='#', title='.social-icon.mail.small') Mail
|
a.social-icon.msn.small.tooltip(href='#', title='.social-icon.msn.small') MSN
|
a.social-icon.pinterest.small.tooltip(href='#', title='.social-icon.pinterest.small') Pinterest
|
a.social-icon.rdio.small.tooltip(href='#', title='.social-icon.rdio.small') Rdio
|
a.social-icon.rss.small.tooltip(href='#', title='.social-icon.rss.small') RSS
|
a.social-icon.skitch.small.tooltip(href='#', title='.social-icon.skitch.small') Skitch
|
a.social-icon.skype.small.tooltip(href='#', title='.social-icon.skype.small') Skype
|
a.social-icon.spotify.small.tooltip(href='#', title='.social-icon.spotify.small') Spotify
|
a.social-icon.stumbleupon.small.tooltip(href='#', title='.social-icon.stumbleupon.small') StumbleUpon!
|
a.social-icon.twitter.small.tooltip(href='#', title='.social-icon.twitter.small') Twitter
|
a.social-icon.vimeo.small.tooltip(href='#', title='.social-icon.vimeo.small') Vimeo
|
a.social-icon.youtube.small.tooltip(href='#', title='.social-icon.youtube.small') YouTube
|
a.social-icon.youversion.small.tooltip(href='#', title='.social-icon.youversion.small') YouVersion
|
a.social-icon.zerply.small.tooltip(href='#', title='.social-icon.zerply.small') Zerply
|
a.social-icon.pocket.small.tooltip(href='#', title='.social-icon.pocket.small') Pocket App
hr
h6.small Round Icons
a.social-icon.twitter.round.small.tooltip(href='#', title='.social-icon.twitter.round.small') Twitter
|
a.social-icon.twitter.round.medium.tooltip(href='#', title='.social-icon.twitter.round.medium') Twitter
|
a.social-icon.twitter.round.large.tooltip(href='#', title='.social-icon.twitter.round.large') Twitter
hr
h6.small Disabled States
a.social-icon.twitter.disabled.small.tooltip(href='#', title='.social-icon.twitter.disabled.small') Twitter
|
a.social-icon.twitter.disabled.medium.tooltip(href='#', title='.social-icon.twitter.disabled.medium') Twitter
|
a.social-icon.twitter.disabled.large.tooltip(href='#', title='.social-icon.twitter.disabled.large') Twitter
hr
h6.small Inline Social Icons (relative sizing)
.row
.one.whole
h1
span.social-icon.twitter.tooltip(title='.twitter.social-icon')
| Example of avatar embedded in a level 1 heading
h2
span.social-icon.twitter.tooltip(title='.twitter.social-icon')
| Example of avatar embedded in a level 2 heading
h3
span.social-icon.twitter.tooltip(title='.twitter.social-icon')
| Example of avatar embedded in a level 3 heading
h4
span.social-icon.twitter.tooltip(title='.twitter.social-icon')
| Example of avatar embedded in a level 4 heading
h5
span.social-icon.twitter.tooltip(title='.twitter.social-icon')
| Example of avatar embedded in a level 5 heading
h6
span.social-icon.twitter.tooltip(title='.twitter.social-icon')
| Example of avatar embedded in a level 6 heading
p
span.social-icon.twitter.tooltip(title='.twitter.social-icon')
| Example of avatar embedded in a paragraph
hr
br
h2.AmericanTypewriter Helpers
.row
.one.half.small-tablet
h4 Spin
p
button.spin.large.round Spin
button.spin-slow.large.round Slow
button.spin-fast.large.round Fast
br
br
.one.half.small-tablet
h4 Conditional Content
p.desktop-only Desktop only
p.hide-on-desktop Hide on desktop
p.ipad-only iPad only
p.hide-on-ipad Hide on iPad
p.small-tablet-only Small-tablet only
p.hide-on-small-tablet Hide on small-tablet
p.mobile-only Mobile only
p.hide-on-mobile Hide on mobile
hr
br
h2.AmericanTypewriter Responsive Headings
h1.AverageSans.responsive(data-compression='8.4') Responsive Heading
h1.AverageSans.responsive(data-compression='11.5', data-min='20', data-max='170') Longer Responsive Heading
h1.AverageSans.responsive Scrolling Responsive Heading with Overflowing Text
hr
br
h2.AmericanTypewriter Modals
.row
.one.third.small-tablet
h4 Image:
p
a.image.modal.button.asphalt(href='http://placekitten.com/g/200/300', title='http://placekitten.com/g/200/300') Image
h4 Image Gallery:
p.modal.gallery
a.button.yellow(href='http://placekitten.com/g/200/300', title='http://placekitten.com/g/200/300') 1
|
a.button.orange(href='http://placekitten.com/g/250/350', title='http://placekitten.com/g/250/350') 2
|
a.button.red(href='http://placekitten.com/g/300/300', title='http://placekitten.com/g/300/300') 3
|
a.button.piink(href='http://placekitten.com/g/350/250', title='http://placekitten.com/g/350/250') 4
|
a.button.purple(href='http://placekitten.com/g/300/200', title='http://placekitten.com/g/300/200') 5
.one.third.small-tablet
h4 Inline Content:
p
a.modal.button.green(href='#example-modal') Inline Content
#example-modal.mfp-hide
img.pull-right.gap-left.gap-bottom(src='http://placekitten.com/g/200/300', alt='')
h1 HTML Ipsum Presents
p
strong Pellentesque habitant morbi tristique
| senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.
em Aenean ultricies mi vitae est.
| Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.
a(href='#') Donec non enim
| in turpis pulvinar facilisis. Ut felis.
ol
li Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
li Aliquam tincidunt mauris eu risus.
p
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.
p
a.modal.button.blue(href='#subscribe') Inline Content (Form)
#subscribe.mfp-hide
form#subForm(action='http://groundworkcss.createsend.com/t/t/s/niuuy/', method='post')
.row
.one.whole.padded
h4 Get notified when big things happen.
input#name(type='text', name='cm-name', tab-index='1', placeholder='First & Last Name')
br
input#niuuy-niuuy(type='text', name='cm-niuuy-niuuy', tab-index='2', placeholder='Email Address')
br
h3.pull-left
a.tooltip(href='http://github.com/groundworkcss', target='_blank', title='Follow @groundworkcss')
i.icon-github-alt
|
a.tooltip(href='http://twitter.com/groundworkCSS/', target='_blank', title='Follow @GroundworkCSS')
i.icon-twitter
|
a.tooltip(href='mailto:groundwork@sidereel.com', target='_blank', title='Email GroundworkCSS')
i.icon-envelope-alt
input.pull-right.blue(type='submit', value='Subscribe')
.one.third.small-tablet
h4 External Content (iframe):
p
a.modal.button.purple(href='http://placekitten.com/')
| External Content
i.icon-external-link
h4 YouTube Video (iframe):
p
a.modal.button.red(href='http://www.youtube.com/watch?v=eDO23-eLoGA')
| YouTube Video
i.icon-play-circle
hr
br
h2.AmericanTypewriter Tooltips
.row
.one.third.padded
a.tooltip(href='#', title='This tooltip comes from the `title` attribute of this link') Show me a tooltip!
.one.third.padded
input.inline.tooltip(placeholder='Name', title='Enter your first & last name')
.one.third.padded
button.tooltip(title='This tooltip comes from the `title` attribute of this button') Show me a tooltip!
p
button.tooltip.info(title='This tooltip inherits the `info` styles of this button') Info tooltip
|
button.tooltip.alert(title='This tooltip inherits the `alert` styles of this button') Alert tooltip
|
button.tooltip.warning(title='This tooltip inherits the `warning` styles of this button') Warning tooltip
|
button.tooltip.error(title='This tooltip inherits the `error` styles of this button') Error tooltip
|
button.tooltip.success(title='This tooltip inherits the `success` styles of this button') Success tooltip
p
button.tooltip.yellow(title='This tooltip inherits the `yellow` styles of this button') Yellow tooltip
|
button.tooltip.orange(title='This tooltip inherits the `orange` styles of this button') Orange tooltip
|
button.tooltip.red(title='This tooltip inherits the `red` styles of this button') Red tooltip
|
button.tooltip.pink(title='This tooltip inherits the `pink` styles of this button') Pink tooltip
|
button.tooltip.purple(title='This tooltip inherits the `purple` styles of this button') Purple tooltip
|
button.tooltip.asphalt(title='This tooltip inherits the `asphalt` styles of this button') Asphalt tooltip
|
button.tooltip.blue(title='This tooltip inherits the `blue` styles of this button') Blue tooltip
|
button.tooltip.turquoise(title='This tooltip inherits the `turquoise` styles of this button') Turquoise tooltip
|
button.tooltip.green(title='This tooltip inherits the `green` styles of this button') Green tooltip
hr
br
h2.AmericanTypewriter Cycle2 Slider
h4.AverageSans Image Slideshow
.cycle-slideshow(data-cycle-fx='scrollHorz', data-cycle-pause-on-hover='true')
img(src='http://placehold.it/1200x400/2ecc71/ffffff/&text=Slide+1', alt='')
img(src='http://placehold.it/1200x400/3498db/ffffff/&text=Slide+2', alt='')
img(src='http://placehold.it/1200x400/9b59b6/ffffff/&text=Slide+3', alt='')
img(src='http://placehold.it/1200x400/f1c40f/ffffff/&text=Slide+4', alt='')
hr
h4.AverageSans Non-image Slideshow
.cycle-slideshow(data-cycle-slides='> div', data-cycle-timeout="2000", data-cycle-pause-on-hover="true")
.row.success.callout
h1 Content Slide
p
| This slide has HTML content instead of an image and has also had
code.inline .callout
| applied to it.
p
a.success.button(href='#') Click Me
.row.info.callout
h1 Another Content Slide
p
| This slide has HTML content instead of an image and has also had
code.inline .warning.callout
| applied to it.
p
a.large.info.button(href='#') Click Me
hr
br
h2.AmericanTypewriter Tiles
.tiles
.row
.one.mobile.fifth.pad-right
select.value
option(value='single', selected) Single
option(value='group') Group
option(value='corp') Corp
.four.mobile.fifths
.tile(data-value='single')
i.icon-user
| Single user
|
.tile(data-value='group')
i.icon-group
| Small group
|
.tile(data-value='corp')
i.icon-building
| Corporation
hr
h4.AverageSans Tile Colors
.tiles
.row
.one.mobile.fifth.pad-right
select.value(size='5')
option(value='default', selected) Default
option(value='yellow') Yellow
option(value='orange') Orange
option(value='red') Red
option(value='pink') Pink
option(value='purple') Purple
option(value='asphalt') Asphalt
option(value='blue') Blue
option(value='turquoise') Turquoise
option(value='green') Green
.four.mobile.fifths
.tile(data-value='default')
i.icon-leaf
| default
|
.tile.yellow(data-value='yellow')
i.icon-leaf
| yellow
|
.tile.orange(data-value='orange')
i.icon-leaf
| orange
|
.tile.red(data-value='red')
i.icon-leaf
| red
|
.tile.pink(data-value='pink')
i.icon-leaf
| pink
|
.tile.purple(data-value='purple')
i.icon-leaf
| purple
|
.tile.asphalt(data-value='asphalt')
i.icon-leaf
| asphalt
|
.tile.blue(data-value='blue')
i.icon-leaf
| blue
|
.tile.turquoise(data-value='turquoise')
i.icon-leaf
| turquoise
|
.tile.green(data-value='green')
i.icon-leaf
| green
hr
h4.AverageSans Tile States
.tiles
.row
.one.mobile.fifth.pad-right
input.value.disabled(type='text', value='active', readonly)
.four.mobile.fifths
.tile.disabled(data-value='disabled')
i.icon-leaf
| disabled
|
.tile.active(data-value='active')
i.icon-leaf
| active
hr
h4.AverageSans Tile Sizes
.tiles
.row
.one.mobile.fifth.pad-right
input.value(type='text', value='small')
.four.mobile.fifths
.tile.small(data-value='small')
i.icon-leaf
| small
|
.tile.large(data-value='large')
i.icon-leaf
| large
|
.tile.square(data-value='square')
i.icon-leaf
| square
|
.tile.round(data-value='round')
i.icon-leaf
| round
hr
h4.AverageSans Hidden Field & Custom Callback Function
.tiles
input.value(type='hidden', value='', id='yepNope')
script(type='text/javascript')
$(document).ready(function() {
$('input#yepNope').on('change', function() {
if($(this).val() == 'yep')
alert("Right on!");
else
alert("Aww, how come?");
});
});
.tile(data-value='yep')
i.icon-thumbs-up
| thumbs up
|
.tile(data-value='nope')
i.icon-thumbs-down
| thumbs down