Tallink PRE-ORDER styleguide
Grid
Spacing
Colors
Colors-messages
Typography
Volutpat mauris laoreet egestas molestie vel.
Notes, Warnings
.alert .alert--icon .alert-success
.alert .alert--icon .alert-info
.alert .alert--icon .alert-danger
.table
Grid
4px
8px
16px
24px
40px
64px
#004152
.bg-primary
#00BEA2
.bg-secondary
#009D85
$theme-green-dark
#00ECC9
$theme-green-light
#DDDDDD
$theme-gray
#F5F8F7
$theme-gray-light
#DFDDD7
$theme-gray-dark
#959595
$theme-gray-darker
#004C93
$theme-social-blue
#7799A1
$theme-bermuda-gray
#D1D9DC
$theme-zumthor-gray
#FF37A2
#1E5766
#F2F2F2
#00BEA2
.bg-success
#6ECBD9
.bg-info
#FFD663
.bg-warning
#D97E7E
.bg-danger
Headline / H1
.h1 (38px)
Headline / H2
.h2 (32px)
Volutpat mauris laoreet egestas molestie vel.
Headline / H3
.h3 (24px)
Volutpat mauris laoreet egestas molestie vel.
Headline / H4
.h4 (22px)
Volutpat mauris laoreet egestas molestie vel.
Headline / H5
.h5 (20px)
Volutpat mauris laoreet egestas molestie vel.
Headline / H6
.h6 (16px)
Volutpat mauris laoreet egestas molestie vel.
Lead (subtitle)
.lead (13px)
Volutpat mauris laoreet egestas molestie vel.
Body / Normal
17px
Volutpat mauris laoreet egestas molestie vel.
Volutpat mauris laoreet egestas molestie vel.
Volutpat mauris laoreet egestas molestie vel.
Volutpat mauris laoreet egestas molestie vel.
Volutpat mauris laoreet egestas molestie vel.
Small
small (13px)
Volutpat mauris laoreet egestas molestie vel.
Tiny
6px
Volutpat mauris laoreet egestas molestie vel.
TÄHELEPANU!
.alert .alert--icon .alert-warning
Warning message
Täname teid tellimuse eest! Teie makse õnnestus ja tellimus on töösse võetud.
Success message on the top of the page
.alert .alert-success .alert-dismissible
TÄHELEPANU!
Warning message with text: here goes description
.alert-inline .alert-info
.alert-inline .alert-inline--icon .alert-info
To add Club One number to this passenger, please call our sales support: 17 808
.alert-small .alert-small--success
To add Club One number to this passenger, please call our sales support: 17 808
.alert-small .alert-small--danger
To add Club One number to this passenger, please call our sales support: 17 808
.alert-small .alert-small--info
Form
Buttons
btn-primary
.btn .btn-primary
btn-primary
.disabled
btn-secondary
.btn .btn-secondary
btn-secondary
.disabled
btn-outline
.btn .btn-outline
btn-outline
.disabled
button text
.btn .btn-primary .btn-lg
button text
.btn .btn-primary
button text
.btn .btn-primary .btn-sm
button text
.btn .btn-primary .btn-xs
btn-link
.btn-link
btn-link
.btn-link .btn-link--secondary
btn-link
.btn-link .btn-link--white
Checks & Radios
Fields
Looks good!
Please choose a username.
Looks good!
Please choose a username.
Looks good!
Please choose a username.
Tables
# | Column heading | Column heading | Column heading |
---|---|---|---|
1 | Column content | Column content | Column content |
1 | Column content | Column content | Column content |
1 | Column content | Column content | Column content |
1 | Column content | Column content | Column content |
Lists
- Text
- Text on multiple rows Text on multiple rows Text on multiple rows
- First level
- Second level
- Text
- Text on multiple rows Text on multiple rows Text on multiple rows
- Text
- Text on multiple rows Text on multiple rows Text on multiple rows
- First level
- Second level
- Text
- Text on multiple rows Text on multiple rows Text on multiple rows