Layouts

This guide is concerned with layout options in the main area of the page between the header
and footer. Page layouts can have one to three columns including primary, secondary and
navigation columns. Each option is represented below.

The .l-max-width should be wrapped around all layout columns to constrain them to our
max width for each page.

Always add the role="main" property value to the primary column.

Single Column

The single column layout has just the primary column and is reduced in size to 80% of the max width to make text easier to read. If you do not want this more narrow width on your single primary column then simply remove the .l-cols__main name from the div.

Primary Content

Nullam id dolor id nibh ultricies vehicula ut id elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Sed posuere consectetur est at lobortis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Sed posuere consectetur est at lobortis.

<div class="l-max-width">
  	<main class="l-cols__main" role="main">
  		<h2>Primary Content</h2>
  		<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Sed posuere consectetur est at lobortis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Sed posuere consectetur est at lobortis.</p>
  	</main>
  </div>

With Aside

Adding a secondary column to the layout will maximize the width of the layout.

Primary Content

Nullam id dolor id nibh ultricies vehicula ut id elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Sed posuere consectetur est at lobortis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Sed posuere consectetur est at lobortis.

<div class="l-max-width">
  	<main class="l-cols__main" role="main">
  		<h2>Primary Content</h2>
  		<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Sed posuere consectetur est at lobortis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Sed posuere consectetur est at lobortis.</p>
  	</main>
  	<aside class="l-cols__aside t-aside-dark">
  		<h2>Aside Content</h2>
  		<p>Bacon ipsum dolor amet cupim pork pork chop chicken sausage turducken cow bacon beef ribs rump short loin. Shankle alcatra capicola kevin turducken tri-tip strip steak flank swine biltong ham hock sirloin t-bone. Cow shankle sirloin pork chop pancetta, shoulder frankfurter.</p>
  	</aside>
  </div>

With Nav

Adding a nav column to the layout will maximize the width of the layout.

Primary Content

Nullam id dolor id nibh ultricies vehicula ut id elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Sed posuere consectetur est at lobortis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Sed posuere consectetur est at lobortis.

<div class="l-max-width">
  	<aside class="l-cols__nav">
  		<h2>Section Nav</h2>
  		<p>Donec id elit non mi porta gravida at eget metus. Cras mattis consectetur purus sit amet fermentum. Vestibulum id ligula porta felis euismod semper. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
  	</aside>
  	<main class="l-cols__main" role="main">
  		<h2>Primary Content</h2>
  		<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Sed posuere consectetur est at lobortis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Sed posuere consectetur est at lobortis.</p>
  	</main>
  </div>

With Nav And Aside

Example 3 column layout.

Primary Content

Nullam id dolor id nibh ultricies vehicula ut id elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Sed posuere consectetur est at lobortis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Sed posuere consectetur est at lobortis.

<div class="l-max-width">
  	<aside class="l-cols__nav">
  		<h2>Section Nav</h2>
  		<p>Donec id elit non mi porta gravida at eget metus. Cras mattis consectetur purus sit amet fermentum. Vestibulum id ligula porta felis euismod semper. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
  	</aside>
  	<main class="l-cols__main" role="main">
  		<h2>Primary Content</h2>
  		<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Sed posuere consectetur est at lobortis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Sed posuere consectetur est at lobortis.</p>
  	</main>
  	<aside class="l-cols__aside t-aside-light">
  		<h2>Aside Content</h2>
  		<p>Bacon ipsum dolor amet cupim pork pork chop chicken sausage turducken cow bacon beef ribs rump short loin. Shankle alcatra capicola kevin turducken tri-tip strip steak flank swine biltong ham hock sirloin t-bone. Cow shankle sirloin pork chop pancetta, shoulder frankfurter.</p>
  	</aside>
  </div>

Form Page

The .l-page component is used between the header and footer of the page to create a layout structure for most of the main layout areas. The .l-page__section is used to wrap major sections of the page inside our max-width. The .l-page__header class will contain the .page-header component. The .l-page__content class will contain the primary content.

Page Title

Some summary of the page

Overview or instructions for filling out this form.

