Showcase basics

Page templates

To create the multi-column styles, the template needs to be full width and usually without any templated in items like a sidebar.

Typically on a "CMS page" you would use the Landing page template.  For articles, there will be a new "Showcase" template available in the Layout:

Showcase plugins

There are two types of Showcase plugins:

• Showcase container - Top level container, all plugins must be inside this
• Showcase section - Controls scroll-based effects (see below)

Rows

Before introducing the scrolling features, it's important to understand the basic Rows, Columns and Boxout functionality.

None of these require the Showcase plugins and can be used on any templates (within reason!).

The Row layouts control:

• Overall panel styling - Height and position of the content
• The background colour/image/video

The following Layouts have been added as standard:

• Default = Content height (plus padding)
• Full height - This automatically sets the row height to the screen depth.  Content is vertically centred
• Full height - Title - This automatically sets the row height to the screen depth.  Content is fixed 33% from the top
• Reveal - This allows you to "reveal" text underneath another Row, see here

Columns

The Column layouts control:

• Text colours - Light/dark
• Text  styling - Font size
• Column size and position - Left/right/centre

The following Layouts have been added as standard:

• Default = Dark text
• Showcase - white text/dark background
• Title - Dark text
• Title - Light text

Boxout

The Boxout layouts control:

• Column and text colours
  • From palette
  • Solid/Semi-transparent backgrounds

The following Layouts have been added as standard:

• Dark text
• Light text
• Light semi-transparent
• Dark semi transparent

Showcase section

This plugin controls all the scroll-effects using Layouts:

• Pinned sidebars
• Fading in/out
• Slideshows

It also controls the initial background style (colour/image/video) when you want to fade from one state to another.  So for example, if you wanted to fade an image from black and white to colour, you would put the black and white image in the Showcase section plugin and the colour image in the Row.

The following Layouts have been added as standard:

• Default - No effects
• Fade in/Fade out - Fades all contents in at 30% and out at 30%
• Fade in - Fades all content in at 30%

The fade in/out, in conjunction with a full height row and Title styling, is a good way to introduce new sections.

Showcase slideshow

The Showcase slideshow plugin controls:

• Pinned content
• Image slideshows

The following Layouts have been added as standard:

• Default = Pinned
• Full screen slide height - Works like a Powerepoint slideshow.  See here
• Full screen content height - Long content scrolls over a background slideshow.  See here

Showcase slide

The Showcase slide plugin controls:

• The percentage that controls when pinned slides are displayed
• Content - Images selected in the plugin or it can contain child content:
  • Text
  • Quote
  • Poll
  • etc.