<ul class="tabs">
    <li class="tab-title active"><button>Summary</button></li>
    <li class="tab-title"><button>Basics</button></li>
    <li class="tab-title"><button>Budget</button></li>
    <li class="tab-title"><button>Accounts</button></li>
</ul>

<ul class="tabs vertical">
    <li class="tab-title active"><button>Summary</button></li>
    <li class="tab-title"><button>Basics</button></li>
    <li class="tab-title"><button>Budget</button></li>
    <li class="tab-title"><button>Accounts</button></li>
</ul>

<ul class="filter-nav">
    <li class="filter-nav-entry active"><button>Summary</button></li>
    <li class="filter-nav-entry"><button>Basics</button></li>
    <li class="filter-nav-entry"><button>Budget</button></li>
    <li class="filter-nav-entry"><button>Accounts</button></li>
</ul>

<ul class="filter-nav vertical">
    <li class="filter-nav-entry active"><button>Summary</button></li>
    <li class="filter-nav-entry"><button>Basics</button></li>
    <li class="filter-nav-entry"><button>Budget</button></li>
    <li class="filter-nav-entry"><button>Accounts</button></li>
</ul>

<ul class="heading-nav">
    <li class="heading-nav-entry active"><button>Summary</button></li>
    <li class="heading-nav-entry"><button>Basics</button></li>
    <li class="heading-nav-entry"><button>Budget</button></li>
    <li class="heading-nav-entry"><button>Accounts</button></li>
</ul>

<div class="bg-off-white padding-medium">
    <h1 class="padding-bottom-medium">Navigation Concepts</h1>
    <ul class="heading-nav padding-bottom-medium">
        <li class="heading-nav-entry active"><button>Doc Vault</button></li>
        <li class="heading-nav-entry"><button>Statements &amp; Reports</button></li>
        <li class="heading-nav-entry"><button>More Documents</button></li>
    </ul>
    <div class="card padding-none">
        <ul class="tabs padding-left-medium padding-top-small">
            <li class="tab-title active"><button>My Uploads</button></li>
            <li class="tab-title"><button>Shared with Me</button></li>
            <li class="tab-title"><button>eSignatures</button></li>
            <li class="tab-title"><button>All Documents</button></li>
        </ul>
        <div class="row padding-horiz-medium">
            <div class="columns small-3 padding-top-medium">
                <ul class="filter-nav vertical">
                    <h6>Collection Types</h6>
                    <li class="filter-nav-entry active"><button>All Collections</button></li>
                    <li class="filter-nav-entry"><button>Insurance Docs</button></li>
                    <li class="filter-nav-entry"><button>Estate Docs</button></li>
                    <li class="filter-nav-entry"><button>Financial Docs</button></li>
                </ul>
            </div>
            <div class="columns small-9 padding-vert-medium">                
                <h1>All Collections</h1>
                <h3>Subheading for content below</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam quis facilisis lorem, vitae egestas leo. Nulla at augue vulputate, sodales diam rutrum, rhoncus felis. Mauris vitae lacus sodales, ullamcorper felis sed, sodales est. Nullam volutpat leo mi, non pellentesque ante porttitor at. Integer a diam massa. Suspendisse cursus velit mi, eget accumsan massa eleifend vel. Phasellus ut placerat quam. Integer eleifend enim et elit malesuada, commodo congue ipsum tempor. Nulla feugiat leo vel magna feugiat bibendum. Sed eget eros vulputate, laoreet ante sit amet, malesuada nulla. Aenean id maximus ante, ac mattis ex.</p>
                <p>Integer vestibulum est in justo finibus faucibus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut massa justo, scelerisque vitae auctor at, sagittis tincidunt risus. Duis aliquet est ante, non congue lectus fermentum sit amet. Aliquam iaculis laoreet risus eget vulputate. Etiam sodales condimentum odio, scelerisque pulvinar velit varius quis. Duis eu ex velit. Sed vel massa accumsan, bibendum nulla id, interdum elit. Duis sollicitudin cursus felis, id molestie risus hendrerit vel. Nulla id nisi vitae erat eleifend vestibulum a tempor neque. Donec neque dui, maximus sed ultrices nec, vestibulum nec ex. Donec tempor condimentum nisl, ac finibus ligula facilisis at. Quisque eu dui lacus. Sed lobortis elit nec consequat fermentum. Maecenas a erat ut risus vestibulum consectetur. Aliquam erat volutpat.</p>
            </div>
        </div>
    </div>
</div>

<div class="bg-black padding-medium">
    <ul class="tabs ghost">
        <li class="tab-title active"><button>Summary</button></li>
        <li class="tab-title"><button>Basics</button></li>
        <li class="tab-title"><button>Budget</button></li>
        <li class="tab-title"><button>Accounts</button></li>
    </ul>
</div>

<ul class="filter-nav padding-medium bg-black ghost">
    <li class="filter-nav-entry active"><button>Summary</button></li>
    <li class="filter-nav-entry"><button>Basics</button></li>
    <li class="filter-nav-entry"><button>Budget</button></li>
    <li class="filter-nav-entry"><button>Accounts</button></li>
</ul>

<ul class="heading-nav bg-black padding-medium ghost">
    <li class="heading-nav-entry active"><button>Summary</button></li>
    <li class="heading-nav-entry"><button>Basics</button></li>
    <li class="heading-nav-entry"><button>Budget</button></li>
    <li class="heading-nav-entry"><button>Accounts</button></li>
</ul>