NewsKit Mobile Logo

Image

Overview

Simple component for adding images. The image component provides a <figure> and an <img> element inside it to place the image in the dom.

Props

srcstring
Image file path that is used directly in the 'src' attribute of the internal 'img' element.
altstring
Image description that is used directly in the 'alt' attribute of the internal 'img' element.
loadingAspectRatiostring
This is a string interpolation of the aspect ratio of the loading container of the image. This is also used to determine the height or width of the image if only one dimension is provided.
hideLoadingIconboolean = false
Hide the loading icon whilst the image is loading.
captionTextstring
If provided, supplies the caption component. captionText is the text of the caption.
creditTextstring
If provided, supplies the credit text of the caption component.
overridesobject
If provided, overrides the respective presets for the component and provided elements.
stylePresetMQ<string>
If provided, this overrides the style preset applied to the image.
widthstring = 100%
Used in combination with `height` to calculate the aspect ratio for the image. Generally supply the width px value if known, if not supply horizontal aspect ratio. Both width and aspectRatio should be supplied in a consistent manner.
heightstring = auto
Used in combination with `width` to calculate the aspect ratio for the image. Generally supply the height px value if known, if not supply vertical aspect ratio. Both width and aspectRatio should be supplied in a consistent manner.
maxWidthstring
This property sets the maximum width of the image. It prevents the used value of the width property from becoming larger than the value specified by maxWidth.
maxHeightstring
This property sets the maximum height of the image. It prevents the used value of the height property from becoming larger than the value specified for maxHeight.
captionCaptionOverrides
If provided, this overrides the styling of the caption component.
Refer to the defaults below for the object structure:
{
  stylePreset: "imageSharp",
  caption: {
    typographyPreset: "editorialCaption010",
    stylePreset: "inkBase",
    spaceStack: "space040",
    spaceInset: {
      xs: "spaceInset040",
      md: "spaceInset050"
    },
    credit: {
      typographyPreset: "utilityMeta010",
      stylePreset: "uppercaseInkSubtle"
    }
  }
}

Notes

The aspect width/height is only used on loading state.

Playground

Example

This is the caption text within the caption of the image component

This is the credit text within the caption of the image component

Props
Hide loading icon
Image Style Preset
Caption Style Preset
Caption Typography Preset
Caption SpaceStack
Caption Inset
Credit Style Preset
Credit Typography Preset
import React from 'react';
import { Image } from 'newskit';

export default () => (
  <Image
    src="/static/placeholder-3x2.png"
    alt="Example"
    width="300"
    maxWidth="300"
    height="200"
    maxHeight="200"
    loadingAspectRatio="3:2"
    captionText="This is the caption text within the caption of the image component"
    creditText="This is the credit text within the caption of the image component"
    overrides={{
      stylePreset: 'imageSharp',
      caption: { credit: {} }
    }}
  />
);

For more information on overriding component defaults, see the docs here.

Styling

The image component is block level element and it wraps its boundaries around the internal img element and the dimenstions of the image file provided. Change or limit the width of the component by styling the returned wrapper.

Placeholder icon can be overridden in the theme with a different icon if needed.

Accessibility

Provide an alternative text description for the image via its alt prop. This will allow screen readers and other text based browsers to understand the image.

Colour

Text and background colours must have a 3:1 minimum contrast ratio. Hover states should have clear contrast change or should include a non colour designator. Placeholder icon colour is taken from inkNonEssential token Placeholder background colour is taken from skeleton010 token