Skip to main content



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#

ns-cardsupport16:9640x360px< 50kbjpegns-card-support-640x360px
ns-editorialn/a4:3480x360px< 50kbjpegns-editorial-480x360px
ns-landmarksummit16:91440x810px< 200kbjpegns-landmark-summit-1440x810px
ns-landmarkvalley4:3720x540px< 100kbjpegns-landmark-valley-720x540px
ns-lockuplockbox4:3720x540px< 100kbjpegns-lockup-lockbox-720x540px
ns-lockuplockbox1:1720x720px< 100kbjpegns-lockup-lockbox-720x720px
ns-lockuplockjaw4:3720x540px< 100kbjpegns-lockup-lockjaw-720x540px
ns-lockuplocknut1:1720x720px< 100kbjpegns-lockup-locknut-720x720px
ns-selectorn/a16:9640x360px< 50kbjpegns-selector-640x360px

Best practice#

๐Ÿ’š Do's๐Ÿ’” Dont's
Resize your image see optimise your imageUse images as the primary content
Use the correct image format png/jpgPut text inside the image
Use brand approved imagesUse 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.


View example on Storybook

Component placement#

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


srcstringURL to the image.
altstringGive a text alternative for screen readers.
ratiostring16x916x9, 4x3, 1x1Ratio of the image.
backgroundbooleanfalsetrue, falseTo make it CSS background image instead of an inline image tag.
backgroundSizestringcovercover, containTo change the CSS size for a background image.

Specification notes#


  • The URL should be from the CMS.


  • 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".


  • This is only for decorative images


  • 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.

๐Ÿ’ฉ ๐ŸŽ‰ ๐Ÿฆ„ If you have any questions, contact us on Microsoft Teams in the Nucleus Design System channels.

Related links#