Panel

The panel pattern comprises a heading or image, both with a description. Panels may be used in asides for additional information or combined together to form a panel grid.

Rules for panels

Individual panels must only be used in asides.
Multiple panels must not be used in asides.
Individual panels must not be used in the main body of pages.
Panel grid pattern must be used to feature multiple panels on a page.
Any combination of coloured panels can be used on a panel grid.
Panels with images must only appear in asides.
Panel headings may also be linked, this will add a chevron to indicate the available action.

Primary - with linked heading

The default panel colour with a linked heading.

Example

Primary

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque adipisci id perspiciatis veniam magnam! Numquam incidunt placeat eos cum. Beatae perspiciatis officiis sint harum.

Code

<!-- Begin pattern: panel //-->
<div class="col-md-4">
    <div class="panel panel-primary">
        <div class="panel-heading">
            <h3 class="panel-title"><a href="#">Primary</a></h3>
        </div>
        <div class="panel-body">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque adipisci id perspiciatis veniam magnam! Numquam incidunt placeat eos cum. Beatae perspiciatis officiis sint harum.</p>
        </div>
    </div>
</div>
<!-- End pattern: panel //-->

Secondary

Example

Secondary

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque adipisci id perspiciatis veniam magnam! Numquam incidunt placeat eos cum. Beatae perspiciatis officiis sint harum.

Code

<!-- Begin pattern: panel //-->
<div class="col-md-4">
    <div class="panel panel-secondary">
        <div class="panel-heading">
            <h3 class="panel-title">Secondary</h3>
        </div>
        <div class="panel-body">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque adipisci id perspiciatis veniam magnam! Numquam incidunt placeat eos cum. Beatae perspiciatis officiis sint harum.</p>
        </div>
    </div>
</div>
<!-- End pattern: panel //-->

Tertiary 1

Example

Tertiary 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque adipisci id perspiciatis veniam magnam! Numquam incidunt placeat eos cum. Beatae perspiciatis officiis sint harum.

Code

<!-- Begin pattern: panel //-->
<div class="col-md-4">
    <div class="panel panel-tertiary-1">
        <div class="panel-heading">
            <h3 class="panel-title">Tertiary 1</h3>
        </div>
        <div class="panel-body">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque adipisci id perspiciatis veniam magnam! Numquam incidunt placeat eos cum. Beatae perspiciatis officiis sint harum.</p>
        </div>
    </div>
</div>
<!-- End pattern: panel //-->

Tertiary 2

Example

Tertiary 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque adipisci id perspiciatis veniam magnam! Numquam incidunt placeat eos cum. Beatae perspiciatis officiis sint harum.

Code

<!-- Begin pattern: panel //-->
<div class="col-md-4">
    <div class="panel panel-tertiary-2">
        <div class="panel-heading">
            <h3 class="panel-title">Tertiary 2</h3>
        </div>
        <div class="panel-body">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque adipisci id perspiciatis veniam magnam! Numquam incidunt placeat eos cum. Beatae perspiciatis officiis sint harum.</p>
        </div>
    </div>
</div>
<!-- End pattern: panel //-->

Tertiary 3

Example

Tertiary 3

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque adipisci id perspiciatis veniam magnam! Numquam incidunt placeat eos cum. Beatae perspiciatis officiis sint harum.

Code

<!-- Begin pattern: panel //-->
<div class="col-md-4">
    <div class="panel panel-tertiary-3">
        <div class="panel-heading">
            <h3 class="panel-title">Tertiary 3</h3>
        </div>
        <div class="panel-body">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque adipisci id perspiciatis veniam magnam! Numquam incidunt placeat eos cum. Beatae perspiciatis officiis sint harum.</p>
        </div>
    </div>
</div>
<!-- End pattern: panel //-->

Panel with links

A panel must display multiple links in an unordered list with no more than six links and no fewer than three links per panel.

Example

Research portal

Code

<!-- Begin pattern: panel //-->
<div class="col-md-4">
    <div class="panel panel-secondary">
        <div class="panel-heading">
            <h3 class="panel-title">Research portal</h3>
        </div>
        <div class="panel-body">
            <ul><li><a href='#'>Researchers</a></li><li><a href='#'>Publications</a></li><li><a href='#'>Impact</a></li><li><a href='#'>Data</a></li><li><a href='#'>Funded projects</a></li></ul>
        </div>
    </div>
</div>
<!-- End pattern: panel //-->

Panel with image - deprecated

This option is no longer supported

The panel with image option is deprecated and will be removed in a future release.

A panel with an image must only be used in asides. It is recommended that panels with images include a link in the description text for further context. Images be must 750 × 500 pixels in resolution.

Example

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque adipisci id perspiciatis veniam magnam! Numquam incidunt placeat eos cum. Beatae perspiciatis officiis sint harum.

Code

<!-- Begin pattern: panel //-->
<div class="col-md-4">
    <div class="panel">
        <div class="panel-image">
            <img src="../../assets/docs/images/placeholders/750x500.png" alt="placeholder">
        </div>
        <div class="panel-body">
            <p>Lorem ipsum dolor sit amet, <a href='#'>consectetur adipisicing</a> elit. Itaque adipisci id perspiciatis veniam magnam! Numquam incidunt placeat eos cum. Beatae perspiciatis officiis sint harum.</p>
        </div>
    </div>
</div>
<!-- End pattern: panel //-->