Bulma Components – Acros Library

<section class="section py-16">
  <div class="container">
    <img class="is-absolute" src="acros-assets/images/call-to-action/cta-11-bg.png" alt="">
    <div class="columns is-align-items-center">
      <div class="column mb-10 mb-0-tablet is-relative" style="z-index: 1;">
        <small class="is-block has-text-weight-semibold is-uppercase mb-2">
          <span>Lorem</span>
          <span class="has-text-primary">ipsum</span>
        </small>
        <h2 class="title has-mw-lg">The latest version of this excellent product is waiting to deploy</h2>
        <p class="mb-12 subtitle has-mw-md">If you have ever wondered how to develop your brand, this is the place for you.</p>
        <div class="buttons"><a class="button is-primary" href="#">Active demo</a><a class="button is-dark is-outlined ml-3-tablet" href="#">Share with friends</a></div>
      </div>
      <div class="column is-narrow-widescreen">
        <img class="image mx-auto mr-0-tablet is-fullwidth" src="acros-assets/images/call-to-action/cta-11-people.jpg" alt="">
      </div>
    </div>
  </div>
</section>

<section class="has-background-white-ter is-clipped">
  <div class="columns is-align-items-center">
    <div class="column">
      <div class="section has-mw-xl mx-auto">
        <h2 class="title mb-6 has-mw-lg">Lorem ipsum dolor sit amet boulique</h2>
        <p class="subtitle has-mw-md mb-12">If you have ever wondered how to develop your brand, this is the place for you.</p>
        <ul>
          <li class="mb-4 is-flex is-align-items-center has-text-weight-medium title is-size-6">
            <img class="mr-6" src="acros-assets/icons/features/security.svg" alt="">
            Lorem Ipsum dolor
          </li>
          <li class="mb-4 is-flex is-align-items-center has-text-weight-medium title is-size-6">
            <img class="mr-6" src="acros-assets/icons/features/key.svg" alt="">
            Phasellus sit amet blandit ligula
          </li>
          <li class="is-flex is-align-items-center has-text-weight-medium title is-size-6">
            <img class="mr-6" src="acros-assets/icons/features/contact.svg" alt="">
            Donec sodales nibh
          </li>
        </ul>
      </div>
    </div>
    <div class="column pb-0">
      <img class="image mx-auto mr-0-tablet" src="acros-assets/images/features/black-woman-man-smilling.jpg" alt="">

<section class="section py-16 is-clipped">
  <div class="container">
    <small class="mb-2 is-block is-uppercase has-text-weight-semibold">
      <span>Our</span>
      <span class="has-text-primary">testimonials</span>
    </small>
    <h2 class="title mb-12">What people says about us</h2>
    <div class="columns">
      <div class="column">
        <div class="has-background-white-ter pt-8 pb-6 px-10" style="border-radius: 6px;">
          <img src="acros-assets/icons/testimonials/quote-24x24.svg" alt="">
          <h5 class="title is-size-5 mb-4">The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</h5>
          <div class="is-flex is-align-items-center">
            <img class="mr-4" src="acros-assets/images/testimonials/man-32x32.png" alt="">
            <div>
              <h6 class="is-size-6 has-text-weight-medium mb-0"><small>Denny Bailey</small></h6>
              <p class="has-text-grey-light"><small>CEO &amp; Founder</small></p>
            </div>
          </div>
        </div>
      </div>
      <div class="column">
        <div class="has-background-white-ter pt-8 pb-6 px-10" style="border-radius: 6px;">
          <img src="acros-assets/icons/testimonials/quote-24x24.svg" alt="">

