Design System page sections



Page section heading

Page section inside a .container centered on the page.

Occaecat ex amet deserunt culpa commodo deserunt ipsum ullamco esse amet. Cillum commodo in consequat magna elit reprehenderit officia sint cupidatat. Sit ipsum cillum sit cupidatat voluptate fugiat sunt sint consequat id officia sint cupidatat.


Page section with .container.no-padding.

Culpa fugiat exercitation irure quis aliquip culpa ad. Lorem aute aliqua culpa ipsum esse reprehenderit fugiat. Elit reprehenderit quis sunt ex. Eu cupidatat ad excepteur tempor proident nisi minim ad mollit. Proident magna eu magna est elit sunt nostrud pariatur mollit irure labore laboris quis sunt. Minim deserunt consectetur nisi pariatur laboris adipisicing. Reprehenderit est anim ullamco amet est deserunt cupidatat non.

Page section with .highlight-section.

Magna labore esse do aliquip do exercitation. Officia exercitation quis cillum in irure ut qui pariatur minim magna culpa minim exercitation ut. Ullamco labore reprehenderit ad reprehenderit aute commodo duis aliqua ex aliquip.

A full-width .page-section (without a .container).

Aliqua dolor eiusmod nisi duis dolore incididunt. Non ullamco esse duis aute voluptate fugiat in do sit. Eiusmod duis est excepteur cupidatat esse qui labore pariatur. Lorem duis nostrud cupidatat anim enim. Consectetur dolor consectetur adipisicing quis sint do proident. Eiusmod aute fugiat duis magna laborum. Sunt pariatur laboris eiusmod velit.

<div class="box">
	<section class="page-section">
		<div class="container">
			<h4 class="page-section-heading text-center">Page section heading</h4>
			<h2>Page section inside a <code>.container</code> centered on the page.</h2>
			<p>Occaecat ex amet deserunt culpa commodo deserunt ipsum ullamco esse amet. Cillum commodo in consequat magna elit reprehenderit officia sint cupidatat. Sit ipsum cillum sit cupidatat voluptate fugiat sunt sint consequat id officia sint cupidatat.</p>
		</div>
	</section>
	<hr>
	<section class="page-section">
		<div class="container no-padding">
			<h2>Page section with <code>.container.no-padding</code>.</h2>
			<p>Culpa fugiat exercitation irure quis aliquip culpa ad. Lorem aute aliqua culpa ipsum esse reprehenderit fugiat. Elit reprehenderit quis sunt ex. Eu cupidatat ad excepteur tempor proident nisi minim ad mollit. Proident magna eu magna est elit sunt nostrud pariatur mollit irure labore laboris quis sunt. Minim deserunt consectetur nisi pariatur laboris adipisicing. Reprehenderit est anim ullamco amet est deserunt cupidatat non.</p>
		</div>
	</section>
	<section class="page-section highlight-section">
		<div class="container">
			<h2>Page section with <code>.highlight-section</code>.</h2>
			<p>Magna labore esse do aliquip do exercitation. Officia exercitation quis cillum in irure ut qui pariatur minim magna culpa minim exercitation ut. Ullamco labore reprehenderit ad reprehenderit aute commodo duis aliqua ex aliquip.</p>
		</div>
	</section>
	<section class="page-section">
		<h2>A full-width <code>.page-section</code> (without a <code>.container</code>).</h2>
		<p>Aliqua dolor eiusmod nisi duis dolore incididunt. Non ullamco esse duis aute voluptate fugiat in do sit. Eiusmod duis est excepteur cupidatat esse qui labore pariatur. Lorem duis nostrud cupidatat anim enim. Consectetur dolor consectetur adipisicing quis sint do proident. Eiusmod aute fugiat duis magna laborum. Sunt pariatur laboris eiusmod velit.</p>
	</section>
</div>
Please note: By using this site, you accept cookies from Google Analytics.