Carousel Element

Provides a responsive container for feature articles

Usage

Basic Usage

The <content-carousel> element wraps content in a horizontally scrolling container.

It is used internally by the <content-hero> element to display feature items, but has been abstracted for use in other scenarios.

Feature A

Rhoncus perpetua atqui harum signiferumque mea reprimique prodesset et. Enim pulvinar senserit feugiat viris vim tale.

Feature B

Ferri repudiare sit potenti scripserit. Harum phasellus commune feugiat graecis sapien assueverit.

Feature C

His detracto error verear tale maximus rhoncus convallis. Ceteros pertinacia verterem moderatius porttitor adversarium nostrum omittam utroque.

<content-carousel>
  <article>
    <h4>Feature A</h4>
    <p>
      Rhoncus perpetua atqui harum signiferumque mea reprimique prodesset et.
      Enim pulvinar senserit feugiat viris vim tale.
    </p>
  </article>
  <article>
    <h4>Feature B</h4>
    <p>
      Ferri repudiare sit potenti scripserit.
      Harum phasellus commune feugiat graecis sapien assueverit.
    </p>
  </article>
  <article>
    <h4>Feature C</h4>
    <p>
      His detracto error verear tale maximus rhoncus convallis.
      Ceteros pertinacia verterem moderatius porttitor adversarium nostrum omittam utroque.
    </p>
  </article>
</content-carousel>

Scrolling List

It can also be used to show a scrolling list of chips by setting the variant attribute to list, as in the following example.

Discord

Facebook

GitHub

Instagram

LinkedIn

Mastodon

NPM

Slack

Twitter

YouTube

<content-carousel variant="list">
  <li class="vpi-social-discord">Discord</li>
  <li class="vpi-social-facebook">Facebook</li>
  <li class="vpi-social-github">GitHub</li>
  <li class="vpi-social-instagram">Instagram</li>
  <li class="vpi-social-linkedin">LinkedIn</li>
  <li class="vpi-social-mastodon">Mastodon</li>
  <li class="vpi-social-npm">NPM</li>
  <li class="vpi-social-slack">Slack</li>
  <li class="vpi-social-twitter">Twitter</li>
  <li class="vpi-social-youtube">YouTube</li>
</content-carousel>

With Animated Entry

When the <content-carousel> element is populated entirely with <content-article> elements whose variant attribute is set to panel, the entry of each article will be animated, entering one after the other in order, as in the example below.

Feature A

Rhoncus perpetua atqui harum signiferumque mea reprimique prodesset et. Enim pulvinar senserit feugiat viris vim tale.

Feature B

Ferri repudiare sit potenti scripserit. Harum phasellus commune feugiat graecis sapien assueverit.

Feature C

His detracto error verear tale maximus rhoncus convallis. Ceteros pertinacia verterem moderatius porttitor adversarium nostrum omittam utroque.

<content-carousel>
  <content-article variant="panel">
    <h4>Feature A</h4>
    <p>
      Rhoncus perpetua atqui harum signiferumque mea reprimique prodesset et.
      Enim pulvinar senserit feugiat viris vim tale.
    </p>
  </content-article>
  <content-article variant="panel">
    <h4>Feature B</h4>
    <p>
      Ferri repudiare sit potenti scripserit.
      Harum phasellus commune feugiat graecis sapien assueverit.
    </p>
  </content-article>
  <content-article variant="panel">
    <h4>Feature C</h4>
    <p>
      His detracto error verear tale maximus rhoncus convallis.
      Ceteros pertinacia verterem moderatius porttitor adversarium nostrum omittam utroque.
    </p>
  </content-article>
</content-carousel>

Attributes

Name	Description	Type
variant	Which layout to use for the details contents	String

CSS Parts

Name	Description
container	Overall responsive container element

CSS Variables

Name	Description	Type	Default
--list-borderColor	Border color of list items in the list variant	color	C2C2C4

Slots

Name	Description	Type
none	Elements to place in the carousel	* | <li>