Page

The most common page layouts used across our websites and applications made easy to use and stay aligned with the latest and greatest. We use grid templates to define regions and make sure the responsive behaviour is on point.

Code example

With the code below you'll be able to create all the page layouts availbale.

The first class you'll see is ox-layout, it's the wrapper that defines the type of layout. Other options are ox-layout--horizontal, ox-layout--vertical and ox-layout--identity.

Then you have ox-layout__primary-navigation-wrapper that contains the primary navigation.

Last but not least you have the main area ox-layout__main that provides a space for the content in ox-layout__main__content ox-container and if needed a secondary navigation in ox-layout__main__secondary-navigation-wrapper.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<!DOCTYPE html>
<html>
	<head>
		...
	</head>
	<body class="ox-layout">
		<header class="ox-layout__header" role="banner">
			<!-- Header -->
		</header>
		<div class="ox-layout__primary-navigation-wrapper">
			<!-- Primary navigation -->
		</div>
		<main role="main" class="ox-layout__main">
			<div class="ox-layout__main__secondary-navigation-wrapper">
				<!-- Secondary navigation  -->
			</div>
			<div class="ox-layout__main__content ox-container">
				<!-- Page content  -->
			</div>
		</main>
	</body>
</html>

Main page layout

This layout has a top-bar containing both the header and most important navigation items. It's defined by theox-layout class

If a deeper level of navigation is needed, the secondary (vertical) navigation can be used by adding the ox-layout__main__secondary-navigation-wrapper inside the ox-layout__main container.

Additional page layouts

Horizontal layout

This layout has a full width header & horizontal primary navigation and is defined by the ox-layout--horizontal class and by adding the modifier ox-layout--sticky the navigation will stick to your screen.

If a deeper level of navigation is needed, the secondary (vertical) navigation can be used by adding the ox-layout__main__secondary-navigation-wrapper class.

Vertical layout

The second page layout has a sidebar with a header and a vertical navigation and is defined by the ox-layout--vertical class and by adding the modifier ox-layout--sticky the navigation will stick to your screen.

When clicking through the site and going to a deeper level, the secondary navigation will be shown horizontally on top of the content area inside the ox-layout__main__secondary-navigation-wrapper class.

Identity layout

The only classes you'll nee to create an identity page are ox-layout--identity and ox-layout--main. No other classes are needed because there's no navigation.