<div class="l-page">
  	<section class="l-page__section l-cols">
  		<main class="l-cols__main" role="main">
  			<header class="l-page__header">
  				<div class="page-header">
  					<p class="page-header__account">Account# 8169010000</p>
  					<h1 class="page-header__title">
  						<span>Page Title</span>
  					</h1>
  					<p class="page-header__summary">
  						Some summary of the page
  					</p>
  				</div>
  			</header>
  			<div class="l-page__content">
  
  				<div class="content-overview">
  					<p>Overview or instructions for filling out this form.</p>
  				</div>
  				<form action="#" class="form">
  					<div class="field">
  						<label for="username">
  							Username
  							<span class="required">*</span>
  						</label> <input id="username" type="text" required> </div>
  					<div class="field">
  						<label for="password">
  							Password
  							<span class="required">*</span>
  						</label> <input id="password" type="text" required> </div>
  					<footer class="form__footer">
  						<button class="button button--blue">
  							Login
  						</button> </footer>
  				</form>
  
  			</div>
  		</main>
  	</section>
  </div>

Split

The .l-split layout component is used to split content into 2 columns on large screens. The .l-split__column class will contain each column

Column One

Salami short loin biltong pig picanha. Ham hock turkey alcatra ball tip tri-tip. Ham drumstick prosciutto short ribs strip steak, picanha doner rump andouille beef ribs. Spare ribs ground round turkey pork.

Leberkas frankfurter cow hamburger prosciutto salami shankle, pork landjaeger. Ground round kielbasa tenderloin pork belly beef. Salami flank pastrami, pancetta pig spare ribs ribeye tri-tip. Strip steak meatloaf corned beef cow tri-tip jowl shankle sirloin alcatra. Short loin bacon biltong pork chop, ribeye turkey ball tip kevin beef pig sausage. Capicola pastrami meatloaf flank, porchetta beef prosciutto tri-tip short ribs venison. Beef meatloaf pancetta, beef ribs short ribs pork belly ribeye sausage tenderloin short loin cupim strip steak picanha fatback porchetta.

Column Two

Beef capicola sirloin shoulder flank pig. Cow turducken rump alcatra, short loin salami bresaola kevin corned beef tail cupim prosciutto beef ribs landjaeger ground round. Prosciutto chicken picanha bresaola chuck. Corned beef pork shoulder shankle turducken short ribs, ground round prosciutto jerky capicola filet mignon chuck short loin boudin biltong. Shoulder t-bone boudin andouille alcatra, chicken spare ribs frankfurter biltong ground round pastrami. Short ribs alcatra bacon cow, rump landjaeger tenderloin cupim shankle ball tip kielbasa turducken jowl ribeye leberkas. Hamburger ball tip short loin jerky doner landjaeger cupim.

<div class="l-split">
  	<div class="l-split__column">
  
  		<h1>Column One</h1>
  
  		<p>Salami short loin biltong pig picanha. Ham hock turkey alcatra ball tip tri-tip. Ham drumstick prosciutto short ribs strip steak, picanha doner rump andouille beef ribs. Spare ribs ground round turkey pork.</p>
  
  		<p>Leberkas frankfurter cow hamburger prosciutto salami shankle, pork landjaeger. Ground round kielbasa tenderloin pork belly beef. Salami flank pastrami, pancetta pig spare ribs ribeye tri-tip. Strip steak meatloaf corned beef cow tri-tip jowl shankle sirloin alcatra. Short loin bacon biltong pork chop, ribeye turkey ball tip kevin beef pig sausage. Capicola pastrami meatloaf flank, porchetta beef prosciutto tri-tip short ribs venison. Beef meatloaf pancetta, beef ribs short ribs pork belly ribeye sausage tenderloin short loin cupim strip steak picanha fatback porchetta.</p>
  
  	</div>
  
  	<div class="l-split__column">
  		<h1>Column Two</h1>
  
  		<p>Beef capicola sirloin shoulder flank pig. Cow turducken rump alcatra, short loin salami bresaola kevin corned beef tail cupim prosciutto beef ribs landjaeger ground round. Prosciutto chicken picanha bresaola chuck. Corned beef pork shoulder shankle turducken short ribs, ground round prosciutto jerky capicola filet mignon chuck short loin boudin biltong. Shoulder t-bone boudin andouille alcatra, chicken spare ribs frankfurter biltong ground round pastrami. Short ribs alcatra bacon cow, rump landjaeger tenderloin cupim shankle ball tip kielbasa turducken jowl ribeye leberkas. Hamburger ball tip short loin jerky doner landjaeger cupim.</p>
  
  	</div>
  </div>

Card Grid

Default card grid with 2 columns.

<div class="card-grid js-eq-heights__root">
  </div>

Card Grid 3up

Default card grid with 3 columns.

<div class="card-grid card-grid--3-up js-eq-heights__root">
  </div>