Navigation

See examples of the navigation blocks (known as nav blocks) used for the homepage and sub pages.

Nav blocks with orange top

These are mainly used on the Student Hub homepage.

<div class="nav-blocks">
	<div class="grid-x grid-margin-x small-up-1 medium-up-2 large-up-3" data-equalizer="" data-equalize-by-row="true" data-equalize-on="medium">
		<div class="cell">
			<a href="/brand/standard">
				<div class="card orange" data-equalizer-watch="">
					<div class="card-section">
						<h4>Block 1</h4>
						<p>Lorem ipsum dolor sit amet</p>
					</div>
				</div>
			</a>
		</div>
		<div class="cell">
			<a href="/brand/navigation">
				<div class="card orange" data-equalizer-watch="">
					<div class="card-section">
						<h4>Block 2</h4>
						<p>Lorem ipsum dolor sit amet</p>
					</div>
				</div>
			</a>
		</div>
		<div class="cell">
			<a href="/brand/accordions">
				<div class="card orange" data-equalizer-watch="">
					<div class="card-section">
						<h4>Block 3</h4>
						<p>Lorem ipsum dolor sit amet</p>
					</div>
				</div>
			</a>
		</div>
	</div>
</div>

Standard nav blocks

These are used on all sub pages of the Student Hub.

<div class="nav-blocks" data-equalizer="nav-content" data-equalize-by-row="true">
	<div class="grid-x grid-margin-x small-up-1 medium-up-2 large-up-3">
		<div class="cell">
			<a href="#">
				<div class="card" data-equalizer-watch="nav-content">
					<div class="card-section">
						<h4>Block 1</h4>
						<p>Lorem ipsum dolor sit amet.</p>
					</div>
				</div>
			</a>
		</div>
		<div class="cell">
			<a href="#">
				<div class="card" data-equalizer-watch="nav-content">
				<div class="card-section">
						<h4>Block 2</h4>
						<p>Lorem ipsum dolor sit amet.</p>
					</div>
				</div>
			</a>
		</div>
		<div class="cell">
			<a href="#">
				<div class="card" data-equalizer-watch="nav-content">
					<div class="card-section">
						<h4>Block 3</h4>
						<p>Lorem ipsum dolor sit amet.</p>
					</div>
				</div>
			</a>
		</div>
	</div>
</div>