Navbox grid
The navbox grid pattern presents a set of navboxes in various grid layouts. For a set of navigation links that are considered secondary in importance, to other web page content, the navigation grid pattern should be used.
Rules for the navbox grid
- Must only be used within the main body of the page.
- Navbox grids include top and bottom padding as default. This can be removed by assigning the respective classes
collapse-topandcollapse-bottomto the element with thenavbox-gridclass. - If a navbox with an image is used, all of the navboxes in the grid must include images.
- If a navbox without an image is used, all of the navboxes in the grid must not include images.
- Navbox grids that exceed six navboxes must not have images unless there is a proven user requirement.
- If a navbox with a paragraph is used, all of the navboxes in the grid must include paragraphs.
- If a navbox without a paragraph is used, all of the navboxes in the grid must not include paragraphs.
If there is ever an error with the navbox grid where the rows overlap you can use <div class="clearfix"></div> after the final navbox in a row 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 and paragraphs
- Two links with images
- Two links with paragraphs
- Two links without images or paragraphs
- Three links with images and paragraphs
- Three links with images
- Three links with paragraphs
- Three links without images or paragraphs
- Four links with images and paragraphs
- Four links with images
- Four links with paragraphs
- Four links without images or paragraphs
- Five links with images and paragraphs
- Five links with images
- Five links with paragraphs
- Five links without images or paragraphs
- Six links with images and paragraphs
- Six links with images
- Six links with paragraphs
- Six links without images or paragraphs
- More than six links with paragraphs
- More than six links without images or paragraphs
Two links with images and paragraphs
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.
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
Example
<!-- Begin pattern: navbox-grid //-->
<div class="navbox-grid"><!-- Begin pattern: navbox //-->
<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>Study at St Andrews</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 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>Research</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 //-->
</div><!-- End pattern: navbox-grid //-->Two links with images
Code
Example
<!-- Begin pattern: navbox-grid //-->
<div class="navbox-grid"><!-- Begin pattern: navbox //-->
<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>Study at St Andrews</span></a>
</div>
</div>
</div>
<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>Research</span></a>
</div>
</div>
</div>
</div><!-- End pattern: navbox //-->
</div><!-- End pattern: navbox-grid //-->Two links with paragraphs
Code
Example
<!-- Begin pattern: navbox-grid //-->
<div class="navbox-grid"><!-- Begin pattern: navbox //-->
<div class="row">
<div class="col-sm-6">
<div class="navbox">
<div class="navbox__title">
<a href=""><span>Study at St Andrews</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 class="col-sm-6">
<div class="navbox">
<div class="navbox__title">
<a href=""><span>Research</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 //-->
</div><!-- End pattern: navbox-grid //-->Two links without images or paragraphs
Code
Example
<!-- Begin pattern: navbox-grid //-->
<div class="navbox-grid"><!-- Begin pattern: navbox //-->
<div class="row">
<div class="col-sm-6">
<div class="navbox">
<div class="navbox__title">
<a href=""><span>Study at St Andrews</span></a>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="navbox">
<div class="navbox__title">
<a href=""><span>Research</span></a>
</div>
</div>
</div>
</div><!-- End pattern: navbox //-->
</div><!-- End pattern: navbox-grid //-->Three links with images and paragraphs
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.
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.
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
Example
<!-- Begin pattern: navbox-grid //-->
<div class="navbox-grid"><!-- 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 at St Andrews</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 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>Research</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 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>Alumni and donors</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 //-->
</div><!-- End pattern: navbox-grid //-->Three links with images
Code
Example
<!-- Begin pattern: navbox-grid //-->
<div class="navbox-grid"><!-- 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 at St Andrews</span></a>
</div>
</div>
</div>
<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>Research</span></a>
</div>
</div>
</div>
<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>Alumni and donors</span></a>
</div>
</div>
</div>
</div><!-- End pattern: navbox //-->
</div><!-- End pattern: navbox-grid //-->Three links with paragraphs
Code
Example
<!-- Begin pattern: navbox-grid //-->
<div class="navbox-grid"><!-- Begin pattern: navbox //-->
<div class="row">
<div class="col-sm-4">
<div class="navbox">
<div class="navbox__title">
<a href=""><span>Study at St Andrews</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 class="col-sm-4">
<div class="navbox">
<div class="navbox__title">
<a href=""><span>Research</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 class="col-sm-4">
<div class="navbox">
<div class="navbox__title">
<a href=""><span>Alumni and donors</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 //-->
</div><!-- End pattern: navbox-grid //-->Three links without images or paragraphs
Code
Example
<!-- Begin pattern: navbox-grid //-->
<div class="navbox-grid"><!-- Begin pattern: navbox //-->
<div class="row">
<div class="col-sm-4">
<div class="navbox">
<div class="navbox__title">
<a href=""><span>Study at St Andrews</span></a>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="navbox">
<div class="navbox__title">
<a href=""><span>Research</span></a>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="navbox">
<div class="navbox__title">
<a href=""><span>Alumni and donors</span></a>
</div>
</div>
</div>
</div><!-- End pattern: navbox //-->
</div><!-- End pattern: navbox-grid //-->Four links with images and paragraphs
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.
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.
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.
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
Example
<!-- Begin pattern: navbox-grid //-->
<div class="navbox-grid"><!-- Begin pattern: navbox //-->
<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>Study at St Andrews</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 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>Research</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 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>Study at St Andrews</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 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>Why St Andrews</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 //-->
</div><!-- End pattern: navbox-grid //-->Four links with images
Code
Example
<!-- Begin pattern: navbox-grid //-->
<div class="navbox-grid"><!-- Begin pattern: navbox //-->
<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>Study at St Andrews</span></a>
</div>
</div>
</div>
<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>Research</span></a>
</div>
</div>
</div>
<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>Study at St Andrews</span></a>
</div>
</div>
</div>
<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>Why St Andrews</span></a>
</div>
</div>
</div>
</div><!-- End pattern: navbox //-->
</div><!-- End pattern: navbox-grid //-->Four links with paragraphs
Code
Example
<!-- Begin pattern: navbox-grid //-->
<div class="navbox-grid"><!-- Begin pattern: navbox //-->
<div class="row">
<div class="col-sm-6">
<div class="navbox">
<div class="navbox__title">
<a href=""><span>Study at St Andrews</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 class="col-sm-6">
<div class="navbox">
<div class="navbox__title">
<a href=""><span>Research</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 class="col-sm-6">
<div class="navbox">
<div class="navbox__title">
<a href=""><span>Study at St Andrews</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 class="col-sm-6">
<div class="navbox">
<div class="navbox__title">
<a href=""><span>Why St Andrews</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 //-->
</div><!-- End pattern: navbox-grid //-->Four links without images or paragraphs
Code
Example
<!-- Begin pattern: navbox-grid //-->
<div class="navbox-grid"><!-- Begin pattern: navbox //-->
<div class="row">
<div class="col-sm-6">
<div class="navbox">
<div class="navbox__title">
<a href=""><span>Study at St Andrews</span></a>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="navbox">
<div class="navbox__title">
<a href=""><span>Research</span></a>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="navbox">
<div class="navbox__title">
<a href=""><span>Study at St Andrews</span></a>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="navbox">
<div class="navbox__title">
<a href=""><span>Why St Andrews</span></a>
</div>
</div>
</div>
</div><!-- End pattern: navbox //-->
</div><!-- End pattern: navbox-grid //-->Five links with images and paragraphs
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.
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.
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.
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.
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
Example
<!-- Begin pattern: navbox-grid //-->
<div class="navbox-grid"><!-- Begin pattern: navbox //-->
<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>Study at St Andrews</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 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>Research</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 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 at St Andrews</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 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>Why St Andrews</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 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>Subjects</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 //-->
</div><!-- End pattern: navbox-grid //-->Five links with images
Code
Example
<!-- Begin pattern: navbox-grid //-->
<div class="navbox-grid"><!-- Begin pattern: navbox //-->
<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>Study at St Andrews</span></a>
</div>
</div>
</div>
<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>Research</span></a>
</div>
</div>
</div>
<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 at St Andrews</span></a>
</div>
</div>
</div>
<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>Why St Andrews</span></a>
</div>
</div>
</div>
<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>Subjects</span></a>
</div>
</div>
</div>
</div><!-- End pattern: navbox //-->
</div><!-- End pattern: navbox-grid //-->Five links with paragraphs
Code
Example
<!-- Begin pattern: navbox-grid //-->
<div class="navbox-grid"><!-- Begin pattern: navbox //-->
<div class="row">
<div class="col-sm-6">
<div class="navbox">
<div class="navbox__title">
<a href=""><span>Study at St Andrews</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 class="col-sm-6">
<div class="navbox">
<div class="navbox__title">
<a href=""><span>Research</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 class="col-sm-4">
<div class="navbox">
<div class="navbox__title">
<a href=""><span>Study at St Andrews</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 class="col-sm-4">
<div class="navbox">
<div class="navbox__title">
<a href=""><span>Why St Andrews</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 class="col-sm-4">
<div class="navbox">
<div class="navbox__title">
<a href=""><span>Subjects</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 //-->
</div><!-- End pattern: navbox-grid //-->Five links without images or paragraphs
Code
Example
<!-- Begin pattern: navbox-grid //-->
<div class="navbox-grid"><!-- Begin pattern: navbox //-->
<div class="row">
<div class="col-sm-6">
<div class="navbox">
<div class="navbox__title">
<a href=""><span>Study at St Andrews</span></a>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="navbox">
<div class="navbox__title">
<a href=""><span>Research</span></a>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="navbox">
<div class="navbox__title">
<a href=""><span>Study at St Andrews</span></a>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="navbox">
<div class="navbox__title">
<a href=""><span>Why St Andrews</span></a>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="navbox">
<div class="navbox__title">
<a href=""><span>Subjects</span></a>
</div>
</div>
</div>
</div><!-- End pattern: navbox //-->
</div><!-- End pattern: navbox-grid //-->Six links with images and paragraphs
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.
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.
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.
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.
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.
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
Example
<!-- Begin pattern: navbox-grid //-->
<div class="navbox-grid"><!-- 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 at St Andrews</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 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>Research</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 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>Alumni and donors</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 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>Why St Andrews</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 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>Subjects</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 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>About</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 //-->
</div><!-- End pattern: navbox-grid //-->Six links with images
Code
Example
<!-- Begin pattern: navbox-grid //-->
<div class="navbox-grid"><!-- 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 at St Andrews</span></a>
</div>
</div>
</div>
<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>Research</span></a>
</div>
</div>
</div>
<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>Alumni and donors</span></a>
</div>
</div>
</div>
<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>Why St Andrews</span></a>
</div>
</div>
</div>
<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>Subjects</span></a>
</div>
</div>
</div>
<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>About</span></a>
</div>
</div>
</div>
</div><!-- End pattern: navbox //-->
</div><!-- End pattern: navbox-grid //-->Six links with paragraphs
Code
Example
<!-- Begin pattern: navbox-grid //-->
<div class="navbox-grid"><!-- Begin pattern: navbox //-->
<div class="row">
<div class="col-sm-4">
<div class="navbox">
<div class="navbox__title">
<a href=""><span>Study at St Andrews</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 class="col-sm-4">
<div class="navbox">
<div class="navbox__title">
<a href=""><span>Research</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 class="col-sm-4">
<div class="navbox">
<div class="navbox__title">
<a href=""><span>Alumni and donors</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 class="col-sm-4">
<div class="navbox">
<div class="navbox__title">
<a href=""><span>Why St Andrews</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 class="col-sm-4">
<div class="navbox">
<div class="navbox__title">
<a href=""><span>Subjects</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 class="col-sm-4">
<div class="navbox">
<div class="navbox__title">
<a href=""><span>About</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 //-->
</div><!-- End pattern: navbox-grid //-->Six links without images or paragraphs
Code
Example
<!-- Begin pattern: navbox-grid //-->
<div class="navbox-grid"><!-- Begin pattern: navbox //-->
<div class="row">
<div class="col-sm-4">
<div class="navbox">
<div class="navbox__title">
<a href=""><span>Study at St Andrews</span></a>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="navbox">
<div class="navbox__title">
<a href=""><span>Research</span></a>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="navbox">
<div class="navbox__title">
<a href=""><span>Alumni and donors</span></a>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="navbox">
<div class="navbox__title">
<a href=""><span>Why St Andrews</span></a>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="navbox">
<div class="navbox__title">
<a href=""><span>Subjects</span></a>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="navbox">
<div class="navbox__title">
<a href=""><span>About</span></a>
</div>
</div>
</div>
</div><!-- End pattern: navbox //-->
</div><!-- End pattern: navbox-grid //-->More than six links with paragraphs
Code
Example
<!-- Begin pattern: navbox-grid //-->
<div class="navbox-grid"><!-- Begin pattern: navbox //-->
<div class="row">
<div class="col-sm-4">
<div class="navbox">
<div class="navbox__title">
<a href=""><span>Study at St Andrews</span></a>
</div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<div class="col-sm-4">
<div class="navbox">
<div class="navbox__title">
<a href=""><span>Research</span></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">
<div class="navbox__title">
<a href=""><span>Alumni and donors</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 class="col-sm-4">
<div class="navbox">
<div class="navbox__title">
<a href=""><span>Why St Andrews</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 class="col-sm-4">
<div class="navbox">
<div class="navbox__title">
<a href=""><span>Subjects</span></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">
<div class="navbox__title">
<a href=""><span>About</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 class="col-sm-4">
<div class="navbox">
<div class="navbox__title">
<a href=""><span>News</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 class="col-sm-4">
<div class="navbox">
<div class="navbox__title">
<a href=""><span>Events</span></a>
</div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<div class="col-sm-4">
<div class="navbox">
<div class="navbox__title">
<a href=""><span>Contact us</span></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 //-->
</div><!-- End pattern: navbox-grid //-->More than six links without images or paragraphs
Code
<!-- Begin pattern: navbox-grid //-->
<div class="navbox-grid"><!-- Begin pattern: navbox //-->
<div class="row">
<div class="col-sm-4">
<div class="navbox">
<div class="navbox__title">
<a href=""><span>Study at St Andrews</span></a>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="navbox">
<div class="navbox__title">
<a href=""><span>Research</span></a>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="navbox">
<div class="navbox__title">
<a href=""><span>Alumni and donors</span></a>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="navbox">
<div class="navbox__title">
<a href=""><span>Why St Andrews</span></a>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="navbox">
<div class="navbox__title">
<a href=""><span>Subjects</span></a>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="navbox">
<div class="navbox__title">
<a href=""><span>About</span></a>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="navbox">
<div class="navbox__title">
<a href=""><span>News</span></a>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="navbox">
<div class="navbox__title">
<a href=""><span>Events</span></a>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="navbox">
<div class="navbox__title">
<a href=""><span>Contact us</span></a>
</div>
</div>
</div>
</div><!-- End pattern: navbox //-->
</div><!-- End pattern: navbox-grid //-->