Panel
A panel is a container that lives within a column and expands to fill the available space. A panel contains header, body and footer sections.
The default styling applies padding of 1 rem and a 1px border. This can be overriden with a bare version.
The icons on the iconography page also use panels.
Example - default styling
Panel header
A panel is a container that lives within a column and expands to fill the available space.
Code example
<div class="col-xs col-xs-12 col-md-6 col-lg-6">
<div class="c-panel">
<p class="c-panel__header">Panel header</p>
<p class="c-panel__content">A panel is a container that lives within a column and expands to fill the available space.</p>
<p class="c-panel__footer">Panel footer</p>
</div>
</div>Example - bare
Code example
<div class="col-xs col-xs-12 col-md-6 col-lg-6">
<div class="c-panel--bare">
<p class="c-panel__header">Panel header</p>
<p class="c-panel__content">This panel has no styling</p>
<p class="c-panel__footer">Panel footer</p>
</div>
</div>Example - panel for a file link and description
Use a panel and icons for file descriptions
Code example
<div class="js-panel c-panel c-panel--link--border u-pl1 u-pb05 u-pt05 u-b--bottom">
<div class="c-icon c-icon--medium c-icon--left c-icon__file c-icon__file--pdf-icon u-pt1">
<div class=" u-ml1-5">
<p class="u-mb1">
<a class="no-icon" href="#" target="_blank">Functional Skills – Levels 1 and 2 (138.6 KB)
</p>
</div>
</div>
</div>Example - two panel group for contact details
Connect with us
Code example
<div class="row row-inner c-panel-group u-mb2">
<div class="c-panel-group__item col-xs col-xs-12 col-md-12 col-lg-6 col-xlg-6 last-sm last-md nopadding-xs nopadding-left-md nopadding-left-lg nopadding-left-xlg padding-half-xlg padding-half-lg">
<div class="c-panel">
<div class="c-panel__header u-pt0 u-mb0">
<h2 id="social"><span class="c-icon c-icon--left c-icon--large c-icon__twitter--blue">Follow us on Twitter</span></h2>
</div>
<div class="c-panel__content">
<a class="twitter-timeline" data-chrome="nofooter noheader noborders" data-link-color="#2f71ac" data-width="450" data-height="500" data-tweet-limit="1" href="https://twitter.com/AQA?ref_src=twsrc%5Etfw">Tweets by AQA</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
</div>
</div>
<div class="c-panel-group__item col-xs col-xs-12 col-md-12 col-lg-6 col-xlg-6 nopadding-xs nopadding-right-md padding-half-md padding-half-xlg padding-half-lg ">
<div class="c-panel">
<div class="c-panel__header u-pt0 u-mb0 u-pl0 ">
<h2><span class="c-icon c-icon--left c-icon--large c-icon__phone--purple">Contact our team</span>
</h2>
</div>
<div class="c-panel__content u-pl1-5 u-pt0">
8am–5pm Monday to Friday<br><br>
Tel: 0161 957 3980<br><br>
Email: <a href="#" class="color-brand-secondary">projects@aqa.org.uk</a>
<br><br>
</div>
</div>
</div>
</div>Example - group with icon svg images
Choose a subject of interest
Focus on a topic that is interesting and may not be available through other qualifications.
Develop their study skills
Study and research independently whilst developing project management and learning skills.
Code example
<div class="c-panel__content col-xs col-xs-12 col-md-6 col-lg-3 col-xlg-3 u-sm-p0 >
<p class="c-icon c-icon--large c-icon--left c-icon__smiley--purple u-p2 hide-mobile u-mb0"></p>
<h2 class="u-sh3 hide-mobile">Choose a subject of interest</h2>
<h2 class="u-sh5 mobile-only">
<span class="c-icon c-icon--medium c-icon--left c-icon__smiley--purple mobile-only" style="background-position:center left 0.25rem;">Choose a subject of interest</span>
</h2>
<p>Focus on a topic that is interesting and may not be available through other qualifications.</p>
</div>Example - Single marketing banner panel with call to action and image
Code example
<div class="c-panel c-panel--bare u-mb1-5 bg-grey-lightest " style="margin-top: .4rem">
<div class="c-panel__content c-panel__content--media">
<div class="row row-inner middle-xs u-m0 u-p0">
<div class="col-xs col-xs-12 col-md-6 col-lg-12 col-xlg-12 u-m0 u-p1-5 u-pb2">
<h3 class="u-mt0 u-mb1-5">New Head of Religious Studies?</h3>
<p>Set up for success in your new role</p>
<a href="#" class="c-btn c-btn--full c-icon c-icon--right c-icon__right-arrow--white u-m0 " style="background-color:#df2056">Find out more</a>
</div>
<div class="col-xs col-xs-12 col-md-6 col-lg-12 col-xlg-12 u-m0 u-p0">
<img class="full-width c-panel__content--media-image u-ef-brightness-0-98"
src="HODS.png"
alt="banner image alt">
</div>
</div>
</div>
</div>
Simple two panel group with svg icons on headers
This example uses two standard panels in a panel group to give contact and sign up details. The headers use the svg icons as described in the icon page.
Connect with us
Contact our team
Subscribe for updates
Receive the latest news, resources and support for your subject area from AQA.
Code example
<h2>Connect with us</h2>
<div class="row row-inner c-panel-group u-mt1-5">
<div class="c-panel-group__item col-xs col-xs-12 col-md-6 col-lg-4 col-xlg-4 nopadding-xs nopadding-left-md nopadding-left-lg nopadding-left-xlg padding-half-xlg padding-half-lg padding-half-md">
<div class="c-panel">
<div class="c-panel__header u-pt0 u-mb0 u-pl0 ">
<h3 class="c-icon c-icon--left c-icon--large c-icon__phone--purple u-ml0-5">Contact our team</h3>
</div>
<div class="c-panel__content u-pl1-5 u-pt0">
<p>8am–5pm Monday to Friday</p>
<p>Tel: +44 123 123456
</p>
<p style="line-height: 2rem">Email: <a href="mailto:contact">ContactEmail</a></p>
</div>
</div>
</div>
<div class="c-panel-group__item col-xs col-xs-12 col-md-6 col-lg-4 col-xlg-4 nopadding-xs padding-half-md padding-half-xlg padding-half-lg">
<div class="c-panel">
<div class="c-panel__header u-pt0 u-mb0 u-pl0">
<h3 class="c-icon c-icon--left c-icon--large c-icon__email--purple u-ml0-5">Subscribe for updates</h3>
</div>
<div class="c-panel__content u-pt0 u-pl1-5">
<p>Receive the latest news, resources and support for your subject area from AQA.</p>
<p><a href="#"class="c-icon c-icon--right c-icon__right-arrow--blue">Sign up now for free</a></p>
</div>
</div>
</div>
</div>
Example - panel group with images and rounded corners
This panel group has images and rounded edges on images and the panels. This uses background colours from the brand identity. The panels resize across the viewports.
Online events
We’ve created a free, on-demand e-Learning module to explain the changes in more detail.
<div class="row row-inner c-panel-group">
<div class="c-panel-group__item col-xs col-xs-12 col-md-6 col-lg-6 col-xlg-6 padding-half-xs padding-half-xlg padding-half-lg nopadding-left-xlg nopadding-left-lg nopadding-left-md padding-half-md">
<div class="c-panel js-panel">
<div class="c-panel__content c-panel__content--media">
<img src="panel-example.jpg" alt="online events image" class="u-b--radius-bottom--right c-panel__content--media-image">
</div>
<div class="c-panel__content u-pb0 u-pt0">
<h3 class="u-xlg-mt0 u-lg-mt0">Online events</h3>
<p>We’ve created a free, on-demand e-Learning module to explain the changes in more detail.</p>
</div>
<div class="c-panel__footer u-pt0">
<a href="#" class="c-btn c-btn--primary c-btn-large">Sign up now</a>
</div>
</div>
</div>
<div class="c-panel-group__item col-xs col-xs-12 col-md-6 col-lg-6 col-xlg-6 padding-half-xs padding-half-xlg padding-half-lg nopadding-right-xlg nopadding-right-lg nopadding-right-md padding-half-md">
<div class="c-panel class bg-brand-primary color-white u-b__desktop--radius-bottom--right u-b__tablet--radius-bottom--right u-pt0">
<div class="c-panel__content c-panel__content--bare row">
<div class="col-xs end-xs col-xs-2 nopadding-right-xs col-sm-1">
</div>
<div class="col-xs start-xs col-xs-8 u-mt2-5 nopadding-left-xs u-t-center col-sm-9">
<h3 class="color-white u-mb1-5" style="color:#FCFF00">Let us know if you’re interested</h3>
<div class="u-t-center">
<p class="u-t-center">We’d love to hear your thoughts.</p> <p>We’re giving away free books and poetry anthologies to the first 500 teachers who register their interest with us.</p>
<a href="#" class="c-btn c-btn--primary c-btn--large c-btn--full">Register your interest</a>
</div>
</div>
</div>
</div>
</div>
</div>
Example - group with images
Apply for roles
Examiner or moderator
Apply to mark exam papers or moderate non-exam assessment within a range of different subject areas.
Senior Examiner
Join our team and help to support production and lead delivery of GCSEs and A-level specifications.
Permanent and fixed-term
Build your career within one of our highly skilled teams and realise your potential.
Code example
<div class="c-panel-group__item col-xs col-xs-12 col-md-6 col-lg-4 col-xlg-3 nopadding-sm padding-half-xs padding-half-xlg padding-half-lg ">
<div class="c-panel c-panel--bare js-panel">
<div class="c-panel__content--media c-panel__content--media-link">
<img src="AQA_Seasonal-and-Temporary_Vacancies.jpg" class="hide-mobile c-panel__content--media-image" alt="AQA staff">
<h2><a href="#" class="js-panel-link"> Permanent and fixed-term </a></h2>
<p>Build your career within one of our highly skilled teams and realise your potential.</p>
</div>
</div>
<div class="mobile-only u-b--top"></div>
</div>Example - group with video
Code example
<div class="row c-panel-group">
<div class="c-panel-group__item col-xs col-xs-12 col-md-12 col-lg-8 col-xlg-8">
<div class="c-panel c-panel--bare">
<div class="c-panel__content c-panel__content--media">
<div class="o-media o-media__video">
<iframe src="https://www.youtube.com/embed/y6aKO_1iV0M" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
<div class="c-panel-group__item col-xs col-xs-12 col-md-12 col-lg-4 col-xlg-4 nopadding-left-lg nopadding-left-xlg">
<div class="c-panel">
<div class="c-panel__header"><h3 class="u-mt0 u-mb0">Panel header</h3></div>
<div class="c-panel__content">A panel is a container that lives within a column and expands to
fill the available space.</div>
<div class="c-panel__footer"><a href="#" class="c-btn c-btn--secondary c-btn--cta">Secondary</a></div>
</div>
</div>
</div>Example - group with link to youTube
Daniel Flack, Assistant Head Teacher
Speaks to us about how accessible our papers are, and how they can help teachers to broaden their students knowledge.
Code example
<div class="c-panel">
<div class="c-panel__content c-panel__content--media">
<div class=""><img class="full-width u-float-l" src="video.jpg" alt="Teacher testimonial">
<a href="https://www.youtube.com/embed/4FypksZwq1U?rel=0" class="c-btn c-btn--primary c-btn--tight c-btn--sq-large u-float-l u-mt3n c-icon c-icon--medium c-icon__play--white js-yt-video no-icon" target="_blank">Watch now</a>
</div>
<div class="u-p1 u-clear-l">
<h3 class="color-brand-secondary u-mt0"><a class="c-icon c-icon--right c-icon--large c-icon__right-arrow--blue js-yt-video no-icon" href="https://www.youtube.com/embed/" target="_blank">Daniel Flack, Assistant Head Teacher</a></h3>
<p>Speaks to us about how accessible our papers are, and how they can help teachers to broaden their students knowledge.</p>
</div>
</div>Example - panel with avatar
Code example
<div class="c-panel">
<div class="c-panel__content row">
<div class="col-xs col-xs-3 nopadding-sm"><img src="Helen-Arman.jpg" alt="#" class="" style="border-radius:50%"></div>
<div class="col-xs col-xs-9"><p><strong>Person</strong>
<br>
Region: South West</p>
<p>Email: <a href="#">Email</a></p>
<p>Tel: <a href="#">phone</a></p>
<p>8am–4pm</p>
</div>
</div>
</div>
Example of panel for a filtered search
This panel uses form items and accordion components
<div class="col-xs bg-grey-lightest js-response-facets col-xs-12 col-md-4 col-lg-3 col-xlg-3">
<div class="row u-mb1 u-mt1-5">
<div class="col-xs">
<form class="c-searchbox js-search-facet-form" action="?" method="GET" role="search" aria-label="search resources">
<input name="query" id="query-resource" required="" placeholder="Search resources" title="Search resources" type="search" value="" accesskey="q" class="c-searchbox__field js-search-resource col-xs col-xs-12"><button type="submit" class="js-searchbox__submit c-searchbox__submit" title="Search resources" aria-labelledby="js-search-facet-label"></button>
</form>
</div>
</div>
<div class="panel-group flb-panel" id="search-facets" role="tablist">
<dl class="c-accordion">
<div class="panel panel-default">
<dt class="panel-heading"><a class="c-accordion__title js-accordion-trigger c-accordion__title__btn is-expanded" href="#resourcetype" aria-expanded="true" aria-controls="resourcetype">
Resource type
</a>
</dt>
<dd class="c-accordion__item is-expanded bg-color-white" aria-hidden="false">
<fieldset class="c-sidebar__fieldset section first" id="resourcetype">
<legend class="sr-only">"resourcetype"</legend>
<div class="panel-body list-group panel-collapse collapse in" id="facet-1">
<ul class="o-list-bare u-mb0">
<li><a class="c-form__label-checkbox" href="#" title="Refine by 'Resource type: Community links'">
<span class="c-form__label-checkbox-grey-outline categoryName "><span></span></span>
Community links
<span class="js-facet-count"> (22)</span>
</a>
</li>
<li><a class="c-form__label-checkbox " href="#" title="Refine by 'Resource type: Teaching guides'">
<span class="c-form__label-checkbox-grey-outline categoryName "><span></span></span>
Teaching guides
<span class="js-facet-count"> (6)</span>
</a>
</li>
<li><a class="c-form__label-checkbox " href="#" title="Refine by 'Resource type: Teaching slides'">
<span class="c-form__label-checkbox-grey-outline categoryName "><span></span></span>
Teaching slides
<span class="js-facet-count"> (1)</span>
</a>
</li>
</ul>
</div>
</fieldset>
</dd>
</div>
</dl>
</div>
</div>
</div>