@ussebastian/kitdigital/docs/components/content/carousel-cards-1.html

Kit Digital de la Universidad San Sebastián

<section
  data-uss-carousel="uss-carousel-cards"
  data-uss-title="Lectus magna fringilla urna"
  data-uss-visible-items="2"
  data-uss-draggable
>
  <div class="uss-carousel-cards__item-container">
    <div class="uss-card">
      <div class="uss-card__body">
        <a href="#" class="uss-tag uss-tag--secondary mb-20"> Tag secundario </a>
        <div class="overline text-color--alt">Metadato introductorio</div>
        <div class="h5 mb-20">Titulo de la card</div>
        <p class="p-size--sm mb-32">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nibh consectetur consequat
          scelerisque donec imperdiet donec. Lorem ipsum dolor sit amet, consectetur adipiscing
          elit.
        </p>
        <a href="#" class="uss-btn uss-btn--tertiary">
          Botón terciario
          <i class="uss-icon ri-arrow-right-circle-line"></i>
        </a>
      </div>
    </div>
  </div>
  <div class="uss-carousel-cards__item-container">
    <div class="uss-card">
      <div class="uss-card__body">
        <a href="#" class="uss-tag uss-tag--secondary mb-20"> Tag secundario </a>
        <div class="overline text-color--alt">Metadato introductorio</div>
        <div class="h5 mb-20">Titulo de la card</div>
        <p class="p-size--sm mb-32">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nibh consectetur consequat
          scelerisque donec imperdiet donec. Lorem ipsum dolor sit amet, consectetur adipiscing
          elit.
        </p>
        <a href="#" class="uss-btn uss-btn--tertiary">
          Botón terciario
          <i class="uss-icon ri-arrow-right-circle-line"></i>
        </a>
      </div>
    </div>
  </div>
  <div class="uss-carousel-cards__item-container">
    <div class="uss-card">
      <div class="uss-card__body">
        <a href="#" class="uss-tag uss-tag--secondary mb-20"> Tag secundario </a>
        <div class="overline text-color--alt">Metadato introductorio</div>
        <div class="h5 mb-20">Titulo de la card</div>
        <p class="p-size--sm mb-32">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nibh consectetur consequat
          scelerisque donec imperdiet donec. Lorem ipsum dolor sit amet, consectetur adipiscing
          elit.
        </p>
        <a href="#" class="uss-btn uss-btn--tertiary">
          Botón terciario
          <i class="uss-icon ri-arrow-right-circle-line"></i>
        </a>
      </div>
    </div>
  </div>
  <div class="uss-carousel-cards__item-container">
    <div class="uss-card">
      <div class="uss-card__body">
        <a href="#" class="uss-tag uss-tag--secondary mb-20"> Tag secundario </a>
        <div class="overline text-color--alt">Metadato introductorio</div>
        <div class="h5 mb-20">Titulo de la card</div>
        <p class="p-size--sm mb-32">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nibh consectetur consequat
          scelerisque donec imperdiet donec. Lorem ipsum dolor sit amet, consectetur adipiscing
          elit.
        </p>
        <a href="#" class="uss-btn uss-btn--tertiary">
          Botón terciario
          <i class="uss-icon ri-arrow-right-circle-line"></i>
        </a>
      </div>
    </div>
  </div>
  <div class="uss-carousel-cards__item-container">
    <div class="uss-card">
      <div class="uss-card__body">
        <a href="#" class="uss-tag uss-tag--secondary mb-20"> Tag secundario </a>
        <div class="overline text-color--alt">Metadato introductorio</div>
        <div class="h5 mb-20">Titulo de la card</div>
        <p class="p-size--sm mb-32">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nibh consectetur consequat
          scelerisque donec imperdiet donec. Lorem ipsum dolor sit amet, consectetur adipiscing
          elit.
        </p>
        <a href="#" class="uss-btn uss-btn--tertiary">
          Botón terciario
          <i class="uss-icon ri-arrow-right-circle-line"></i>
        </a>
      </div>
    </div>
  </div>
  <div class="uss-carousel-cards__item-container">
    <div class="uss-card">
      <div class="uss-card__body">
        <a href="#" class="uss-tag uss-tag--secondary mb-20"> Tag secundario </a>
        <div class="overline text-color--alt">Metadato introductorio</div>
        <div class="h5 mb-20">Titulo de la card</div>
        <p class="p-size--sm mb-32">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nibh consectetur consequat
          scelerisque donec imperdiet donec. Lorem ipsum dolor sit amet, consectetur adipiscing
          elit.
        </p>
        <a href="#" class="uss-btn uss-btn--tertiary">
          Botón terciario
          <i class="uss-icon ri-arrow-right-circle-line"></i>
        </a>
      </div>
    </div>
  </div>
</section>