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 guidelines 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	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) => React.JSX.Element | undefined	-	-	Callback function on slide render
slideGap	Abyss.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-root	Carousel root element
abyss-carousel-scroll-wrapper	Carousel scroll wrapper
abyss-carousel-slide	Carousel slide
abyss-carousel-bullets-container	Carousel bullets container
abyss-carousel-header	Carousel header element
abyss-carousel-heading	Carousel heading text
abyss-carousel-action-button	Carousel action button
abyss-carousel-action-text	Carousel action text
abyss-carousel-action-icon	Carousel action icon

Carousel.Card Props

Name	Type	Default	Required	Description
background	BannerProps['background'] | undefined	'white'	-	The background color of the carousel card
eyebrow	string | undefined	-	-	The eyebrow text of the carousel card
heading	BannerProps['heading'] | undefined	-	-	The heading text of the carousel card
image	BannerProps['image'] | undefined	-	-	The image of the carousel card
imageBackgroundColor	BannerProps['imageBackgroundColor'] | undefined	-	-	The background color of the image container
isExternal	boolean | undefined	false	-	Displays an external icon after the heading
paragraph	BannerProps['paragraph'] | undefined	-	-	The paragraph text of the carousel card
variant	BannerProps['variant'] | undefined	'horizontal'	-	The carousel card variant

Carousel.Card Classes

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

Carousel.Nib Props

Name	Type	Default	Required	Description
children	React.ReactNode | undefined	-	-	The contents of the Nib component
icon	React.ReactNode | undefined	-	-	The icon of the nib component
onPress	Abyss.GestureResponderEventHandler	-	-	Callback fired when the nib is pressed
onPressIn	Abyss.GestureResponderEventHandler	-	-	Callback fired at the start of the nib press
onPressOut	Abyss.GestureResponderEventHandler	-	-	Callback fired at the end of the nib press
size	'small' | 'medium' | 'large' | undefined	'small'	-	Size of the nib

Carousel.Nib Classes

Class Name	Description
abyss-nib-root	The root element
abyss-nib-label	The label 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