<section class="is-relative section py-20">
<img class="is-absolute is-top-0 mt-32 is-left-0 is-hidden-mobile" src="zeus-assets/icons/dots/blue-dot-left-bars.svg" alt="">
<img class="is-absolute is-top-0 mt-40 is-right-0 is-hidden-mobile" src="zeus-assets/icons/dots/yellow-dot-right-shield.svg" alt="">
<div class="container">
<div class="has-mw-2xl mx-auto mb-20 has-text-centered">
<span class="is-size-7"><small class="has-text-info has-text-weight-semibold">What's new at Shuffle</small></span>
<h2 class="mt-8 mb-10 title is-2">Lorem ipsum dolor sit amet consectutar domor at elis</h2>
<p class="mb-16 is-size-5 has-text-grey-dark">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
<div class="is-inline-block mx-auto p-1 has-background-light is-rounded">
<button class="button is-ghost px-8 py-5 has-text-dark has-background-white has-text-weight-semibold">Monthly</button>
<button class="button is-ghost px-8 py-5 has-text-grey-dark">Yearly</button>
</div>
</div>
<div class="columns is-vcentered">
<div class="column is-4 mb-6 mb-0-desktop">
<div class="box pt-12 pb-8 px-8 has-text-centered-desktop">
<h3 class="mb-6 title is-6 has-text-grey-dark-light">Starter</h3>
<div class="is-flex is-justify-content-center mb-4">
<span class="is-inline-block mr-1 is-size-5 has-text-grey-dark-light">$</span>
<p class="is-size-1 has-text-weight-semibold">34,99</p>
</div>
<ul class="mb-8 has-text-left">
<li class="is-flex is-align-items-center py-4" style="border-bottom: 1px solid #DADFE9;">
<svg class="mr-2" width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.67 0H14.34C17.73 0 20 2.38 20 5.92V14.091C20 17.62 17.73 20 14.34 20H5.67C2.28 20 0 17.62 0 14.091V5.92C0 2.38 2.28 0 5.67 0ZM9.43 12.99L14.18 8.24C14.52 7.9 14.52 7.35 14.18 7C13.84 6.66 13.28 6.66 12.94 7L8.81 11.13L7.06 9.38C6.72 9.04 6.16 9.04 5.82 9.38C5.48 9.72 5.48 10.27 5.82 10.62L8.2 12.99C8.37 13.16 8.59 13.24 8.81 13.24C9.04 13.24 9.26 13.16 9.43 12.99Z" fill="#45C1FF"></path>
</svg>
<p class="has-text-weight-semibold">Complete documentation</p>
</li>
<li class="is-flex is-align-items-center py-4" style="border-bottom: 1px solid #DADFE9;">
<svg class="mr-2" width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.67 0H14.34C17.73 0 20 2.38 20 5.92V14.091C20 17.62 17.73 20 14.34 20H5.67C2.28 20 0 17.62 0 14.091V5.92C0 2.38 2.28 0 5.67 0ZM9.43 12.99L14.18 8.24C14.52 7.9 14.52 7.35 14.18 7C13.84 6.66 13.28 6.66 12.94 7L8.81 11.13L7.06 9.38C6.72 9.04 6.16 9.04 5.82 9.38C5.48 9.72 5.48 10.27 5.82 10.62L8.2 12.99C8.37 13.16 8.59 13.24 8.81 13.24C9.04 13.24 9.26 13.16 9.43 12.99Z" fill="#45C1FF"></path>
</svg>
<p class="has-text-weight-semibold">Working materials in Figma</p>
</li>
<li class="is-flex is-align-items-center py-4" style="border-bottom: 1px solid #DADFE9;">
<svg class="mr-2" width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.67 0H14.34C17.73 0 20 2.38 20 5.92V14.091C20 17.62 17.73 20 14.34 20H5.67C2.28 20 0 17.62 0 14.091V5.92C0 2.38 2.28 0 5.67 0ZM9.43 12.99L14.18 8.24C14.52 7.9 14.52 7.35 14.18 7C13.84 6.66 13.28 6.66 12.94 7L8.81 11.13L7.06 9.38C6.72 9.04 6.16 9.04 5.82 9.38C5.48 9.72 5.48 10.27 5.82 10.62L8.2 12.99C8.37 13.16 8.59 13.24 8.81 13.24C9.04 13.24 9.26 13.16 9.43 12.99Z" fill="#45C1FF"></path>
</svg>
<p class="has-text-weight-semibold">100GB cloud storage</p>
</li>
<li class="is-flex is-align-items-center py-4">
<svg class="mr-2" width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.67 0H14.34C17.73 0 20 2.38 20 5.92V14.091C20 17.62 17.73 20 14.34 20H5.67C2.28 20 0 17.62 0 14.091V5.92C0 2.38 2.28 0 5.67 0ZM9.43 12.99L14.18 8.24C14.52 7.9 14.52 7.35 14.18 7C13.84 6.66 13.28 6.66 12.94 7L8.81 11.13L7.06 9.38C6.72 9.04 6.16 9.04 5.82 9.38C5.48 9.72 5.48 10.27 5.82 10.62L8.2 12.99C8.37 13.16 8.59 13.24 8.81 13.24C9.04 13.24 9.26 13.16 9.43 12.99Z" fill="#45C1FF"></path>
</svg>
<p class="has-text-weight-semibold">500 team members</p>
</li>
</ul>
<a class="button is-primary is-fullwidth" href="#">Try it now</a>
</div>
</div>
<div class="column is-4 mb-6 mb-0-desktop">
<div class="box pt-12 pb-8 px-8 has-background-danger has-text-centered-desktop">
<h3 class="mb-6 title is-3 has-text-light">Pro</h3>
<div class="is-flex is-justify-content-center mb-4">
<span class="is-inline-block mr-1 is-size-5 has-text-light">$</span>
<p class="is-size-1 has-text-weight-semibold has-text-white">65,99</p>
</div>
<ul class="mb-8 has-text-left">
<li class="is-flex is-align-items-center py-4" style="border-bottom: 1px solid white;">
<svg class="mr-2" width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.67 0H14.34C17.73 0 20 2.38 20 5.92V14.091C20 17.62 17.73 20 14.34 20H5.67C2.28 20 0 17.62 0 14.091V5.92C0 2.38 2.28 0 5.67 0ZM9.43 12.99L14.18 8.24C14.52 7.9 14.52 7.35 14.18 7C13.84 6.66 13.28 6.66 12.94 7L8.81 11.13L7.06 9.38C6.72 9.04 6.16 9.04 5.82 9.38C5.48 9.72 5.48 10.27 5.82 10.62L8.2 12.99C8.37 13.16 8.59 13.24 8.81 13.24C9.04 13.24 9.26 13.16 9.43 12.99Z" fill="#45C1FF"></path>
</svg>
<p class="has-text-weight-semibold has-text-white">Complete documentation</p>
</li>
<li class="is-flex is-align-items-center py-4" style="border-bottom: 1px solid white;">
<svg class="mr-2" width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.67 0H14.34C17.73 0 20 2.38 20 5.92V14.091C20 17.62 17.73 20 14.34 20H5.67C2.28 20 0 17.62 0 14.091V5.92C0 2.38 2.28 0 5.67 0ZM9.43 12.99L14.18 8.24C14.52 7.9 14.52 7.35 14.18 7C13.84 6.66 13.28 6.66 12.94 7L8.81 11.13L7.06 9.38C6.72 9.04 6.16 9.04 5.82 9.38C5.48 9.72 5.48 10.27 5.82 10.62L8.2 12.99C8.37 13.16 8.59 13.24 8.81 13.24C9.04 13.24 9.26 13.16 9.43 12.99Z" fill="#45C1FF"></path>
</svg>
<p class="has-text-weight-semibold has-text-white">Working materials in Figma</p>
</li>
<li class="is-flex is-align-items-center py-4" style="border-bottom: 1px solid white;">
<svg class="mr-2" width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.67 0H14.34C17.73 0 20 2.38 20 5.92V14.091C20 17.62 17.73 20 14.34 20H5.67C2.28 20 0 17.62 0 14.091V5.92C0 2.38 2.28 0 5.67 0ZM9.43 12.99L14.18 8.24C14.52 7.9 14.52 7.35 14.18 7C13.84 6.66 13.28 6.66 12.94 7L8.81 11.13L7.06 9.38C6.72 9.04 6.16 9.04 5.82 9.38C5.48 9.72 5.48 10.27 5.82 10.62L8.2 12.99C8.37 13.16 8.59 13.24 8.81 13.24C9.04 13.24 9.26 13.16 9.43 12.99Z" fill="#45C1FF"></path>
</svg>
<p class="has-text-weight-semibold has-text-white">100GB cloud storage</p>
</li>
<li class="is-flex is-align-items-center py-4" style="border-bottom: 1px solid white;">
<svg class="mr-2" width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.67 0H14.34C17.73 0 20 2.38 20 5.92V14.091C20 17.62 17.73 20 14.34 20H5.67C2.28 20 0 17.62 0 14.091V5.92C0 2.38 2.28 0 5.67 0ZM9.43 12.99L14.18 8.24C14.52 7.9 14.52 7.35 14.18 7C13.84 6.66 13.28 6.66 12.94 7L8.81 11.13L7.06 9.38C6.72 9.04 6.16 9.04 5.82 9.38C5.48 9.72 5.48 10.27 5.82 10.62L8.2 12.99C8.37 13.16 8.59 13.24 8.81 13.24C9.04 13.24 9.26 13.16 9.43 12.99Z" fill="#45C1FF"></path>
</svg>
<p class="has-text-weight-semibold has-text-white">500 team members</p>
</li>
<li class="is-flex is-align-items-center py-4">
<svg class="mr-2" width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.67 0H14.34C17.73 0 20 2.38 20 5.92V14.091C20 17.62 17.73 20 14.34 20H5.67C2.28 20 0 17.62 0 14.091V5.92C0 2.38 2.28 0 5.67 0ZM9.43 12.99L14.18 8.24C14.52 7.9 14.52 7.35 14.18 7C13.84 6.66 13.28 6.66 12.94 7L8.81 11.13L7.06 9.38C6.72 9.04 6.16 9.04 5.82 9.38C5.48 9.72 5.48 10.27 5.82 10.62L8.2 12.99C8.37 13.16 8.59 13.24 8.81 13.24C9.04 13.24 9.26 13.16 9.43 12.99Z" fill="#45C1FF"></path>
</svg>
<p class="has-text-weight-semibold has-text-white">Premium support</p>
</li>
</ul>
<a class="button is-info is-fullwidth" href="#">Try it now</a>
</div>
</div>
<div class="column is-4 mb-6 mb-0-desktop">
<div class="box pt-12 pb-8 px-8 has-text-centered-desktop">
<h3 class="mb-6 title is-6 has-text-grey-dark-light">Premium</h3>
<div class="is-flex is-justify-content-center mb-4">
<span class="is-inline-block mr-1 is-size-5 has-text-grey-dark-light">$</span>
<p class="is-size-1 has-text-weight-semibold">99,99</p>
</div>
<ul class="mb-8 has-text-left">
<li class="is-flex is-align-items-center py-4" style="border-bottom: 1px solid #DADFE9;">
<svg class="mr-2" width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.67 0H14.34C17.73 0 20 2.38 20 5.92V14.091C20 17.62 17.73 20 14.34 20H5.67C2.28 20 0 17.62 0 14.091V5.92C0 2.38 2.28 0 5.67 0ZM9.43 12.99L14.18 8.24C14.52 7.9 14.52 7.35 14.18 7C13.84 6.66 13.28 6.66 12.94 7L8.81 11.13L7.06 9.38C6.72 9.04 6.16 9.04 5.82 9.38C5.48 9.72 5.48 10.27 5.82 10.62L8.2 12.99C8.37 13.16 8.59 13.24 8.81 13.24C9.04 13.24 9.26 13.16 9.43 12.99Z" fill="#45C1FF"></path>
</svg>
<p class="has-text-weight-semibold">Complete documentation</p>
</li>
<li class="is-flex is-align-items-center py-4" style="border-bottom: 1px solid #DADFE9;">
<svg class="mr-2" width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.67 0H14.34C17.73 0 20 2.38 20 5.92V14.091C20 17.62 17.73 20 14.34 20H5.67C2.28 20 0 17.62 0 14.091V5.92C0 2.38 2.28 0 5.67 0ZM9.43 12.99L14.18 8.24C14.52 7.9 14.52 7.35 14.18 7C13.84 6.66 13.28 6.66 12.94 7L8.81 11.13L7.06 9.38C6.72 9.04 6.16 9.04 5.82 9.38C5.48 9.72 5.48 10.27 5.82 10.62L8.2 12.99C8.37 13.16 8.59 13.24 8.81 13.24C9.04 13.24 9.26 13.16 9.43 12.99Z" fill="#45C1FF"></path>
</svg>
<p class="has-text-weight-semibold">Working materials in Figma</p>
</li>
<li class="is-flex is-align-items-center py-4" style="border-bottom: 1px solid #DADFE9;">
<svg class="mr-2" width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.67 0H14.34C17.73 0 20 2.38 20 5.92V14.091C20 17.62 17.73 20 14.34 20H5.67C2.28 20 0 17.62 0 14.091V5.92C0 2.38 2.28 0 5.67 0ZM9.43 12.99L14.18 8.24C14.52 7.9 14.52 7.35 14.18 7C13.84 6.66 13.28 6.66 12.94 7L8.81 11.13L7.06 9.38C6.72 9.04 6.16 9.04 5.82 9.38C5.48 9.72 5.48 10.27 5.82 10.62L8.2 12.99C8.37 13.16 8.59 13.24 8.81 13.24C9.04 13.24 9.26 13.16 9.43 12.99Z" fill="#45C1FF"></path>
</svg>
<p class="has-text-weight-semibold">100GB cloud storage</p>
</li>
<li class="is-flex is-align-items-center py-4" style="border-bottom: 1px solid #DADFE9;">
<svg class="mr-2" width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.67 0H14.34C17.73 0 20 2.38 20 5.92V14.091C20 17.62 17.73 20 14.34 20H5.67C2.28 20 0 17.62 0 14.091V5.92C0 2.38 2.28 0 5.67 0ZM9.43 12.99L14.18 8.24C14.52 7.9 14.52 7.35 14.18 7C13.84 6.66 13.28 6.66 12.94 7L8.81 11.13L7.06 9.38C6.72 9.04 6.16 9.04 5.82 9.38C5.48 9.72 5.48 10.27 5.82 10.62L8.2 12.99C8.37 13.16 8.59 13.24 8.81 13.24C9.04 13.24 9.26 13.16 9.43 12.99Z" fill="#45C1FF"></path>
</svg>
<p class="has-text-weight-semibold">500 team members</p>
</li>
</ul>
<a class="button is-primary is-fullwidth" href="#">Try it now</a>
</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
A well-designed price list determines the conversion rate. That's why in Shuffle Editor we give you access to very many variants of thoughtfully designed Bulma pricing components.
Each Bulma pricing component variant is a UI library component. We select the best designers to create our libraries, and the code underneath them is created by our in-house development team. Therefore, our libraries meet your needs, allowing you to create complete and functional Bulma UI templates.
Get access to all Bulma pricing components, code and our editor. Try the demo for free!
