Note

On a mobile device, the carousel has the full functionality of scrolling, pagination, and snapping to a slide. On a desktop, the carousel is restricted to scrolling only by dragging the bottom scroll bar or using the pagination buttons.

import { Carousel } from '@uhg-abyss/mobile';

Heading

Use the heading prop to add a heading above the carousel.

Action Text

Use the actionText prop to add an action button next to the heading.

Programmatic Slide Navigation

Carousel exposes methods and state to programmatically control the current slide via a ref.

• goToSlide(slide: number): Function to programmatically change to a specific slide
• goToPrevSlide(): Function to programmatically go to the previous slide
• goToNextSlide(): Function to programmatically go to the next slide
• activeSlide: The currently active slide

Disable Scrolling

Use the disableScrolling prop to prevent the carousel from scrolling.

Disable Pagination

Use the disablePagination prop to remove the pagination bullets below the carousel.

Hide Chevrons

Use the hideChevrons prop to hide the left and right pagination chevrons while keeping slide bullets visible.

Slide Gap

Use the slideGap prop to add a gap between each slide. The default value is $carousel.space.slide-gap || 8.

Snap Percentage

Use the snapPercentage prop to set minimum percent in either direction a carousel should be shifted to snap to another carousel. The default value is 30.

In the examples below, there is a green line denoting how much the carousel would need to scroll before snapping to the next slide.

Data

Carousel is made to be used in conjunction with slides, therefore the data prop is required. This prop takes in an array that contains the information to be rendered on each slide.

const slides = [
    {
      imageBackgroundColor: '$semantic.color.surface.container.secondary',
      eyebrow: 'New Service',
      heading: 'Virtual Care',
      paragraph:
        'Get medical advice from the comfort of your home. Discover our new virtual care services.',
    },
    {
      imageBackgroundColor: '$semantic.color.surface.container.emphasis.3',
      eyebrow: 'Mental health',
      paragraph:
        'Learn more about available mental health benefits and resources available to you',
      heading: 'Explore Coverage & Support',
    },
    {
      imageBackgroundColor: '$semantic.color.surface.container.emphasis.4',
      eyebrow: 'Update',
      heading: 'COVID-19 Vaccine Information',
      paragraph:
        'Stay informed about the COVID-19 vaccine. Learn about eligibility, safety, and how to get your shot.',
    },
    {
      imageBackgroundColor: '$semantic.color.surface.container.emphasis.2',
      eyebrow: 'Event',
      heading: 'United Healthcare Community Health Fair',
      paragraph:
        'Join us for a day of free health screenings and wellness activities. Bring your family and friends!',
    },
    {
      imageBackgroundColor: '$semantic.color.surface.container.emphasis.1',
      eyebrow: 'In-App Care',
      heading: 'Real-time, online visits',
      paragraph: 'Connect with a designated provider using your smartphone.',
    },
  ];

Render Slide

Use the renderSlide prop to render the data passed into Carousel. This function takes in the slide object and index number.

renderSlide={{({ slide, index }) => {
  return (
     <Carousel.Card
      paragraph={slide.paragraph}
      eyebrow={slide.eyebrow}
      heading={slide.heading}
      variant={'vertical-small'}
      imageBackgroundColor="$semantic.color.surface.container.secondary"
      onPress={() => {
        console.log(`card ${index + 1} pressed`);
      }}
    />);
}}}

Carousel Card

Use the Carousel.Card component to display content on a card with pre-defined styled specific for use within a carousel. It does not allow for multiple variants within the same carousel. Please follow design guidelinesopens in a new window when implementing.

Carousel Nib

Use the Carousel.Nib component to display nibs within a carousel. Nibs are small, pill-shaped buttons that can be used for navigation or to represent different categories or options. They are typically used in a horizontal layout and can be scrolled through if there are more nibs than can fit on the screen at once.

Carousel Props