<section>
  <nav class="navbar py-1 has-background-white">
    <div class="container px-8-mobile">
      <div class="navbar-brand is-align-items-center">
        <a class="navbar-item" href="#">
          <span class="navbar-item px-0 title is-size-4 has-text-dark">
            <img src="acros-assets/logo/logo-acros-black.svg" alt="" width="auto" style="max-height: initial;">
          </span>
        </a>
        <a class="navbar-menu-open navbar-burger" role="button" type="button" data-toggle="side-menu">
          <span aria-hidden="true"></span>
          <span aria-hidden="true"></span>
          <span aria-hidden="true"></span>
        </a>
      </div>
      <div class="navbar-menu">
        <div class="navbar-start ml-auto mr-0">
          <ul class="navbar-item pl-0">
            <li><a class="title is-size-6 has-text-grey-darker has-text-weight-normal navbar-item" href="#">About</a></li>
            <li><a class="title is-size-6 has-text-grey-darker has-text-weight-normal navbar-item" href="#">Company</a></li>
            <li><a class="title is-size-6 has-text-grey-darker has-text-weight-normal navbar-item" href="#">Services</a></li>
            <li><a class="title is-size-6 has-text-grey-darker has-text-weight-normal navbar-item" href="#">Testimonials</a></li>
          </ul>
        </div>

<section class="section py-16">
  <div class="container is-relative">
    <div class="is-absolute m-8 has-background-primary p-10 has-mw-sm" style="border-radius: 6px; z-index: 1;">
      <h4 class="has-text-white title is-size-4 has-leading-3 has-text-weight-medium mb-8">The latest version of this excellent product</h4>
      <div class="is-hidden-touch is-hidden-desktop-only is-flex is-align-items-start mb-8">
        <img class="mr-6" src="acros-assets/icons/features/security-white-light.svg" alt="">
        <div>
          <h5 class="title is-size-5 has-text-white mb-2 has-text-weight-medium">Repeat predefined</h5>
          <p class="has-text-white">Take care to develop resources continually and integrity.</p>
        </div>
      </div>
      <div class="is-hidden-touch is-hidden-desktop-only is-flex is-align-items-start">
        <img class="mr-6" src="acros-assets/icons/features/user-white-light.svg" alt="">
        <div>
          <h3 class="title is-size-5 has-text-white mb-2 has-text-weight-medium">Classical Latin literature</h3>
          <p class="has-text-white">Take care to develop resources continually and integrity.</p>
        </div>
      </div>
    </div>
    <img class="image mx-auto is-fullwidth" src="acros-assets/images/features/work.jpg" alt="">
  </div>
</section>

<section class="section py-12">
  <div class="container">
    <div class="columns is-align-items-center">
      <div class="column mb-12 mb-0-tablet">
        <small class="mb-2 is-block has-text-grey-darker is-uppercase has-text-weight-semibold">
          <span>Our</span>
          <span class="has-text-primary">clients</span>
        </small>
        <h2 class="title has-mw-sm mb-10">Trusted by brands all over the world</h2>
        <p class="subtitle is-size-6 has-mw-md">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque efficitur nisl sodales egestas lobortis.</p>
      </div>
      <div class="column">
        <div class="columns">
          <div class="column p-4 p-2-tablet">
            <div class="py-12" style="border-radius: 6px;">
              <img class="is-block mx-auto" style="height:32px;" src="acros-assets/logo/slack.svg" alt="">
            </div>
          </div>
          <div class="column p-4 p-2-tablet">
            <div class="py-12" style="border-radius: 6px;">
              <img class="is-block mx-auto" style="height:32px;" src="acros-assets/logo/google.svg" alt="">
            </div>
          </div>
          <div class="column p-4 p-2-tablet">

<section class="section py-16 is-clipped">
  <div class="container">
    <small class="mb-2 is-block is-uppercase has-text-weight-semibold">
      <span>Our</span>
      <span class="has-text-primary">testimonials</span>
    </small>
    <h2 class="title mb-12">What people says about us</h2>
    <div class="has-mw-4xl mx-auto">
      <div class="columns">
        <div class="column">
          <div class="has-background-white-ter pt-8 pb-6 px-10" style="border-radius: 6px;">
            <img src="acros-assets/icons/testimonials/quote-24x24.svg" alt="">
            <h5 class="title is-size-5 mb-4">The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</h5>
            <div class="is-flex is-align-items-center">
              <img class="mr-4" src="acros-assets/images/testimonials/man-40x40.png" alt="">
              <div>
                <h6 class="is-size-6 has-text-weight-medium mb-0"><small>Denny Bailey</small></h6>
                <p class="has-text-grey-light"><small>CEO &amp; Founder</small></p>
              </div>
            </div>
          </div>
        </div>
        <div class="column">
          <div class="has-background-white-ter pt-8 pb-6 px-10" style="border-radius: 6px;">

