Bulma Pricing Components (49)

Pricing from Flaro

<section class="has-background-light py-24 is-clipped is-relative">
    <img class="is-absolute is-right-0" style="top: 50%; transform: translateY(-50%);" src="flaro-assets/images/pricing/gradient.svg" alt="">
    <div class="container px-8">
        <div class="columns">
            <div class="column is-6">
                <h2 class="mb-16 title is-size-1 has-text-weight-bold">Pick a plan</h2>
                <h3 class="mb-6 has-text-dark has-text-weight-semibold">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elemen.</h3>
                <p class="has-text-weight-medium has-text-grey">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Volut pat tempor condimentum commodo tincidunt sit dictumst. Eu placerat arcu at sem vitae eros, purus non, eu. Adipiscing vitae amet nunc volutpat sit. Enim eu integer duis arcu.</p>
            </div>
            <div class="column is-6">
                <div class="mx-auto is-clipped" style="border-radius: 20px;">
                    <div class="p-9" style="background: rgba(255, 255, 255, 0.09);">
                        <span class="mb-7 is-inline-block has-text-grey has-text-weight-semibold">Features included:</span>
                        <ul>
                            <li class="mb-4 is-flex is-align-content-center">
                                <svg class="mr-2" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                  <path d="M7.5 10L9.16667 11.6667L12.5 8.33333M17.5 10C17.5 14.1421 14.1421 17.5 10 17.5C5.85786 17.5 2.5 14.1421 2.5 10C2.5 5.85786 5.85786 2.5 10 2.5C14.1421 2.5 17.5 5.85786 17.5 10Z" stroke="#4F46E5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                                </svg>
                                <p class="has-text-weight-semibold has-text-dark">3 Team Members</p>
                            </li>
                            <li class="mb-4 is-flex is-align-content-center">
                                <svg class="mr-2" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                  <path d="M7.5 10L9.16667 11.6667L12.5 8.33333M17.5 10C17.5 14.1421 14.1421 17.5 10 17.5C5.85786 17.5 2.5 14.1421 2.5 10C2.5 5.85786 5.85786 2.5 10 2.5C14.1421 2.5 17.5 5.85786 17.5 10Z" stroke="#4F46E5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                                </svg>
                                <p class="has-text-weight-semibold has-text-dark">1200+ UI Blocks</p>
                            </li>
                            <li class="mb-4 is-flex is-align-content-center">
                                <svg class="mr-2" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                  <path d="M7.5 10L9.16667 11.6667L12.5 8.33333M17.5 10C17.5 14.1421 14.1421 17.5 10 17.5C5.85786 17.5 2.5 14.1421 2.5 10C2.5 5.85786 5.85786 2.5 10 2.5C14.1421 2.5 17.5 5.85786 17.5 10Z" stroke="#4F46E5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                                </svg>
                                <p class="has-text-weight-semibold has-text-dark">10 GB Cloud Storage</p>
                            </li>
                            <li class="mb-4 is-flex is-align-content-center">
                                <svg class="mr-2" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                  <path d="M7.5 10L9.16667 11.6667L12.5 8.33333M17.5 10C17.5 14.1421 14.1421 17.5 10 17.5C5.85786 17.5 2.5 14.1421 2.5 10C2.5 5.85786 5.85786 2.5 10 2.5C14.1421 2.5 17.5 5.85786 17.5 10Z" stroke="#4F46E5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                                </svg>
                                <p class="has-text-weight-semibold has-text-dark">Individual Email Account</p>
                            </li>
                            <li class="is-flex is-align-content-center">
                                <svg class="mr-2" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                  <path d="M7.5 10L9.16667 11.6667L12.5 8.33333M17.5 10C17.5 14.1421 14.1421 17.5 10 17.5C5.85786 17.5 2.5 14.1421 2.5 10C2.5 5.85786 5.85786 2.5 10 2.5C14.1421 2.5 17.5 5.85786 17.5 10Z" stroke="#4F46E5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                                </svg>
                                <p class="has-text-weight-semibold has-text-dark">Premium Support</p>
                            </li>
                        </ul>
                    </div>
                    <div class="p-9 has-background-white">
                        <div class="is-flex is-flex-wrap-wrap is-justify-content-space-between -m-2">
                            <div class="p-2">
                                <span class="mb-2 is-inline-block has-text-grey has-text-weight-semibold is-uppercase">Pro Package</span>
                                <p class="has-text-dark has-text-weight-semibold">Best for Startups &amp; Small Businesses</p>
                            </div>
                            <div class="p-2">
                                <p class="has-text-weight-bold has-text-dark">
                                    <span class="is-size-3">$49</span>
                                    <span class="has-text-grey">/mo</span>
                                </p>
                                <p class="has-text-weight-medium has-text-grey">Billed anually</p>
                            </div>
                        </div>
                        <div class="mt-9">
                            <a href="#" class="py-4 px-5 is-fullwidth has-text-white has-text-weight-semibold button is-link">Start 14 days free trial</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

Your next website starts here

Design with AI and generate multiple website concepts in minutes. Make it yours with Shuffle: tweak every detail in a visual editor.

Start with Multi-AI Designer

A landing page for a specialty coffee roastery|

Claude

GPT

Gemini

Describe your idea and compare designs from multiple AI models side by side. Try AI Design

Start with Visual Editor

Components Navigations Headers Features Pricing Footers

Header

Build from 13,400+ UI components and templates, then customize every detail. Try Visual Editor

EXPORT CODE TO THE TECH YOU LOVE

Next.js

Tailwind CSS

shadcn/ui

Laravel

WordPress

Shopify

Next.js

Tailwind CSS

shadcn/ui

Laravel

WordPress

Shopify

Pricing from Zeus

Bulma

Zeus

<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&apos;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>

Pricing from Pstls.

Bulma

Pstls.

