Navbox

The Navbox pattern is used to present feature navigation with an optional background image and description.

Navbox with image

Code

<!-- Begin pattern: navbox //-->

<div class="navbox big-target-click-zone">
        <div class="navbox-image">
            <img src="../../assets/docs/images/placeholders/360x240.jpg" alt="Description">
        </div>
    <div class="navbox-title">
        <p><a href="/study" class="big-target-anchor">Study</a></p>
    </div>
</div>

<!-- End pattern: navbox //-->

Navbox without image

Study

Code

<!-- Begin pattern: navbox //-->

<div class="navbox big-target-click-zone">
    <div class="navbox-title">
        <p><a href="/study" class="big-target-anchor">Study</a></p>
    </div>
</div>

<!-- End pattern: navbox //-->

Navbox with image and paragraph

Study

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Code

<!-- Begin pattern: navbox //-->

<div class="navbox big-target-click-zone">
        <div class="navbox-image">
            <img src="../../assets/docs/images/placeholders/360x240.jpg" alt="Description">
        </div>
    <div class="navbox-title">
        <p><a href="/study" class="big-target-anchor">Study</a></p>
    </div>
</div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

<!-- End pattern: navbox //-->

Navbox without image and paragraph

Study

Code

<!-- Begin pattern: navbox //-->

<div class="navbox big-target-click-zone">
    <div class="navbox-title">
        <p><a href="/study" class="big-target-anchor">Study</a></p>
    </div>
</div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

<!-- End pattern: navbox //-->