Image

Overview

Component that can be used to display images in a consistent and structured way.

British Gas has a variety of images to enhance content on the website and help sell a story. This component enables image use on the website at the correct ratios while ensuring the page loads quickly (utilising lazy loading).

Examples

Configure

Guidance

Implementation

Placement

The ns-image component can be used in the following components:

Specification

Attributes

src

Property: src
Description: The URL of the image.
Type: string

background

Property: background
Description: Whether the image should be a background image.
Type: boolean
Default: false

background-size

Property: backgroundSize
Description: The background size of the image.
Type: string
Default: cover

alt

Property: alt
Description: The alt text of the image.
Type: string
Default

ratio

Property: ratio
Description: The ratio of the image.
Type: string
Options: 16 / 9 4 / 3 1 / 1
Default

placeholder

Property: placeholder
Description: The placeholder of the image. (src) can be used to pace src into the placeholder.
Type: string
Default

loading

Property: loading
Description: The loading strategy of the image.
Type: string
Options: eager lazy
Default: lazy

type

Property: type
Type: string
Default: standard

Events

Name	Description
`image-loaded`	Dispatched when the image is loaded.
`image-failed`	Dispatched when the image failed to load.

Specification notes

Src

The URL should be from the CMS.

Alt

If the image is just for decoration then set the alt to an empty string.
If the image is required to understand what is going on, use the alt to add a description of what the image shows.
Don’t add text about the media type, such as “an image”.

Background

This is only for decorative images.

Last updated: Mar 8, 2024