Skip to content

Image Banners

The below image examples show a range of use cases for the image banner component. Note that the image each component is outputting on desktop may be different to the one being output on mobile devices.

Moreover, spacing, width, alignment, and border roundedness may be adjusted on a per component basis. In the case of border roundedness; the values may be adjusted individually across all 4 corners, for both desktop, and mobile.

i.e. one may set the following values:

  • Desktop top left roundedness
  • Desktop top right roundedness
  • Desktop bottom left roundedness
  • Desktop bottom right roundedness
  • Mobile top left roundedness
  • Mobile top right roundedness
  • Mobile bottom left roundedness
  • Mobile bottom right roundedness