Please update your browser. Why?

Styleguide

Globals | Objects | Modules

3. Modules

They contain styling and layout information and they mostly occur once. They are tightly coupled with content and may or may not consist of objects. Prefixed with m-.

A teaser element for a blog post that also works as a header of the blog post.

.m-blog-teaser

Default variation.

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

.m-blog-teaser--compact

This is being used in the blog list. Read more button appears, social sharing buttons hide. Also inline image is not shown.

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

.m-blog-teaser--image

Default variation.

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

.m-blog-teaser--image--compact

This is being used in the blog list. Read more button appears, social sharing buttons hide.

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

.m-blog-teaser--sticky

Variant used in blog header.

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

Color Switcher Module

.m-color-switcher

Default variation

Object containing the 3 different family type icons.

.m-family-type-icons

Default Variation

List of attributes for a purchased font (licenses, language support etc)

.m-font-attributes

Default Variation

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

Contains styling for the font change controls. Currently used in the tryout pages.

.m-font-controls

Default Variation

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

A Block of sample text, description and actions for a family

.m-fontlist-sample

Default Variation

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

Font GlyphSampler Module

.m-glyph-sampler

Default variation

Type to compare other characters
B
Hairline
B
Thin
B
Extra Light
B
Light
B
Book
B
Regular
B
Medium
B
Bold
B
Heavy
B
Black
B
Ultra
B

Font Glyphs Module

.m-glyphs

Default variation

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

A small module containing an input field with an icon.

.m-input-icon.m-input-icon--left

Default Variation. Icon on left

.m-input-icon--right

Icon sits from right.

.m-input-icon--yellow

Change icon color on yellow variations

.m-input-icon--black

Black icon color

.m-input-icon--short

40px height

.m-input-icon--stripped

No background color, border on input. 1em height.

.m-input-icon--huge

Massive, 105px height, field used in homepage.

Font Languages Module

.m-languages

Default variation

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

A list of designers (small variation) with the alphabet object on top.

.m-list-designers

Default Variation

A headline with an icon.

.m-icon-headline

Default variation. Bottom border.

A title
A title

Open Type Features Module

.m-opentype

Default variation

Proportional Figures
| 167
| 167
Subscript
| 167
| 167
Slashed Zero
| 0
| 0
Oldstyle Figures
| 167
| 167
Lining Figures
| 167
| 167
Tabular Figures
| 167
| 167
Superscript
| 167
| 167
Fractions
| 135/167
| 135/167
Replaces figures separated by a slash with 'common' (diagonal) fractions.
Small Capitals
| Small
| Small
Small Capitals From Capitals
| CAPS
| CAPS
Case-Sensitive Forms
| (H-o)
| (H-o)
Shifts punctuation up to a position that works better with all-caps text.
Historical Forms
| hist
| hist
Standard Ligatures
| flfi
| flfi
Replaces a sequence of glyphs with a ligature. Active by default.
Ordinals
| 1a2o
| 1a2o
Replaces characters with ordinal forms for use after figures.

Displays the total price of a cart, vat information and total.

.m-price-summary

Default Variation

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

A row of purchased family information and actions. Consists of 2 parts: one flexible that sits ono the left and the floated right blocks like actions.

.m-purchase

Default Variation. Over grey bg.

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

.m-purchase--over-white

The block borders are white instead of grey. Didn't want to use table for that, sorry :).

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

Font QuickTry Module

.m-quick_try

Default variation

The
Black
Phlegmatics
Berlin
2 km
Wyk auf Föhr
Kreis Nordfriesland
Bedford Avenue Station
1
2
R
Noel Gallagher may not read it
Noel Gallagher’s statement that reading fiction is a “fucking waste of time” and readers are “putting themselves a tiny little bit above the rest of us” – is a valuable contribution.
Cathy Nicol: Isle of Joy
Vince Smith met bandmates Jim Kelly and Nancy Gibbs at a Sex Pistols concert, where he tried to kiss Sid Vicious’ guitar and got a bloody nose. Together they formed Aftershock, and for a while they made a lot of noise, a bit of money and caused a sensation wherever they went.
Il n’y a qu’une seule chose qui puisse rendre un rêve impossible à réaliser: c’est la peur d’échouer.

