Please update your browser. Why?

Styleguide

Globals | Objects | Modules

2. Objects

CSS objects that are being reused throughout the whole site. They are decoupled from content naming and are usually visually small. Prefixed with o-.

Alphabet Object

Oops, something went wrong here. Check JS console for more info.

.o-alphabet

Alphabet list, to use for filtering, etc.

Big Media object. Big image and title, small text & link on the side.

: )

A one liner

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.
Read More >

.o-big-media

Rounded image, text on the side.

: )

A one liner

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.
Read More >

.o-big-media--compact

Slightly smaller image. Vertical alignment to middle. Different margins. Used in content/show.

A caption object.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

.o-caption

Default variation, includes text.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

.o-caption--left-aligned

Text is aligned to the left

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

.o-caption--arrow-up

Arrow points to the top

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

.o-caption--arrow-right

Arrow points to the right

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

.o-caption--arrow-down

Arrow points to the bottom

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

.o-caption--arrow-left

Arrow points to the left

An object using default select plus input for editable content

Themed "on-off" value checkbox.


.o-on-off-checkbox

Default variation. White bg/black letters for 'on', the opposite for 'off' state.


.o-on-off-checkbox--text

Text only variation. No background color.

An inline content media item

Sample Caption Sticks here

.o-content-embed

Default variation

Error tooltips, anchored to the input elements. Could be merged with o-tooltip in the future

This is an error message

.o-error.o-error--right

Default variation. Arrow shows on the left side of the tooltip.

This is an error message

.o-error--left

Arrow shows on the right side of the tooltip.

This is an error message

.o-error--right

Arrow shows on the left side of the tooltip.

This is an error message

.o-error--top

Arrow shows on the bottom of the tooltip

This is an error message

.o-error--no-arrow

No arrow

Global flash message, sliding down from the top part of the page.

A flash message

.o-flash

Default variation. Slides from top.

A flash message

.o-flash--error

Error variation. Red color

Fontlist Card

Oops, something went wrong here. Check JS console for more info.

.o-fontlist-card

Basic Card

Oops, something went wrong here. Check JS console for more info.

.o-fontlist-card--overf-yellow

Sits over yellow background(white left square)

Standard section headline - Note: Variations here show changes in markup, rather than classes that change the style, use as a guide

Headline Text

Test Subheading

.o-headline

Standard Headline

Headline Text

Test Subheading

.o-headline--medium-subheading

Standard Headline, medium subheading

Headline Text

Test Subheading

.o-headline--large-subheading

Standard Headline, large subheading

Headline Text

Test Subheading

Optional Headline

.o-headline--three-lines

Standard Headline, three lines

Headline Text

Test Subheading

.o-headline--medium-heading

Medium Headline

Highlighted text.

Highlighted text

.o-highlight.o-highlight--yellow-bg

Default variation. Yellow bg, black text.

Highlighted text

.o-highlight.o-highlight--red-bg

Bed bg.

Highlighted text

.o-highlight.o-highlight--white-text

White text

Highlighted text

.o-highlight.o-highlight--inline

Display: inline-block

Baseline object for all Icons

.o-icon--right-arrow

Right Arrow

.o-icon--right-arrow-long

Long Right Arrow

.o-icon--bottom-arrow

Bottom Arrow // Currently the same as .o-icon--down-simple-arrow

.o-icon--right-simple-arrow

Right Simple Arrow

.o-icon--left-simple-arrow

Left Simple Arrow

.o-icon--up-simple-arrow

Up Simple Arrow

.o-icon--down-simple-arrow

Down Simple Arrow

.o-icon--x

X

.o-icon--plus

Plus

.o-icon--vertical-separator

Vertical Separator

.o-icon--email

Email

.o-icon--pencil

Pencil

.o-icon--rss

RSS

.o-icon--picture

Picture

.o-icon--document

Document

.o-icon--grid--lines

Grid Lines

.o-icon--grid--four

Grid Four

