Organisations that offer debt advice
- Citizens Advice External link provides free, independent and confidential advice on debt and money problems
- Debt Advice Foundation External link offer free, confidential support and advice about debt
Back to components
Panel
Use a panel to highlight content.
Contents
Panel
Example
Panel header
This is the body copy within a panel. This is a link within the panel.
HTML Snippet for panel
<div class="panel">
<h3>Panel header</h3>
<p>This is the body copy within a panel. This is a <a href="#">link</a> within the panel.</p>
</div>Panel alert
Example
Panel header
This is the body copy within a panel. This is a link within the panel.
HTML Snippet for panel
<div class="panel--alert">
<h3>Panel header</h3>
<p>This is the body copy within a panel. This is a <a href="#">link</a> within the panel.</p>
</div>Panel border
Example
HTML Snippet for panel border
<div class="panel panel-border">
<h2>Organisations that offer debt advice</h2>
<ul class="list list-bullet">
<li><a href="#" rel="external">Citizens Advice <span class="sr-only">External link</span></a> provides free, independent and confidential advice on debt and money problems</li>
<li><a href="#" rel="external">Debt Advice Foundation <span class="sr-only">External link</span></a> offer free, confidential support and advice about debt</li>
</ul>
</div>Panel border alert
Example
Organisations that offer debt advice
- Citizens Advice External link provides free, independent and confidential advice on debt and money problems
- Debt Advice Foundation External link offer free, confidential support and advice about debt
HTML Snippet for panel border alert
<div class="panel panel-border panel-border--alert">
<h2>Organisations that offer debt advice</h2>
<ul class="list list-bullet">
<li><a href="#" rel="external">Citizens Advice <span class="sr-only">External link</span></a> provides free, independent and confidential advice on debt and money problems</li>
<li><a href="#" rel="external">Debt Advice Foundation <span class="sr-only">External link</span></a> offer free, confidential support and advice about debt</li>
</ul>
</div>Panel with an image
Example
HTML Snippet for panel
<div class="panel img">
<div class="img-container right col-md-6" style="background-image: url('/public/images/placeholder-image-16-9-picture.svg');">
</div>
<div class="col-md-6 content">
<h2>Panel with an image</h2>
<p>This is the body copy for a panel with an image.</p>
<a href="#">Panel link</a>
</div>
<div class="clearfix"></div>
</div>
<div class="panel img">
<div class="img-container col-md-6" style="background-image: url('/public/images/placeholder-image-16-9-picture.svg');">
</div>
<div class="col-md-6 col-md-offset-6 content">
<h2>Image to the left</h2>
<p>This is the body copy for a panel with an image.</p>
<a href="#">Panel link</a>
</div>
<div class="clearfix"></div>
</div>Panel blockquote
Example
There is no such thing as a typical foster carer - everybody has something to bring in terms of experience and knowledge.
HTML Snippet for panel
<div class="panel">
<blockquote>
There is no such thing as a typical foster carer - everybody has something to bring in terms of experience and knowledge.
<footer>Larry David</footer>
</blockquote>
<div class="clearfix"></div>
</div>Panel blockquote with an image
Example
There is no such thing as a typical foster carer - everybody has something to bring in terms of experience and knowledge.
HTML Snippet for panel
<div class="panel img">
<div class="img-container right col-md-6" style="background-image: url('/public/images/placeholder-image-16-9-picture.svg');">
</div>
<div class="col-md-6 content">
<blockquote>
There is no such thing as a typical foster carer - everybody has something to bring in terms of experience and knowledge.
</blockquote>
</div>
<div class="clearfix"></div>
</div>Panel event
Example
Fostering children with complex needs / disabilities
Free on-site parking
Location Village Hotel North, 186 Otley Rd, Headingley, Leeds LS16 5PR Get directions. External link.
Time 6pm to 8:30pm
Date Wednesday 6th December 2017
HTML Snippet for panel
<div class="panel img panel-event">
<div class="img-container col-sm-6 col-md-3" style="background-image: url('/public/images/placeholder-image-16-9-picture.svg');">
</div>
<div class="col-sm-6 col-sm-offset-6 col-md-offset-3 col-md-3 panel-event-date">
<div class="panel-event-date-wrapper">
<p aria-hidden="true" class="panel-event-date-details">
<span>WED</span>
<span class="big-number">6</span>
<span>DEC 2017</span>
</p>
</div>
</div>
<div class="col-sm-12 col-md-6 col-md-offset-6 content panel-event-content">
<h3 class="panel-event-title">Fostering children with complex needs / disabilities</h3>
<p class="panel-event-description">Free on-site parking</p>
<div class="panel-event-info">
<p class="panel-event-info-location"><strong>Location</strong> <a href="https://www.google.co.uk/maps/place/Village+Hotel+Leeds+North/@53.834195,-1.589756,15z/data=!4m5!3m4!1s0x0:0xf7d7911c75845ff6!8m2!3d53.834195!4d-1.589756">Village Hotel North, 186 Otley Rd, Headingley, Leeds LS16 5PR <span class="sr-only">Get directions. External link.</span></a></p>
<p class="panel-event-info-time"><strong>Time</strong> 6pm to 8:30pm</p>
<p class="panel-event-info-date"><strong>Date</strong> Wednesday 6th December 2017</p>
</div>
</div>
<div class="clearfix"></div>
</div>