Service container

Desktop view

Image layout

Closed panels

Opened panel - Title top aligned

Screeshot of service container open panel

Opened panel - Title left aligned

Live examples

Created examples - Image & Text only layout

Full-bleed layout

Closed panels

Obened panel

Full-bleed layout - Navigation function

Highlighted panel (underlined in red) when the panel link leads to the page where the container is integrated.

Live examples

Created examples - Full-bleed image layout

Only text layout

Closed panels

Opened panels

Created examples - Image & Text only layout

Mobile view

Image layout

Closed panels

Opened panel

Full-bleed layout

Closed panels

Opened panel

How it works

The service container component allows to encapsulate content and navigation structure inside the content area. The service container is composed out of various service panels (from two to five) and inside each service panel various content components can be used.
Styles of the panels
- Only text
- Image/icon
- Full-bleed image
The visitor can access the single sections of the service panel by clicking on their panel area.
Title in the panel can be
- Top aligned
- Left aligned
A service panel can have one to three columns when title is top aligned
A service panel can have one to two columns when title is left aligned
A service panel can have a analytics component tracking
These components can be used
- Button
- Featured statistics
- Link list reimagined
- Text & image
- Feedback
Options available
- Spacing at the top of the component
- Icons size
- Title size
- Background color (if applied, component itself is displayed as white)
Height of the container for L & XL viewports
- Full-bleed image style:
  Height is fixt to 570px
- Only text & image/icon style:
  The height value can be set in hundreds and in case is not provided in the dialog, the default value will be automatically applied to the Service Panel (the default value is 700 px).
Navigation function for full-bleed layout
- If the link in the navigation panel is the same as the link of the page then a red line, same as the one for the site navigation appears below the panel
- Users cannot interact with the highlighted panel

How to use it

You have to make sure that the height of the service panels and the service component is the same as the highest heigh of the inner content of the service panels - in order to have a better user experience you have to make sure that the same amount of content is filled in all the service panels.
You have to make sure that the images used in the mobile view receive an appropriate optimal resolution.
Currently this component can not be used with the left hand side navigation so please ensure it is disabled in the pages where the service container component is added.

Select numbers of panels (2 to 4)

Panels height definition

Note:
In Full-Bleed image style panels the height is fixed to 570px so this value will be ignored but image height values need to be set for the Service Container with the panels with styles: Only Text and
Image/Icon.