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, as the name says, this describes the layout. If a full-width layout is needed, you can add the modifier ox-layout--full-width.

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

The navigation is followed by a main area defined by ox-layout__main that provides a space for the content in ox-layout__main__content and if needed a secondary navigation in ox-layout__main__secondary-navigation-wrapper. The last item inside the main area is the footer ox-layout__footer which contains the legal links such as the privacy & cookie policy.

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

<!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>
		<div class="ox-layout__main">
			<div class="ox-layout__main__secondary-navigation-wrapper">
				<!-- Secondary navigation  -->
			</div>
			<main role="main" class="ox-layout__main__content">
				<!-- Page content  -->
			</main>
			<footer role="footer" class="ox-layout__footer">
				<!-- Footer content  -->
			</footer>
		</div>
	</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

Secondary navigation

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.