Tallink PRE-ORDER styleguide
Grid
Spacing
4px
8px
16px
24px
40px
64px
Colors
#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
Colors-messages
#00BEA2
.bg-success
#6ECBD9
.bg-info
#FFD663
.bg-warning
#D97E7E
.bg-danger
Typography
Headline / H1 .h1 (38px)
Volutpat mauris laoreet egestas molestie vel.
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.
Link
Volutpat mauris laoreet egestas molestie vel.
Notes, Warnings

Success message Täname teid tellimuse eest! Teie makse õnnestus ja tellimus on töösse võetud.

.alert .alert--icon .alert-success

Info message Täname teid tellimuse eest! Teie makse õnnestus ja tellimus on töösse võetud.

.alert .alert--icon .alert-info

Error message Täname teid tellimuse eest! Teie makse õnnestus ja tellimus on töösse võetud.

.alert .alert--icon .alert-danger
TÄHELEPANU!
Warning message Täname teid tellimuse eest! Teie makse õnnestus ja tellimus on töösse võetud.
.alert .alert--icon .alert-warning .alert .alert-success .alert-dismissible
TÄHELEPANU! Warning message with text: here goes description
.alert-inline .alert-info
Warning message with icon: here goes description
.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

Please choose a username.
Looks good!
Please choose a username.
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
.table

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
  1. Text
  2. Text on multiple rows Text on multiple rows Text on multiple rows
  3. First level
    1. Second level
    2. Text
    3. Text on multiple rows Text on multiple rows Text on multiple rows

Modal

Modal demo