<section class="is-relative section py-20" style="overflow: hidden;">
<img class="is-absolute is-left-0 is-bottom-0 mb-32 is-hidden-touch" src="zeus-assets/icons/dots/blue-dot-left-bars.svg" alt="">
<div class="container">
<div class="columns is-multiline is-vcentered">
<div class="is-relative column is-12 is-6-tablet is-6-desktop mb-6 mb-0-desktop">
<img class="image mx-auto is-fullwidth has-mw-md-touch is-block" src="zeus-assets/images/z-picture.png" alt="">
</div>
<div class="column is-12 is-6-tablet is-6-desktop">
<div class="has-mw-xl-desktop">
<h2 class="mb-16 mb-24-desktop title is-2">Lorem ipsum dolor sit amet consectetur</h2>
<div class="is-relative columns is-multiline pt-5">
<div class="is-relative column is-6 mb-12 -mt-8-desktop">
<img class="is-absolute is-top-0 -mt-10 is-left-0 ml-32 is-hidden-mobile" src="zeus-assets/icons/line-little-top.svg" alt="">
<span class="is-flex is-align-items-center is-justify-content-center mb-6 mb-8-desktop has-background-info has-text-white" style="width: 48px; height: 48px; border-radius: 100%;">1</span>
<h3 class="mb-4 title is-4">Dolor sit amet</h3>
<p class="is-size-5 has-text-grey-dark">Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus sit amet tempus vestibulum.</p>
</div>
<div class="is-relative column is-6 mb-12">
<span class="is-flex is-align-items-center is-justify-content-center mb-6 mb-8-desktop has-background-danger has-text-white" style="width: 48px; height: 48px; border-radius: 100%;">2</span>
<h3 class="mb-4 title is-4">Dolor sit amet</h3>
<p class="is-size-5 has-text-grey-dark">Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus sit amet tempus vestibulum.</p>
</div>
<div class="is-relative column is-6 mb-12 -mt-8-desktop">
<img class="is-absolute is-top-0 -mt-16 is-left-0 ml-32 is-hidden-mobile" src="zeus-assets/icons/line-little.svg" alt="">
<span class="is-flex is-align-items-center is-justify-content-center mb-6 mb-8-desktop has-background-warning has-text-white" style="width: 48px; height: 48px; border-radius: 100%;">3</span>
<h3 class="mb-4 title is-4">Dolor sit amet</h3>
<p class="is-size-5 has-text-grey-dark">Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus sit amet tempus vestibulum.</p>
</div>
<div class="is-relative column is-6 mb-12">
<span class="is-flex is-align-items-center is-justify-content-center mb-6 mb-8-desktop has-background-success has-text-white" style="width: 48px; height: 48px; border-radius: 100%;">4</span>
<h3 class="mb-4 title is-4">Dolor sit amet</h3>
<p class="is-size-5 has-text-grey-dark">Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus sit amet tempus vestibulum.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>Framework
Bulma
UI Library
All Libraries
Components
- Alert 80
- Application 60
- Banners 10
- Blog 63
- Call to action 99
- Contact 36
- Content 60
- Cookies 44
- E-commerce (orders) 14
- E-commerce (products) 20
- FAQ 41
- Features 135
- Footers 54
- Graphs 9
- HTTP codes 42
- Hero section 78
- How it works 43
- Logo clouds 85
- Modals 7
- Navbar 28
- Navigation (horizontal) 107
- Navigation (vertical) 2
- Newsletter 40
- Portfolio 46
- Pricing 38
- Reviews 5
- Sign in / Sign up 69
- Stats 44
- Tables 26
- Team 38
- Testimonials 47
- Users 17
Show your workflow and the way you operate with Bulma how it works components. This will help you explain the important steps of the company or department process.
Choose from many variations of Bulma components how it works section. Presented here are variants available in various UI libraries. You will also find many other types of components that will be in the same style. This will allow you to build a comprehensive Bulma website template. Each library has been designed by a professional designer and coded by our team of developers.
Get access to all Bulma components how it works sections, code and our editor. Try the demo for free.
