Typography
h1. This is a very large header.
h2. This is a large header.
h3. This is a medium header.
h4. This is a moderate header.
h5. This is a small header.
h6. This is a tiny header.
This is a lead paragraph
This is a normal text paragraph. With strong tagged bold text and em tagged italic text. The links inside text paragraphs look like this link here.
Colors
Email UI Colors
Primary
|
Secondary
|
Success
|
Warning
|
Alert
|
Light Grey
|
Medium Grey
|
Dark Grey
|
Helsinki Brand Colors
Copper
|
Bus
|
Coat
|
Fog
|
Metro
|
Brick
|
Suomenlinna
|
Engel
|
Tram
|
Summer
|
Silver
|
Gold
|
Helsinki Brand Text Color Classes
Text Color Copper text-hel-copper
Text Color Bus text-hel-bus
Text Color Coat text-hel-coat
Text Color Fog text-hel-fog
Text Color Metro text-hel-metro
Text Color Brick text-hel-brick
Text Color Suomenlinna text-hel-suomenlinna
Text Color Engel text-hel-engel
Text Color Tram text-hel-tram
Text Color Summer text-hel-summer
Text Color Silver text-hel-silver
Text Color Gold text-hel-gold
Buttons
Callouts
Successfully avoided Kraken. 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.
| |
---|
Successfully avoided Kraken. 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.
| |
---|
Successfully avoided Kraken. 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.
| |
---|
Successfully avoided Kraken. 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.
| |
---|
There may be Krakens around. 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.
| |
---|
Incoming Kraken! 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.
| |
---|
Menus
Normal menu
Vertical menu
|
---|
|
|
|