Carousel
A Carousel is a component built by a set of cards that rotate infinitely,
either by a timer or by a user interaction. Its elements can slide on different ways and directions
(depending on each case), giving them protagonism over the rest of the content on screen.
Use Cases
- When specific on screen content is preferred to be focused overall the content, in a dynamic and attractive way for the user.
1
2
3
4
5
6
7
HTML
Do's & Dont's
Keep navigation clear on contrast
Carousels rely heavily on their navigation controls
to give users an option to see the desired content,
instead of waiting for the timed content.
When designing the cards, consider that color contrast must allow this controls to be visible all the time.
When designing the cards, consider that color contrast must allow this controls to be visible all the time.
Keep CTAs coherent and good quality images
The content on a carousel (as well as in the cards)
must be carefully included, tailored and curated.
Images must be chosen and adjusted properly in
order to keep them appealing and relevant, and
buttons must have a clear and concise captioning.
Do not saturate Carousels with Slides
As the carousel will rotate its content, is important
to keep in mind that adding too many slides could
make it difficult for the user to return over the content
and find out what was of his particular interest.
Avoid having more than 10 slides per each carousel, independently of its format.
Avoid having more than 10 slides per each carousel, independently of its format.
Alternative and Related components
