@ussebastian/kitdigital/docs/components/content/carousel-cards-2.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="4"
  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">
        <div class="uss-tooltip" data-uss-tooltip="1">
          <h4>titulo</h4>
          <span>Lorem ipsum dolor sit amet consectetur adipisicing elit. </span>
        </div>
        <a href="#" class="uss-tag uss-tag--secondary mb-20" data-uss-tooltip-target="1">
          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>