.o-icon--grid--nine

Grid Nine

.o-icon--grid--horizontal

Grid Horizontal

.o-icon--grid--list

Grid List

.o-icon--grid--dots

Grid Dots

.o-icon--grid--fontlist

Fontlist

.o-icon--add

Add

.o-icon--video

Video

.o-icon--text

Text

.o-icon--replicate

Replicate

.o-icon--screen

Screen

.o-icon--upload

Upload

.o-icon--recycle

Recycle

.o-icon--cart

Cart

.o-icon--mobile

Mobile

.o-icon--dash

Dash

.o-icon--behance

Behance

.o-icon--facebook

Facebook

.o-icon--google-plus

Google +

.o-icon--instagram

Instagram

.o-icon--flickr

Flickr

.o-icon--pinterest

Pinterest

.o-icon--skype

Skype

.o-icon--tumblr

Tumblr

.o-icon--vimeo

Vimeo

.o-icon--twitter

Twitter

.o-icon--youtube

Youtube

.o-icon--designer

Designer

.o-icon--book

Book

.o-icon--globe

Globe

.o-icon--key

Key

.o-icon--magnifier

Magnifier

.o-icon--lock

Lock

.o-icon--desktop

Desktop

.o-icon--tag

Tag

.o-icon--download

Download

.o-icon--print

Print

.o-icon--map-pin

Map Pin

.o-icon--home

Home

.o-icon--factory

Factory

.o-icon--credit-card

Credit Card

.o-icon--calendar

Calendar

.o-icon--language-latin

Latin

.o-icon--language-cyrillic

Cyrillic

.o-icon--language-greek

Greek

.o-icon--pin

Pin

.o-icon--open-book

Open Book

.o-icon--code

Code

.o-icon--coin

Coin

.o-icon--chain

Chain

.o-icon--dash

Dash

.o-icon--package

Package

.o-icon--logout

Log out

.o-icon--login

Log in

.o-icon--settings

Settings

.o-icon--check

Check

.o-icon--try-out

Try out

.o-icon--heart

Heart

.o-icon--heart--filled

Filled Heart Icon

.o-icon--add-to-list

Add to list

.o-icon--added-to-list

Active state, consists of 2 icons

.o-icon--added-to-list--mono

Active state, consists of 2 icons

.o-icon--speech-bubble

Speech Bubble

.o-icon--clock

Clock icon

.o-icon--tryout-blank

Crossed Box, used in blank tryout template

.o-icon--align-justify

Align Justify

.o-icon--align-center

Align Center

.o-icon--align-left

Align Left

.o-icon--align-right

Align Right

.o-icon--text-size

Text Size

.o-icon--line-height

Line Height

.o-icon--share-trigger

Share Trigger

.o-icon--tryout-blog

Block, used in blog tryout template

.o-icon--tryout-book

Text, used in book tryout template

.o-icon--tryout-postcard

Picture, used in postcard tryout template

.o-icon--package.o-icon--xsmall

XSmall (Modify any icon with this)

.o-icon--package.o-icon--small

Small (Modify any icon with this)

.o-icon--package.o-icon--large

Large (Modify any icon with this)

.o-icon--package.o-icon--huge

Huge (Modify any icon with this)

.o-icon--ot-liga

Open Type Features: Ligatures

.o-icon--ot-smcp

Open Type Features: Small Caps

.o-icon--ot-lnum

Open Type Features: Lining Numerals

.o-icon--ot-onum

Open Type Features: Old Style Numerals

.o-icon--info

Info icon.

.o-icon--similar-families

Similar Families.

.o-icon--alert

Alert icon.

.o-icon--phone

Phone icon.

An image uploader input field.

You can click here to upload an image.
Maximum upload size is 20 MB

.o-image-uploader

Defaut yellow variation

You can click here to upload an image.
Maximum upload size is 20 MB

.o-image-uploader--grey

Grey variation

Info Object

