abstract structure
© yucelyilmaz / iStock / Getty Images Plus


    alt txt




    For our responsive corporate website we defined 3 different breakpoints:

    • Mobile > 600px
    • Tablet > 768px
    • Desktop > 1024px
    Corporate website breakpoints and responsive behaviour

    12 Column Grid

    The grid is providing uniformity to layouts across different viewports.

    Our grid consists of 12 columns and is fluid with dynamically adaptive column width but fixed gutter and margin width. Gutter and margin width change from smaller to larger viewports to avoid elements being visually placed to far apart in small viewports or being visually too close on large viewports.


    We defined the following percentages for the grid, in which the web components are placed accordingly: 



    • Full Width
    • 100%, with 50%. 33% and 25% components (teasers).
    • 80% left aligned



    • Full Width
    • 100% with 50%. 33% components (teasers).



    • Full Width
    • 100%

    This may interest you

    Still have questions?

    If you have any questions regarding the corporate design, please do not hesitate to contact the brand management team for support.