The articles below all use the Panel template. They show the main panel types, and describe how they have been built.
There are dozens of styles that can be added to panels, generally applied by relating metadata to the articles that provide panel content. Panel Subsite and Metadata Configuration gives an overview, and you'll find find some examples in each article too.
These articles use a lot of dummy content, so following the links to items displayed in the panels will look a bit basic.
Examples
This website also uses the panel template.
- The home page uses a carousel and series of list panels
- The Case Management landing page has search panel, tab panel, then list panels in different styles
Panel Types
Default Panels
This example shows the two positions panels can appear in, and the default panel behaviour.
Block Panels
This example has articles with the block metadata related to them. Block metadata outputs a full width image, with the article heading and summary centred beneath.
Body Panels
Body panels behave in a similar way to standard article panels, but also display the full body text of the article providing the panel's content.
Carousel Panels
This Panel template has a default and a list article related to it. Each of them have the carousel panel type metadata related to them.
Grid Panel
The grid panel displays a series of articles laid out in a grid. You can set the number of rows and columns each item in the grid occupies.
List Panels
Display a list of articles in a panel.
Parallax Panels
Parallax panels have a fixed background that panel items scroll over.
Search Panels
This Panel template has a search article related to it.
Squares Panels
The squares panel displays its article heading and summary in the same way as standard panels, followed by a series of squares, each of which is designed to display an image.
Tabs Panels
The tabs panel displays a series of tabs, each of which reveals article content beneath the row of tabs when clicked.