<section class="section py-24 has-background-white">
  <div class="container">
    <div class="has-mw-xl mx-auto mb-16 has-text-centered">
      <h1 class="title is-size-2-mobile is-size-1-tablet is-spaced">Choose a plan</h1>
      <p class="subtitle">If you have ever wondered how to develop your brand, this is the place for you. Take a big step forward in growing your business with this great tool.</p>
    </div>
    <div class="columns is-multiline is-vcentered">
      <div class="column is-12-touch is-4-desktop">
        <div class="has-mw-md mx-auto p-8-touch p-8-desktop p-12-widescreen has-background-primary-light">
          <div class="mb-12 is-flex is-justify-content-space-between is-align-items-flex-end">
            <h2 class="title is-size-3 mb-0">Free</h2>
            <h5 class="title is-size-5 is-size-4-widescreen has-text-primary mb-0">$0,00</h5>
          </div>
          <ul class="mb-10">
            <li class="mb-2 is-flex">
              <img class="mr-2" src="pstls-assets/icons/pricing-1-check-circle.svg" alt="">
              <span>1 component categorie</span>
            </li>
            <li class="mb-2 is-flex">
              <img class="mr-2" src="pstls-assets/icons/pricing-1-check-circle.svg" alt="">
              <span>1 mobile component</span>
            </li>
            <li class="is-flex">
              <img class="mr-2" src="pstls-assets/icons/pricing-1-check-circle.svg" alt="">
              <span>1 Key Visual</span>
            </li>
          </ul>
          <a class="button is-dark is-fullwidth" href="#">Try for Free</a>
        </div>
      </div>
      <div class="column is-12-touch is-4-desktop">
        <div class="has-mw-md mx-auto p-8-touch p-8-desktop p-12-widescreen has-background-black">
          <div class="mb-12 is-flex is-justify-content-space-between is-align-items-flex-end">
            <h2 class="title is-size-3 mb-0 has-text-white">Premium</h2>
            <h5 class="title is-size-5 is-size-4-widescreen has-text-primary mb-0">$55,00</h5>
          </div>
          <ul class="mb-10">
            <li class="has-text-white mb-2 is-flex">
              <img class="mr-2" src="pstls-assets/icons/pricing-1-check-circle.svg" alt="">
              <span>3 component categorie</span>
            </li>
            <li class="has-text-white mb-2 is-flex">
              <img class="mr-2" src="pstls-assets/icons/pricing-1-check-circle.svg" alt="">
              <span>3 mobile component</span>
            </li>
            <li class="has-text-white mb-2 is-flex">
              <img class="mr-2" src="pstls-assets/icons/pricing-1-check-circle.svg" alt="">
              <span>3 Key Visual</span>
            </li>
            <li class="has-text-white mb-2 is-flex">
              <img class="mr-2" src="pstls-assets/icons/pricing-1-check-circle.svg" alt="">
              <span>Popular frameworks support</span>
            </li>
            <li class="has-text-white is-flex">
              <img class="mr-2" src="pstls-assets/icons/pricing-1-check-circle.svg" alt="">
              <span>Infinite content</span>
            </li>
          </ul>
          <a class="button is-primary is-fullwidth" href="#">Buy Now</a>
        </div>
      </div>
      <div class="column is-12-touch is-4-desktop">
        <div class="has-mw-md mx-auto p-8-touch p-8-desktop p-12-widescreen has-background-primary-light">
          <div class="mb-12 is-flex is-justify-content-space-between is-align-items-flex-end">
            <h2 class="title is-size-3 mb-0">Basic</h2>
            <h5 class="title is-size-5 is-size-4-widescreen has-text-primary mb-0">$25,00</h5>
          </div>
          <ul class="mb-10">
            <li class="mb-2 is-flex">
              <img class="mr-2" src="pstls-assets/icons/pricing-1-check-circle.svg" alt="">
              <span>3 component categorie</span>
            </li>
            <li class="mb-2 is-flex">
              <img class="mr-2" src="pstls-assets/icons/pricing-1-check-circle.svg" alt="">
              <span>3 mobile component</span>
            </li>
            <li class="is-flex">
              <img class="mr-2" src="pstls-assets/icons/pricing-1-check-circle.svg" alt="">
              <span>3 Key Visual</span>
            </li>
          </ul>
          <a class="button is-dark is-fullwidth" href="#">Buy Now</a>
        </div>
      </div>
    </div>
  </div>
</section>

Pricing from Acros

Bulma

Acros

<section class="section py-16 has-background-white-ter">
  <div class="container">
    <small class="mb-2 is-block is-uppercase has-text-weight-semibold">Pricing</small>
    <div class="columns is-6 mb-11 is-align-items-center">
      <div class="column mb-6 mb-0-tablet">
        <h2 class="title">Lorem ipsum dolor sit amet consectutar domor at elis</h2>
      </div>
      <div class="column is-6 is-flex-tablet is-justify-content-end">
        <div class="is-inline-block p-2 has-background-light" style="border-radius: 4px;"><a class="button is-white px-8 py-6 mb-0 has-text-primary has-background-white has-text-weight-semibold" style="border-radius: 2px; ">Monthly</a><a class="button is-light px-8 py-6 has-text-grey-dark text-decoration-none" style="border-radius: 2px;">Yearly</a></div>
      </div>
    </div>
    <div class="columns has-mw-5xl mx-auto is-align-items-center">
      <div class="column has-text-centered has-background-white p-8 mb-12 mb-0-tablet" style="border-radius: 6px;">
        <h5 class="mb-2 title is-size-5 has-text-weight-medium">Starter</h5>
        <h3 class="title is-size-3 has-text-weight-medium mb-20 is-flex is-justify-content-center">
          <span class="is-size-6 mr-1 mt-1">$</span>
          9,99
        </h3>
        <ul class="mb-8">
          <li class="mb-2 is-flex is-align-items-center has-grey-darker">
            <img class="mr-3" src="acros-assets/icons/pricing/check-circle.svg" alt="">
            <small>Complete documentation</small>
          </li>
          <li class="mb-2 is-flex is-align-items-center has-grey-darker">
            <img class="mr-3" src="acros-assets/icons/pricing/check-circle.svg" alt="">
            <small>Working materials in Figma</small>
          </li>
          <li class="mb-2 is-flex is-align-items-center has-grey-darker">
            <img class="mr-3" src="acros-assets/icons/pricing/check-circle.svg" alt="">
            <small>100GB cloud storage</small>
          </li>
          <li class="is-flex is-align-items-center has-grey-darker">
            <img class="mr-3" src="acros-assets/icons/pricing/check-circle.svg" alt="">
            <small>500 team members</small>
          </li>
        </ul>
        <div class="buttons"><a class="button button is-primary is-outlined py-7 is-fullwidth" href="#">Get started</a></div>
      </div>
      <div class="column is-relative has-text-centered has-background-grey-darker p-8 px-10 py-12 mb-12 mb-0-tablet" style="border-radius: 6px;">
        <img class="is-absolute is-left-0 is-top-0" style="top: -4px; left: -4px;" src="acros-assets/icons/pricing/bestseller.svg" alt="">
        <h5 class="mb-2 title is-size-5 has-text-weight-medium has-text-white">Pro</h5>
        <h3 class="title is-size-3 has-text-weight-medium has-text-white mb-20 is-flex is-justify-content-center">
          <span class="is-size-6 mr-1 mt-1">$</span>
          14.99
        </h3>
        <ul class="mb-8">
          <li class="mb-2 is-flex is-align-items-center has-text-white">
            <img class="mr-3" src="acros-assets/icons/pricing/check-circle.svg" alt="">
            <small>Complete documentation</small>
          </li>
          <li class="mb-2 is-flex is-align-items-center has-text-white">
            <img class="mr-3" src="acros-assets/icons/pricing/check-circle.svg" alt="">
            <small>Working materials in Figma</small>
          </li>
          <li class="mb-2 is-flex is-align-items-center has-text-white">
            <img class="mr-3" src="acros-assets/icons/pricing/check-circle.svg" alt="">
            <small>100GB cloud storage</small>
          </li>
          <li class="mb-2 is-flex is-align-items-center has-text-white">
            <img class="mr-3" src="acros-assets/icons/pricing/check-circle.svg" alt="">
            <small>500 team members</small>
          </li>
          <li class="is-flex is-align-items-center has-text-white">
            <img class="mr-3" src="acros-assets/icons/pricing/check-circle.svg" alt="">
            <small>Premium support</small>
          </li>
        </ul>
        <div class="buttons"><a class="button button is-white py-7 is-fullwidth" href="#">Get started</a></div>
      </div>
      <div class="column has-text-centered has-background-white p-8" style="border-radius: 6px;">
        <h5 class="mb-2 title is-size-5 has-text-weight-medium">Premium</h5>
        <h3 class="title is-size-3 has-text-weight-medium mb-20 is-flex is-justify-content-center">
          <span class="is-size-6 mr-1 mt-1">$</span>
          19,99
        </h3>
        <ul class="mb-8">
          <li class="mb-2 is-flex is-align-items-center has-grey-darker">
            <img class="mr-3" src="acros-assets/icons/pricing/check-circle.svg" alt="">
            <small>Complete documentation</small>
          </li>
          <li class="mb-2 is-flex is-align-items-center has-grey-darker">
            <img class="mr-3" src="acros-assets/icons/pricing/check-circle.svg" alt="">
            <small>Working materials in Figma</small>
          </li>
          <li class="mb-2 is-flex is-align-items-center has-grey-darker">
            <img class="mr-3" src="acros-assets/icons/pricing/check-circle.svg" alt="">
            <small>100GB cloud storage</small>
          </li>
          <li class="is-flex is-align-items-center has-grey-darker">
            <img class="mr-3" src="acros-assets/icons/pricing/check-circle.svg" alt="">
            <small>500 team members</small>
          </li>
        </ul>
        <div class="buttons"><a class="button button is-primary py-7 is-fullwidth" href="#">Get started</a></div>
      </div>
    </div>
  </div>
