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

Kit Digital de la Universidad San Sebastián

<section class="dark">
  <div
    class="uss-hero--60vh"
    data-uss-carousel="uss-carousel-hero"
    data-uss-items-class="uss-carousel-hero__slide"
    data-uss-speed="20"
    data-uss-draggable
  >
    <div class="uss-carousel-hero__slide">
      <img
        class="uss-carousel-hero__image"
        src="https://dummyimage.com/1440x620/"
        alt="Dummy image"
      />
      <div class="uss-carousel-hero__overlay"></div>
      <div class="uss-carousel-hero__content">
        <div class="uss-carousel-hero__content-body col-md-7">
          <h2 class="uss-carousel-hero__title">
            Lorem ipsum dolor sit amet, consecteturd adipiscing elit
          </h2>
          <p class="uss-carousel-hero__bajada">
            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>
          <a href="#" class="uss-btn uss-btn--tertiary uss-btn--no-padding">
            <i class="uss-icon ri-arrow-right-circle-line"></i>Boton Terciario</a
          >
        </div>
      </div>
    </div>
    <div class="uss-carousel-hero__slide">
      <img
        class="uss-carousel-hero__image"
        src="https://dummyimage.com/1440x620/"
        alt="Dummy image"
      />
      <div class="uss-carousel-hero__overlay"></div>
      <div class="uss-carousel-hero__content">
        <div class="uss-carousel-hero__content-body col-md-7">
          <h2 class="uss-carousel-hero__title">
            Lorem ipsum dolor sit amet, consecteturd adipiscing elit 2
          </h2>
          <p class="uss-carousel-hero__bajada">
            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>
          <a href="#" class="uss-btn uss-btn--tertiary uss-btn--no-padding">
            <i class="uss-icon ri-arrow-right-circle-line"></i>Boton Terciario</a
          >
        </div>
      </div>
    </div>
    <div class="uss-carousel-hero__slide">
      <img
        class="uss-carousel-hero__image"
        src="https://dummyimage.com/1440x620/"
        alt="Dummy image"
      />
      <div class="uss-carousel-hero__overlay"></div>
      <div class="uss-carousel-hero__content">
        <div class="uss-carousel-hero__content-body col-md-7">
          <h2 class="uss-carousel-hero__title">
            Lorem ipsum dolor sit amet, consecteturd adipiscing elit 3
          </h2>
          <p class="uss-carousel-hero__bajada">
            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>
          <a href="#" class="uss-btn uss-btn--tertiary uss-btn--no-padding">
            <i class="uss-icon ri-arrow-right-circle-line"></i>Boton Terciario</a
          >
        </div>
      </div>
    </div>
  </div>
</section>