University of St Andrews

Navbox grid

The navbox grid pattern presents a set of navboxes in various grid layouts.

Rules for the navbox grid

• Must only be used within the main body of the page.
• Must only be used on whole content columns.
• 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.
• If a grid with images is used, all of the navboxes in the grid must include images.
• If a grid without images is used, all of the navboxes in the grid must not include images.
• When using an image you must have between two and six navboxes in a grid.
• Navbox grids that exceed six navboxes must not have images.

If there is ever an error with having taller content in the navbox grids, where the layout breaks, you can use <div class="clearfix"></div> after the third navbox to correct it.

Options available

Choose the grid option below that matches the number of navigation links required. For information on image sizes, see the navbox pattern.

• Two links with images
• Three links with images
• Three links with images and paragraphs
• Three links without images and paragraphs
• Three links with paragraphs but without images
• Four links with images
• Five links with images
• Six links with images
• More than six links without images
• More than six links with paragraphs but without images

Two links with images

Study at St Andrews

Research

<!-- Begin pattern: navbox-grid //-->
<!-- Begin pattern: navbox //-->
<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-002.jpg" alt="Description">
            </div>
            <div class="navbox-title" role="button">
                <a href="#" class="big-target-anchor">Study at St&nbsp;Andrews</a>
            </div>
        </div>
    </div>


    <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">Research</a>
            </div>
        </div>
    </div>

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

Three links with images

Study at St Andrews

Research

Alumni and donors

<!-- Begin pattern: navbox-grid //-->
<!-- 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 at St&nbsp;Andrews</a>
            </div>
        </div>
    </div>


    <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">Research</a>
            </div>
        </div>
    </div>


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

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

Three links with images and paragraphs

Use this option when you want to give a brief summary of the destination page.

Study at St Andrews

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.

Research

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.

Alumni and donors

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.

<!-- Begin pattern: navbox-grid //-->
<!-- 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 at St&nbsp;Andrews</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 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">Research</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 class="col-sm-4">
        <div class="navbox big-target-click-zone">
            <div class="navbox-image">
                <img src="../../assets/docs/images/placeholders/360x240-alumni.jpg" alt="Description">
            </div>
            <div class="navbox-title" role="button">
                <a href="#" class="big-target-anchor">Alumni and donors</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 //--><!-- End pattern: navbox-grid //-->

Three links without images and paragraphs

<!-- Begin pattern: navbox-grid //-->
<!-- 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 at St&nbsp;Andrews</a>
            </div>
        </div>
    </div>


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


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

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

Three links with paragraphs but without images

Use this option when you want to give a brief summary of the destination page.

<!-- Begin pattern: navbox-grid //-->
<!-- 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 at St&nbsp;Andrews</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 class="col-sm-4">
        <div class="navbox big-target-click-zone">
            <div class="navbox-title" role="button">
                <a href="#" class="big-target-anchor">Research</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 class="col-sm-4">
        <div class="navbox big-target-click-zone">
            <div class="navbox-title" role="button">
                <a href="#" class="big-target-anchor">Alumni and donors</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 //--><!-- End pattern: navbox-grid //-->

Four links with images

Why St Andrews

Research

Alumni and donors

The town

<!-- Begin pattern: navbox-grid //-->
<!-- Begin pattern: navbox //-->
<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">Why St&nbsp;Andrews</a>
            </div>
        </div>
    </div>


    <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">Research</a>
            </div>
        </div>
    </div>


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


    <div class="col-sm-8">
        <div class="navbox big-target-click-zone">
            <div class="navbox-image">
                <img src="../../assets/docs/images/placeholders/750x240-002.jpg" alt="Description">
            </div>
            <div class="navbox-title" role="button">
                <a href="#" class="big-target-anchor">The town</a>
            </div>
        </div>
    </div>

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

Five links with images

Undergraduate

Postgraduate

Schools

About

Contact

<!-- Begin pattern: navbox-grid //-->
<!-- Begin pattern: navbox //-->
<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">Undergraduate</a>
            </div>
        </div>
    </div>


    <div class="col-sm-6">
        <div class="navbox big-target-click-zone">
            <div class="navbox-image">
                <img src="../../assets/docs/images/placeholders/555x240-002.jpg" alt="Description">
            </div>
            <div class="navbox-title" role="button">
                <a href="#" class="big-target-anchor">Postgraduate</a>
            </div>
        </div>
    </div>


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


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


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

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

Six links with images

Study at St Andrews

Research

Alumni and donors

About

People

Contact

<!-- Begin pattern: navbox-grid //-->
<!-- 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 at St&nbsp;Andrews</a>
            </div>
        </div>
    </div>


    <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">Research</a>
            </div>
        </div>
    </div>


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


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


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


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

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

More than six links without images

Must be used when you have more than six links without a paragraph.

<!-- Begin pattern: navbox-grid //-->
<!-- 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 at St&nbsp;Andrews</a>
            </div>
        </div>
    </div>


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


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


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


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


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


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


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


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

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

More than six links with paragraphs but without images

Must be used when you have more than six links with a paragraph.

<!-- Begin pattern: navbox-grid //-->
<!-- 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 at St&nbsp;Andrews</a>
            </div>
        </div>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>


    <div class="col-sm-4">
        <div class="navbox big-target-click-zone">
            <div class="navbox-title" role="button">
                <a href="#" class="big-target-anchor">Research</a>
            </div>
        </div>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>


    <div class="col-sm-4">
        <div class="navbox big-target-click-zone">
            <div class="navbox-title" role="button">
                <a href="#" class="big-target-anchor">Alumni and donors</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 class="col-sm-4">
        <div class="navbox big-target-click-zone">
            <div class="navbox-title" role="button">
                <a href="#" class="big-target-anchor">About</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 class="col-sm-4">
        <div class="navbox big-target-click-zone">
            <div class="navbox-title" role="button">
                <a href="#" class="big-target-anchor">Governance</a>
            </div>
        </div>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
    </div>


    <div class="col-sm-4">
        <div class="navbox big-target-click-zone">
            <div class="navbox-title" role="button">
                <a href="#" class="big-target-anchor">History</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 class="col-sm-4">
        <div class="navbox big-target-click-zone">
            <div class="navbox-title" role="button">
                <a href="#" class="big-target-anchor">Sustainability</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 class="col-sm-4">
        <div class="navbox big-target-click-zone">
            <div class="navbox-title" role="button">
                <a href="#" class="big-target-anchor">News</a>
            </div>
        </div>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>


    <div class="col-sm-4">
        <div class="navbox big-target-click-zone">
            <div class="navbox-title" role="button">
                <a href="#" class="big-target-anchor">Visiting</a>
            </div>
        </div>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
    </div>

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