</section>

Pricing from Bendis

Bulma

Bendis

<section class="section py-24 has-background-primary">
  <div class="container">
    <div class="has-mw-2xl mx-auto has-text-centered mb-16">
      <span class="is-block has-text-info has-text-weight-semibold is-uppercase has-letter-space mb-4">Lorem ipsum</span>
      <h1 class="title is-size-3 has-leading-3 has-text-white">Take quick action that increases your brand&apos;s regular profit.</h1>
      <p class="subtitle is-size-5 has-leading-4 has-text-white mt-6 mb-10">If you have ever wondered how to develop your brand, this is the place for you. Take a big step forward in growing your business with this great tool.</p>
      <div class="buttons is-centered"><a class="button py-3 is-size-6 is-white" href="#">Monthly</a><a class="button py-3 is-size-6 is-dark" href="#">Yearly</a></div>
    </div>
    <div class="columns is-multiline">
      <div class="column is-12 is-4-widescreen">
        <div class="is-relative has-mw-md mx-auto is-fullheight pt-20 pb-10 px-10 has-background-dark">
          <div class="is-absolute is-top-0 is-left-0 is-inline-flex pl-12 pr-6 py-3 is-align-items-center has-background-info-dark has-text-weight-semibold is-uppercase clip-path-right-top-sm" style="width: 190px;">
            <span class="is-size-7 has-letter-space has-text-white">Starter</span>
          </div>
          <div class="is-flex is-flex-wrap-wrap is-align-items-end mb-8">
            <h3 class="is-flex is-align-items-start has-text-white has-text-weight-semibold">
              <span class="is-size-1">$34</span>
              <span class="is-size-3">99</span>
            </h3>
            <small class="pl-4 pb-3 has-text-info">/per month</small>
          </div>
          <ul class="mb-6">
            <li class="mb-4">
              <span class="mr-4 has-text-info">
                <svg width="20" height="15" viewbox="0 0 20 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M6.775 10.9984L17.975 0L20 1.98854L6.775 15L0 8.37152L2.05 6.35843L6.775 10.9984Z" fill="currentColor"></path>
                </svg>
              </span>
              <span class="has-text-white">Complete documentation</span>
            </li>
            <li class="mb-4">
              <span class="mr-4 has-text-info">
                <svg width="20" height="15" viewbox="0 0 20 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M6.775 10.9984L17.975 0L20 1.98854L6.775 15L0 8.37152L2.05 6.35843L6.775 10.9984Z" fill="currentColor"></path>
                </svg>
              </span>
              <span class="has-text-white">Working materials in Figma</span>
            </li>
            <li class="mb-4">
              <span class="mr-4 has-text-info">
                <svg width="20" height="15" viewbox="0 0 20 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M6.775 10.9984L17.975 0L20 1.98854L6.775 15L0 8.37152L2.05 6.35843L6.775 10.9984Z" fill="currentColor"></path>
                </svg>
              </span>
              <span class="has-text-white">100GB cloud storage</span>
            </li>
            <li class="mb-4">
              <span class="mr-4 has-text-info">
                <svg width="20" height="15" viewbox="0 0 20 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M6.775 10.9984L17.975 0L20 1.98854L6.775 15L0 8.37152L2.05 6.35843L6.775 10.9984Z" fill="currentColor"></path>
                </svg>
              </span>
              <span class="has-text-white">100GB cloud storage</span>
            </li>
            <li>
              <span class="mr-4 has-text-info">
                <svg width="20" height="15" viewbox="0 0 20 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M6.775 10.9984L17.975 0L20 1.98854L6.775 15L0 8.37152L2.05 6.35843L6.775 10.9984Z" fill="currentColor"></path>
                </svg>
              </span>
              <span class="has-text-white">500 team members</span>
            </li>
          </ul>
          <a class="button is-fullwidth is-outlined is-white is-uppercase" href="#">Try demo</a>
        </div>
      </div>
      <div class="column is-12 is-4-widescreen">
        <div class="is-relative has-mw-md mx-auto is-fullheight pt-20 pb-10 px-10 has-background-primary-dark">
          <div class="is-absolute is-top-0 is-left-0 is-inline-flex pl-16 pr-6 py-3 is-align-items-center has-background-dark has-text-weight-semibold is-uppercase clip-path-right-top-sm" style="width: 190px;">
            <span class="is-size-7 has-letter-space has-text-white">Pro</span>
          </div>
          <div class="is-flex is-flex-wrap-wrap is-align-items-end mb-8">
            <h3 class="is-flex is-align-items-start has-text-white has-text-weight-semibold">
              <span class="is-size-1">$65</span>
              <span class="is-size-3">99</span>
            </h3>
            <small class="pl-4 pb-3 has-text-info">/per month</small>
          </div>
          <ul class="mb-6">
            <li class="mb-4">
              <span class="mr-4 has-text-info">
                <svg width="20" height="15" viewbox="0 0 20 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M6.775 10.9984L17.975 0L20 1.98854L6.775 15L0 8.37152L2.05 6.35843L6.775 10.9984Z" fill="currentColor"></path>
                </svg>
              </span>
              <span class="has-text-white">Complete documentation</span>
            </li>
            <li class="mb-4">
              <span class="mr-4 has-text-info">
                <svg width="20" height="15" viewbox="0 0 20 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M6.775 10.9984L17.975 0L20 1.98854L6.775 15L0 8.37152L2.05 6.35843L6.775 10.9984Z" fill="currentColor"></path>
                </svg>
              </span>
              <span class="has-text-white">Working materials in Figma</span>
            </li>
            <li class="mb-4">
              <span class="mr-4 has-text-info">
                <svg width="20" height="15" viewbox="0 0 20 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M6.775 10.9984L17.975 0L20 1.98854L6.775 15L0 8.37152L2.05 6.35843L6.775 10.9984Z" fill="currentColor"></path>
                </svg>
              </span>
              <span class="has-text-white">100GB cloud storage</span>
            </li>
            <li class="mb-4">
              <span class="mr-4 has-text-info">
                <svg width="20" height="15" viewbox="0 0 20 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M6.775 10.9984L17.975 0L20 1.98854L6.775 15L0 8.37152L2.05 6.35843L6.775 10.9984Z" fill="currentColor"></path>
                </svg>
              </span>
              <span class="has-text-white">100GB cloud storage</span>
            </li>
            <li>
              <span class="mr-4 has-text-info">
                <svg width="20" height="15" viewbox="0 0 20 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M6.775 10.9984L17.975 0L20 1.98854L6.775 15L0 8.37152L2.05 6.35843L6.775 10.9984Z" fill="currentColor"></path>
                </svg>
              </span>
              <span class="has-text-white">500 team members</span>
            </li>
          </ul>
          <a class="button is-fullwidth is-warning" href="#">Try demo</a>
        </div>
      </div>
      <div class="column is-12 is-4-widescreen">
        <div class="is-relative has-mw-md mx-auto is-fullheight pt-20 pb-10 px-10 has-background-dark">
          <div class="is-absolute is-top-0 is-left-0 is-inline-flex pl-12 pr-6 py-3 is-align-items-center has-background-info-dark has-text-weight-semibold is-uppercase clip-path-right-top-sm" style="width: 190px;">
            <span class="is-size-7 has-letter-space has-text-white">Premium</span>
          </div>
          <div class="is-flex is-flex-wrap-wrap is-align-items-end mb-8">
            <h3 class="is-flex is-align-items-start has-text-white has-text-weight-semibold">
              <span class="is-size-1">$99</span>
              <span class="is-size-3">99</span>
            </h3>
            <small class="pl-4 pb-3 has-text-info">/per month</small>
          </div>
          <ul class="mb-6">
            <li class="mb-4">
              <span class="mr-4 has-text-info">
                <svg width="20" height="15" viewbox="0 0 20 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M6.775 10.9984L17.975 0L20 1.98854L6.775 15L0 8.37152L2.05 6.35843L6.775 10.9984Z" fill="currentColor"></path>
                </svg>
              </span>
              <span class="has-text-white">Complete documentation</span>
            </li>
            <li class="mb-4">
              <span class="mr-4 has-text-info">
                <svg width="20" height="15" viewbox="0 0 20 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M6.775 10.9984L17.975 0L20 1.98854L6.775 15L0 8.37152L2.05 6.35843L6.775 10.9984Z" fill="currentColor"></path>
                </svg>
              </span>
              <span class="has-text-white">Working materials in Figma</span>
            </li>
            <li class="mb-4">
              <span class="mr-4 has-text-info">
                <svg width="20" height="15" viewbox="0 0 20 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M6.775 10.9984L17.975 0L20 1.98854L6.775 15L0 8.37152L2.05 6.35843L6.775 10.9984Z" fill="currentColor"></path>
                </svg>
              </span>
              <span class="has-text-white">100GB cloud storage</span>
            </li>
            <li class="mb-4">
              <span class="mr-4 has-text-info">
                <svg width="20" height="15" viewbox="0 0 20 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M6.775 10.9984L17.975 0L20 1.98854L6.775 15L0 8.37152L2.05 6.35843L6.775 10.9984Z" fill="currentColor"></path>
                </svg>
              </span>
              <span class="has-text-white">100GB cloud storage</span>
            </li>
            <li>
              <span class="mr-4 has-text-info">
                <svg width="20" height="15" viewbox="0 0 20 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M6.775 10.9984L17.975 0L20 1.98854L6.775 15L0 8.37152L2.05 6.35843L6.775 10.9984Z" fill="currentColor"></path>
                </svg>
              </span>
              <span class="has-text-white">500 team members</span>
            </li>
          </ul>
          <a class="button is-fullwidth is-outlined is-white is-uppercase" href="#">Try demo</a>
        </div>
      </div>
    </div>
  </div>