Accusamus Bushwick umami do aute ad, trust fund nesciunt nostrud. Carles sapiente biodiesel, commodo banjo delectus pug aliqua 90's Shoreditch. Odd Future fap pour-over nostrud, iPhone velit Etsy anim. Neutra narwhal Odd Future Banksy, Godard post-ironic butcher tote bag chillwave try-hard fingerstache dolor. Magna meh nostrud, ex narwhal Truffaut drinking vinegar fixie semiotics vegan High Life Wes Anderson shabby chic four loko dolor. Cray before they sold out readymade, ullamco placeat semiotics letterpress master cleanse brunch. Vegan keytar Brooklyn, laboris sed delectus seitan Austin in cliche nulla banjo.

.o-info

standard info layout

Baseline object for all input fields

.o-input

Default variation.

.o-input--short

Shorter (35px)

.o-input--mega-header

Bigger height, font-size (36px) and different family

.o-input--big-header

Bigger font-size (21px) and different family

.o-input--big-copy

Bigger font-size (21px)

.o-input--disabled

Disabled variation

.o-input--white-bg

White background, everything else the same.

.o-input--yellow-bg

Soft yellow background, on editor.

.o-input--unbordered

No border variation.

.o-input--one-char

One character input field (used in font editor for the glyph).

.o-input.is-error

Error state.

.o-input--tall-textarea

Double height for textareas (340px)

.o-input--short-textarea

Short height for textareas (6em)

.o-input--number

Variation for type=number fields. Small padding, no bg, black color.

.o-input--copyable

Cursor: pointer for fields you can copy text from

Label

Label

.o-label

Standard Yellow Label

Label

.o-label--on

Always on

Label

.o-label--grey

Greyed out version

Label

.o-label--invert

Inverted label, white bg

Label

.o-label--icon

Appends .o-icon to input

List Item Object

FontFont
List Item

.o-list-item--image

List Item with image

List Item

.o-list-item--icon

List Item with icon

.o-list-item--link

List Item with a link

Erik Spiekermann
List Item

.o-list-item--designer

List Item with designer face

A loading indicator.

.loading-indicator

Default variation.

.loading-indicator--on-yellow

Variation over yellow background.

.loading-indicator--on-black

Variation over black background.

A simple media object consisting of an image and one line of text.

.o-media

Default variation: image on top and text on small font size.

.o-media--headline

Header variation with large image (180px) and .h2 text. Used in the designer page header.

.o-media--rounded

The image is rounded.

.o-media--inverted

Text sits on top and is also bold, is left aligned and image fills container width.

.o-media--bg-yellow

Yellow background and different border color.

.o-media--bg-black

Black background and different border color.

.o-media--bg-white

White background and different border color.

An inline content media item

Payment Type

.o-payment-type.o-payment-type--credit_card

Shows credit card icon on the right.

Payment Type

.o-payment-type.o-payment-type--paypal

Shows paypL icon on the right.

A progress indicator.

Oops, something went wrong here. Check JS console for more info.

.progress-indicator

Default variation.

Oops, something went wrong here. Check JS console for more info.

.progress-indicator--on-yellow

Variation over yellow background.

Oops, something went wrong here. Check JS console for more info.

.progress-indicator--on-black

Variation over black background.

Oops, something went wrong here. Check JS console for more info.

.progress-indicator--white-black

Variation white text over black background.

The search field appearing in the top right corner of the site and in the search results' page header.

.o-search-field

Default variation: Open on large screens.

.o-search-field--open

Always open.

Section Divider

.o-section-label

Default section divider

.o-section-label--padded-top

Some extra padding on top for cases when it follow page headlines.

.o-section-label--white

White Background variation (used on the yellow Homepage )

.o-section-label--yellow

Yellow Background variation (used on the white Homepage )

An object replacing default select styling

.o-pulldown

Default variation.

.o-pulldown--yellow

Yellow variation.

.o-pulldown--bright-yellow

Yellow variation.

.o-pulldown--light

