Digital Style Guide
Welcome to the digital style guide for your brand.
Tabs #
Without sub menu
<nav class="tabs" id="tabs">
<div class="tabs__main">
<div class="inner">
<ul class="columns">
<li class="column"><a href="03-course-overview#tabs" class="tab active">Overview</a></li>
<li class="column"><a href="04-course-course#tabs" class="tab">Course</a></li>
<li class="column"><a href="#" class="tab">Connect</a></li>
</ul>
</div>
</div>
</nav>
With sub menu
<nav class="tabs" id="tabs">
<div class="tabs__main">
<div class="inner">
<ul class="columns">
<li class="column"><a href="03-course-overview#tabs" class="tab">Overview</a></li>
<li class="column"><a href="04-course-course#tabs" class="tab active">Course</a></li>
<li class="column"><a href="#" class="tab">Connect</a></li>
</ul>
</div>
</div>
<div class="tabs__sub">
<div class="inner">
<ul class="columns max-3">
<li class="column"><a href="#" class="tab active">Course Modules</a></li>
<li class="column"><a href="#" class="tab">Entry Requirements</a></li>
<li class="column"><a href="#" class="tab">Other courses you may like</a></li>
<li class="column"><a href="#" class="tab">Fees & Scholarships</a></li>
<li class="column"><a href="#" class="tab">Apply Now</a></li>
<li class="column"><a href="#" class="tab">Learning & Teaching</a></li>
<li class="column"><a href="#" class="tab">Career Prospects</a></li>
<li class="column"><a href="#" class="tab">Assessment & Feedback</a></li>
<li class="column"><a href="#" class="tab">Add to Virtual Prospectus</a></li>
</ul>
</div>
</div>
</nav>