Navbox

The navbox pattern is used to present featured navigation items with an optional background image and paragraph.

Rules for the navbox

Must only be used within the main body of the page or within the aside.
Must only link to an internal webpage or web application.
Must not have a title that is longer than two lines of text.
When using an image, the image must relate to the link destination.

Navbox sizes

Navboxes are available in three different sizes: small (⅓), medium (½) and large (⅔). Available combinations of these sizes can been found on the navbox-grid pattern page. If using an image, see the table below for image sizes.

Box size	Image size
Small	360 × 240 pixels
Medium	555 × 240 pixels
Large	750 × 240 pixels

Navbox sizes

Small (⅓)

Medium (½)

Large (⅔)

Code

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

<div class="row">
    <div class="col-sm-4">
        <div class="navbox big-target-click-zone">
            <div class="navbox-image">
                <img src="../../assets/docs/images/placeholders/360x240-study.jpg" alt="Description">
            </div>
            <div class="navbox-title" role="button">
                <a href="#" class="big-target-anchor">Small (⅓)</a>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-sm-6">
        <div class="navbox big-target-click-zone">
            <div class="navbox-image">
                <img src="../../assets/docs/images/placeholders/555x240-001.jpg" alt="Description">
            </div>
            <div class="navbox-title" role="button">
                <a href="#" class="big-target-anchor">Medium (½)</a>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-sm-8">
        <div class="navbox big-target-click-zone">
            <div class="navbox-image">
                <img src="../../assets/docs/images/placeholders/750x240-001.jpg" alt="Description">
            </div>
            <div class="navbox-title" role="button">
                <a href="#" class="big-target-anchor">Large (⅔)</a>
            </div>
        </div>
    </div>
</div>

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

Navbox with image

Study

Code

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

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

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

Navbox without image

Study

Code

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

<div class="row">
    <div class="col-sm-4">
        <div class="navbox big-target-click-zone">
            <div class="navbox-title" role="button">
                <a href="#" class="big-target-anchor">Study</a>
            </div>
        </div>
    </div>
</div>

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

Navbox with image and paragraph

The paragraph must not have more than 300 characters.

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="row">
    <div class="col-sm-4">
        <div class="navbox big-target-click-zone">
            <div class="navbox-image">
                <img src="../../assets/docs/images/placeholders/360x240-research.jpg" alt="Description">
            </div>
            <div class="navbox-title" role="button">
                <a href="#" class="big-target-anchor">Study</a>
            </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>
    </div>
</div>

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

Navbox without image and paragraph

The paragraph must not have more than 300 characters.

Study

Code

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

<div class="row">
    <div class="col-sm-4">
        <div class="navbox big-target-click-zone">
            <div class="navbox-title" role="button">
                <a href="#" class="big-target-anchor">Study</a>
            </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>
    </div>
</div>

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