</section>

Pricing from Metis

Bulma

Metis

<section class="section is-background-no-repeat is-background-contain" style="background-image: url('metis-assets/backgrounds/intersect.svg');">
  <div class="container">
    <div class="has-text-centered mb-6">
      <h2 class="title is-spaced is-max-w-lg mx-auto">
        <span>Start saving time today and</span>
        <span class="has-text-primary">choose</span>
        <span>your best plan</span>
      </h2>
      <p class="subtitle is-max-w-sm mx-auto">Best for freelance developers who need to save their time.</p>
    </div>
    <div class="columns is-multiline">
      <div class="column is-6 is-4-desktop">
        <div class="py-6 box has-text-centered">
          <img class="image is-96x96 mx-auto" src="metis-assets/illustrations/people.png" alt="">
          <h3 class="title is-size-3 my-3">Begginer</h3>
          <span class="title is-size-3 is-spaced has-text-primary">$32.99</span>
          <p class="subtitle">user per month</p>
          <div class="mb-6 is-flex is-justify-content-center">
            <ul>
              <li class="mb-2 is-flex">
                <svg class="mr-2 image is-24x24 has-text-success" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
                <span class="has-text-grey">3 Emails</span>
              </li>
              <li class="mb-2 is-flex">
                <svg class="mr-2 image is-24x24 has-text-success" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
                <span class="has-text-grey">1 Datebases</span>
              </li>
              <li class="mb-2 is-flex">
                <svg class="mr-2 image is-24x24 has-text-success" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
                <span class="has-text-grey">Unlimited Domains</span>
              </li>
              <li class="is-flex">
                <svg class="mr-2 image is-24x24 has-text-success" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
                <span class="has-text-grey">10 GB Storage</span>
              </li>
            </ul>
          </div>
          <div class="buttons is-centered"><a class="button is-primary" href="#">Start Free Trial</a><a class="button is-dark is-outlined" href="#">Purchase</a></div>
        </div>
      </div>
      <div class="column is-6 is-4-desktop">
        <div class="py-6 box has-background-primary has-text-centered">
          <img class="image is-96x96 mx-auto" src="metis-assets/illustrations/job-interview.png" alt="">
          <h3 class="title is-size-3 my-3 has-text-white">Intermediate</h3>
          <span class="title is-size-3 is-spaced has-text-white">$55.99</span>
          <p class="subtitle">user per month</p>
          <div class="mb-6 is-flex is-justify-content-center">
            <ul>
              <li class="mb-2 is-flex">
                <svg class="mr-2 image is-24x24 has-text-success" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
                <span class="has-text-white-bis">6 Emails</span>
              </li>
              <li class="mb-2 is-flex">
                <svg class="mr-2 image is-24x24 has-text-success" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
                <span class="has-text-white-bis">4 Datebases</span>
              </li>
              <li class="mb-2 is-flex">
                <svg class="mr-2 image is-24x24 has-text-success" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
                <span class="has-text-white-bis">Unlimited Domains</span>
              </li>
              <li class="is-flex">
                <svg class="mr-2 image is-24x24 has-text-success" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
                <span class="has-text-white-bis">35 GB Storage</span>
              </li>
            </ul>
          </div>
          <div class="buttons is-centered"><a class="button is-light mr-2" href="#">Start Free Trial</a><a class="button is-light is-outlined" href="#">Purchase</a></div>
        </div>
      </div>
      <div class="column is-12 is-4-desktop">
        <div class="py-6 box has-text-centered">
          <img class="image is-96x96 mx-auto" src="metis-assets/illustrations/team-management.png" alt="">
          <h3 class="title is-size-3 my-3">Professional</h3>
          <span class="title is-size-3 is-spaced has-text-primary">$62.99</span>
          <p class="subtitle">user per month</p>
          <div class="mb-6 is-flex is-justify-content-center">
            <ul>
              <li class="mb-2 is-flex">
                <svg class="mr-2 image is-24x24 has-text-success" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
                <span class="has-text-grey">12 Emails</span>
              </li>
              <li class="mb-2 is-flex">
                <svg class="mr-2 image is-24x24 has-text-success" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
                <span class="has-text-grey">8 Datebases</span>
              </li>
              <li class="mb-2 is-flex">
                <svg class="mr-2 image is-24x24 has-text-success" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
                <span class="has-text-grey">Unlimited Domains</span>
              </li>
              <li class="is-flex">
                <svg class="mr-2 image is-24x24 has-text-success" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
                <span class="has-text-grey">50 GB Storage</span>
              </li>
            </ul>
          </div>
          <div class="buttons is-centered"><a class="button is-primary" href="#">Start Free Trial</a><a class="button is-dark is-outlined" href="#">Purchase</a></div>
        </div>
      </div>
    </div>
  </div>
</section>

Pricing from Cronos

Bulma

Cronos

