• Homepage
• Navigational boxes
• Feature boxes
• Grid system
• Accordions
• Tables
• Forms

Feature boxes

Find out how to use feature boxes to highlight important pieces of content on a University of Sussex web page.

Our current standard feature box provides a way of differentiating content on a page. The box provides no semantic difference in terms of page hierarchy.

Not only do these boxes work well on a desktop screen, they have been built to work on mobiles and adapt to varying screen sizes.

You can have from one to five boxes on the same line next to each other.

You can skip down the page to read about:

• Standard box
• Multiple boxes on the same line
• Automatic height
• A grid of boxes

Standard box

This is an example of the standard box:

<div class="box">
    <div .class="box-content">
        <div class="palette4 swatch6">
            <p>The content</p>
            <p>Goes here</p>
        </div>
    </div>
</div>

Multiple boxes on the same line

If you want multiple boxes on the same line you'll need to include the class x2, x3, x4, or x5, depending on how many you want.

Here's an example:

<div class="box x2">
    <div .class="box-content">
        <div class="palette4 swatch6">
            <p>The content</p>
            <p>Goes here</p>
        </div>
    </div>
    <div .class="box-content">
        <div class="palette4 swatch6">
            <p>The content</p>
            <p>Goes here</p>
        </div>
    </div>
</div>

<div class="box x3">
    <div .class="box-content">
        <div class="palette4 swatch6">
            <p>The content</p>
            <p>Goes here</p>
        </div>
    </div>
    <div .class="box-content">
        <div class="palette4 swatch6">
            <p>The content</p>
            <p>Goes here</p>
        </div>
    </div>
    <div .class="box-content">
        <div class="palette4 swatch6">
            <p>The content</p>
            <p>Goes here</p>
        </div>
    </div>
</div>

By extension, use x4 to display four boxes across or x5 to have five.

Automatic height

By default, all boxes are a set minimum height and then grow to the height needed for the content. Sometimes you will want your boxes to have the same height. To do this, include the autoheight class.

Here's an example:

<div class="box x2 autoheight">
    <div .class="box-content">
        <div class="palette4 swatch6">
            <p>The content</p>
            <p>Goes here</p>
            <p>The content</p>
            <p>Goes here</p>
            <p>The content</p>
            <p>Goes here</p>
        </div>
    </div>
    <div .class="box-content">
        <div class="palette4 swatch6">
            <p>The content</p>
            <p>Goes here</p>
        </div>
    </div>
</div>

A grid of boxes

You might sometimes need a 2x2 grid, or a 3x2 grid, etc. To create a grid of boxes, you can use the column class you want (x2 to x5) and then add the desired number of boxes you want in the the container.

Here's an example:

<div class="box x3">
    <div data-stub="1">
        <div class="palette4 swatch6">
            <p>The content</p>
            <p>Goes here</p>
        </div>
    </div>
    <div data-stub="1">
        <div class="palette4 swatch6">
            <p>The content</p>
            <p>Goes here</p>
        </div>
    </div>
    <div data-stub="1">
        <div class="palette4 swatch6">
            <p>The content</p>
            <p>Goes here</p>
        </div>
    </div>
    <div data-stub="1">
        <div class="palette4 swatch6">
            <p>The content</p>
            <p>Goes here</p>
        </div>
    </div>
    <div data-stub="1">
        <div class="palette4 swatch6">
            <p>The content</p>
            <p>Goes here</p>
        </div>
    </div>
    <div data-stub="1">
        <div class="palette4 swatch6">
            <p>The content</p>
            <p>Goes here</p>
        </div>
    </div>
    <div data-stub="1">
        <div class="palette4 swatch6">
            <p>The content</p>
            <p>Goes here</p>
        </div>
    </div>
    <div data-stub="1">
        <div class="palette4 swatch6">
            <p>The content</p>
            <p>Goes here</p>
        </div>
    </div>
    <div data-stub="1">
        <div class="palette4 swatch6">
            <p>The content</p>
            <p>Goes here</p>
        </div>
    </div>
</div>