Carousels

Carousels provide a stylish and compact way of presenting sequenced elements.

This Carousel can be manipulated by clicking the direction arrows or swiping inside the component (mobile only).

A bird in the hand is worth two in the bush

Statement of fact

Scary Robot Future

Earth Pandemics

Show Me The Money

const carouselItems: CarouseItem[] = [
  {
    type: "text",
    heading: "Statement of fact",
    text: "A bird in the hand is worth two in the bush",
  },
  {
    type: "image",
    heading: "Scary Robot Future",
    src: robots,
    alt: "Futuristic robots on a colourful electronic board",
  },
  {
    type: "image",
    heading: "Earth Pandemics",
    src: virusEarth,
    alt: "The planet Earth with virus spikes",
  },
  {
    type: "image",
    heading: "Show Me The Money",
    src: shinyOffice,
    alt: "An office building with dollars flying out of it",
  },
];

<Carousel carouselItems={carouselItems} />