<section class="position-relative py-20">
<img class="d-none d-lg-block position-absolute top-0 start-0 mt-20" src="zeus-assets/icons/dots/blue-dot-left-bars.svg" alt="">
<img class="d-none d-lg-block position-absolute top-0 end-0 mt-52" src="zeus-assets/icons/dots/yellow-dot-right-shield.svg" alt="">
<div class="container mb-16">
<div class="max-w-2xl mx-auto text-center">
<div class="small">
<a class="text-decoration-none text-muted" href="#">Home</a>
<span class="d-inline-block px-1">/</span>
<a class="text-decoration-none text-muted" href="#">Blog</a>
<span class="d-inline-block px-1">/</span>
<a class="text-decoration-none text-muted" href="#">Article</a>
</div>
<h2 class="mt-8 mb-10">Lorem ipsum dolor sit amet consectutar domor at elis</h2>
<div class="row justify-content-center">
<div class="col-auto">
<img class="rounded-circle" style="width:64px; height: 64px; object-fit: cover; object-position: top;" src="https://images.unsplash.com/photo-1544717305-2782549b5136?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=334&q=80" alt="">
</div>
<div class="col-auto text-start">
<h4 class="mb-2">Esther Bailey</h4>
<p class="text-muted">February 26, 2021</p>
</div>
</div>
</div>
</div>
<div class="h-lg-50">
<img class="img-fluid w-100 h-100" style="object-fit: cover; object-position: top;" src="https://images.unsplash.com/photo-1525129498994-580709352e20?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80" alt="">
</div>
</section>Framework
Bootstrap
UI Library
Zeus
Content Components by Shuffle
Choose from 11 variations of Bootstrap Content components. Presented here are variants available in Zeus library.
Get access to all Bootstrap Content components, code and our visual editor. Try the demo for free!
