ns-image

Atom | Image component.

Introduction

An image allows British Gas to share visual content.

British Gas has a variety of images to enhance content on the website and helps sell a story. This component allows having images on the website, while making sure that the page loads quickly (lazy loading) and follows the right ratios.

Image guidance

Component

Variant

Ratio

Dimensions

Size

Type

Placeholder

ns-card

support

16:9

640x360px

< 50kb

jpeg

ns-card-support-640x360px

ns-editorial

n/a

4:3

480x360px

< 50kb

jpeg

ns-editorial-480x360px

ns-landmark

summit

16:9

1440x810px

< 200kb

jpeg

ns-landmark_summit_1440x810px

ns-lockup

lockbox

4:3

720x540px

< 100kb

jpeg

ns-lockup-lockbox-720x540px

ns-lockup

lockbox

1:1

720x720px

< 100kb

jpeg

ns-lockup-lockbox-720x720px

ns-lockup

lockjaw

4:3

720x540px

< 100kb

jpeg

ns-lockup-lockjaw-720x540px

ns-lockup

locknut

1:1

720x720px

< 100kb

jpeg

ns-lockup-locknut-720x720px

ns-selector

n/a

16:9

640x360px

< 50kb

jpeg

ns-selector-640x360px

Best practice

💚 Do's

💔 Dont's

Resize your image see optimise your image

Use images as the primary content

Use the correct image format png/jpg

Put text inside the image

Use brand approved images

Use a white background in images

Think about the image responsive behaviour

Considerations of best practices

  • Reduce images to the smallest size that does not degrade the image too much where it becomes distracting to the customer.

  • The components that hold images will take care of the rounded corners and any masking or overlaying of illustrations. Read about the component you wish to use with the image.

  • Always use this component to add images to the website.

Usage

To see examples visit Storybook.

<ns-image ratio="16x9" src="https://www.britishgas.co.uk/aem6/content/dam/britishgas/images/jumbotron/home-services/20-Home-Services-wilbur.jpg"></ns-image>

Component relationship

Relationship

Does it live in a panel?

❌ No

Does it live inside other components?

✅ Yes - ns-card ns-landmark ns-lockup

What layout classes can be used?

None

Specification

Attribute

Type

Default

Options

Description

src

string

URL to the image.

alt

string

Give a text alternative for screen readers.

ratio

string

16x9

16x9, 4x3, 1x1

Ratio of the image.

background

boolean

false

true, false

To make it CSS background image instead of an inline image tag.

backgroundSize

string

cover

cover, contain

To change the CSS size for a background image.

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 wha tthe image shows.

  • Don't add text about the media type, such as "an image".

Background

  • This is only for decorative images

Feedback

  • Do you have insights or concerns to share? You can raise an issue via Github bugs.

  • See all the issues already raised via Github issues.

💩 🎉 🦄 You can also contact the team on Slack on the #product-nucleus channel!

Related links