Skip to main content

Custom Components

In the CMS there are some components that are specific to the Moss RCM Build. Here's how they work:

Horizontal Banner and Vertical Banner​

The horizontal banner is used to cover the width of the screen and the vertical banner is used as a smaller rectangle usually further down the page, they have the same settings.

Settings​

  • Heading Choose between H1 to H6
  • Label Choose between None, Defualt, Default Small and Underline
  • Show Background Toggle None or visible
  • Background Colour Colour Picker
  • 1X1 Grid Select 1X1 Grid or 1X2 Grid
  • Background Cover Toggle None or visible
  • Background cover colour Colour Picker
  • Message interval Set Message interval in ms
  • Padding Vertical Set vertical padding in pixels
  • Padding Horizontal Set horizontal padding in pixels

General​

  • Button URL Link for the button
  • Banner URL Link for the banner
  • Body Text Appears under the heading
  • Message Appears on the top of the banner
  • Heading Main message this will be the largest font
  • Label Appears above the heading
  • Button Appears at the bottom, currently styled as underline
  • Mobile image Uploader to upload image for Mobile
  • Desktop image Uploader to upload image for Desktop
  • Message Colour Colour Picker for label text, leave blank for default
  • Label Colour Colour Picker for label text, leave blank for default
  • Heading Colour Colour Picker for heading text, leave blank for default
  • Body Colour Colour Picker for body text, leave blank for default
  • Button Colour Colour Picker for button text, leave blank for default

Typoography​

  • Text Align Select from Left, Center or Right
  • Text Align Mobile Select from Left, Center or Right

Display​

  • Label Background Select the background colour for the label
  • Message Background Select the background colour for message

Advanced​

  • Grid Coloumn Select from 1 or 2
  • Grid Row Select from 1 or 2
  • Grid Col Mobile Select from 1 or 2
  • Grid Row Mobile Select from 1 or 2
  • Horizontal Position Select from Left, Center or Right
  • Vertical Position Select from Top center and bottom
  • Horizontal Position Mobile Select from Left, Center or Right
  • Vertical Position Mobile Select from Top center and bottom

The overhang carousel, works in a similar way to the standard carousel but the last item in the list is half off the side of the screen. The number of items on the screen can be set in Carousel Items and different numbers set for Tablet and Mobile. Gap gives you the option to specify the gap distance between the carousel items.