Panel grid

The panel grid pattern arranges panel items in a column grid.

Rules for the panel grid

  • Panels must be arranged equally into two or three columns.
  • Panel elements must never appear outside of a grid.
  • Any combination of colours can be used for panel headings.
  • Panel headings can be linked to other webpages.

Options available

Two columns option with paragraph text

Two column layout example displaying panels with paragraph text and showing all the colours available.

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.

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.

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.

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.

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-grid //-->
<div class="panel-grid">
<!-- Begin pattern: panel //-->
<div class="col-md-6">
    <div class="panel panel-primary">
        <div class="panel-heading">
            <h3 class="panel-title">Primary</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 //-->
<!-- Begin pattern: panel //-->
<div class="col-md-6">
    <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 //-->
<!-- Begin pattern: panel //-->
<div class="col-md-6">
    <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 //-->
<!-- Begin pattern: panel //-->
<div class="col-md-6">
    <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 //-->
<!-- Begin pattern: panel //-->
<div class="col-md-6">
    <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 //-->
</div><!-- End pattern: panel-grid //-->

This example has the panel headings linked, with each panel containing a list of links.

Example

Research portal

Research environment

Research support

Code 
<!-- Begin pattern: panel-grid //-->
<div class="panel-grid">
<!-- Begin pattern: panel //-->
<div class="col-md-4">
    <div class="panel panel-secondary">
        <div class="panel-heading">
            <h3 class="panel-title"><a href="#">Research portal</a></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 //-->
<!-- Begin pattern: panel //-->
<div class="col-md-4">
    <div class="panel panel-tertiary-1">
        <div class="panel-heading">
            <h3 class="panel-title"><a href="#">Research environment</a></h3>
        </div>
        <div class="panel-body">
            <ul><li><a href='#'>Committees and forums</a></li><li><a href='#'>Equality and diversity</a></li><li><a href='#'>Schools, centres and institutes</a></li><li><a href='#'>Funding</a></li><li><a href='#'>Collaborations</a></li></ul>
        </div>
    </div>
</div>
<!-- End pattern: panel //-->
<!-- Begin pattern: panel //-->
<div class="col-md-4">
    <div class="panel panel-tertiary-2">
        <div class="panel-heading">
            <h3 class="panel-title"><a href="#">Research support</a></h3>
        </div>
        <div class="panel-body">
            <ul><li><a href='#'>Knowledge transfer centre</a></li><li><a href='#'>Public engagement</a></li><li><a href='#'>RBDC</a></li><li><a href='#'>Library</a></li><li><a href='#'>Contact us</a></li></ul>
        </div>
    </div>
</div>
<!-- End pattern: panel //-->
</div><!-- End pattern: panel-grid //-->

This example is of a two column layout with each panel containing a list of links.

Example

Research portal

Research environment

Code 
<!-- Begin pattern: panel-grid //-->
<div class="panel-grid">
<!-- Begin pattern: panel //-->
<div class="col-md-6">
    <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 //-->
<!-- Begin pattern: panel //-->
<div class="col-md-6">
    <div class="panel panel-tertiary-1">
        <div class="panel-heading">
            <h3 class="panel-title">Research environment</h3>
        </div>
        <div class="panel-body">
            <ul><li><a href='#'>Committees and forums</a></li><li><a href='#'>Equality and diversity</a></li><li><a href='#'>Schools, centres and institutes</a></li><li><a href='#'>Funding</a></li><li><a href='#'>Collaborations</a></li></ul>
        </div>
    </div>
</div>
<!-- End pattern: panel //-->
</div><!-- End pattern: panel-grid //-->