Light variation.

.o-pulldown--light-grey

Light variation.

.o-pulldown--bright-grey

Very light variation.

.o-pulldown--grey-hover

Changes only hover colors: dark grey bg and white color.

.o-pulldown--yellow-hover

Changes only hover colors: yellow bg and black color.

.o-pulldown--dark

Always black letters.

.o-pulldown--short

Shorter height (35px), Inline-Block

.o-pulldown--small

Shorter height (35px).

.o-pulldown--medium

Shorter height (40px).

.o-pulldown--tight

Tight variation is being used in the editor only

.o-pulldown--narrow

Narrow variation. Is being i.e in Tryout

.o-pulldown--minimal

Minimal variation, padding and arrow size change.

.o-pulldown--reverse

Arrow on the opposite side.

.o-pulldown--disabled

Nope

.o-pulldown--rebase

Temporary (hopefully) Helper for general optimization

Social List

.o-social

Default variation: Yellow links, white icons

.o-social--inline

Inline variation, no background, black color

.o-social--inverted

Inverted colors: White icons, yellow background

Table Layout

Oops, something went wrong here. Check JS console for more info.

.o-table-layout

Display stuff in a table for easy vertical centering

Generic Tag Object

.o-tag

Default variation: Plain grey tag, secondary background color on hover

.o-tag--dark-grey

Darker grey background color, black text. Secondary background color on hover

.o-tag--highlighted

Highlight variation: Always secondary background color

.o-tag--pointed

Pointed variation: Looks like a sign post

.o-tag--pointed-highlighted

Pointed variation always highlighted

.o-tag--pointed-hover

Pointed variation only on hover

.o-tag--small

Small modifer, use with any variation of tag

A horizontal ruler with some text in the middle

Divider

.o-text-divider

Default Variation. Changes with theme settings.

Divider

.o-text-divider--white

Force white color over white background.

Divider

.o-text-divider--yellow

Force yellow color over yellow background.

Divider

.o-text-divider--black

Force black color over black background.

Tooltip showing hidden information. The showing/hiding functionality and the positioning of the tooltip&arrow happens with JS.

Some Tooltip Content

.o-tooltip

Default variation. Fixed width. Used in languages and open type modules.

Some Tooltip Content

.o-tooltip--above

Tooltip shows from above.

Some Tooltip Content

.o-tooltip--below

Tooltip shows from below.

Some Tooltip Content

.o-tooltip--center

Arrow is center aligned.

Some Tooltip Content

.o-tooltip--right

Arrow is right aligned.

Some Tooltip Content

.o-tooltip--left

Arrow is left aligned.

Some Tooltip Content

.o-tooltip--small

Smaller font size and padding, no fixed width. Used in color switcher and tryout template links.

Media alike item, that displays info of and links to a typeface.

Oops, something went wrong here. Check JS console for more info.

.o-type-card

Default variation: Title, info & number of styles

Oops, something went wrong here. Check JS console for more info.

.o-type-card--over-yellow

White label.

Oops, something went wrong here. Check JS console for more info.

.o-type-card--border-bottom

Has a bottom border.

Media alike item, that displays info of and links to a typeface, in a linear way.

Oops, something went wrong here. Check JS console for more info.

.o-type-linear

Default variation: Title, info & number of styles

Oops, something went wrong here. Check JS console for more info.

.o-type-linear--compact

Compact variation, used in fontlist/edit

Similar to type linear, but with edit controls (comment, remove). Used in fontlists/edit.

Oops, something went wrong here. Check JS console for more info.

.o-type-linear-editable

Default variation.

Media alike item, that displays info of and links to a typeface, by showing the "Rag" text sample.

Oops, something went wrong here. Check JS console for more info.

.o-type-rag

Default variation: Title, info & number of styles

Media alike item, that displays info of a typeface, in a linear way. Currently used in the family finder.

Oops, something went wrong here. Check JS console for more info.

.o-type-small-list

Default variation: only name