Name	Type	Default	Required	A11y	Description
actionText	string | undefined				Text for the action button
data	any[]				The slides to be displayed in the carousel
disablePagination	boolean | undefined	false			Flag to disable pagination
disableScrolling	boolean | undefined	false			Flag to disable scrolling
heading	string | undefined				Heading of the carousel
headingAccessibilityRole	AccessibilityRole | undefined	'header' on native and 'text' on web			Accessibility role for the heading of the carousel
hideChevrons	boolean | undefined	false			Flag to hide left and right pagination chevrons
onActionPress	(() => void) | undefined				Callback fired when the action button is pressed
renderSlide	((slideData: SlideData) => Element) | undefined				Callback function on slide render
slideGap	Space | undefined	'$carousel.spacing.gap.horizontal.cards-container'			Sets the gap between the slides
snapPercentage	number | undefined	30			Sets the minimum percentage in either direction a carousel should be shifter to snap to another carousel

Carousel Classes

Class Name	Description
abyss-carousel-action-button	Carousel action button
abyss-carousel-action-icon	Carousel action icon
abyss-carousel-action-text	Carousel action text
abyss-carousel-bullets	Container for the page indicator bullets and navigation arrows.
abyss-carousel-bullets-active-bullet	Bullet indicating the currently active carousel page.
abyss-carousel-bullets-arrow-button	Button used to navigate to the previous or next carousel page.
abyss-carousel-bullets-arrow-icon	Icon inside the carousel bullets arrow button.
abyss-carousel-bullets-container	Carousel bullets container
abyss-carousel-bullets-inactive-bullet	Bullet indicating an inactive carousel page.
abyss-carousel-bullets-wrapper	Wrapper around the page indicator bullets.
abyss-carousel-header	Carousel header element
abyss-carousel-heading	Carousel heading text
abyss-carousel-root	Carousel root element
abyss-carousel-scroll-wrapper	Carousel scroll wrapper
abyss-carousel-slide	Carousel slide

Carousel.Card Props

Name	Type	Default	Description
background	"aqua" | "white" | "peach" | "mint" | "sky-blue" | undefined	'white'	The background color of the carousel card
eyebrow	string | undefined		The eyebrow text of the carousel card
heading	string | undefined		The heading text of the carousel card
image	string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | null | undefined		The image of the carousel card
imageBackgroundColor	Color | undefined		The background color of the image container
isExternal	boolean | undefined	false	Displays an external icon after the heading
paragraph	string | undefined		The paragraph text of the carousel card
variant	"horizontal" | "vertical-lg" | "vertical-sm" | "branded" | undefined	'horizontal'	The carousel card variant

Carousel.Card Classes

Class Name	Description
abyss-carousel-card-content	Carousel card content section
abyss-carousel-card-eyebrow	Carousel card eyebrow text
abyss-carousel-card-heading	Carousel card heading text
abyss-carousel-card-image-container	Carousel card image container
abyss-carousel-card-paragraph	Carousel card paragraph text
abyss-carousel-card-root	Carousel card root element

Carousel.Nib Props

Name	Type	Default	Description
children	string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | null | undefined		The contents of the Nib component
icon	string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | null | undefined		The icon of the nib component
onPress	GestureResponderEventHandler		Callback fired when the nib is pressed
onPressIn	GestureResponderEventHandler		Callback fired at the start of the nib press
onPressOut	GestureResponderEventHandler		Callback fired at the end of the nib press
size	"large" | "medium" | "small" | undefined	'small'	Size of the nib

Carousel.Nib Classes

Class Name	Description
abyss-nib-label	The label element
abyss-nib-root	The root element

Pagination

When a screen reader is enabled, the pagination should not be shown. Be sure to set disablePagination prop to true.

When hideChevrons is set to true, the left and right chevrons are hidden, but users can still navigate with swipe gestures and programmatic navigation methods like goToNextSlide, goToPrevSlide, and goToSlide.

Carousel Tokens

Search tokens

Token Name	Value
carousel.color.text.heading	#002677
carousel.color.icon.one-tap-alt	#4B4D4F
carousel.sizing.all.icon.one-tap-alt	24
carousel.sizing.all.icon.external	16
carousel.spacing.gap.horizontal.cards-container	8
carousel.spacing.gap.horizontal.heading-container	16
carousel.spacing.gap.vertical.container	8
carousel.spacing.padding.top.heading-container	24