Promo Carousel

A PromoCarousel is built using the same base components as the Carousel. It has a slimmer look and includes autoplay and slide transition options. This carousel uses the PromoText component for its slides.

The component can be added to a page from within the CMS. When assigned to a Block and given the handle (__promo-carousel) it is rendered globally above the site header.

Example

Preview

10% off Best Sellers. Discount applied in checkout.

Free standard shipping when you spend over $50.00. Restrictions apply.

New arrivals just landed! SHOP NOW

Code

import React from 'react';
import {
  CarouselContent,
  CarouselItem,
  Carousel,
  CarouselNext,
  CarouselWrapper,
} from '@hv/ui/carousel';
import { TextWrapper, TextContent, TextBody, Text } from '@hv/ui/text';

export default function PromoCarouselExample({
  backgroundColor = 'primary',
  content,
  autoplay = true,
  transition = 'fade',
}) {
  return (
    <CarouselWrapper className={`bg-${backgroundColor}`}>
      <Carousel
        orientation='horizontal'
        opts={{
          align: 'center',
          containScroll: 'keepSnaps',
          loop: true,
          watchResize: false,
        }}
        autoplay={autoplay}
        transition={transition}
      >
        <CarouselContent>
          {content.map((item, i) => (
            <CarouselItem key={i}>
              <TextWrapper className='mx-auto h-full md:max-w-[80vw] lg:max-w-[60vw]'>
                <TextContent className='h-full content-center p-3'>
                  <TextBody className='pe-12 text-center md:pe-0'>
                    <Text text={item.text} type='promoText' format='markdown' />
                  </TextBody>
                </TextContent>
              </TextWrapper>
            </CarouselItem>
          ))}
        </CarouselContent>
        <CarouselNext
          className='right-2 sm:right-2 md:right-[5vw] lg:right-[5vw]'
          title='Next Slide, Pause'
        >
          Next Slide, Pause
        </CarouselNext>
      </Carousel>
    </CarouselWrapper>
  );
}

Variants

Use theicon above to preview

Variant	Description	Values
content	Array of carousel content	PromoText blocks
backgroundColor	Enum of theme background colors	background primary secondary accent muted destructive
autoplay	Option to have the carousel automatically advance on initialization	true false
transition	Slide transition style	slideIn fade

Customization

The approach for customization will vary depending on if the customization is intended to be global for all consumers of the UI component or if it is only an override for a particular instance.

• If the customization is necessary for all use cases, update the component source code in the UI library package directly.
• Otherwise, pass className overrides. Class overrides can be applied to all sub-components.

Promo Text Example

The PromoText component is used within the PromoCarousel component. It uses the same hv-ui parts in the Text component, but is a simplified version with Promo Carousel-specific classes applied.

import { TextWrapper, TextContent, TextBody, Text } from '@hv/ui/text';

<TextWrapper className='mx-auto h-full md:max-w-[80vw] lg:max-w-[60vw]'>
  <TextContent className='h-full content-center p-3'>
    <TextBody className='pe-12 text-center md:pe-0'>
      <Text
        text={`markdown text to display`}
        type='promoText'
        format='markdown'
      />
    </TextBody>
  </TextContent>
</TextWrapper>;