Carousel
A carousel is an unexpansive content container which allows you to display a collection of items and cycle through them either by dragging them, by swipping them or by clicking on the arrow buttons.
Variations
LOREM IPSUM
LOREM IPSUM DOLOR SIT AMET
LOREM IPSUM
LOREM IPSUM DOLOR SIT AMET
LOREM IPSUM
LOREM IPSUM DOLOR SIT AMET
LOREM IPSUM
LOREM IPSUM DOLOR SIT AMET
LOREM IPSUM
LOREM IPSUM DOLOR SIT AMET
LOREM IPSUM
Component used in
Details
Usage
The carousel component is used to show multiple items at the same time and loop through them.
Carousels are focused on optimising the page length while enhancing the content with a strong layout.
Guidelines
- Cannot be placed directly after a title component
- Character limits recommended:
- 45 characters for the heading (
h3) and 75 characters for the subheading (p) - 75 characters for the title (
p.title) - 280 characters for the descriptive paragraph (
p)
- 45 characters for the heading (
- Image properties recommended:
- 1000x750 (resolution)
- JPG and WEBP (format)
HTML structure
Overall HTML view of a carousel component:
div.carousel
h3p (optional)div.arrow-leftdiv.items
div.item (one or more)
a
div[data-image] (optional)p.date (optional)p.metadata (optional)p.big-title (optional)p.titlep (optional)div.arrow-rightNesting element might significantly affect the HTML markup.
Presets
Carousel presets:
| Preset | Description |
|---|---|
| Default | Default preset. |
| Period based items | Preset used whenever each item has a periodicity different from the annual. |
| Annual items | Preset used whenever each item has an annual periodicity. |
| Descriptive | Used whenever it is needed to add descriptions to each item. |
| Homepage | Default preset for the homepage. |
| Basic | Preset with the minimum requirements of the component. |
Presets are ready to use HTML structures.
Variations
Carousel variations:
| Variation | Description |
|---|---|
| Default | This snippet is composed of two headings an item container, each item with an image (div[data-image]), a release date (p.date) and a title (p.title). |
| With reference | This snippet is composed of two headings an item container, each item with a release date (p.date), a reference period (p.metadata) and a title (p.title). |
| With big title | This snippet is composed of two headings an item container, each item with a release date (p.date), a big number (p.big-title) and a title (p.title). |
| With description | This snippet is composed of two headings an item container, each item with a title (p.title) and a description (p). |
| Homepage | Default preset for the homepage. contains two mandatory classes: -tall in the element root and -large in the first item. |
| Just title | This snippet is composed of the minimum requirements of this component. |
Modifiers
Carousel classes:
| Class | Description |
|---|---|
-inverted | Inverts the component colours. To be used in special cases whenever the carousel predecessor and successor are full width in a blue background. |
-no-space-below | Removes component margin bottom. |
To enable a modifier, add it as a class to the outermost element of this component.
Embedding
The carousel component cannot be embedded inside other component.
main (HTML file)
div.carouselNesting
The carousel component can be used as a container of other components and/or elements:
| Element | Description |
|---|---|
| Click for more | Whenever you need to add show all button on the bottom of the carousel. |
main (HTML file)
div.carousel
Elements are component add-ons which can be placed directly inside the component allowing you to adapt the HTML structure to your needs. The correct markup can be checked in the element page.