Page layouts

The different pages are created under four main types of layouts: Wide landing with image, Landing with image containing a left menu, Wide general page and General page containing a left menu; the latter is separated into different subtypes. A left menu measures 3 columns wide, and the remaining 9 are then deconstructed into another 12-column grid. This logic is used to obtain certain ratios that are otherwise impossible to obtain in a 9-column grid, such as those which are 2 blocks wide (50-50 ratio).

Desktop layouts

For desktop supports, here are examples of layouts types:

Wide landing with image

Landing with left menu

Wide general page

Regular + left menu

Article A/B

Article C

Blog post

Landing with hub

List

Contact

Tablet layouts

In landscape format on a tablet, the page is presented exactly as on a desktop. In portrait format, on the other hand, there is no left-hand menu; therefore, the distinction is not made between “with menu” or “without menu”. So we are referring to regular landings or pages that are mainly differentiated by the presence or absence of headers.

Landing page

Regular page

Article A/B

Article C

Blog post

Landing with hub

Mobile layouts

Since the headers disappear in the mobile format, it is very difficult to make a distinction between regular landings and pages; to do so, one must analyze the content of each page. So here we only talk about one layout.

Mobile layout

Layout comparison

Name	Desktop	Tablet	Mobile
Wide landing with image
Landing with left menu
Wide general page
Regular + left menu
Article A/B
Article C
Blog post
Landing with hub
List
Contact