Components

Carousel

A swipeable track of slides with keyboard support.

Usage

Basic

First slide

Second slide

Third slide

HTML

<bs:bsui-carousel>
  <bs:bsui-carousel-item width="70%">
    <bs:bsui-text content="First slide" />
  </bs:bsui-carousel-item>
  <bs:bsui-carousel-item width="70%">
    <bs:bsui-text content="Second slide" />
  </bs:bsui-carousel-item>
  <bs:bsui-carousel-item width="70%">
    <bs:bsui-text content="Third slide" />
  </bs:bsui-carousel-item>
</bs:bsui-carousel>

Testimonials

Wider slides so a full quote fits without wrapping into a wall of text.

We moved eleven client sites over in a weekend and nothing broke.

Ada Lovelace, Northwind Studio

The build step disappeared, which is the part our juniors always broke.

Grace Hopper, Harbour Digital

Our editors stopped filing tickets about the block editor entirely.

Katherine Johnson, Orbit Press

HTML

<bs:bsui-carousel>
  <bs:bsui-carousel-item width="22rem">
    <bs:bsui-stack direction="column" gap="3" align="start">
      <bs:bsui-text content="We moved eleven client sites over in a weekend and nothing broke." variant="body" />
      <bs:bsui-text content="Ada Lovelace, Northwind Studio" variant="caption" />
    </bs:bsui-stack>
  </bs:bsui-carousel-item>
  <bs:bsui-carousel-item width="22rem">
    <bs:bsui-stack direction="column" gap="3" align="start">
      <bs:bsui-text content="The build step disappeared, which is the part our juniors always broke." variant="body" />
      <bs:bsui-text content="Grace Hopper, Harbour Digital" variant="caption" />
    </bs:bsui-stack>
  </bs:bsui-carousel-item>
  <bs:bsui-carousel-item width="22rem">
    <bs:bsui-stack direction="column" gap="3" align="start">
      <bs:bsui-text content="Our editors stopped filing tickets about the block editor entirely." variant="body" />
      <bs:bsui-text content="Katherine Johnson, Orbit Press" variant="caption" />
    </bs:bsui-stack>
  </bs:bsui-carousel-item>
</bs:bsui-carousel>

Media slides

Each slide holds an aspect ratio, so every frame lines up.

Dashboard

Editor

Settings

HTML

<bs:bsui-carousel>
  <bs:bsui-carousel-item width="20rem">
    <bs:bsui-aspect-ratio ratio="16/9" background="var(--color-surface)">
      <bs:bsui-text content="Dashboard" variant="muted" />
    </bs:bsui-aspect-ratio>
  </bs:bsui-carousel-item>
  <bs:bsui-carousel-item width="20rem">
    <bs:bsui-aspect-ratio ratio="16/9" background="var(--color-surface)">
      <bs:bsui-text content="Editor" variant="muted" />
    </bs:bsui-aspect-ratio>
  </bs:bsui-carousel-item>
  <bs:bsui-carousel-item width="20rem">
    <bs:bsui-aspect-ratio ratio="16/9" background="var(--color-surface)">
      <bs:bsui-text content="Settings" variant="muted" />
    </bs:bsui-aspect-ratio>
  </bs:bsui-carousel-item>
</bs:bsui-carousel>

Anatomy

Carousel is composed of the blocks below. Each one is a separate block that only renders inside its parent.

bsui/carousel
bsui/carousel-item

Attributes

Attribute	Type	Default
`orientation`	`horizontal` `vertical`	`horizontal`

`bsui/carousel-item`

Attribute	Type	Default
`width`	`text`	`16rem`