4.67.0

Card (carousel)

Carousel cards wrap the carousel component in a consistent card shell for cycling through featured content.

Demo

API

Tag

Name
<s-card-carousel>

Props

Name Value Required Description
navbutton String (URL) When set to a URL, shows an anchor link styled as a navigation button at the trailing edge of the title row.
span Number (1–12)

Number of the 12 grid columns the card spans inside a .card-container — for example 3 (4 per row), 4 (3 per row), 6 (2 per row), or 12 (full width). When omitted, the card defaults to a quarter width and collapses responsively as space narrows.
i18n string

A stringified JSON object which defines a list of localized strings. The keys must be one of the string IDs defined below.

Slots

Tag Slot Name Required Value
<span> or <div> title Card title displayed in the header row.
<s-carousel> (default) The carousel content. Place a fully-configured <s-carousel> element (with its own itemwidth, itemheight, and carousel-item children) into the default slot.

Demo

API

Tag

Name
<SCardCarousel>

Props

Name Value Required Description
navButton string (URL) When set to a URL, shows an anchor link styled as a navigation button at the trailing edge of the title row.
span 1 | 2 | … | 12

Number of the 12 grid columns the card spans inside a .card-container — for example 3 (4 per row), 4 (3 per row), 6 (2 per row), or 12 (full width). When omitted, the card defaults to a quarter width and collapses responsively as space narrows.
i18n object

A JSON object which defines a list of localized strings. The keys must be one of the string IDs defined below.

Slots

Tag Slot Name Required Value
<span> or <div> title Card title displayed in the header row.
<SCarousel> (default) The carousel content. Place a fully-configured <SCarousel> element (with its own itemWidth, itemHeight, and carousel-item children) into the default slot.

Skylab React links

General information about using our React package

Layout and sizing

Place carousel cards inside a .card-container, which arranges them on a responsive 12-column grid. Cards that share a row stretch to equal height automatically.

span is a number from 1 to 12 — how many of the 12 grid columns the card spans. Any value in that range works; 6 or 12 are the common choices for carousel content.

span Width Cards per row
6 Wide 2
12 Full width 1

i18n Strings

ID Description Default value
"cardCarousel.ariaLabel.navButton" The aria-label on the navigation button shown when navbutton is set. View details

Design

Design resources can be found on the Skylab design documentation site: skylab.avalara.com