The Carousel component displays a set of elements in a form of a slideshow, showing images, contents, or videos.
The user can change slides by pressing the buttons (arrows) and/or the carousel stepper.
Carousel component's usage of the Hero as slide
|
Component |
Usage |
Placement |
User action |
|---|---|---|---|
|
Carousel |
Used to show more than one content to the user, when those need some emphasis. |
Usually on Hero, but can be also used within the body. |
Users can change which content they want to see, and when those have buttons, they can press them. |
Anatomy
Structure
|
1. Navigation Button |
|
Navigation Button |
Allow the user to change content within the Carousel. |
|
Content |
Where the content is (images, videos, or other types of content) |
|
Stepper Carousel |
Allow the user to visualize which page (content) they are on. |
Sizes and Spaces
On all screen sizes the height of the component is based on the tallestChild componentand the width depends on the container.
On desktop the Stepper Carousel has 24px height, and the space between the Child component and the Stepper carousel is 8px.
The Navigation buttons are located in the middle height of the Carousel content, being x the same height. |
|
|
On mobile, due to usability reasons the sizes increase: the Stepper Carousel has44px height, and the space between each dot is 32px. The distance between the content and the Stepper carousel is 0px. |
|
|
|
|
|
When the carousel has cards, it should have a padding on right and left of 8px inside the slider component. |
Properties
|
Property |
Value |
Description |
|---|---|---|
|
Style |
Light Dark |
Light overlay with dark buttons and dark overlay with light buttons. |
|
Device |
Desktop Mobile |
--- |
|
innerSpacingX |
True False |
Distance between content to the side of the component is 0px of Padding-right and Padding-left for full-width content as Default classified as False and 8px of Padding-right and Padding-left with Cards as content, classified as True. |
Behaviour
Interaction
The component uses a slide transition between slides.
The transition loops from the last slide to the first.
The transition between each slide is triggered manually by user action.
Transition in Desktop with images variant
Transition in Desktop with default variant (Article Cards)
Upload an imageUpload an image
Responsiveness
Upload an image
Width on each breakpoint
|
Component |
Extra-large >1366px |
Large 1366px |
Medium 1024px |
Small 768px |
Extra-small 428px |
|---|---|---|---|---|---|
|
Carousel |
100% |
100% |
100% |
100% |
100% |
The component above lists the suggested layout when using the React Grid System (or the grid system of your choice).
Guidelines
✅ Do
Use high resolutions images or videos as content.
⚠️ Caution
Be aware of long titles and texts. Keep it simple.
⚠️ Caution
Try to keep your content inside your grids.
⛔️ Don't
Do not remove the elements of the component.
⛔️ Don't
Do not change the colour of the buttons.