Panel components are used to organise and highlight related content in a structured way, making it easier for users to navigate and focus on key information
Panel components help organise and display related content in a clear, structured way, providing a defined space that makes information easier to digest and interact with. They are versatile, allowing for customisation to fit various layouts and purposes, while keeping the design clean and user-friendly.
When to use this component
Panel components are designed to group related content in a defined space, making it easy for users to focus on specific information. They help structure the page by organising content, such as text, forms, or notifications, into clearly separated sections. Panels can be customised to fit different designs and are ideal for enhancing usability while keeping the layout clean and organised.
Examples in GOSS products
- Related assets on all templates including article, downloads, polls and contacts
Accessibility considerations
Panel components are a great way to organise and display related content in a clear, easy-to-navigate format. They often group text, forms, or notifications, making them ideal for highlighting key information in a structured way.
Basic panel
A panel with no additional configuration options.
By default, the panel displays HTML content within the content section.
Panel with title
A panel with the heading element.
<h2 class="panel__heading">...</h2>
This allow you to style all your panel headings the same using the panel__heading class.
The element can be changed to be a heading element e.g. H2/H3 based on your structural needs.
Setting headingLevel
A panel with the heading element.
<h2 class="panel__heading">...</h2>
This allow you to style all your panel headings the same using the panel__heading class.
The element can be changed to be a heading element e.g. H2/H3 based on your structural needs.
Panel heading
Panel with link title
A panel with a link title option.
<a href="#" class="panel__link panel__link--heading">...</a>
By making the title a link, the user can provide context and clarity while improving usability and accessibility, especially for screen reader users.
This ensures the title is easily identified and actionable.
<div class="panel">
<h2 class="panel__heading">
<div class="panel__headingtext">
<a href="#" class="panel__link panel__link--heading">Panel heading with link</a>
</div>
</h2>
<div class="panel__content">
Panel content
</div>
</div><!-- This isn't a mistake, Java doesn't support non-text heading -->
<div class="panel">
<h2 class="panel__heading">
<div class="panel__headingtext">
<a href="#" class="panel__link panel__link--heading">Panel heading with link</a>
</div>
</h2>
<div class="panel__content">
Panel content
</div>
</div>Panel with links
A Panel with a list section
<ul class="panel__list">
<li class="panel__item">
<a href="#" class="panel__link">...</a>
</li>
</ul>
Adding a structured list section to a card component helps organise information in a clear, easy-to-follow format. This allows users to quickly identify key details, such as features, benefits, or steps, making the content more digestible.
Panel heading
<div class="panel">
<h2 class="panel__heading">
<div class="panel__headingtext">
Panel heading
</div>
</h2>
<div class="panel__content">
<ul class="panel__list panel__list--relfeatures">
<li class="panel__item">
<a href="#" class="panel__link">Panel link</a>
</li>
<li class="panel__item">
<a href="#" class="panel__link">Panel link</a>
</li>
<li class="panel__item">
<a href="#" class="panel__link">Panel link</a>
</li>
</ul>
</div>
</div><comp:panel panelHeading="Panel heading" headingLevel="2">
<ul class="panel__list panel__list--relfeatures">
<li class="panel__item">
<a href="#" class="panel__link">Panel link</a>
</li>
<li class="panel__item">
<a href="#" class="panel__link">Panel link</a>
</li>
<li class="panel__item">
<a href="#" class="panel__link">Panel link</a>
</li>
</ul>
</comp:panel>Related media panel
A panel for related media on a template.
panel panel--relmedia
To add the media links to the panel component. use the media link component in order to serve the same mark up for all media links.
Related media
<div class="panel panel--relmedia">
<h2 class="panel__heading">
<div class="panel__headingtext">Related media</div>
</h2>
<div class="panel__content">
<ul class="panel__list panel__list--relmedia">
<li class="panel__item panel__item--video">
<div class="media-links media-links--related">
<a href="#"
class="media-link media-link--video" target="_blank"><span
class="media-link__text">Video</span><span class="media-link__bracket">
(</span><span class="media-link__type">Video, </span><span
class="media-link__filesize">28 MB</span><span
class="media-link__bracket">)</span><span class="media-link__newwindow"> (opens new
window)</span></a>
</div>
</li>
<li class="panel__item panel__item--pdf">
<div class="media-links media-links--related">
<a href="#"
class="media-link media-link--pdf" target="_blank"><span class="media-link__text">PDF
</span><span class="media-link__bracket"> (</span><span
class="media-link__type">PDF, </span><span class="media-link__filesize">9 KB</span><span
class="media-link__bracket">)</span><span class="media-link__newwindow"> (opens new
window)</span></a>
</div>
</li>
<li class="panel__item panel__item--word">
<div class="media-links media-links--related">
<a href="/media/8/Test-Word--1/doc/aaWord1.doc?m=1454660408000"
class="media-link media-link--word" target="_blank"><span class="media-link__text">Word
</span><span class="media-link__bracket"> (</span><span
class="media-link__type">Word doc, </span><span class="media-link__filesize">25
KB</span><span class="media-link__bracket">)</span><span class="media-link__newwindow">
(opens new window)</span></a>
</div>
</li>
<li class="panel__item panel__item--zip">
<div class="media-links media-links--related">
<a href="/media/10/Test-Zip-archive-1/zip/a3Zip1.zip?m=1454660515000"
class="media-link media-link--zip" target="_blank"><span class="media-link__text">Zip
archive</span><span class="media-link__bracket"> (</span><span
class="media-link__type">ZIP, </span><span class="media-link__filesize">213 B</span><span
class="media-link__bracket">)</span><span class="media-link__newwindow"> (opens new
window)</span></a>
</div>
</li>
<li class="panel__item panel__item--skin">
<div class="media-links media-links--related">
<a href="/media/344/BF-Freight-Cruise-skin/stylesheet/rqbffreight-cruise-skin14.css?m=1608119712537"
class="media-link media-link--skin" target="_blank"><span class="media-link__text">Skin</span><span class="media-link__bracket"> (</span><span
class="media-link__type">Subsite skin, </span><span class="media-link__filesize">25
KB</span><span class="media-link__bracket">)</span><span class="media-link__newwindow">
(opens new window)</span></a>
</div>
</li>
<li class="panel__item panel__item--excel">
<div class="media-links media-links--related">
<a href="/media/474/Excel-/excel/nsExcel_.xlsx?m=1615279572637"
class="media-link media-link--excel" target="_blank"><span class="media-link__text">Excel
</span><span class="media-link__bracket"> (</span><span
class="media-link__type">Excel doc, </span><span class="media-link__filesize">8
KB</span><span class="media-link__bracket">)</span><span class="media-link__newwindow">
(opens new window)</span></a>
</div>
</li>
<li class="panel__item panel__item--javascript">
<div class="media-links media-links--related">
<a href="/media/771/frontendDebuggingTools.js/javascript/n7frontendDebuggingTools.js?m=1636634801677"
class="media-link media-link--javascript" target="_blank"><span
class="media-link__text">JavaScript</span><span class="media-link__bracket">
(</span><span class="media-link__type">Javascript, </span><span
class="media-link__filesize">1 KB</span><span class="media-link__bracket">)</span><span
class="media-link__newwindow"> (opens new window)</span></a>
</div>
</li>
</ul>
</div>
</div><comp:panel panelHeading="Related media" headingLevel="2" modifiers="relmedia">
<ul class="panel__list panel__list--relmedia">
<c:forEach var="relMedia" items="#{mediaItems}">
<li class="panel__item panel__item--#{relMedia.type}">
<comp:mediaLinks mediaItem="#{relMedia}" modifier="related" />
</li>
</c:forEach>
</ul>
</comp:panel>