<section class="section">
  <div class="container">
    <div class="has-mw-xl mx-auto mb-12 has-text-centered">
      <span class="tag is-warning is-light">Lorem ipsum</span>
      <h2 class="my-6 title is-size-2 is-spaced">Lorem ipsum dolor sit amet consectutar</h2>
      <p class="subtitle mb-8">If you have ever wondered how to develop your brand, this is the place for you. Take a big step forward in growing your business with this great tool.</p>
      <div><a class="px-8 pb-4 has-text-dark has-text-weight-bold" style="border-bottom: 2px solid #006251" href="#">Monthly</a><a class="px-8 pb-4" href="#">Yearly</a></div>
    </div>
    <div class="is-vcentered columns is-multiline">
      <div class="column is-12 is-4-desktop mb-5 mb-0-desktop">
        <div class="p-6 has-mw-xl mx-auto has-text-centered has-background-light">
          <h6 class="mb-4 is-size-4 has-text-weight-bold">Starter</h6>
          <h2 class="title is-size-2 has-text-primary is-spaced mb-6">$34,99</h2>
          <ul class="mb-6">
            <li class="mb-2 is-flex is-align-items-center">
              <svg class="has-text-primary mr-2" width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z" stroke="#006251" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M8 11.5L11 14.5L17 8.5" stroke="#006251" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
              <p class="has-text-grey-dark mb-0">Complete documentation</p>
            </li>
            <li class="mb-2 is-flex is-align-items-center">
              <svg class="has-text-primary mr-2" width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z" stroke="#006251" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M8 11.5L11 14.5L17 8.5" stroke="#006251" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
              <p class="has-text-grey-dark mb-0">Working materials in Figma</p>
            </li>
            <li class="mb-2 is-flex is-align-items-center">
              <svg class="has-text-primary mr-2" width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z" stroke="#006251" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M8 11.5L11 14.5L17 8.5" stroke="#006251" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
              <p class="has-text-grey-dark mb-0">100GB cloud storage</p>
            </li>
            <li class="is-flex is-align-items-center">
              <svg class="has-text-primary mr-2" width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z" stroke="#006251" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M8 11.5L11 14.5L17 8.5" stroke="#006251" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
              <p class="has-text-grey-dark mb-0">500 team members</p>
            </li>
          </ul>
          <a class="button is-primary is-fullwidth" href="#">Start Now</a>
        </div>
      </div>
      <div class="column is-12 is-4-desktop mb-5 mb-0-desktop">
        <div class="p-6 has-mw-xl mx-auto has-background-primary has-text-centered">
          <h6 class="is-size-4 has-text-weight-bold has-text-light mb-4">Pro</h6>
          <h2 class="title is-size-2 has-text-white is-spaced mb-6">$65,99</h2>
          <ul class="mb-6">
            <li class="mb-2 is-flex is-align-items-center">
              <svg class="has-text-info mr-2" width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z" stroke="#99C0B9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M8 11.5L11 14.5L17 8.5" stroke="#99C0B9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
              <p class="has-text-white mb-0">Complete documentation</p>
            </li>
            <li class="mb-2 is-flex is-align-items-center">
              <svg class="has-text-info mr-2" width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z" stroke="#99C0B9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M8 11.5L11 14.5L17 8.5" stroke="#99C0B9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
              <p class="has-text-white mb-0">Working materials in Figma</p>
            </li>
            <li class="mb-2 is-flex is-align-items-center">
              <svg class="has-text-info mr-2" width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z" stroke="#99C0B9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M8 11.5L11 14.5L17 8.5" stroke="#99C0B9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
              <p class="has-text-white mb-0">100GB cloud storage</p>
            </li>
            <li class="mb-2 is-flex is-align-items-center">
              <svg class="has-text-info mr-2" width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z" stroke="#99C0B9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M8 11.5L11 14.5L17 8.5" stroke="#99C0B9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
              <p class="has-text-white mb-0">500 team members</p>
            </li>
            <li class="is-flex is-align-items-center">
              <svg class="has-text-info mr-2" width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z" stroke="#99C0B9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M8 11.5L11 14.5L17 8.5" stroke="#99C0B9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
              <p class="has-text-white mb-0">Premium support</p>
            </li>
          </ul>
          <a class="button is-light is-fullwidth" href="#">Start Now</a>
        </div>
      </div>
      <div class="column is-12 is-4-desktop">
        <div class="p-6 has-mw-xl mx-auto has-text-centered has-background-light">
          <h6 class="is-size-4 has-text-weight-bold mb-4">Premium</h6>
          <h2 class="title is-size-2 has-text-primary has-text-primary is-spaced mb-6">$99,99</h2>
          <ul class="mb-6">
            <li class="mb-2 is-flex is-align-items-center">
              <svg class="has-text-primary mr-2" width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z" stroke="#006251" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M8 11.5L11 14.5L17 8.5" stroke="#006251" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
              <p class="has-text-grey-dark mb-0">Complete documentation</p>
            </li>
            <li class="mb-2 is-flex is-align-items-center">
              <svg class="has-text-primary mr-2" width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z" stroke="#006251" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M8 11.5L11 14.5L17 8.5" stroke="#006251" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
              <p class="has-text-grey-dark mb-0">Working materials in Figma</p>
            </li>
            <li class="mb-2 is-flex is-align-items-center">
              <svg class="has-text-primary mr-2" width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z" stroke="#006251" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M8 11.5L11 14.5L17 8.5" stroke="#006251" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
              <p class="has-text-grey-dark mb-0">100GB cloud storage</p>
            </li>
            <li class="is-flex is-align-items-center">
              <svg class="has-text-primary mr-2" width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z" stroke="#006251" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M8 11.5L11 14.5L17 8.5" stroke="#006251" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
              <p class="has-text-grey-dark mb-0">500 team members</p>
            </li>
          </ul>
          <a class="button is-primary is-fullwidth" href="#">Start Now</a>
        </div>
      </div>
    </div>
  </div>
</section>

Pricing from Plain

Bulma

Plain

<section class="section">
  <div class="container">
    <div class="columns is-centered">
      <div class="column is-10 is-8-desktop mb-5 has-text-centered">
        <span class="has-text-grey-dark">Lorem ipsum</span>
        <h2 class="mt-2 mb-4 is-size-1 is-size-3-mobile has-text-weight-bold">Lorem ipsum dolor sit amet consectutar domor at elis</h2>
        <p class="subtitle has-text-grey mb-5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
        <div class="buttons is-centered"><a class="button is-primary" href="#">Monthly</a><a class="button" href="#">Yearly</a></div>
      </div>
    </div>
    <div class="is-vcentered columns is-multiline">
      <div class="column is-6 is-4-desktop mb-5">
        <div class="box has-background-light has-text-centered">
          <h4 class="has-text-grey-dark">Starter</h4>
          <span class="mb-5 is-inline-block is-size-1 is-size-3-mobile has-text-weight-bold">$34,99</span>
          <ul class="mb-5">
            <li class="mb-3 is-flex is-align-items-center">
              <svg class="has-text-grey mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor" style="width: 24px;height: 24px">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
              </svg>
              <p class="mb-0">Complete documentation</p>
            </li>
            <li class="mb-3 is-flex is-align-items-center">
              <svg class="has-text-grey mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor" style="width: 24px;height: 24px">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
              </svg>
              <p class="mb-0">Working materials in Figma</p>
            </li>
            <li class="mb-3 is-flex is-align-items-center">
              <svg class="has-text-grey mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor" style="width: 24px;height: 24px">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
              </svg>
              <p class="mb-0">100GB cloud storage</p>
            </li>
            <li class="mb-3 is-flex is-align-items-center">
              <svg class="has-text-grey mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor" style="width: 24px;height: 24px">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
              </svg>
              <p class="mb-0">500 team members</p>
            </li>
          </ul>
          <a class="button is-primary is-fullwidth" href="#">Action</a>
        </div>
      </div>
      <div class="column is-6 is-4-desktop mb-5">
        <div class="box has-background-primary has-text-centered">
          <h4 class="has-text-white">Pro</h4>
          <span class="has-text-white mb-5 is-inline-block is-size-1 is-size-3-mobile has-text-weight-bold">$65,99</span>
          <ul class="mb-5">
            <li class="mb-3 is-flex is-align-items-center">
              <svg class="has-text-light mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor" style="width: 24px;height: 24px">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
              </svg>
              <p class="has-text-white mb-0">Complete documentation</p>
            </li>
            <li class="mb-3 is-flex is-align-items-center">
              <svg class="has-text-light mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor" style="width: 24px;height: 24px">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
              </svg>
              <p class="has-text-white mb-0">Working materials in Figma</p>
            </li>
            <li class="mb-3 is-flex is-align-items-center">
              <svg class="has-text-light mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor" style="width: 24px;height: 24px">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
              </svg>
              <p class="has-text-white mb-0">100GB cloud storage</p>
            </li>
            <li class="mb-3 is-flex is-align-items-center">
              <svg class="has-text-light mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor" style="width: 24px;height: 24px">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
              </svg>
              <p class="has-text-white mb-0">500 team members</p>
            </li>
            <li class="mb-3 is-flex is-align-items-center">
              <svg class="has-text-light mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor" style="width: 24px;height: 24px">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
              </svg>
              <p class="has-text-white mb-0">Premium support</p>
            </li>
          </ul>
          <a class="button is-light is-fullwidth has-text-centered" href="#">Action</a>
        </div>
      </div>
      <div class="column is-12 is-4-desktop mb-5">
        <div class="box has-background-light has-text-centered">
          <h4 class="has-text-grey-dark">Premium</h4>
          <span class="mb-5 is-inline-block is-size-1 is-size-3-mobile has-text-weight-bold">$99,99</span>
          <ul class="mb-5">
            <li class="mb-3 is-flex is-align-items-center">
              <svg class="has-text-grey mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor" style="width: 24px;height: 24px">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
              </svg>
              <p class="mb-0">Complete documentation</p>
            </li>
            <li class="mb-3 is-flex is-align-items-center">
              <svg class="has-text-grey mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor" style="width: 24px;height: 24px">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
              </svg>
              <p class="mb-0">Working materials in Figma</p>
            </li>
            <li class="mb-3 is-flex is-align-items-center">
              <svg class="has-text-grey mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor" style="width: 24px;height: 24px">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
              </svg>
              <p class="mb-0">100GB cloud storage</p>
            </li>
            <li class="mb-3 is-flex is-align-items-center">
              <svg class="has-text-grey mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor" style="width: 24px;height: 24px">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
              </svg>
              <p class="mb-0">500 team members</p>
            </li>
          </ul>
          <a class="button is-primary is-fullwidth has-text-centered" href="#">Action</a>
        </div>
      </div>
    </div>
  </div>
