@ussebastian/kitdigital/docs/components/content/carousel-V2-hero.html

Kit Digital de la Universidad San Sebastián

<section>
  <div class="uss-carousel-v2 uss-focus--outline-white dark" aria-label="carousel de ejemplo">
    <div class="uss-carousel-v2__controls container">
      <button class="uss-carousel-v2__skip-navigation"></button>
      <button class="uss-carousel-v2__play"></button>
      <div class="d-flex align-items-center" style="gap: 16px">
        <div class="d-flex align-items-center">
          <button class="uss-carousel-v2__prev uss-btn uss-btn--slide uss-btn--slide-prev"></button>
          <button class="uss-carousel-v2__next uss-btn uss-btn--slide uss-btn--slide-next"></button>
        </div>
        <div class="uss-carousel-v2__shortcuts d-none d-md-flex"></div>
      </div>
    </div>
    <div class="uss-carousel-v2__viewport">
      <div class="uss-carousel-v2__container">
        <div class="uss-carousel-v2__slide" data-uss-content-label="Slide número 1">
          <div class="uss-hero uss-hero--background uss-hero--carousel-slide">
            <img class="uss-hero__image" src="https://dummyimage.com/1200x1200/" alt="Hero image" />
            <div class="uss-opacity-layer"></div>
            <div class="col-md-8">
              <div class="uss-hero__content">
                <h2 class="uss-hero__title">
                  Lorem ipsum dolor sit amet, consecteturd adipiscing elit
                </h2>
                <p class="uss-hero__description">
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam, purus sit amet
                  luctus venenatis, lectus magna fringilla urna, porttitor rhoncus dolor purus non
                  enim praesent elementum facilisis leo, vel fringilla est ullamcorper eget nulla.
                </p>
                <div class="uss-hero__buttons">
                  <a href="#" class="uss-btn uss-btn--tertiary">
                    <i class="uss-icon ri-arrow-right-circle-line"></i>Boton Terciario</a
                  >
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="uss-carousel-v2__slide" data-uss-content-label="Slide número 2">
          <div class="uss-hero uss-hero--background uss-hero--carousel-slide">
            <img class="uss-hero__image" src="https://dummyimage.com/1200x1200/" alt="Hero image" />
            <div class="uss-opacity-layer"></div>
            <div class="col-md-8">
              <div class="uss-hero__content">
                <h2 class="uss-hero__title">
                  Lorem ipsum dolor sit amet, consecteturd adipiscing elit
                </h2>
                <p class="uss-hero__description">
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam, purus sit amet
                  luctus venenatis, lectus magna fringilla urna, porttitor rhoncus dolor purus non
                  enim praesent elementum facilisis leo, vel fringilla est ullamcorper eget nulla.
                </p>
                <div class="uss-hero__buttons">
                  <a href="#" class="uss-btn uss-btn--tertiary">
                    <i class="uss-icon ri-arrow-right-circle-line"></i>Boton Terciario</a
                  >
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>