Back to components
Service branding
Contents
Branding is changed by swapping the classes attached to each component. Available branding colours:
- Child Friendly Leeds:
serv-brand--cfl - Leeds Money Information Centre:
serv-brand--lmic - Connecting Leeds:
serv-brand--conl - Clean Air Leeds:
serv-brand--cal - Business & IP Centre Leeds:
serv-brand--bipc
Landing page
Example
HTML Snippet for landing page branding
<div class="serv-brand serv-brand--cfl serv-brand__landing">
<div class="serv-brand__container">
<img src="https://www-at.leeds.gov.uk/PublishingImages/cfl-banner.jpg" alt="" />
</div>
<div class="serv-brand__container serv-brand__container--meta">
<div class="meta">
<h1 class="heading-xlarge">Child Friendly Leeds</h1>
<p class="lead">Working together to make Leeds a child friendly city.</p>
</div>
</div>
</div>Sub page
Example
Child Friendly Leeds
HTML Snippet for sub page
<div class="serv-brand serv-brand--cfl serv-brand__border">
<div class="serv-brand__container">
<div class="serv-brand__wrapper">
<span>Child Friendly Leeds</span>
</div>
</div>
</div>Branded panel
Note: This panel styling is currently only available for Leeds MIC.
Example
Organisations that offer debt advice
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
HTML Snippet for branded panel
<div class="panel panel-border panel__brand panel__brand--lmic">
<img src="https://www.leeds.gov.uk/_catalogs/masterpage/public/leedsmic_subsite/images/logo.png" alt="Leeds Money Information Centre" />
<h2>Organisations that offer debt advice</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>