</section>

Pricing from asitrastudio

Bulma

asitrastudio

<section class="section has-background-white-ter" x-data="{ toggle: false }">
  <div class="container">
    <div class="has-mw-md has-mw-lg-desktop has-mw-none-widescreen mx-auto">
      <div class="has-mw-3xl mb-20">
        <h1 class="title is-size-2 is-size-1-widescreen" style="letter-spacing: -0.04em;">Premium Membership</h1>
      </div>
      <div class="is-flex-tablet mb-10 is-align-items-center">
        <span class="is-block-mobile is-size-6" :class="{ 'has-text-dark': !toggle, 'has-text-grey': toggle }">Billed monthly</span>
        <div class="my-4-mobile mx-4-tablet is-inline-flex has-background-dark" style="padding: 2px; border-radius: 999px;">
          <button x-on:click="toggle = !toggle" class="button p-0" :class="{ 'is-light has-background-transparent': toggle, 'is-white': !toggle }" style="width: 26px; height: 26px; border-radius: 999px;"></button>
          <button x-on:click="toggle = !toggle" class="button p-0" :class="{ 'is-light has-background-transparent': !toggle, 'is-white': toggle }" style="width: 26px; height: 26px; border-radius: 999px;"></button>
        </div>
        <div class="is-block-mobile is-inline-flex-tablet is-align-items-center">
          <span class="mr-3 is-inline-block is-size-6" :class="{ 'has-text-dark': toggle, 'has-text-grey': !toggle }">Billed yearly</span>
          <span class="tag is-light is-size-7 px-3 py-1 is-inline-block has-text-dark">20% SAVE</span>
        </div>
      </div>
      <div class="columns is-multiline">
        <div class="column is-12-tablet is-4-widescreen">
          <div class="box px-8 pt-10 pb-10 is-covered" style="height: 100%">
            <span class="mb-2 is-block is-size-6 has-text-weight-medium has-text-dark">Starter plan</span>
            <h3 class="mb-4 is-size-2 has-text-dark" style="letter-spacing: -0.04em;">Free</h3>
            <p class="mb-8 has-text-dark">During this phase the design is developed to meet the required technical standards to</p>
            <a class="button is-outlined is-dark is-rounded mb-16 is-fullwidth" href="#">Get started</a>
            <ul>
              <li class="is-flex is-align-items-center mb-4">
                <svg width="21" height="22" viewbox="0 0 21 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <rect y="0.5" width="21" height="21" rx="10.5" fill="black"></rect>
                  <path d="M15.7676 8.13463C15.4582 7.82482 14.9558 7.82501 14.646 8.13463L9.59787 13.183L7.35419 10.9393C7.04438 10.6295 6.54217 10.6295 6.23236 10.9393C5.92255 11.2491 5.92255 11.7513 6.23236 12.0611L9.03684 14.8656C9.19165 15.0204 9.39464 15.098 9.59765 15.098C9.80067 15.098 10.0039 15.0206 10.1587 14.8656L15.7676 9.25644C16.0775 8.94684 16.0775 8.44443 15.7676 8.13463Z" fill="white"></path>
                </svg>
                <span class="ml-4 has-text-dark">Core engagement survey</span>
              </li>
              <li class="is-flex is-align-items-center mb-4">
                <svg width="21" height="22" viewbox="0 0 21 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <rect y="0.5" width="21" height="21" rx="10.5" fill="black"></rect>
                  <path d="M15.7676 8.13463C15.4582 7.82482 14.9558 7.82501 14.646 8.13463L9.59787 13.183L7.35419 10.9393C7.04438 10.6295 6.54217 10.6295 6.23236 10.9393C5.92255 11.2491 5.92255 11.7513 6.23236 12.0611L9.03684 14.8656C9.19165 15.0204 9.39464 15.098 9.59765 15.098C9.80067 15.098 10.0039 15.0206 10.1587 14.8656L15.7676 9.25644C16.0775 8.94684 16.0775 8.44443 15.7676 8.13463Z" fill="white"></path>
                </svg>
                <span class="ml-4 has-text-dark">Topic-based assessments</span>
              </li>
              <li class="is-flex is-align-items-center mb-4">
                <svg width="21" height="22" viewbox="0 0 21 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <rect y="0.5" width="21" height="21" rx="10.5" fill="black"></rect>
                  <path d="M15.7676 8.13463C15.4582 7.82482 14.9558 7.82501 14.646 8.13463L9.59787 13.183L7.35419 10.9393C7.04438 10.6295 6.54217 10.6295 6.23236 10.9393C5.92255 11.2491 5.92255 11.7513 6.23236 12.0611L9.03684 14.8656C9.19165 15.0204 9.39464 15.098 9.59765 15.098C9.80067 15.098 10.0039 15.0206 10.1587 14.8656L15.7676 9.25644C16.0775 8.94684 16.0775 8.44443 15.7676 8.13463Z" fill="white"></path>
                </svg>
                <span class="ml-4 has-text-dark">Custom topic-based assessments</span>
              </li>
              <li class="is-flex is-align-items-center">
                <svg width="21" height="22" viewbox="0 0 21 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <rect y="0.5" width="21" height="21" rx="10.5" fill="black"></rect>
                  <path d="M15.7676 8.13463C15.4582 7.82482 14.9558 7.82501 14.646 8.13463L9.59787 13.183L7.35419 10.9393C7.04438 10.6295 6.54217 10.6295 6.23236 10.9393C5.92255 11.2491 5.92255 11.7513 6.23236 12.0611L9.03684 14.8656C9.19165 15.0204 9.39464 15.098 9.59765 15.098C9.80067 15.098 10.0039 15.0206 10.1587 14.8656L15.7676 9.25644C16.0775 8.94684 16.0775 8.44443 15.7676 8.13463Z" fill="white"></path>
                </svg>
                <span class="ml-4 has-text-dark">Filterable heatmap &amp; analytics</span>
              </li>
            </ul>
          </div>
        </div>
        <div class="column is-12-tablet is-4-widescreen">
          <div class="box px-8 pt-10 pb-10 is-relative is-clipped is-covered" style="height: 100%">
            <img class="is-absolute is-top-0 is-right-0" src="asitrastudio-assets/pricing/shadow-blue.png" alt="">
            <span class="mb-2 is-block is-size-6 has-text-weight-medium has-text-dark">Basic plan</span>
            <div class="mb-4 is-flex is-align-items-end">
              <h3 class="is-size-2 has-text-dark" :class="{ 'is-hidden': toggle }" style="letter-spacing: -0.04em;">$29</h3>
              <h3 class="is-size-2 has-text-dark" :class="{ 'is-hidden': !toggle }" style="letter-spacing: -0.04em;">$299</h3>
              <span class="mb-2 ml-2 is-size-6 has-text-grey" :class="{ 'is-hidden': toggle }">/month</span>
              <span class="mb-2 ml-2 is-size-6 has-text-grey" :class="{ 'is-hidden': !toggle }">/yearly</span>
            </div>
            <p class="mb-8 has-text-dark">During this phase the design is developed to meet the required technical standards to</p>
            <a class="button is-primary is-rounded mb-16 is-fullwidth" href="#">Get started</a>
            <ul>
              <li class="is-flex is-align-items-center mb-4">
                <svg width="21" height="22" viewbox="0 0 21 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <rect y="0.5" width="21" height="21" rx="10.5" fill="black"></rect>
                  <path d="M15.7676 8.13463C15.4582 7.82482 14.9558 7.82501 14.646 8.13463L9.59787 13.183L7.35419 10.9393C7.04438 10.6295 6.54217 10.6295 6.23236 10.9393C5.92255 11.2491 5.92255 11.7513 6.23236 12.0611L9.03684 14.8656C9.19165 15.0204 9.39464 15.098 9.59765 15.098C9.80067 15.098 10.0039 15.0206 10.1587 14.8656L15.7676 9.25644C16.0775 8.94684 16.0775 8.44443 15.7676 8.13463Z" fill="white"></path>
                </svg>
                <span class="ml-4 has-text-dark">Performance reviews</span>
              </li>
              <li class="is-flex is-align-items-center mb-4">
                <svg width="21" height="22" viewbox="0 0 21 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <rect y="0.5" width="21" height="21" rx="10.5" fill="black"></rect>
                  <path d="M15.7676 8.13463C15.4582 7.82482 14.9558 7.82501 14.646 8.13463L9.59787 13.183L7.35419 10.9393C7.04438 10.6295 6.54217 10.6295 6.23236 10.9393C5.92255 11.2491 5.92255 11.7513 6.23236 12.0611L9.03684 14.8656C9.19165 15.0204 9.39464 15.098 9.59765 15.098C9.80067 15.098 10.0039 15.0206 10.1587 14.8656L15.7676 9.25644C16.0775 8.94684 16.0775 8.44443 15.7676 8.13463Z" fill="white"></path>
                </svg>
                <span class="ml-4 has-text-dark">360&ordm; feedback</span>
              </li>
              <li class="is-flex is-align-items-center mb-4">
                <svg width="21" height="22" viewbox="0 0 21 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <rect y="0.5" width="21" height="21" rx="10.5" fill="black"></rect>
                  <path d="M15.7676 8.13463C15.4582 7.82482 14.9558 7.82501 14.646 8.13463L9.59787 13.183L7.35419 10.9393C7.04438 10.6295 6.54217 10.6295 6.23236 10.9393C5.92255 11.2491 5.92255 11.7513 6.23236 12.0611L9.03684 14.8656C9.19165 15.0204 9.39464 15.098 9.59765 15.098C9.80067 15.098 10.0039 15.0206 10.1587 14.8656L15.7676 9.25644C16.0775 8.94684 16.0775 8.44443 15.7676 8.13463Z" fill="white"></path>
                </svg>
                <span class="ml-4 has-text-dark">Competencies</span>
              </li>
              <li class="is-flex is-align-items-center mb-4">
                <svg width="21" height="22" viewbox="0 0 21 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <rect y="0.5" width="21" height="21" rx="10.5" fill="black"></rect>
                  <path d="M15.7676 8.13463C15.4582 7.82482 14.9558 7.82501 14.646 8.13463L9.59787 13.183L7.35419 10.9393C7.04438 10.6295 6.54217 10.6295 6.23236 10.9393C5.92255 11.2491 5.92255 11.7513 6.23236 12.0611L9.03684 14.8656C9.19165 15.0204 9.39464 15.098 9.59765 15.098C9.80067 15.098 10.0039 15.0206 10.1587 14.8656L15.7676 9.25644C16.0775 8.94684 16.0775 8.44443 15.7676 8.13463Z" fill="white"></path>
                </svg>
                <span class="ml-4 has-text-dark">Calibration</span>
              </li>
              <li class="is-flex is-align-items-center mb-4">
                <svg width="21" height="22" viewbox="0 0 21 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <rect y="0.5" width="21" height="21" rx="10.5" fill="black"></rect>
                  <path d="M15.7676 8.13463C15.4582 7.82482 14.9558 7.82501 14.646 8.13463L9.59787 13.183L7.35419 10.9393C7.04438 10.6295 6.54217 10.6295 6.23236 10.9393C5.92255 11.2491 5.92255 11.7513 6.23236 12.0611L9.03684 14.8656C9.19165 15.0204 9.39464 15.098 9.59765 15.098C9.80067 15.098 10.0039 15.0206 10.1587 14.8656L15.7676 9.25644C16.0775 8.94684 16.0775 8.44443 15.7676 8.13463Z" fill="white"></path>
                </svg>
                <span class="ml-4 has-text-dark">Talent Matrix</span>
              </li>
              <li class="is-flex is-align-items-center">
                <svg width="21" height="22" viewbox="0 0 21 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <rect y="0.5" width="21" height="21" rx="10.5" fill="black"></rect>
                  <path d="M15.7676 8.13463C15.4582 7.82482 14.9558 7.82501 14.646 8.13463L9.59787 13.183L7.35419 10.9393C7.04438 10.6295 6.54217 10.6295 6.23236 10.9393C5.92255 11.2491 5.92255 11.7513 6.23236 12.0611L9.03684 14.8656C9.19165 15.0204 9.39464 15.098 9.59765 15.098C9.80067 15.098 10.0039 15.0206 10.1587 14.8656L15.7676 9.25644C16.0775 8.94684 16.0775 8.44443 15.7676 8.13463Z" fill="white"></path>
                </svg>
                <span class="ml-4 has-text-dark">Career Paths &amp; Plans</span>
              </li>
            </ul>
          </div>
        </div>
        <div class="column is-12-tablet is-4-widescreen">
          <div class="box px-8 pt-10 pb-10 is-covered" style="height: 100%">
            <span class="mb-2 is-block is-size-6 has-text-weight-medium has-text-dark">Professional plan</span>
            <div class="mb-4 is-flex is-align-items-end">
              <h3 class="is-size-2 has-text-dark" :class="{ 'is-hidden': toggle }" style="letter-spacing: -0.04em;">$59</h3>
              <h3 class="is-size-2 has-text-dark" :class="{ 'is-hidden': !toggle }" style="letter-spacing: -0.04em;">$699</h3>
              <span class="mb-2 ml-2 is-size-6 has-text-grey" :class="{ 'is-hidden': toggle }">/month</span>
              <span class="mb-2 ml-2 is-size-6 has-text-grey" :class="{ 'is-hidden': !toggle }">/yearly</span>
            </div>
            <p class="mb-8 has-text-dark">During this phase the design is developed to meet the required technical standards to</p>
            <a class="button is-outlined is-dark is-rounded mb-16 is-fullwidth" href="#">Get started</a>
            <ul>
              <li class="is-flex is-align-items-center mb-4">
                <svg width="21" height="22" viewbox="0 0 21 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <rect y="0.5" width="21" height="21" rx="10.5" fill="black"></rect>
                  <path d="M15.7676 8.13463C15.4582 7.82482 14.9558 7.82501 14.646 8.13463L9.59787 13.183L7.35419 10.9393C7.04438 10.6295 6.54217 10.6295 6.23236 10.9393C5.92255 11.2491 5.92255 11.7513 6.23236 12.0611L9.03684 14.8656C9.19165 15.0204 9.39464 15.098 9.59765 15.098C9.80067 15.098 10.0039 15.0206 10.1587 14.8656L15.7676 9.25644C16.0775 8.94684 16.0775 8.44443 15.7676 8.13463Z" fill="white"></path>
                </svg>
                <span class="ml-4 has-text-dark">Goal setting with OKRs</span>
              </li>
              <li class="is-flex is-align-items-center mb-4">
                <svg width="21" height="22" viewbox="0 0 21 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <rect y="0.5" width="21" height="21" rx="10.5" fill="black"></rect>
                  <path d="M15.7676 8.13463C15.4582 7.82482 14.9558 7.82501 14.646 8.13463L9.59787 13.183L7.35419 10.9393C7.04438 10.6295 6.54217 10.6295 6.23236 10.9393C5.92255 11.2491 5.92255 11.7513 6.23236 12.0611L9.03684 14.8656C9.19165 15.0204 9.39464 15.098 9.59765 15.098C9.80067 15.098 10.0039 15.0206 10.1587 14.8656L15.7676 9.25644C16.0775 8.94684 16.0775 8.44443 15.7676 8.13463Z" fill="white"></path>
                </svg>
                <span class="ml-4 has-text-dark">OKR chart view</span>
              </li>
              <li class="is-flex is-align-items-center mb-4">
                <svg width="21" height="22" viewbox="0 0 21 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <rect y="0.5" width="21" height="21" rx="10.5" fill="black"></rect>
                  <path d="M15.7676 8.13463C15.4582 7.82482 14.9558 7.82501 14.646 8.13463L9.59787 13.183L7.35419 10.9393C7.04438 10.6295 6.54217 10.6295 6.23236 10.9393C5.92255 11.2491 5.92255 11.7513 6.23236 12.0611L9.03684 14.8656C9.19165 15.0204 9.39464 15.098 9.59765 15.098C9.80067 15.098 10.0039 15.0206 10.1587 14.8656L15.7676 9.25644C16.0775 8.94684 16.0775 8.44443 15.7676 8.13463Z" fill="white"></path>
                </svg>
                <span class="ml-4 has-text-dark">Naming customization</span>
              </li>
              <li class="is-flex is-align-items-center mb-4">
                <svg width="21" height="22" viewbox="0 0 21 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <rect y="0.5" width="21" height="21" rx="10.5" fill="black"></rect>
                  <path d="M15.7676 8.13463C15.4582 7.82482 14.9558 7.82501 14.646 8.13463L9.59787 13.183L7.35419 10.9393C7.04438 10.6295 6.54217 10.6295 6.23236 10.9393C5.92255 11.2491 5.92255 11.7513 6.23236 12.0611L9.03684 14.8656C9.19165 15.0204 9.39464 15.098 9.59765 15.098C9.80067 15.098 10.0039 15.0206 10.1587 14.8656L15.7676 9.25644C16.0775 8.94684 16.0775 8.44443 15.7676 8.13463Z" fill="white"></path>
                </svg>
                <span class="ml-4 has-text-dark">Jira &amp; Salesforce Integration</span>
              </li>
              <li class="is-flex is-align-items-center mb-4">
                <svg width="21" height="22" viewbox="0 0 21 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <rect y="0.5" width="21" height="21" rx="10.5" fill="black"></rect>
                  <path d="M15.7676 8.13463C15.4582 7.82482 14.9558 7.82501 14.646 8.13463L9.59787 13.183L7.35419 10.9393C7.04438 10.6295 6.54217 10.6295 6.23236 10.9393C5.92255 11.2491 5.92255 11.7513 6.23236 12.0611L9.03684 14.8656C9.19165 15.0204 9.39464 15.098 9.59765 15.098C9.80067 15.098 10.0039 15.0206 10.1587 14.8656L15.7676 9.25644C16.0775 8.94684 16.0775 8.44443 15.7676 8.13463Z" fill="white"></path>
                </svg>
                <span class="ml-4 has-text-dark">Data insights</span>
              </li>
              <li class="is-flex is-align-items-center mb-4">
                <svg width="21" height="22" viewbox="0 0 21 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <rect y="0.5" width="21" height="21" rx="10.5" fill="black"></rect>
                  <path d="M15.7676 8.13463C15.4582 7.82482 14.9558 7.82501 14.646 8.13463L9.59787 13.183L7.35419 10.9393C7.04438 10.6295 6.54217 10.6295 6.23236 10.9393C5.92255 11.2491 5.92255 11.7513 6.23236 12.0611L9.03684 14.8656C9.19165 15.0204 9.39464 15.098 9.59765 15.098C9.80067 15.098 10.0039 15.0206 10.1587 14.8656L15.7676 9.25644C16.0775 8.94684 16.0775 8.44443 15.7676 8.13463Z" fill="white"></path>
                </svg>
                <span class="ml-4 has-text-dark">Enterprise-grade security</span>
              </li>
              <li class="is-flex is-align-items-center">
                <svg width="21" height="22" viewbox="0 0 21 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <rect y="0.5" width="21" height="21" rx="10.5" fill="black"></rect>
                  <path d="M15.7676 8.13463C15.4582 7.82482 14.9558 7.82501 14.646 8.13463L9.59787 13.183L7.35419 10.9393C7.04438 10.6295 6.54217 10.6295 6.23236 10.9393C5.92255 11.2491 5.92255 11.7513 6.23236 12.0611L9.03684 14.8656C9.19165 15.0204 9.39464 15.098 9.59765 15.098C9.80067 15.098 10.0039 15.0206 10.1587 14.8656L15.7676 9.25644C16.0775 8.94684 16.0775 8.44443 15.7676 8.13463Z" fill="white"></path>
                </svg>
                <span class="ml-4 has-text-dark">iOS &amp; Android apps</span>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

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!