<section class="section py-24">
  <div class="container">
    <div class="columns is-align-items-center">
      <div class="column mb-10 mb-0-tablet">
        <small class="is-block has-text-weight-semibold is-uppercase mb-2">
          <span>Lorem</span>
          <span class="has-text-primary">ipsum</span>
        </small>
        <h2 class="title has-mw-lg">The latest version of this excellent product is waiting to deploy</h2>
        <p class="mb-12 subtitle has-mw-md">If you have ever wondered how to develop your brand, this is the place for you.</p>
        <div class="buttons"><a class="button is-primary" href="#">Active demo</a><a class="button is-dark is-outlined ml-3-tablet" href="#">Share with friends</a></div>
      </div>
      <div class="column">
        <img class="image mx-auto mr-0-tablet" src="acros-assets/images/call-to-action/cta-12-work.jpg" alt="">
      </div>
    </div>
  </div>
</section>

<section class="section py-20 has-background-primary">
  <div class="container">
    <div class="columns is-align-items-center is-multiline">
      <div class="column mb-6 is-6-tablet is-6-desktop mb-0-tablet">
        <h2 class="title has-text-white has-mw-md">The latest version of this excellent product</h2>
      </div>
      <div class="column mb-6 is-3-tablet is-4-desktop mb-0-tablet">
        <p class="subtitle has-text-white">The standard chunk of Lorem Ipsum used since the 1500s is reproduced.</p>
      </div>
      <div class="column is-3-tablet is-2-desktop">
        <div class="buttons"><a class="button is-white has-text-grey-darker ml-auto-tablet" href="#">Send inquiry</a></div>
      </div>
    </div>
  </div>
</section>

<section class="has-background-white-ter is-clipped">
  <div class="columns is-align-items-center">
    <div class="column pb-0">
      <img class="image mx-auto ml-0-tablet" src="acros-assets/images/features/black-woman-man-smilling.jpg" alt="">
    </div>
    <div class="column">
      <div class="section has-mw-xl mx-auto">
        <h2 class="title mb-6 has-mw-lg">Lorem ipsum dolor sit amet boulique</h2>
        <p class="subtitle has-mw-md mb-12">If you have ever wondered how to develop your brand, this is the place for you.</p>
        <ul>
          <li class="mb-4 is-flex is-align-items-center has-text-weight-medium title is-size-6">
            <img class="mr-6" src="acros-assets/icons/features/security.svg" alt="">
            Lorem Ipsum dolor
          </li>
          <li class="mb-4 is-flex is-align-items-center has-text-weight-medium title is-size-6">
            <img class="mr-6" src="acros-assets/icons/features/key.svg" alt="">
            Phasellus sit amet blandit ligula
          </li>
          <li class="is-flex is-align-items-center has-text-weight-medium title is-size-6">
            <img class="mr-6" src="acros-assets/icons/features/contact.svg" alt="">
            Donec sodales nibh
          </li>
        </ul>
      </div>

<section>
  <nav class="navbar py-2 has-background-white">
    <div class="container px-8-mobile px-32-widescreen">
      <div class="navbar-brand is-align-items-center">
        <a class="navbar-item" href="#">
          <span class="px-0 title is-size-4 has-text-dark">
            <img src="acros-assets/logo/logo-acros-black.svg" width="auto" style="max-height: initial;" alt="">
          </span>
        </a>
        <a class="navbar-menu-open navbar-burger" role="button" type="button" data-toggle="side-menu">
          <span aria-hidden="true"></span>
          <span aria-hidden="true"></span>
          <span aria-hidden="true"></span>
        </a>
      </div>
      <div class="navbar-menu">
        <div class="navbar-start">
          <ul class="navbar-item pl-0">
            <li><a class="title is-size-6 has-text-grey-darker has-text-weight-normal navbar-item" href="#">About</a></li>
            <li><a class="title is-size-6 has-text-grey-darker has-text-weight-normal navbar-item" href="#">Company</a></li>
            <li><a class="title is-size-6 has-text-grey-darker has-text-weight-normal navbar-item" href="#">Services</a></li>
            <li><a class="title is-size-6 has-text-grey-darker has-text-weight-normal navbar-item" href="#">Testimonials</a></li>
          </ul>
        </div>

