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.