<section class="is-relative section">
<img class="is-absolute is-top-0 is-left-0 image is-fullwidth" style="object-fit: cover; height: 600px;" src="https://images.unsplash.com/photo-1458080767772-b1011d305557?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1043&q=80" alt="">
<div class="container mt-96 has-background-white">
<div class="has-mw-2xl mx-auto pt-20 px-8">
<nav class="breadcrumb is-centered has-succeeds-separator mb-6" aria-label="breadcrumbs">
<ul class="is-uppercase has-text-weight-semibold">
<li><a href="#">Home</a></li>
<li><a href="#">Blog</a></li>
<li class="is-active"><a href="#" aria-current="page">Article</a></li>
</ul>
</nav>
<h1 class="has-text-centered title is-size-3-mobile is-size-2 has-leading-3 has-text-primary mb-8">Lorem ipsum dolor sit amet consectutar</h1>
<div class="is-flex is-align-items-center is-justify-content-center mb-8">
<img class="image" style="width: 57px; height: 57px; object-fit: cover;" src="https://images.unsplash.com/photo-1556474835-b0f3ac40d4d1?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1050&q=80" alt="">
<div class="pl-6">
<h4 class="is-size-5 has-text-weight-semibold has-text-grey">Peter Prada</h4>
<span class="is-size-7 has-text-info has-text-weight-semibold">10 jun 2022 | 19:40</span>
</div>
</div>
<div>
<p class="is-size-5 has-leading-6 has-text-grey mb-6">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cumque eveniet est laborum exercitationem!</p>
<p class="is-size-5 has-leading-6 has-text-grey mb-6">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolor illo ipsa magni dolore doloribus? Velit laboriosam est nostrum ducimus, amet enim sed quidem excepturi?</p>
<p class="is-size-5 has-leading-6 has-text-grey mb-6">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aspernatur aperiam ipsum vel facilis, quibusdam velit. Et, ipsam repellat? Possimus id exercitationem aut voluptatum cumque, nemo quaerat officiis accusamus.</p>
<p class="is-size-5 has-leading-6 has-text-grey">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolor illo ipsa magni dolore doloribus? Velit laboriosam est nostrum ducimus, amet enim sed quidem excepturi?</p>
</div>
</div>
</div>
</section>Framework
Bulma
UI Library
Bendis
Content Components by Shuffle
Choose from 12 variations of Bulma Content components. Presented here are variants available in Bendis library.
Get access to all Bulma Content components, code and our visual editor. Try the demo for free!
