Banners & Carousels
Banners have carousel functionality. We use the carousel library 'Flickity'. You will need to include the Flickity CSS in the head of your document and the Flickity JS near the end of the body of your document as indicated in the code below.
<!-- Flickity CSS -->
<link rel="stylesheet" href="//unpkg.com/flickity@2/dist/flickity.min.css">
<!-- Flickity JS -->
Please note: Rendered elements below may look different when used elsewhere. These elements are full width, and any text/links used on banners will fit according to page max-width, rather than being constrained to a testing area as seen below
Our hero banner has multiple options for slides and the ability for text content to drop below the image on mobile.
Minimum recommended image size is: 1400 × 600
- Aligned Left Option (text drops below image on mobile)
- Aligned Right Option (text drops below image on mobile)
- Aligned Center Option (text drops below image on mobile)
- Text Stays Within Image Option
- Image Only
Advertisement Banners are great callouts to breakout your page.
Minimum recommended image size is: 1200 × 1050 (to support stacked layout on mobile)
You can feature multiple cards on a carousel as well.