@ussebastian/kitdigital/docs/components/content/main-banner-display.html

Kit Digital de la Universidad San Sebastián

<section class="container my-80">
  <div class="uss-banner dark">
    <img lazy class="uss-banner--img" src="https://dummyimage.com/1000x600/" alt="dummyimage" />

    <div class="uss-banner--body_container">
      <div class="uss-opacity-layer uss-opacity-layer--gradient"></div>
      <div class="uss-banner--body p-20 p-md-40">
        <div class="row">
          <div class="col-md-8">
            <span>Texto introductorio</span>
            <h2 class="uss-display">
              Lorem ipsum dolor sit amet consectetur. Duis nulla tincidunt sit egestas metus.
            </h2>
            <p class="mb-0">
              Lorem ipsum dolor sit amet consectetur. Et nunc dui nunc at felis sollicitudin cras
              enim consectetur. Interdum mauris vel tristique leo egestas tristique pellentesque.
            </p>
          </div>
          <div class="col-md-4 flex align-items-end justify-content-md-end">
            <div class="d-none d-md-block">
              <a href="#" class="uss-btn uss-btn--primary">
                <span>Leer artículo</span>
                <i class="uss-icon uss-icon--sm ri-arrow-right-circle-line"></i>
              </a>
            </div>
            <div class="d-block d-md-none w-100 mt-32 mb-20">
              <a href="#" class="uss-btn uss-btn--primary d-flex justify-content-center">
                <span>Leer artículo</span>
                <i class="uss-icon uss-icon--sm ri-arrow-right-circle-line"></i>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>