HTML <!-- Author 1 - HCF Bootstrap 5 Component --> <section class="hcf-author-1 bg-light py-5 py-xl-6"> <div class="container overflow-hidden"> <div class="row justify-content-center gy-4 gy-md-0"> <div class="col-12 col-md-3 col-xl-2 d-flex align-items-center justify-content-center"> <img class="hcf-author-img img-fluid w-150px h-150px rounded-circle" loading="lazy" src="./assets/img/author/author-1/img-1.jpg" alt=""> </div> <div class="col-12 col-md-8 col-lg-6 col-xl-5 d-flex align-items-center justify-content-center"> <div class="hcf-author-meta text-center text-md-start"> <h5 class="text-secondary fs-7">Article written by</h5> <h2 class="fs-2 mb-3">Elio Evander</h2> <p class="mb-3">Mauris at turpis sit amet turpis pretium imperdiet at eu tellus. Suspendisse imperdiet sapien id interdum scelerisque.</p> <p class="mb-0"> <a href="#!" class="link-dark text-decoration-none"> View More Items <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-right-short" viewBox="0 0 16 16"> <path fill-rule="evenodd" d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8z" /> </svg> </a> </p> </div> </div> </div> </div> </section> Copy