Promoted content panels
These blocks are used on homepages, campaign pages and simple landing pages. The blocks are essentially large buttons that link to content pages. They are used to draw the user’s attention to common tasks and popular content.
Default
<a href="javascript:void(0);" class="occlss-promoted-content-panel occlss-promoted-content-panel--link occlss-promoted-content-panel--aqua-deep ">
<div class="occlss-promoted-content-panel__content">
<div class="occlss-promoted-content-panel__text-line occlss-promoted-content-panel__text-line--header-small
occlss-promoted-content-panel__text-line--alert-heading"> Promoted panel </div>
<div class="occlss-promoted-content-panel__text-line occlss-promoted-content-panel__text-line--text-medium
occlss-promoted-content-panel__text-line--alert-text"> These blocks are used on homepages, campaign pages and simple landing pages to draw the user's attention to a common task or popular
<span class="occlss-icon occlss-icon--arrow-right-long-right-secondary occlss-promoted-content-panel__arrow">
content.
<svg aria-hidden="true" class="occlss-icon__container occlss-promoted-content-panel__link-icon">
<use xmlns:xlink="http://www.w3.org/1999/xlink"
xlink:href="/assets/images/occlss/occlss-sprite.svg#arrow-right-long-right-secondary"
class="icon__source icon__source--svg"></use>
</svg>
</span>
</div>
</div>
</a>
Modifier classes
Container class .occlss-promoted-content-panel mod class .occlss-promoted-content-panel--link this mode class will add underline on hover.
Container class .occlss-promoted-content-panel mod class .occlss-promoted-content-panel--aqua-deep this mode class will add the panel background colour.
Container class .occlss-promoted-content-panel__text-line mod class .occlss-promoted-content-panel__text-line--header-small this mode class will change the text line font sizes.
Container class .occlss-promoted-content-panel__text-line mod class .occlss-promoted-content-panel__text-line--alert-heading this mode class will add green line below the text line and paddings from sides.
Container class .occlss-promoted-content-panel__text-line mod class .occlss-promoted-content-panel__text-line--alert-text this mode class will add paddings from sides to the text line.
Colours
Aqua dee colour
This is the default colour for panels in the residents area of the website. For accessible colour contrast, this colour must always use white text.
<div class="occlss-promoted-content-panel occlss-promoted-content-panel--aqua-deep ">
<div class="occlss-promoted-content-panel__content">
<div class="occlss-promoted-content-panel__text-line occlss-promoted-content-panel__text-line--text-large
"> Aqua deep colour </div>
</div>
</div>
Forest green colour
This colour can be used on any homepage, campaign page or simple landing page. For accessible colour contrast, this colour must always use black text.
<div class="occlss-promoted-content-panel occlss-promoted-content-panel--forest-green ">
<div class="occlss-promoted-content-panel__content">
<div class="occlss-promoted-content-panel__text-line occlss-promoted-content-panel__text-line--text-large
"> Forest green colour </div>
</div>
</div>
Modifier classes
Container class .occlss-promoted-content-panel mod class .occlss-promoted-content-panel--forest-green this mode class will add colour to the panel.
Keppel colour
This colour can be used on any homepage, campaign page or simple landing page. For accessible colour contrast, this colour must always use black text.
<div class="occlss-promoted-content-panel occlss-promoted-content-panel--keppel ">
<div class="occlss-promoted-content-panel__content">
<div class="occlss-promoted-content-panel__text-line occlss-promoted-content-panel__text-line--text-large
"> Keppel colour </div>
</div>
</div>
Modifier classes
Container class .occlss-promoted-content-panel mod class .occlss-promoted-content-panel--keppel this mode class will add colour to the panel.
Boston blue colour
This colour can only be used for panels in the business area where it is the default. For accessible colour contrast, this colour must always use white text.
<div class="occlss-promoted-content-panel occlss-promoted-content-panel--boston-blue ">
<div class="occlss-promoted-content-panel__content">
<div class="occlss-promoted-content-panel__text-line occlss-promoted-content-panel__text-line--text-large
"> Boston blue colour </div>
</div>
</div>
Modifier classes
Container class .occlss-promoted-content-panel mod class .occlss-promoted-content-panel--boston-blue this mode class will add colour to the panel.
Selective yellow colour
This colour can only be used for panels that link to contact us pages. For accessible colour contrast, this colour must always use black text.
<div class="occlss-promoted-content-panel occlss-promoted-content-panel--selective-yellow ">
<div class="occlss-promoted-content-panel__content">
<div class="occlss-promoted-content-panel__text-line occlss-promoted-content-panel__text-line--text-large
"> Selective yellow colour </div>
</div>
</div>
Modifier classes
Container class .occlss-promoted-content-panel mod class .occlss-promoted-content-panel--selective-yellow this mode class will add colour to the panel.
Pale sky colour
This colour can be used on any homepage, campaign page or simple landing page. For accessible colour contrast, this colour must always use white text.
<div class="occlss-promoted-content-panel occlss-promoted-content-panel--pale-sky ">
<div class="occlss-promoted-content-panel__content">
<div class="occlss-promoted-content-panel__text-line occlss-promoted-content-panel__text-line--text-large
"> Pale sky colour </div>
</div>
</div>
Modifier classes
Container class .occlss-promoted-content-panel mod class .occlss-promoted-content-panel--pale-sky this mode class will add colour to the panel.
Victoria colour
This colour can only be used for panels in the council area where it is the default. For accessible colour contrast, this colour must always use white text.
<div class="occlss-promoted-content-panel occlss-promoted-content-panel--victoria ">
<div class="occlss-promoted-content-panel__content">
<div class="occlss-promoted-content-panel__text-line occlss-promoted-content-panel__text-line--text-large
"> victoria colour </div>
</div>
</div>
Modifier classes
Container class .occlss-promoted-content-panel mod class .occlss-promoted-content-panel--victoria this mode class will add colour to the panel.
Amaranth colour
This colour can only be used for panels in the council area where it is the default. For accessible colour contrast, this colour must always use white text.
<div class="occlss-promoted-content-panel occlss-promoted-content-panel--amaranth ">
<div class="occlss-promoted-content-panel__content">
<div class="occlss-promoted-content-panel__text-line occlss-promoted-content-panel__text-line--text-large
"> Amaranth colour </div>
</div>
</div>
Modifier classes
Container class .occlss-promoted-content-panel mod class .occlss-promoted-content-panel--amaranth this mode class will add colour to the panel.
Twilight colour
This colour can only be used for panels in the council area where it is the default. For accessible colour contrast, this colour must always use white text.
<div class="occlss-promoted-content-panel occlss-promoted-content-panel--twilight ">
<div class="occlss-promoted-content-panel__content">
<div class="occlss-promoted-content-panel__text-line occlss-promoted-content-panel__text-line--text-large
"> Twilight colour </div>
</div>
</div>
Modifier classes
Container class .occlss-promoted-content-panel mod class .occlss-promoted-content-panel--twilight this mode class will add colour to the panel.
Swans down colour
This colour can only be used for panels in the council area where it is the default. For accessible colour contrast, this colour must always use white text.
<div class="occlss-promoted-content-panel occlss-promoted-content-panel--swans-down ">
<div class="occlss-promoted-content-panel__content">
<div class="occlss-promoted-content-panel__text-line occlss-promoted-content-panel__text-line--text-large
"> Swans down colour </div>
</div>
</div>
Modifier classes
Container class .occlss-promoted-content-panel mod class .occlss-promoted-content-panel--swans-down this mode class will add colour to the panel.
Royal heath colour
This colour can only be used for panels in the council area where it is the default. For accessible colour contrast, this colour must always use white text.
<div class="occlss-promoted-content-panel occlss-promoted-content-panel--royal-heath ">
<div class="occlss-promoted-content-panel__content">
<div class="occlss-promoted-content-panel__text-line occlss-promoted-content-panel__text-line--text-large
"> Royal heath colour </div>
</div>
</div>
Modifier classes
Container class .occlss-promoted-content-panel mod class .occlss-promoted-content-panel--royal-heath this mode class will add colour to the panel.
Keppel dark colour
This colour can only be used for panels in the council area where it is the default. For accessible colour contrast, this colour must always use white text.
<div class="occlss-promoted-content-panel occlss-promoted-content-panel--keppel-dark ">
<div class="occlss-promoted-content-panel__content">
<div class="occlss-promoted-content-panel__text-line occlss-promoted-content-panel__text-line--text-large
"> Keppel dark colour </div>
</div>
</div>
Modifier classes
Container class .occlss-promoted-content-panel mod class .occlss-promoted-content-panel--keppel-dark this mode class will add colour to the panel.
Text line font sizes
Header giga
<div class="occlss-promoted-content-panel occlss-promoted-content-panel--aqua-deep ">
<div class="occlss-promoted-content-panel__content">
<div class="occlss-promoted-content-panel__text-line occlss-promoted-content-panel__text-line--header-giga
"> Line font size - header-giga </div>
</div>
</div>
Modifier classes
Container class .occlss-promoted-content-panel__text-line mod class .occlss-promoted-content-panel__text-line--header-giga this mode class will change the text line font sizes.
Header mega
<div class="occlss-promoted-content-panel occlss-promoted-content-panel--aqua-deep ">
<div class="occlss-promoted-content-panel__content">
<div class="occlss-promoted-content-panel__text-line occlss-promoted-content-panel__text-line--header-mega
"> Line font size - header-mega </div>
</div>
</div>
Modifier classes
Container class .occlss-promoted-content-panel__text-line mod class .occlss-promoted-content-panel__text-line--header-mega this mode class will change the text line font sizes.
Header xlarge
<div class="occlss-promoted-content-panel occlss-promoted-content-panel--aqua-deep ">
<div class="occlss-promoted-content-panel__content">
<div class="occlss-promoted-content-panel__text-line occlss-promoted-content-panel__text-line--header-xlarge
"> Line font size - header-xlarge </div>
</div>
</div>
Modifier classes
Container class .occlss-promoted-content-panel__text-line mod class .occlss-promoted-content-panel__text-line--header-xlarge this mode class will change the text line font sizes.
Header large
<div class="occlss-promoted-content-panel occlss-promoted-content-panel--aqua-deep ">
<div class="occlss-promoted-content-panel__content">
<div class="occlss-promoted-content-panel__text-line occlss-promoted-content-panel__text-line--header-large
"> Line font size - header-large </div>
</div>
</div>
Modifier classes
Container class .occlss-promoted-content-panel__text-line mod class .occlss-promoted-content-panel__text-line--header-large this mode class will change the text line font sizes.
Header small
<div class="occlss-promoted-content-panel occlss-promoted-content-panel--aqua-deep ">
<div class="occlss-promoted-content-panel__content">
<div class="occlss-promoted-content-panel__text-line occlss-promoted-content-panel__text-line--header-small
"> Line font size - header-small </div>
</div>
</div>
Modifier classes
Container class .occlss-promoted-content-panel__text-line mod class .occlss-promoted-content-panel__text-line--header-small this mode class will change the text line font sizes.
Text medium
<div class="occlss-promoted-content-panel occlss-promoted-content-panel--aqua-deep ">
<div class="occlss-promoted-content-panel__content">
<div class="occlss-promoted-content-panel__text-line occlss-promoted-content-panel__text-line--text-medium
"> Line font size - text-medium </div>
</div>
</div>
Modifier classes
Container class .occlss-promoted-content-panel__text-line mod class .occlss-promoted-content-panel__text-line--text-medium this mode class will change the text line font sizes.
Text large
<div class="occlss-promoted-content-panel occlss-promoted-content-panel--aqua-deep ">
<div class="occlss-promoted-content-panel__content">
<div class="occlss-promoted-content-panel__text-line occlss-promoted-content-panel__text-line--text-large
"> Line font size - text-large </div>
</div>
</div>
Modifier classes
Container class .occlss-promoted-content-panel__text-line mod class .occlss-promoted-content-panel__text-line--text-large this mode class will change the text line font sizes.
Using images
Image top
<a href="https://www.oxfordshire.gov.uk/residents/roads-and-transport/fixing-your-streets" class="occlss-promoted-content-panel occlss-promoted-content-panel--link occlss-promoted-content-panel--image-top occlss-promoted-content-panel--pale-sky ">
<figure class="occlss-promoted-content-panel__image-container">
<img src="https://dummyimage.com/900x400/525252/ffffff.png" alt="Man using concrete cutter" class="occlss-promoted-content-panel__image">
</figure>
<div class="occlss-promoted-content-panel__content">
<div class="occlss-promoted-content-panel__text-line occlss-promoted-content-panel__text-line--text-medium
"> Fixing your streets </div>
<div class="occlss-promoted-content-panel__text-line occlss-promoted-content-panel__text-line--text-small
"> Find out where and when we are fixing your streets
<span class="occlss-icon occlss-icon--arrow-right-long-right-secondary occlss-promoted-content-panel__arrow">
this
<svg aria-hidden="true" class="occlss-icon__container occlss-promoted-content-panel__link-icon">
<use xmlns:xlink="http://www.w3.org/1999/xlink"
xlink:href="/assets/images/occlss/occlss-sprite.svg#arrow-right-long-right-secondary"
class="icon__source icon__source--svg"></use>
</svg>
</span>
</div>
</div>
</a>
Modifier classes
Container class .occlss-promoted-content-panel mod class .occlss-promoted-content-panel--link this mode class will add underline on hover.
Container class .occlss-promoted-content-panel mod class .occlss-promoted-content-panel--image-top this mode class will keep the image container above others.
Image left
<a href="https://www.oxfordshire.gov.uk/residents/roads-and-transport/fixing-your-streets" class="occlss-promoted-content-panel occlss-promoted-content-panel--link occlss-promoted-content-panel--image-left occlss-promoted-content-panel--pale-sky ">
<figure class="occlss-promoted-content-panel__image-container">
<img src="https://dummyimage.com/400x400/525252/ffffff.png" alt="Man using concrete cutter" class="occlss-promoted-content-panel__image">
</figure>
<div class="occlss-promoted-content-panel__content">
<div class="occlss-promoted-content-panel__text-line occlss-promoted-content-panel__text-line--text-medium
"> Fixing your streets </div>
<div class="occlss-promoted-content-panel__text-line occlss-promoted-content-panel__text-line--text-small
"> Find out where and when we are fixing your streets
<span class="occlss-icon occlss-icon--arrow-right-long-right-secondary occlss-promoted-content-panel__arrow">
this
<svg aria-hidden="true" class="occlss-icon__container occlss-promoted-content-panel__link-icon">
<use xmlns:xlink="http://www.w3.org/1999/xlink"
xlink:href="/assets/images/occlss/occlss-sprite.svg#arrow-right-long-right-secondary"
class="icon__source icon__source--svg"></use>
</svg>
</span>
</div>
</div>
</a>
Modifier classes
Container class .occlss-promoted-content-panel mod class .occlss-promoted-content-panel--image-left this mode class will keep the image container to the left.
Changelog
2.4.7
- New colour added .occlss-promoted-content-panel–amaranth
- Colour class changed from aqua-dee to aqua-deep
1.0.0
- Component added