layout at Transavia

For the theory behind this system you can read How to manage layout in a design system

The four constrains

The design is based on a 12 column grid, but for the Front-end we only use three widths. These widths are based on that 12 column grid. Next to the three sizes, we have a full page block for colored backgrounds etc.

For each item a margin is set in case there are multiple of the same items after each other.

Full width item

Used for colored blocks, large commercial images etc.

Page item

Used for the largest items on the page like search forms, carousels etc.

section item

Used for each section on the page like each search result

Text item

Used for each text element on the page that is not inside an article.