<section class="section py-16 is-clipped">
  <div class="container">
    <small class="mb-2 is-block is-uppercase has-text-weight-semibold">
      <span>Our</span>
      <span class="has-text-primary">testimonials</span>
    </small>
    <h2 class="title mb-12">What people says about us</h2>
    <div class="columns">
      <div class="column">
        <div class="has-background-white-ter pt-8 pb-6 px-10" style="border-radius: 6px;">
          <img src="acros-assets/icons/testimonials/quote-24x24.svg" alt="">
          <h5 class="title is-size-5 mb-4">The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</h5>
          <div class="is-flex is-align-items-center">
            <img class="mr-4" src="acros-assets/images/testimonials/man-32x32.png" alt="">
            <div>
              <h6 class="is-size-6 has-text-weight-medium mb-0"><small>Denny Bailey</small></h6>
              <p class="has-text-grey-light"><small>CEO &amp; Founder</small></p>
            </div>
          </div>
        </div>
      </div>
      <div class="column">
        <div class="has-background-white-ter pt-8 pb-6 px-10" style="border-radius: 6px;">
          <img src="acros-assets/icons/testimonials/quote-24x24.svg" alt="">

<section class="section py-16">
  <div class="container is-relative">
    <div class="is-absolute m-8 has-background-primary p-10 has-mw-sm is-right-0" style="border-radius: 6px; z-index: 1;">
      <h4 class="has-text-white title is-size-4 has-leading-3 has-text-weight-medium mb-8">The latest version of this excellent product</h4>
      <div class="is-hidden-touch is-hidden-desktop-only is-flex is-align-items-start mb-8">
        <img class="mr-6" src="acros-assets/icons/features/security-white-light.svg" alt="">
        <div>
          <h5 class="title is-size-5 has-text-white mb-2 has-text-weight-medium">Repeat predefined</h5>
          <p class="has-text-white">Take care to develop resources continually and integrity.</p>
        </div>
      </div>
      <div class="is-hidden-touch is-hidden-desktop-only is-flex is-align-items-start">
        <img class="mr-6" src="acros-assets/icons/features/user-white-light.svg" alt="">
        <div>
          <h3 class="title is-size-5 has-text-white mb-2 has-text-weight-medium">Classical Latin literature</h3>
          <p class="has-text-white">Take care to develop resources continually and integrity.</p>
        </div>
      </div>
    </div>
    <img class="image mx-auto is-fullwidth" src="acros-assets/images/features/work-2.jpg" alt="">
  </div>
</section>

<section class="section py-16 has-background-white-ter">
  <div class="container">
    <div class="columns is-align-items-center">
      <div class="column is-6 mb-12 mb-0-tablet">
        <small class="mb-2 is-block is-uppercase has-text-weight-semibold">
          <span>Our</span>
          <span class="has-text-primary">testimonials</span>
        </small>
        <h2 class="title mb-6 has-mw-sm">What people says about us</h2>
        <p class="subtitle has-mw-sm">If you have ever wondered how to develop your brand, this is the place for you.</p>
      </div>
      <div class="column is-5">
        <div class="has-background-white p-8" style="border-radius: 6px;">
          <img src="acros-assets/icons/testimonials/quote-24x24.svg" alt="">
          <h5 class="title is-size-5">The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</h5>
          <div class="is-flex is-justify-content-space-between">
            <div class="is-flex is-align-items-center">
              <img class="mr-4" src="acros-assets/images/testimonials/man-48x48.png" alt="">
              <div>
                <h6 class="is-size-6 has-text-weight-medium mb-0"><small>Denny Bailey</small></h6>
                <p class="has-text-grey-light"><small>CEO &amp; Founder</small></p>
              </div>
            </div>
            <ul class="is-flex is-align-items-center">

