<section class="section py-20">
<div class="container">
<div class="columns -mb-8">
<div class="column is-3 mb-8 has-text-centered">
<span class="is-flex is-align-items-center is-justify-content-center mb-8 mx-auto has-background-success" style="width: 56px; height: 56px; border-radius: 100%;">
<svg width="18" height="21" viewbox="0 0 18 21" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.98444 19.606C8.98444 19.606 16.6564 17.283 16.6564 10.879C16.6564 4.474 16.9344 3.974 16.3194 3.358C15.7034 2.742 9.99044 0.75 8.98444 0.75C7.97844 0.75 2.26544 2.742 1.65044 3.358C1.03444 3.974 1.31244 4.474 1.31244 10.879C1.31244 17.283 8.98444 19.606 8.98444 19.606Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M6.38586 9.87463L8.27786 11.7696L12.1759 7.86963" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</span>
<h4 class="mb-4 title is-4">600 000 000</h4>
<p class="is-size-5 has-text-grey-dark">Dolor sit amet consectutar</p>
</div>
<div class="column is-3 mb-8 has-text-centered">
<span class="is-flex is-align-items-center is-justify-content-center mb-8 mx-auto has-background-danger" style="width: 56px; height: 56px; border-radius: 100%;">
<svg width="22" height="22" viewbox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.0714 18.0699C15.0152 21.1263 10.4898 21.7867 6.78642 20.074C6.23971 19.8539 5.79148 19.676 5.36537 19.676C4.17849 19.683 2.70117 20.8339 1.93336 20.067C1.16555 19.2991 2.31726 17.8206 2.31726 16.6266C2.31726 16.2004 2.14642 15.7602 1.92632 15.2124C0.212831 11.5096 0.874109 6.98269 3.93026 3.92721C7.8316 0.0244319 14.17 0.0244322 18.0714 3.9262C21.9797 7.83501 21.9727 14.1681 18.0714 18.0699Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M14.9393 11.413H14.9483" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M10.9304 11.413H10.9394" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M6.9214 11.413H6.9304" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</span>
<h4 class="mb-4 title is-4">600 000 000</h4>
<p class="is-size-5 has-text-grey-dark">Dolor sit amet consectutar</p>
</div>
<div class="column is-3 mb-8 has-text-centered">
<span class="is-flex is-align-items-center is-justify-content-center mb-8 mx-auto has-background-warning" style="width: 56px; height: 56px; border-radius: 100%;">
<svg width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13.8325 6.17463L8.10904 11.9592L1.59944 7.88767C0.66675 7.30414 0.860765 5.88744 1.91572 5.57893L17.3712 1.05277C18.3373 0.769629 19.2326 1.67283 18.9456 2.642L14.3731 18.0868C14.0598 19.1432 12.6512 19.332 12.0732 18.3953L8.10601 11.9602" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</span>
<h4 class="mb-4 title is-4">600 000 000</h4>
<p class="is-size-5 has-text-grey-dark">Dolor sit amet consectutar</p>
</div>
<div class="column is-3 mb-8 has-text-centered">
<span class="is-flex is-align-items-center is-justify-content-center mb-8 mx-auto has-background-danger" style="width: 56px; height: 56px; border-radius: 100%;">
<svg width="22" height="20" viewbox="0 0 22 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M1.87187 9.59832C0.798865 6.24832 2.05287 2.41932 5.56987 1.28632C7.41987 0.689322 9.46187 1.04132 10.9999 2.19832C12.4549 1.07332 14.5719 0.693322 16.4199 1.28632C19.9369 2.41932 21.1989 6.24832 20.1269 9.59832C18.4569 14.9083 10.9999 18.9983 10.9999 18.9983C10.9999 18.9983 3.59787 14.9703 1.87187 9.59832Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M15 4.70001C16.07 5.04601 16.826 6.00101 16.917 7.12201" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</span>
<h4 class="mb-4 title is-4">600 000 000</h4>
<p class="is-size-5 has-text-grey-dark">Dolor sit amet consectutar</p>
</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
Component #4
Component #5
Component #6
Component #7
Component #8
Component #9
Component #10
In presenting data, it is important not to bore your audience. When showing larger data sets, it's a good idea to vary the presentation to keep users' attention. You can achieve this with a variety of ways to show data through our Bulma component stats. Highlight the most important data and choose the right presentation for each data type!
Choose from many variations of the Bulma components stats. The variants shown here are available in various UI libraries in the Shuffle editor. 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 is designed by a professional designer and coded by our team of developers.
Get access to all sections of the Bulma components stats, code and our editor. Try the demo for free.
