CSS
Icons
Icons
The icons can be used by simply adding a class with the prefix icon- followed by the name of the icon.
agreement
alarm
arrow-down
arrow-left
arrow-right-sparse
arrow-up
arrows-vert
attachment
bold
book
bookmark
broadcast
bubble-quote
bullhorn
calendar
camera
chart
checkbox-checked
checkbox-unchecked
checkmark
circle-small
clipboard
close
code
coins
collapse
copy
cross
disable
dropmenu
earth
edit
enlarge
enter
exit
expand
eye
eye-blocked
file
file-check
file-css
file-download
file-excel
file-filled
file-image
file-music
file-openoffice
file-pdf
file-play
file-presentation
file-spreadsheet
file-text
file-video
file-word
file-xml
file-zip
filter
first
floppy
folder
folder-open
folder-plus
font-size
grid
grid2
hammer
handle
home
image
info
italic
key-A
lamp
lan
last
layout
link
list
location
lock
lock-center
loop
mail
medal
mic
mobile
new
next
no-camera
numbered-list
package-download
pagebreak
palette
phone
play
plus
prev
price-tag
printer
print
projector
puzzle
qrcode
question
quill
redo
remove
rulers
search
settings
seven-segment9
shield
shrink
sort
sort-alpha-asc
sort-alpha-desc
split
stack
stack-minus
stack-plus
stack-text
star
stop
switchoff
switchon
tag
text-color
textarea
textfield
ticket
tilde
time
transmission
type
undo
unlocked
upload
user
user-chairperson
user-check
user-reading
users
warning
wrench
id-badge
<div class="icons-container">
<div class="icon-container">
<i class="icon icon-agreement"></i>
<span class="icon-title">agreement</span>
</div>
<div class="icon-container">
<i class="icon icon-alarm"></i>
<span class="icon-title">alarm</span>
</div>
<div class="icon-container">
<i class="icon icon-arrow-down"></i>
<span class="icon-title">arrow-down</span>
</div>
<div class="icon-container">
<i class="icon icon-arrow-left"></i>
<span class="icon-title">arrow-left</span>
</div>
<div class="icon-container">
<i class="icon icon-arrow-right-sparse"></i>
<span class="icon-title">arrow-right-sparse</span>
</div>
<div class="icon-container">
<i class="icon icon-arrow-up"></i>
<span class="icon-title">arrow-up</span>
</div>
<div class="icon-container">
<i class="icon icon-arrows-vert"></i>
<span class="icon-title">arrows-vert</span>
</div>
<div class="icon-container">
<i class="icon icon-attachment"></i>
<span class="icon-title">attachment</span>
</div>
<div class="icon-container">
<i class="icon icon-bold"></i>
<span class="icon-title">bold</span>
</div>
<div class="icon-container">
<i class="icon icon-book"></i>
<span class="icon-title">book</span>
</div>
<div class="icon-container">
<i class="icon icon-bookmark"></i>
<span class="icon-title">bookmark</span>
</div>
<div class="icon-container">
<i class="icon icon-broadcast"></i>
<span class="icon-title">broadcast</span>
</div>
<div class="icon-container">
<i class="icon icon-bubble-quote"></i>
<span class="icon-title">bubble-quote</span>
</div>
<div class="icon-container">
<i class="icon icon-bullhorn"></i>
<span class="icon-title">bullhorn</span>
</div>
<div class="icon-container">
<i class="icon icon-calendar"></i>
<span class="icon-title">calendar</span>
</div>
<div class="icon-container">
<i class="icon icon-camera"></i>
<span class="icon-title">camera</span>
</div>
<div class="icon-container">
<i class="icon icon-chart"></i>
<span class="icon-title">chart</span>
</div>
<div class="icon-container">
<i class="icon icon-checkbox-checked"></i>
<span class="icon-title">checkbox-checked</span>
</div>
<div class="icon-container">
<i class="icon icon-checkbox-unchecked"></i>
<span class="icon-title">checkbox-unchecked</span>
</div>
<div class="icon-container">
<i class="icon icon-checkmark"></i>
<span class="icon-title">checkmark</span>
</div>
<div class="icon-container">
<i class="icon icon-circle-small"></i>
<span class="icon-title">circle-small</span>
</div>
<div class="icon-container">
<i class="icon icon-clipboard"></i>
<span class="icon-title">clipboard</span>
</div>
<div class="icon-container">
<i class="icon icon-close"></i>
<span class="icon-title">close</span>
</div>
<div class="icon-container">
<i class="icon icon-code"></i>
<span class="icon-title">code</span>
</div>
<div class="icon-container">
<i class="icon icon-coins"></i>
<span class="icon-title">coins</span>
</div>
<div class="icon-container">
<i class="icon icon-collapse"></i>
<span class="icon-title">collapse</span>
</div>
<div class="icon-container">
<i class="icon icon-copy"></i>
<span class="icon-title">copy</span>
</div>
<div class="icon-container">
<i class="icon icon-cross"></i>
<span class="icon-title">cross</span>
</div>
<div class="icon-container">
<i class="icon icon-disable"></i>
<span class="icon-title">disable</span>
</div>
<div class="icon-container">
<i class="icon icon-dropmenu"></i>
<span class="icon-title">dropmenu</span>
</div>
<div class="icon-container">
<i class="icon icon-earth"></i>
<span class="icon-title">earth</span>
</div>
<div class="icon-container">
<i class="icon icon-edit"></i>
<span class="icon-title">edit</span>
</div>
<div class="icon-container">
<i class="icon icon-enlarge"></i>
<span class="icon-title">enlarge</span>
</div>
<div class="icon-container">
<i class="icon icon-enter"></i>
<span class="icon-title">enter</span>
</div>
<div class="icon-container">
<i class="icon icon-exit"></i>
<span class="icon-title">exit</span>
</div>
<div class="icon-container">
<i class="icon icon-expand"></i>
<span class="icon-title">expand</span>
</div>
<div class="icon-container">
<i class="icon icon-eye"></i>
<span class="icon-title">eye</span>
</div>
<div class="icon-container">
<i class="icon icon-eye-blocked"></i>
<span class="icon-title">eye-blocked</span>
</div>
<div class="icon-container">
<i class="icon icon-file"></i>
<span class="icon-title">file</span>
</div>
<div class="icon-container">
<i class="icon icon-file-check"></i>
<span class="icon-title">file-check</span>
</div>
<div class="icon-container">
<i class="icon icon-file-css"></i>
<span class="icon-title">file-css</span>
</div>
<div class="icon-container">
<i class="icon icon-file-download"></i>
<span class="icon-title">file-download</span>
</div>
<div class="icon-container">
<i class="icon icon-file-excel"></i>
<span class="icon-title">file-excel</span>
</div>
<div class="icon-container">
<i class="icon icon-file-filled"></i>
<span class="icon-title">file-filled</span>
</div>
<div class="icon-container">
<i class="icon icon-file-image"></i>
<span class="icon-title">file-image</span>
</div>
<div class="icon-container">
<i class="icon icon-file-music"></i>
<span class="icon-title">file-music</span>
</div>
<div class="icon-container">
<i class="icon icon-file-openoffice"></i>
<span class="icon-title">file-openoffice</span>
</div>
<div class="icon-container">
<i class="icon icon-file-pdf"></i>
<span class="icon-title">file-pdf</span>
</div>
<div class="icon-container">
<i class="icon icon-file-play"></i>
<span class="icon-title">file-play</span>
</div>
<div class="icon-container">
<i class="icon icon-file-presentation"></i>
<span class="icon-title">file-presentation</span>
</div>
<div class="icon-container">
<i class="icon icon-file-spreadsheet"></i>
<span class="icon-title">file-spreadsheet</span>
</div>
<div class="icon-container">
<i class="icon icon-file-text"></i>
<span class="icon-title">file-text</span>
</div>
<div class="icon-container">
<i class="icon icon-file-video"></i>
<span class="icon-title">file-video</span>
</div>
<div class="icon-container">
<i class="icon icon-file-word"></i>
<span class="icon-title">file-word</span>
</div>
<div class="icon-container">
<i class="icon icon-file-xml"></i>
<span class="icon-title">file-xml</span>
</div>
<div class="icon-container">
<i class="icon icon-file-zip"></i>
<span class="icon-title">file-zip</span>
</div>
<div class="icon-container">
<i class="icon icon-filter"></i>
<span class="icon-title">filter</span>
</div>
<div class="icon-container">
<i class="icon icon-first"></i>
<span class="icon-title">first</span>
</div>
<div class="icon-container">
<i class="icon icon-floppy"></i>
<span class="icon-title">floppy</span>
</div>
<div class="icon-container">
<i class="icon icon-folder"></i>
<span class="icon-title">folder</span>
</div>
<div class="icon-container">
<i class="icon icon-folder-open"></i>
<span class="icon-title">folder-open</span>
</div>
<div class="icon-container">
<i class="icon icon-folder-plus"></i>
<span class="icon-title">folder-plus</span>
</div>
<div class="icon-container">
<i class="icon icon-font-size"></i>
<span class="icon-title">font-size</span>
</div>
<div class="icon-container">
<i class="icon icon-grid"></i>
<span class="icon-title">grid</span>
</div>
<div class="icon-container">
<i class="icon icon-grid2"></i>
<span class="icon-title">grid2</span>
</div>
<div class="icon-container">
<i class="icon icon-hammer"></i>
<span class="icon-title">hammer</span>
</div>
<div class="icon-container">
<i class="icon icon-handle"></i>
<span class="icon-title">handle</span>
</div>
<div class="icon-container">
<i class="icon icon-home"></i>
<span class="icon-title">home</span>
</div>
<div class="icon-container">
<i class="icon icon-image"></i>
<span class="icon-title">image</span>
</div>
<div class="icon-container">
<i class="icon icon-info"></i>
<span class="icon-title">info</span>
</div>
<div class="icon-container">
<i class="icon icon-italic"></i>
<span class="icon-title">italic</span>
</div>
<div class="icon-container">
<i class="icon icon-key-A"></i>
<span class="icon-title">key-A</span>
</div>
<div class="icon-container">
<i class="icon icon-lamp"></i>
<span class="icon-title">lamp</span>
</div>
<div class="icon-container">
<i class="icon icon-lan"></i>
<span class="icon-title">lan</span>
</div>
<div class="icon-container">
<i class="icon icon-last"></i>
<span class="icon-title">last</span>
</div>
<div class="icon-container">
<i class="icon icon-layout"></i>
<span class="icon-title">layout</span>
</div>
<div class="icon-container">
<i class="icon icon-link"></i>
<span class="icon-title">link</span>
</div>
<div class="icon-container">
<i class="icon icon-list"></i>
<span class="icon-title">list</span>
</div>
<div class="icon-container">
<i class="icon icon-location"></i>
<span class="icon-title">location</span>
</div>
<div class="icon-container">
<i class="icon icon-lock"></i>
<span class="icon-title">lock</span>
</div>
<div class="icon-container">
<i class="icon icon-lock-center"></i>
<span class="icon-title">lock-center</span>
</div>
<div class="icon-container">
<i class="icon icon-loop"></i>
<span class="icon-title">loop</span>
</div>
<div class="icon-container">
<i class="icon icon-mail"></i>
<span class="icon-title">mail</span>
</div>
<div class="icon-container">
<i class="icon icon-medal"></i>
<span class="icon-title">medal</span>
</div>
<div class="icon-container">
<i class="icon icon-mic"></i>
<span class="icon-title">mic</span>
</div>
<div class="icon-container">
<i class="icon icon-mobile"></i>
<span class="icon-title">mobile</span>
</div>
<div class="icon-container">
<i class="icon icon-new"></i>
<span class="icon-title">new</span>
</div>
<div class="icon-container">
<i class="icon icon-next"></i>
<span class="icon-title">next</span>
</div>
<div class="icon-container">
<i class="icon icon-no-camera"></i>
<span class="icon-title">no-camera</span>
</div>
<div class="icon-container">
<i class="icon icon-numbered-list"></i>
<span class="icon-title">numbered-list</span>
</div>
<div class="icon-container">
<i class="icon icon-package-download"></i>
<span class="icon-title">package-download</span>
</div>
<div class="icon-container">
<i class="icon icon-pagebreak"></i>
<span class="icon-title">pagebreak</span>
</div>
<div class="icon-container">
<i class="icon icon-palette"></i>
<span class="icon-title">palette</span>
</div>
<div class="icon-container">
<i class="icon icon-phone"></i>
<span class="icon-title">phone</span>
</div>
<div class="icon-container">
<i class="icon icon-play"></i>
<span class="icon-title">play</span>
</div>
<div class="icon-container">
<i class="icon icon-plus"></i>
<span class="icon-title">plus</span>
</div>
<div class="icon-container">
<i class="icon icon-prev"></i>
<span class="icon-title">prev</span>
</div>
<div class="icon-container">
<i class="icon icon-price-tag"></i>
<span class="icon-title">price-tag</span>
</div>
<div class="icon-container">
<i class="icon icon-printer"></i>
<span class="icon-title">printer</span>
</div>
<div class="icon-container">
<i class="icon icon-print"></i>
<span class="icon-title">print</span>
</div>
<div class="icon-container">
<i class="icon icon-projector"></i>
<span class="icon-title">projector</span>
</div>
<div class="icon-container">
<i class="icon icon-puzzle"></i>
<span class="icon-title">puzzle</span>
</div>
<div class="icon-container">
<i class="icon icon-qrcode"></i>
<span class="icon-title">qrcode</span>
</div>
<div class="icon-container">
<i class="icon icon-question"></i>
<span class="icon-title">question</span>
</div>
<div class="icon-container">
<i class="icon icon-quill"></i>
<span class="icon-title">quill</span>
</div>
<div class="icon-container">
<i class="icon icon-redo"></i>
<span class="icon-title">redo</span>
</div>
<div class="icon-container">
<i class="icon icon-remove"></i>
<span class="icon-title">remove</span>
</div>
<div class="icon-container">
<i class="icon icon-rulers"></i>
<span class="icon-title">rulers</span>
</div>
<div class="icon-container">
<i class="icon icon-search"></i>
<span class="icon-title">search</span>
</div>
<div class="icon-container">
<i class="icon icon-settings"></i>
<span class="icon-title">settings</span>
</div>
<div class="icon-container">
<i class="icon icon-seven-segment9"></i>
<span class="icon-title">seven-segment9</span>
</div>
<div class="icon-container">
<i class="icon icon-shield"></i>
<span class="icon-title">shield</span>
</div>
<div class="icon-container">
<i class="icon icon-shrink"></i>
<span class="icon-title">shrink</span>
</div>
<div class="icon-container">
<i class="icon icon-sort"></i>
<span class="icon-title">sort</span>
</div>
<div class="icon-container">
<i class="icon icon-sort-alpha-asc"></i>
<span class="icon-title">sort-alpha-asc</span>
</div>
<div class="icon-container">
<i class="icon icon-sort-alpha-desc"></i>
<span class="icon-title">sort-alpha-desc</span>
</div>
<div class="icon-container">
<i class="icon icon-split"></i>
<span class="icon-title">split</span>
</div>
<div class="icon-container">
<i class="icon icon-stack"></i>
<span class="icon-title">stack</span>
</div>
<div class="icon-container">
<i class="icon icon-stack-minus"></i>
<span class="icon-title">stack-minus</span>
</div>
<div class="icon-container">
<i class="icon icon-stack-plus"></i>
<span class="icon-title">stack-plus</span>
</div>
<div class="icon-container">
<i class="icon icon-stack-text"></i>
<span class="icon-title">stack-text</span>
</div>
<div class="icon-container">
<i class="icon icon-star"></i>
<span class="icon-title">star</span>
</div>
<div class="icon-container">
<i class="icon icon-stop"></i>
<span class="icon-title">stop</span>
</div>
<div class="icon-container">
<i class="icon icon-switchoff"></i>
<span class="icon-title">switchoff</span>
</div>
<div class="icon-container">
<i class="icon icon-switchon"></i>
<span class="icon-title">switchon</span>
</div>
<div class="icon-container">
<i class="icon icon-tag"></i>
<span class="icon-title">tag</span>
</div>
<div class="icon-container">
<i class="icon icon-text-color"></i>
<span class="icon-title">text-color</span>
</div>
<div class="icon-container">
<i class="icon icon-textarea"></i>
<span class="icon-title">textarea</span>
</div>
<div class="icon-container">
<i class="icon icon-textfield"></i>
<span class="icon-title">textfield</span>
</div>
<div class="icon-container">
<i class="icon icon-ticket"></i>
<span class="icon-title">ticket</span>
</div>
<div class="icon-container">
<i class="icon icon-tilde"></i>
<span class="icon-title">tilde</span>
</div>
<div class="icon-container">
<i class="icon icon-time"></i>
<span class="icon-title">time</span>
</div>
<div class="icon-container">
<i class="icon icon-transmission"></i>
<span class="icon-title">transmission</span>
</div>
<div class="icon-container">
<i class="icon icon-type"></i>
<span class="icon-title">type</span>
</div>
<div class="icon-container">
<i class="icon icon-undo"></i>
<span class="icon-title">undo</span>
</div>
<div class="icon-container">
<i class="icon icon-unlocked"></i>
<span class="icon-title">unlocked</span>
</div>
<div class="icon-container">
<i class="icon icon-upload"></i>
<span class="icon-title">upload</span>
</div>
<div class="icon-container">
<i class="icon icon-user"></i>
<span class="icon-title">user</span>
</div>
<div class="icon-container">
<i class="icon icon-user-chairperson"></i>
<span class="icon-title">user-chairperson</span>
</div>
<div class="icon-container">
<i class="icon icon-user-check"></i>
<span class="icon-title">user-check</span>
</div>
<div class="icon-container">
<i class="icon icon-user-reading"></i>
<span class="icon-title">user-reading</span>
</div>
<div class="icon-container">
<i class="icon icon-users"></i>
<span class="icon-title">users</span>
</div>
<div class="icon-container">
<i class="icon icon-warning"></i>
<span class="icon-title">warning</span>
</div>
<div class="icon-container">
<i class="icon icon-wrench"></i>
<span class="icon-title">wrench</span>
</div>
<div class="icon-container">
<i class="icon icon-id-badge"></i>
<span class="icon-title">id-badge</span>
</div>
</div>Palette
Colors
$darker-blue
$dark-blue
$blue
$pastel-blue
$light-blue
$dark-red
$red
$light-red
$black
$light-black
$dark-gray
$gray
$pastel-gray
$light-gray
$dark-green
$green
$light-green
$dark-yellow
$yellow
$light-yellow
$postit-yellow
$orange
$bright-orange
$link
$indico-blue
$purple
$separator-color
<div class="f-color-chips">
<div class="f-color-chip color-darker-blue">
<div class="f-color-chip__name">$darker-blue</div>
</div>
<div class="f-color-chip color-dark-blue">
<div class="f-color-chip__name">$dark-blue</div>
</div>
<div class="f-color-chip color-blue">
<div class="f-color-chip__name">$blue</div>
</div>
<div class="f-color-chip color-pastel-blue">
<div class="f-color-chip__name">$pastel-blue</div>
</div>
<div class="f-color-chip color-light-blue">
<div class="f-color-chip__name">$light-blue</div>
</div>
</div>
<div class="f-color-chips">
<div class="f-color-chip color-dark-red">
<div class="f-color-chip__name">$dark-red</div>
</div>
<div class="f-color-chip color-red">
<div class="f-color-chip__name">$red</div>
</div>
<div class="f-color-chip color-light-red">
<div class="f-color-chip__name">$light-red</div>
</div>
</div>
<div class="f-color-chips">
<div class="f-color-chip color-black">
<div class="f-color-chip__name">$black</div>
</div>
<div class="f-color-chip color-light-black">
<div class="f-color-chip__name">$light-black</div>
</div>
</div>
<div class="f-color-chips">
<div class="f-color-chip color-dark-gray">
<div class="f-color-chip__name">$dark-gray</div>
</div>
<div class="f-color-chip color-gray">
<div class="f-color-chip__name">$gray</div>
</div>
<div class="f-color-chip color-pastel-gray">
<div class="f-color-chip__name">$pastel-gray</div>
</div>
<div class="f-color-chip color-light-gray">
<div class="f-color-chip__name">$light-gray</div>
</div>
</div>
<div class="f-color-chips">
<div class="f-color-chip color-dark-green">
<div class="f-color-chip__name">$dark-green</div>
</div>
<div class="f-color-chip color-green">
<div class="f-color-chip__name">$green</div>
</div>
<div class="f-color-chip color-light-green">
<div class="f-color-chip__name">$light-green</div>
</div>
</div>
<div class="f-color-chips">
<div class="f-color-chip color-dark-yellow">
<div class="f-color-chip__name">$dark-yellow</div>
</div>
<div class="f-color-chip color-yellow">
<div class="f-color-chip__name">$yellow</div>
</div>
<div class="f-color-chip color-light-yellow">
<div class="f-color-chip__name">$light-yellow</div>
</div>
<div class="f-color-chip color-postit-yellow">
<div class="f-color-chip__name">$postit-yellow</div>
</div>
</div>
<div class="f-color-chips">
<div class="f-color-chip color-orange">
<div class="f-color-chip__name">$orange</div>
</div>
<div class="f-color-chip color-bright-orange">
<div class="f-color-chip__name">$bright-orange</div>
</div>
</div>
<div class="f-color-chips">
<div class="f-color-chip color-link">
<div class="f-color-chip__name">$link</div>
</div>
<div class="f-color-chip color-indico-blue">
<div class="f-color-chip__name">$indico-blue</div>
</div>
<div class="f-color-chip color-purple">
<div class="f-color-chip__name">$purple</div>
</div>
<div class="f-color-chip color-separator-color">
<div class="f-color-chip__name">$separator-color</div>
</div>
</div>Typography
Fonts
This is the list of mixins that define the available fonts in Indico.
%font-family-body
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
a b c d e f g h i j k l m n o p q r s t u v w x y z
%font-family-modern-body
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
a b c d e f g h i j k l m n o p q r s t u v w x y z
%font-family-title
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
a b c d e f g h i j k l m n o p q r s t u v w x y z
%font-family-title-light
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
a b c d e f g h i j k l m n o p q r s t u v w x y z
%font-family-description
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
a b c d e f g h i j k l m n o p q r s t u v w x y z
%font-family-monospace
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
a b c d e f g h i j k l m n o p q r s t u v w x y z
%font-family-serif
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
a b c d e f g h i j k l m n o p q r s t u v w x y z
%font-family-form
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
a b c d e f g h i j k l m n o p q r s t u v w x y z
%font-family-logo
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
a b c d e f g h i j k l m n o p q r s t u v w x y z
<h4>%font-family-body</h4>
<div class="f-font font-family-body">
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z <br> a b c d e f g h i j k l m n o p q r s t u v w x y z
</div>
<h4>%font-family-modern-body</h4>
<div class="f-font font-family-modern-body">
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z <br> a b c d e f g h i j k l m n o p q r s t u v w x y z
</div>
<h4>%font-family-title</h4>
<div class="f-font font-family-title">
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z <br> a b c d e f g h i j k l m n o p q r s t u v w x y z
</div>
<h4>%font-family-title-light</h4>
<div class="f-font font-family-title-light">
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z <br> a b c d e f g h i j k l m n o p q r s t u v w x y z
</div>
<h4>%font-family-description</h4>
<div class="f-font font-family-description">
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z <br> a b c d e f g h i j k l m n o p q r s t u v w x y z
</div>
<h4>%font-family-monospace</h4>
<div class="f-font font-family-monospace">
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z <br> a b c d e f g h i j k l m n o p q r s t u v w x y z
</div>
<h4>%font-family-serif</h4>
<div class="f-font font-family-serif">
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z <br> a b c d e f g h i j k l m n o p q r s t u v w x y z
</div>
<h4>%font-family-form</h4>
<div class="f-font font-family-form">
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z <br> a b c d e f g h i j k l m n o p q r s t u v w x y z
</div>
<h4>%font-family-logo</h4>
<div class="f-font font-family-logo">
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z <br> a b c d e f g h i j k l m n o p q r s t u v w x y z
</div>Headings
h1. Indico heading
h2. Indico heading
h3. Indico heading
h4. Indico heading
h5. Indico heading
h6. Indico heading
<h1>h1. Indico heading</h1>
<h2>h2. Indico heading</h2>
<h3>h3. Indico heading</h3>
<h4>h4. Indico heading</h4>
<h5>h5. Indico heading</h5>
<h6>h6. Indico heading</h6>Inline Text Elements
.bold
.italic
.underline
.preformatted
.mono
normal text.sup
normal text.sub
.text-important
.text-normal
.text-not-important
.text-error
.text-superfluous
.text-paper
<div class="bold">.bold</div>
<div class="italic">.italic</div>
<div class="underline">.underline</div>
<div class="preformatted">.preformatted</div>
<div class="mono">.mono</div>
<div>normal text<sup>.sup</sup></div>
<div>normal text<sub>.sub</sub></div>
<div class="text-important">.text-important</div>
<div class="text-normal">.text-normal</div>
<div class="text-not-important">.text-not-important</div>
<div class="text-error">.text-error</div>
<div class="text-superfluous">.text-superfluous</div>
<div class="text-paper">.text-paper</div>Blockquotes
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante
<div class="quotation">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante</div>