Header 1

Header 2

Header 3

Header 4

Header 5

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aliquid laborum, esse repellendus molestias accusantium iusto, hic neque expedita repellat, fuga enim. Culpa corporis, nisi placeat illo minus laborum cumque eaque?

Header 2

Header 4

Ordered list text
Ordered list text
Ordered list text
Ordered list text
Ordered list text
Ordered list text
1. Ordered list text
2. Ordered list text

Unordered list text
Unordered list text
- Unordered list text
- Unordered list text

Link text

Block quote text, Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim.

Images

Responsive Images

Icons

Buttons

Inline Text Button:

Arrow Link Internal Arrow Link External

Primary Arrow Link Internal Secondary Arrow Link Button External

Inline Text Button:

Arrow Link Internal Arrow Link External

Primary Arrow Link Internal Secondary Arrow Link Button External

Chips

Variations

basedefaultlighthighlightbranderror

Flight status labels

ArrivedArrivingBoardingCanceledCanceledGate ClosedCustomsDelayedDepartedLandedOn Time

NB: both the status "Canceled" as well as "Cancelled" are supported, both using the same translation as display value, and therefore appearing twice in the list above.

Call-To-Actions

Call to action with theme "grey"

Call to action with theme "blue-blue"

Call to action with theme "purple-blue"

Call to action with theme "green-blue"

Call-To-Action header text with custom buttons

Button with a very very very very long title Call us +1-123-456-7890

Inverted Call-To-Action with custom buttons

Button with a very very very very long title Call us +1-123-456-7890

Flexbox

hello

world

hello

world

hello

world

Grid

Flexible grid, every item with custom size

Hello

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempore placeat cupiditate aut assumenda voluptate? Perspiciatis magni corporis soluta quibusdam impedit corrupti mollitia. In maxime nihil maiores exercitationem fuga facilis repudiandae!

World

Flexible grid, growing depending on the content

Hello

World

Fixed grid, every item equally sized

hello world

hello

world

hello world

Fixed grid with custom gutter

hello world

hello

world

hello world

Accordion

Title of the accordion item 1

Body tekst, 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 nisi ut aliquip ex ea commodo consequat.

Title of the accordion item 2

Some content

Title of the accordion item 3

Some content

Dialogs

Open dialog with link

Form

Text fields

Date Picker

Left: Move to the previous day. Right: Move to the next day. Up: Move to the previous week. Down: Move to the next week. PgUp: Move to the previous month. PgDn: Move to the next month. Home: Move to the previous year. End: Move to the next year. Enter: Select date and close the calendar. Esc/Tab: Close the calendar.

Left: Move to the previous day. Right: Move to the next day. Up: Move to the previous week. Down: Move to the next week. PgUp: Move to the previous month. PgDn: Move to the next month. Home: Move to the previous year. End: Move to the next year. Enter: Select start and end date. By selecting the end date the calendar will be closed. Esc/Tab: Close the calendar.

Select

Default select:

Please select an option

Select with hints:

Please select an option

Select with initial selected item:

foo

Date Select:

September 16

Date Select with hint:

September 16

Today

Time Select:

Select time

Search

Auto suggest

I have the placeholder as a label

Auto Suggest Form Fields

Surfaces

Paper

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis, rem officia? Quae ad distinctio expedita consectetur molestias cupiditate cum nihil nesciunt, ratione labore aspernatur, tempora atque aut sequi reiciendis fugit.

Paper Selector

Cards

Vertical card

Other title
Some other text
Read more
Other title
Some other text
Read more
Other title
Some other text
Read more

Vertical card, horizontal on mobile

Some flights
Some text some Some text some text Some text some Some text some text Some text some Some text some text
More flights
Other title
Some other text
Read more
Other title
Some other text
Read more

Fully Clickable, vertical card, 1 column on mobile

Other title
Some other text
Read more
Other title
Some other text
Read more
Other title
Some other text
Read more

Fully Clickable, vertical card, 2 columns on mobile

Find all our services our services
Some text some text Some text some text Some text some text Some text some text
More flights
Other title
Some other text
Read more
Other title
Some other text
Read more
Other title
Some other text
Read more
Other title
Some other text
Read more

Fully Clickable, vertical card, and horizontal on mobile

Find all our services our services
Some text some text Some text some text Some text some text Some text some text
More flights
Other title
Some other text
Read more
Other title
Some other text
Read more
Other title
Some other text
Read more
Other title
Some other text
Read more

Highlights

Highlight, with inline link

Car Rental Tip

Rental car companies are no longer operating on Rental Car Road. Thrifty is located off site and all other companies are located in the Consolidated Rental Car Facility.

Car Rental Tip

Rental car companies are no longer operating on Rental Car Road. Thrifty is located off site and all other companies are located in the Consolidated Rental Car Facility.

Highlight, elevated, with link, and background color

Car Rental Tip

Rental car companies are no longer operating on Rental Car Road. Thrifty is located off site and all other companies are located in the Consolidated Rental Car Facility.

Quick links, 1 column

Asset link

Internal link

Quick links, 2 columns on desktop

Asset link with a very very very very very very very very very very very very very very long title

Contact items

Lufthansa
+49-800-8384267
Go to website
Lufthansa
+49-800-8384267
Go to website
Lufthansa
+49-800-8384267
Go to website

Alerts

Traffic advisory

Last updated: Sep 6, 2018 at 4:00

Allow extra time to drive to and from the terminal. While adjusting to new traffic patterns drive more cautiously and follow directional signage.

Header 1

Header 2

Header 3

Header 4

Header 5

Header 2

Header 4

Images

Responsive Images

Icons

Buttons

Chips

Variations

Flight status labels

Call-To-Actions

Call to action with theme "grey"

Call to action with theme "blue-blue"

Call to action with theme "purple-blue"

Call to action with theme "green-blue"

Call-To-Action header text with custom buttons

Inverted Call-To-Action with custom buttons

Flexbox

hello

world

Grid

Flexible grid, every item with custom size

Hello

World

Flexible grid, growing depending on the content

Hello

World

Fixed grid, every item equally sized

Fixed grid with custom gutter

Accordion

Dialogs

Form

Text fields

Date Picker

Select

Search

Auto suggest

Auto Suggest Form Fields

Surfaces

Paper

Paper Selector

Cards

Vertical card

Other title

Other title

Other title

Vertical card, horizontal on mobile

Some flights

Other title

Other title

Fully Clickable, vertical card, 1 column on mobile

Other title

Other title

Other title

Fully Clickable, vertical card, 2 columns on mobile

Find all our services our services

Other title

Other title

Other title

Other title

Fully Clickable, vertical card, and horizontal on mobile

Find all our services our services

Other title

Other title

Other title

Other title

Highlights

Highlight, with inline link

Car Rental Tip

Highlight, elevated, without link, image right

Car Rental Tip

Highlight, elevated, with link, and background color

Car Rental Tip

Quick links

Quick links, 1 column

Quick links, 2 columns on desktop