Images

Icons

• if icons are needed ensure they are clear, simple and accompanied by relevant text
• don’t hide functionality under icons

Use font awesome for all icons.

Legal text

Use bold text with an exclamation icon if there are legal consequences - for example, a fine or prison sentence.

<div class="notice">
    <i class="fa fa-exclamation-triangle" aria-hidden="true">
        <span class="sr-only">Warning</span>
    </i>
    <strong class="bold-small">You must complete and return this form within 14 days. If you don’t, or if you provide false information, you could be fined and you may end up with a criminal record.</strong>
</div>

Example

A full width image

Mauris tortor eros, vehicula ut turpis quis, feugiat ullamcorper arcu. Aenean venenatis sem quis purus rutrum, vel blandit libero ultricies. Vivamus facilisis eget velit a consectetur.

Image aligned to the right

Donec nulla diam, dapibus vitae consectetur at, suscipit ac est.

Image aligned to the left

If you already pay by Direct Debit and want to spread your payments email the Council Tax team.

HTML Snippet for images within body content

<div class="text">

    <h2 class="heading-medium top">A full width image</h2>
    <img class="img-content" src="/public/images/placeholder-image-16-9-picture.svg" alt="" />
    <p>Mauris tortor eros, vehicula ut turpis quis, feugiat ullamcorper arcu. Aenean venenatis sem quis purus rutrum, vel blandit libero ultricies. Vivamus facilisis eget velit a consectetur.</p>

    <h2 class="heading-medium">Image aligned to the right</h2>
    <img class="img-content img-right" src="/public/images/placeholder-image-16-9-picture.svg" alt="" />
    <p>Donec nulla diam, dapibus vitae consectetur at, suscipit ac est. </p>

    <h2 class="heading-medium">Image aligned to the left</h2>
    <img class="img-content img-left" src="/public/images/placeholder-image-16-9-picture.svg" alt="" />
    <p>If you already pay by Direct Debit and want to spread your payments email the Council Tax team.</p>

</div>