Try for Free →

Redirecting to PayPal

Supporting tools

Plans

Bulma Pricing Components

Framework

UI Library

Components

Pricing from Flaro

Your next website starts here

Pricing from Zeus

Pricing from Pstls.

Pricing from Acros

Pricing from Bendis

Pricing from Metis

Pricing from Cronos

Pricing from Plain

Pricing from asitrastudio

The easiest way to create beautiful websites

How many people?

monthly

annual

lifetime

Create an account

From idea to beautiful design in minutes.

Get Shuffle for life at today's price

New in every Lifetime License

A more capable AI Agent

Shopify theme export

Multi-AI Designer

Make it yours with AI

Sign in to create with AI

Add images & videos

How it works

Products

UI Components

Extensions

Support

Company

Redirecting to PayPal

Shuffle's Editors

Supporting tools

Plans

Shuffle’s design systems

Most popular ui libraries

Flex

Zanrly

Saturn

Flaro

Gradia

Basko

Artemis

Vendia

Bulma Pricing Components

Framework

UI Library

Components

Pricing from Flaro

Your next website starts here

Pricing from Zeus

Pricing from Pstls.

Pricing from Acros

Pricing from Bendis

Pricing from Metis

Pricing from Cronos

Pricing from Plain

Pricing from asitrastudio

The easiest way to create beautiful websites

How many people?

monthly

annual

lifetime

Create an account

From idea to beautiful design in minutes.

Products

UI Components

Extensions

Support

Company