<section>
  <nav class="navbar has-background-white">
    <div class="container py-2 px-8-mobile px-32-widescreen">
      <div class="is-flex is-justify-content-between is-align-items-center" style="width: 100%;">
        <button class="button is-ghost">
          <img src="acros-assets/icons/navigations/search-circle-light.svg" alt="">
        </button>
        <a class="mx-auto" href="#">
          <span class="navbar-item px-0 title is-size-4 has-text-dark">
            <img src="acros-assets/icons/navigations/logo-acros-center-black.svg" alt="" width="auto" style="max-height: initial;">
          </span>
        </a>
        <div>
          <button class="button navbar-menu-open is-ghost has-text-dark">
            <img src="acros-assets/icons/navigations/hamburger-circle-light.svg" alt="" style="max-height: initial;">
          </button>
        </div>
      </div>
    </div>
  </nav>
  <div class="navbar-side is-hidden is-fixed is-top-0 is-left-0 has-background-blur" style="z-index: 50; width:100%; height: 100%;">
    <div class="is-absolute" style="z-index: -1;"></div>
    <div class="container is-relative">
      <a class="navbar-close is-absolute is-right-0 mt-6 mr-6" href="#">

<section>
  <nav class="navbar py-1 has-background-white">
    <div class="container px-8-mobile px-32-widescreen">
      <div class="navbar-brand is-align-items-center">
        <a class="navbar-item" href="#">
          <span class="navbar-item px-0 title is-size-4 has-text-dark">
            <img src="acros-assets/logo/logo-acros-black.svg" alt="" width="auto" style="max-height: initial;">
          </span>
        </a>
        <a class="navbar-menu-open navbar-burger" role="button" type="button" data-toggle="side-menu">
          <span aria-hidden="true"></span>
          <span aria-hidden="true"></span>
          <span aria-hidden="true"></span>
        </a>
      </div>
      <div class="navbar-menu">
        <div class="navbar-start">
          <ul class="navbar-item pl-0">
            <li><a class="title is-size-6 has-text-grey-darker has-text-weight-normal navbar-item" href="#">About</a></li>
            <li><a class="title is-size-6 has-text-grey-darker has-text-weight-normal navbar-item" href="#">Company</a></li>
            <li><a class="title is-size-6 has-text-grey-darker has-text-weight-normal navbar-item" href="#">Services</a></li>
            <li><a class="title is-size-6 has-text-grey-darker has-text-weight-normal navbar-item" href="#">Testimonials</a></li>
          </ul>
        </div>

<section>
  <nav class="navbar py-1 has-background-white">
    <div class="container px-8-mobile px-32-widescreen">
      <div class="navbar-brand is-align-items-center">
        <a class="navbar-item" href="#">
          <span class="navbar-item px-0 title is-size-4 has-text-dark">
            <img src="acros-assets/logo/logo-acros-black.svg" alt="" width="auto" style="max-height: initial;">
          </span>
        </a>
        <a class="navbar-menu-open navbar-burger" role="button" type="button" data-toggle="side-menu">
          <span aria-hidden="true"></span>
          <span aria-hidden="true"></span>
          <span aria-hidden="true"></span>
        </a>
      </div>
      <div class="navbar-menu">
        <div class="navbar-start ml-auto mr-0">
          <ul class="navbar-item pl-0">
            <li><a class="title is-size-6 has-text-grey-darker has-text-weight-normal navbar-item" href="#">About</a></li>
            <li><a class="title is-size-6 has-text-grey-darker has-text-weight-normal navbar-item" href="#">Company</a></li>
            <li><a class="title is-size-6 has-text-grey-darker has-text-weight-normal navbar-item" href="#">Services</a></li>
            <li><a class="title is-size-6 has-text-grey-darker has-text-weight-normal navbar-item" href="#">Testimonials</a></li>
          </ul>
        </div>