Skip to main content

ns-image

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#

ComponentVariantRatioDimensionsSizeTypePlaceholder
ns-cardsupport16:9640x360px<50kb.jpgns-card-support-640x360px
ns-editorialn/a4:3480x360px<50kb.jpgns-editorial-480x360px
ns-landmarksummit16:91440x810px<200kb.jpgns-landmark-summit-1440x810px
ns-landmarkvalley16:9800x450px<100kb.jpgns-landmark-valley-800x450px
ns-landmarkvalley4:3800x600px<100kb.jpgns-landmark-valley-800x600px
ns-lockupn/a16:9800x450px<100kb.jpgns-lockup-800x450px
ns-lockupn/a4:3800x600px<100kb.jpgns-lockup-800x600px
ns-lockupn/a1:1800x800px<100kb.jpgns-lockup-800x800px
ns-selectorn/a16:9640x360px<50kb.jpgns-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.

Usage#

View example on Storybook

Component placement#

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

Specification#

AttributePropertyTypeDefaultOptionsDescription
srcsrcstringURL to the image.
altaltstringGive a text alternative for screen readers.
ratioratiostring16 / 916 / 9, 4 / 3, 1 / 1Ratio of the image.
backgroundbackgroundbooleanfalsetrue, falseTo make it CSS background image instead of an inline image tag.
background-sizebackgroundsizestringcovercover, containTo change the CSS size for a background image.
placeholderplaceholderstringThe thumbnail placeholder image. (src) can be used to bring in the src property.
loadingloadingstringlazyeager, lazyThe loading mode of the 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.

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

Related links#