Cordialement,
Paul
Françoise Béziat
82 Boulevard de Clichy
75018 Paris
France
Ray’s Pizza
Mexicana
Roquefort
Palmitos
Ravioles
8 $
9 $
7 $
8 $
Total
32 $

Font Quote Module

.m-quote

Default variation

Sometimes I get emotional over fonts.
— Kanye West

.m-quote--small

Used on the homepage for fonts with a smaller height that appear too small on the eye

Sometimes I get emotional over fonts.
— Kanye West

.m-quote--smaller

Used in a context where quotes should be smaller, i.e: homepage

Sometimes I get emotional over fonts.
— Kanye West

List of the style filter links

.m-style-filters

Default variation

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

.m-style-filters--large

Large variation (110px width)

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

.m-style-filters--over-yellow

Over persistent yellow background (used in homepage)

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

Font Styles Module

.m-styles

Default variation

a
a

The sub-menu module. The one with the search field and the edit link on the top right corner of the page.

.m-sub-menu

Default variation

Module that holds a textarea and its character counter.

.m-textarea-count

Default variation, counter at bottom right corner

Repeatable editable text block, lies in tryout page.

.m-tryout-textblock

Default Variation

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

It's a media object with vertical styling.

.m-vertical-media

Default. Rounded image, bold big title.

Enreichnung
1.Enreichung
Um deinen Entwurf dem FontFont-Typeboard vorzulegen, sende uns aussagekräftige Schriftmuster (PDF) oder lade es gleich hier hoch. Mehr Infos: Become a FontFont Designer. Foundries senden uns einfach ihren Katalog (PDF, unten klicken) oder einen Link zur Foundry-Homepage.
Hochladen

Font Waterfalls Module

.m-waterfalls

Default variation

120
Bei jedem klugen Wort von Sokrates ruft Xanthippe zynisch: Quatsch! Dabei grüßt die Quellnixe freundlich am Bach. Verflixt öde …
70
Bei jedem klugen Wort von Sokrates ruft Xanthippe zynisch: Quatsch! Dabei grüßt die Quellnixe freundlich am Bach. Verflixt öde …
40
Bei jedem klugen Wort von Sokrates ruft Xanthippe zynisch: Quatsch! Dabei grüßt die Quellnixe freundlich am Bach. Verflixt öde …
25
Bei jedem klugen Wort von Sokrates ruft Xanthippe zynisch: Quatsch! Dabei grüßt die Quellnixe freundlich am Bach. Verflixt öde …
18
Bei jedem klugen Wort von Sokrates ruft Xanthippe zynisch: Quatsch! Dabei grüßt die Quellnixe freundlich am Bach. Verflixt öde …
12
Bei jedem klugen Wort von Sokrates ruft Xanthippe zynisch: Quatsch! Dabei grüßt die Quellnixe freundlich am Bach. Verflixt öde …
120
Bei jedem klugen Wort von Sokrates ruft Xanthippe zynisch: Quatsch! Dabei grüßt die Quellnixe freundlich am Bach. Verflixt öde …
70
Bei jedem klugen Wort von Sokrates ruft Xanthippe zynisch: Quatsch! Dabei grüßt die Quellnixe freundlich am Bach. Verflixt öde …
40
Bei jedem klugen Wort von Sokrates ruft Xanthippe zynisch: Quatsch! Dabei grüßt die Quellnixe freundlich am Bach. Verflixt öde …
25
Bei jedem klugen Wort von Sokrates ruft Xanthippe zynisch: Quatsch! Dabei grüßt die Quellnixe freundlich am Bach. Verflixt öde …
18
Bei jedem klugen Wort von Sokrates ruft Xanthippe zynisch: Quatsch! Dabei grüßt die Quellnixe freundlich am Bach. Verflixt öde …
12
Bei jedem klugen Wort von Sokrates ruft Xanthippe zynisch: Quatsch! Dabei grüßt die Quellnixe freundlich am Bach. Verflixt öde …
The Monotype Brand Family