Styleguide FOR mind.org.uk

Banner

Banner Heading Text

Supplementary content

Banner Heading Text

Supplementary content

Placement

Banners are usually placed as the first row of a page, with a 'Heading 1' title as the main heading of the page. Banners can also be used further down a page to break up content. A banner can only be used within a Full Width grid row.

Settings

  • Image - the background image for the banner. The image must be at least 1920 x 960 to ensure that it can be rendered on larger desktop screens.
  • Banner Text - The main content that will overlay the banner image. Text formats can be applied to create the desired style. The banner text will drop underneath the image on mobile screens to provide more room.
  • Text Position - text can be position either to the left or right, depending upon the choice of background image
  • Supplementary Content - additional content that supplements the banner text - this will fall beneath banner text and center on mobile. Supplementary content also appears beneath event labels that appear in the banner, such as 'Registration Closed'.
  • Stretch Background - used to confirm if the image should be rendered behind the banner text and effectively 'stretch' to the full width of the row - or align to either side of the banner text.

Next