Configuration

The following need to be set up for the template and panels to work correctly.

Subsite Settings

Your subsite configuration form has a section for the Panel template:

Each item lets you pick a metadata property or group. Values from these properties control the behaviour of panels.

Metadata

There are four metadata properties used by the Panel template, plus an extra group for carousel settings.

Call To Action Text

The values held in this property can be related to articles and override the "See more" text used in links and buttons. These values can be used in:

• The buttons on default article panels
• The buttons beneath list panels
• The buttons on each tab of a tab panel

Panel Type

Relate one of these values to the article providing content for the panel. This will change the type of panel that it generates (articles without one of these types generate default panels). The four possible values are:

• body
• carousel
• parallax
• squares
• tabs

Panel Style

Relate one or more of these values to change the overall style of the panel. These values add CSS classes to the panel. Your site's CSS will need to have corresponding rules to style these classes. You can add as many metadata values and CSS rules into your site skin as you like.

For example, a value of "centre" related to a parallax panel, would generate:

<div class="a-panel a-panel--parallax a-panel--centre" style=" ">...</div>

The standard styles supported by the site frameworks are:

• centre
• left
• muted-grey (adds a grey background)
• parallax-background
• primary-colour (not part of the default CSS)
• removelink
• removetitle
• right
• s-50 (displays items at 50% width)
• secondary-colour (not part of the default CSS)
• tertiary-colour (not part of the default CSS)
• top

Panel Item Style

These values work in the same way as panel style modifiers, but are added to the items/slides that appear within a panel, for example the blocks on a parallax panel. This snippet shows a "contrast" value added to a panel item:

<div class="grid__cell grid__cell--feature grid__cell--parallax grid__cell--cols1" data-grid-colspan="1">
    <div class="grid__cellwrap">
        <div class="fa-block fa-block--contrast" style="height: 331px;">...</div>
    </div>
</div>

Carousel Options

See the carousel examples (opens new window) for a full description.

Media Definitions

The Panel template uses the following media definitions.

Background

Background images are used by all of the panel and carousel page assets.

iCM Name: background
Description: background 

Rollover Image

Rollover images are used to provide icons in the tab panels.

iCM Name: rollover_image
Description: Rollover image