Navbox

The navbox pattern is used to present featured links 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.
Large navboxes must not have a title that exceeds 88 characters.
Regular navboxes must not have a title that exceeds 57 characters.
When using an image, the image must relate to the link destination.
Navboxes with accompanying paragraphs must not have more than 300 characters.

Navbox sizes

Navboxes are available in two different sizes: regular 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
Regular	750 by 500 pixels
Large	1110 by 480 pixels

All available navbox sizes

The regular size of navbox takes up a third of the available space of its container, while the large navbox is half the width of its containing element.

Example

Regular

Large

Code

<!-- Begin pattern: navbox //-->
<div class="row">
    <div class="col-sm-4">
        <div class="navbox">
            <div class="navbox__image">
                <img src="../../assets/docs/images/placeholders/750x500.png" alt="Description">
            </div>
            <div class="navbox__title">
                <a href=""><span>Regular</span></a>
            </div>
        </div>
    </div>
</div><div class="row">
    <div class="col-sm-6">
        <div class="navbox">
            <div class="navbox__image">
                <img src="../../assets/docs/images/placeholders/1110x480.png" alt="Description">
            </div>
            <div class="navbox__title">
                <a href=""><span>Large</span></a>
            </div>
        </div>
    </div>
</div><!-- End pattern: navbox //-->

Navbox with image and paragraph

Example

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">
            <div class="navbox__image">
                <img src="../../assets/docs/images/placeholders/750x500.png" alt="Description">
            </div>
            <div class="navbox__title">
                <a href=""><span>Study</span></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 with image

Example

Study

Code

<!-- Begin pattern: navbox //-->
<div class="row">
    <div class="col-sm-4">
        <div class="navbox">
            <div class="navbox__image">
                <img src="../../assets/docs/images/placeholders/750x500.png" alt="Description">
            </div>
            <div class="navbox__title">
                <a href=""><span>Study</span></a>
            </div>
        </div>
    </div>
</div><!-- End pattern: navbox //-->

Navbox with paragraph

Example

Study

Code

<!-- Begin pattern: navbox //-->
<div class="row">
    <div class="col-sm-4">
        <div class="navbox">
            <div class="navbox__title">
                <a href=""><span>Study</span></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

Example

Study

Code

<!-- Begin pattern: navbox //-->
<div class="row">
    <div class="col-sm-4">
        <div class="navbox">
            <div class="navbox__title">
                <a href=""><span>Study</span></a>
            </div>
        </div>
    </div>
</div><!-- End pattern: navbox //-->

Navbox (old version) - deprecated

This option is no longer supported

This implementation is deprecated and will be removed in a future version of the digital pattern library.

Example

Study

Code

<!-- Begin pattern: navbox //-->
<div class="row">
    <div class="col-sm-4">
        <div class="navbox">
            <div class="navbox-image">
                <img src="../../assets/docs/images/placeholders/750x500.png" alt="Description">
            </div>
            <div class="navbox-title" role="button">
                <a href="#">Study</a>
            </div>
        </div>
    </div>
</div><!-- End pattern: navbox //-->