Digital Style Guide

Welcome to the digital style guide for your brand.

Sidebar #

Sidebar

(↓) Download | </> Show code

<aside class="sidebar">
    <a href="" class="sidebar__toggle"></a>
    <nav>
        <ul>
            <li class="study active">
                <a href="#">
                    <span>Study</span>
                </a>
                <ul>
                    <li>
                        <a href="#">
                            <span>Course Finder</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <span>Undergraduate</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <span>Postgraduate</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <span>Student Stories</span>
                        </a>
                        <ul>
                            <li>
                                <a href="#">
                                    <span>Eshal Amara</span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <span>Adam Taylor</span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <span>Kelly Marno</span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <span>Zhang Wei</span>
                                </a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li class="research">
                <a href="#">
                    <span>Research</span>
                </a>
            </li>
            <li class="international">
                <a href="#">
                    <span>International</span>
                </a>
            </li>
            <li class="business">
                <a href="#">
                    <span>Business</span>
                </a>
            </li>
            <li class="explore">
                <a href="#">
                    <span>Explore</span>
                </a>
            </li>
            <li class="connect">
                <a href="#">
                    <span>Connect</span>
                </a>
            </li>
            <li class="ten-reasons">
                <a href="#">
                    <span>10 Reasons</span>
                </a>
            </li>
            <li class="back-to-top">
                <a href="#">
                    <span>Back to top</span>
                </a>
            </li>
        </ul>
    </nav>
</aside>

Sidebar open

(↓) Download | </> Show code

<aside class="sidebar open">
    <a href="" class="sidebar__toggle open"></a>
    <nav>
        <ul>
            <li class="study active">
                <a href="#">
                    <span>Study</span>
                </a>
                <ul>
                    <li>
                        <a href="#">
                            <span>Course Finder</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <span>Undergraduate</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <span>Postgraduate</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <span>Student Stories</span>
                        </a>
                        <ul>
                            <li>
                                <a href="#">
                                    <span>Eshal Amara</span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <span>Adam Taylor</span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <span>Kelly Marno</span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <span>Zhang Wei</span>
                                </a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li class="research">
                <a href="#">
                    <span>Research</span>
                </a>
            </li>
            <li class="international">
                <a href="#">
                    <span>International</span>
                </a>
            </li>
            <li class="business">
                <a href="#">
                    <span>Business</span>
                </a>
            </li>
            <li class="explore">
                <a href="#">
                    <span>Explore</span>
                </a>
            </li>
            <li class="connect">
                <a href="#">
                    <span>Connect</span>
                </a>
            </li>
            <li class="ten-reasons">
                <a href="#">
                    <span>10 Reasons</span>
                </a>
            </li>
            <li class="back-to-top">
                <a href="#">
                    <span>Back to top</span>
                </a>
            </li>
        </ul>
    </nav>
</aside>

Sidebar second level

(↓) Download | </> Show code

<aside class="sidebar open">
    <a href="" class="sidebar__toggle open"></a>
    <nav>
        <ul class="expanded">
            <li class="study active open">
                <a href="#">
                    <span>Study</span>
                </a>
                <ul>
                    <li>
                        <a href="#">
                            <span>Course Finder</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <span>Undergraduate</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <span>Postgraduate</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <span>Student Stories</span>
                        </a>
                        <ul>
                            <li>
                                <a href="#">
                                    <span>Eshal Amara</span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <span>Adam Taylor</span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <span>Kelly Marno</span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <span>Zhang Wei</span>
                                </a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li class="research">
                <a href="#">
                    <span>Research</span>
                </a>
            </li>
            <li class="international">
                <a href="#">
                    <span>International</span>
                </a>
            </li>
            <li class="business">
                <a href="#">
                    <span>Business</span>
                </a>
            </li>
            <li class="explore">
                <a href="#">
                    <span>Explore</span>
                </a>
            </li>
            <li class="connect">
                <a href="#">
                    <span>Connect</span>
                </a>
            </li>
            <li class="ten-reasons">
                <a href="#">
                    <span>10 Reasons</span>
                </a>
            </li>
            <li class="back-to-top">
                <a href="#">
                    <span>Back to top</span>
                </a>
            </li>
        </ul>
    </nav>
</aside>

Sidebar third level

(↓) Download | </> Show code

<aside class="sidebar open">
    <a href="" class="sidebar__toggle open"></a>
    <nav>
        <ul class="expanded">
            <li class="study open">
                <a href="#">
                    <span>Study</span>
                </a>
                <ul class="expanded">
                    <li>
                        <a href="#">
                            <span>Course Finder</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <span>Undergraduate</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <span>Postgraduate</span>
                        </a>
                    </li>
                    <li class="active open">
                        <a href="#">
                            <span>Student Stories</span>
                        </a>
                        <ul>
                            <li>
                                <a href="#">
                                    <span>Eshal Amara</span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <span>Adam Taylor</span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <span>Kelly Marno</span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <span>Zhang Wei</span>
                                </a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li class="research">
                <a href="#">
                    <span>Research</span>
                </a>
            </li>
            <li class="international">
                <a href="#">
                    <span>International</span>
                </a>
            </li>
            <li class="business">
                <a href="#">
                    <span>Business</span>
                </a>
            </li>
            <li class="explore">
                <a href="#">
                    <span>Explore</span>
                </a>
            </li>
            <li class="connect">
                <a href="#">
                    <span>Connect</span>
                </a>
            </li>
            <li class="ten-reasons">
                <a href="#">
                    <span>10 Reasons</span>
                </a>
            </li>
            <li class="back-to-top">
                <a href="#">
                    <span>Back to top</span>
                </a>
            </li>
        </ul>
    </nav>
</aside>