Digital Style Guide

Welcome to the digital style guide for your brand.

Tabs #

Without sub menu

(↓) Download | </> Show code

<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

(↓) Download | </> Show code

<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>