UI Components – Acros Library

<div>
  <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-weight-normal navbar-item" href="#">About</a></li>
            <li><a class="title is-size-6 has-text-weight-normal navbar-item" href="#">Company</a></li>
            <li><a class="title is-size-6 has-text-weight-normal navbar-item" href="#">Services</a></li>
            <li><a class="title is-size-6 has-text-weight-normal navbar-item" href="#">Testimonials</a></li>
          </ul>
        </div>

<div>
  <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-weight-normal navbar-item" href="#">About</a></li>
            <li><a class="title is-size-6 has-text-weight-normal navbar-item" href="#">Company</a></li>
            <li><a class="title is-size-6 has-text-weight-normal navbar-item" href="#">Services</a></li>
            <li><a class="title is-size-6 has-text-weight-normal navbar-item" href="#">Testimonials</a></li>
          </ul>
        </div>

<div>
  <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-weight-normal navbar-item" href="#">About</a></li>
            <li><a class="title is-size-6 has-text-weight-normal navbar-item" href="#">Company</a></li>
            <li><a class="title is-size-6 has-text-weight-normal navbar-item" href="#">Services</a></li>
            <li><a class="title is-size-6 has-text-weight-normal navbar-item" href="#">Testimonials</a></li>
          </ul>
        </div>

<div>
  <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-weight-normal navbar-item" href="#">About</a></li>
            <li><a class="title is-size-6 has-text-weight-normal navbar-item" href="#">Company</a></li>
            <li><a class="title is-size-6 has-text-weight-normal navbar-item" href="#">Services</a></li>
            <li><a class="title is-size-6 has-text-weight-normal navbar-item" href="#">Testimonials</a></li>
          </ul>
        </div>

<div>
  <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-weight-normal navbar-item" href="#">About</a></li>
            <li><a class="title is-size-6 has-text-weight-normal navbar-item" href="#">Company</a></li>
            <li><a class="title is-size-6 has-text-weight-normal navbar-item" href="#">Services</a></li>
            <li><a class="title is-size-6 has-text-weight-normal navbar-item" href="#">Testimonials</a></li>
          </ul>
        </div>

<div>
  <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-weight-normal navbar-item" href="#">About</a></li>
            <li><a class="title is-size-6 has-text-weight-normal navbar-item" href="#">Company</a></li>
            <li><a class="title is-size-6 has-text-weight-normal navbar-item" href="#">Services</a></li>
            <li><a class="title is-size-6 has-text-weight-normal navbar-item" href="#">Testimonials</a></li>
          </ul>
        </div>

<div>
  <nav class="navbar py-1 mb-10 mb-24-tablet 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-20-desktop is-clipped is-relative">
  <div class="container">
    <div class="columns is-align-items-center is-justify-content-space-between">
      <div class="column is-5 is-4-desktop is-5-widescreen mb-12 mb-0-tablet">
        <div class="pr-5-widescreen">
          <small class="mb-2 is-block has-text-grey-darker is-uppercase has-text-weight-semibold">
            <span>Create an</span>
            <span class="has-text-primary">account</span>
          </small>
          <h2 class="title has-mw-xs">Join our community</h2>
          <div class="field mb-4">
            <label class="label"><small>E-mail address</small></label>
            <div class="control">
              <input class="input" type="text" placeholder="Type e-mail">
            </div>
          </div>
          <div class="field mb-4">
            <label class="label"><small>Password</small></label>
            <div class="control">
              <input class="input" type="password" placeholder="Type password">
            </div>
          </div>
          <div class="field mb-4">
            <label class="label mb-2"><small>Repeat password</small></label>

<section class="section py-14 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="is-block is-uppercase has-leading-4 has-text-weight-semibold mb-4">
          <span>In the</span>
          <span class="has-text-primary">numbers</span>
        </small>
        <h2 class="title has-mw-lg">The latest version of this excellent product is waiting to deploy</h2>
      </div>
      <div class="column">
        <div class="columns mt-14-tablet is-multiline">
          <div class="column is-12-tablet">
            <div class="has-background-white p-6" style="border-radius: 4px;">
              <img class="mb-8" src="acros-assets/icons/stats/chat.svg" alt="">
              <h4 class="title is-size-4 mb-2">65K+</h4>
              <small>Dolor sit amet consectutar</small>
            </div>
          </div>
          <div class="column is-12-tablet">
            <div class="has-background-white p-6" style="border-radius: 4px;">
              <img class="mb-8" src="acros-assets/icons/stats/user.svg" alt="">
              <h4 class="title is-size-4 mb-2">500K+</h4>
              <small>Dolor sit amet consectutar</small>

<section class="section py-16">
  <div class="container">
    <small class="mb-2 is-block is-uppercase has-text-weight-semibold">
      <span>Recent on</span>
      <span class="has-text-primary">blog</span>
    </small>
    <div class="columns is-align-items-center mb-12">
      <div class="column is-7">
        <h2 class="title">Finish what you started today before you forget to do it</h2>
      </div>
      <div class="column is-5">
        <div class="buttons"><a class="button is-primary is-outlined ml-auto-tablet" href="#">Check all posts</a></div>
      </div>
    </div>
    <div class="columns is-vcentered">
      <div class="column is-narrow-widescreen">
        <a class="is-block is-relative" href="#">
          <div class="is-absolute p-8 is-bottom-0" style="z-index: 1;">
            <p class="has-text-white is-size-6 title mb-2">
              <span>#people</span>
              <span class="ml-4">#family</span>
            </p>
            <h3 class="title is-size-3 has-text-white mb-4">Take care of the relationship</h3>
            <p class="subtitle has-text-white has-mw-sm mb-6 is-hidden-touch">The best way to archive better skills is by challenging yourself with exciting projects on the side.</p>

<section class="is-fixed is-left-0 is-bottom-0 p-6" style="z-index: 50;">
  <div class="container">
    <div class="has-background-grey-darker py-6 px-8" style="border-radius: 6px;">
      <div class="columns is-align-items-center">
        <div class="column is-narrow pr-4">
          <img src="acros-assets/icons/cookies/cookie.svg" alt="">
        </div>
        <div class="column pl-4">
          <h5 class="title is-size-5 has-text-white has-text-weight-medium mb-2">Cookie Policy</h5>
          <p class="subtitle is-size-6 has-text-white mb-0">We use cookies to personalise content, to provide social media features and to analyse our traffic.</p>
          <p class="subtitle is-size-6 has-text-white">We also share information about your use of our site with our social media, advertising and analytics partners.</p>
        </div>
        <div class="column is-narrow">
          <div class="buttons"><a class="button is-primary py-6 mr-4" href="#">Accept</a><a class="button is-white is-outlined py-6" href="#">Decline</a></div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="section pt-16 pb-0">
  <div class="container">
    <div class="has-text-centered">
      <small class="is-block is-uppercase has-leading-4 has-text-weight-semibold mb-4">
        <span>Develop your</span>
        <span class="has-text-primary">skills</span>
      </small>
      <h2 class="title mb-6">See what this extension tool looks like</h2>
      <p class="subtitle has-mw-xl mx-auto mb-10">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec.</p>
      <div class="buttons is-justify-content-center mb-16">
        <a class="mr-4" href="#">
          <img src="acros-assets/icons/applications/app-store.svg" alt="">
        </a>
        <a href="#">
          <img src="acros-assets/icons/applications/google-play.svg" alt="">
        </a>
      </div>
      <img class="image mx-auto" src="acros-assets/images/applications/three-mobile.png" alt="">
    </div>
  </div>
</section>

<section class="section-ter py-10">
  <div class="container">
    <div class="columns">
      <div class="column p-4">
        <div class="has-background-white 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">
        <div class="has-background-white 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">
        <div class="has-background-white py-12" style="border-radius: 6px;">
          <img class="is-block mx-auto" style="height:32px;" src="acros-assets/logo/coca-cola.svg" alt="">
        </div>
      </div>
      <div class="column p-4">
        <div class="has-background-white py-12" style="border-radius: 6px;">
          <img class="is-block mx-auto" style="height:32px;" src="acros-assets/logo/adidas.svg" alt="">
        </div>
      </div>
    </div>

<section class="section py-16 has-background-white-ter">
  <div class="container">
    <div class="columns is-justify-content-space-between mb-0">
      <div class="column is-narrow-widescreen">
        <a href="#">
          <img class="image mx-auto ml-0-tablet is-fullwidth" src="acros-assets/images/how-it-works/black-woman-man.jpg" alt="">
        </a>
      </div>
      <div class="column is-narrow-widescreen">
        <div class="has-mw-xl mx-auto">
          <h2 class="title has-mw-md has-text-grey-darker mb-12">Lorem Ipsum dolor sit amet boulique</h2>
          <div class="columns mb-6 mb-12-tablet">
            <div class="column mb-6 mb-0-tablet">
              <div class="is-relative mb-8 is-inline-block">
                <img src="acros-assets/icons/how-it-works/security.svg" alt="">
                <span class="is-block has-text-weight-semibold has-background-white-bis has-text-grey-darker is-absolute" style="right: -0.7rem; bottom: 0; font-size: 10px; width:24px; height:24px; border-radius: 50%;">
                  <span class="is-absolute" style="top: 50%; left: 50%; transform: translate(-50%, -50%)">1</span>
                </span>
              </div>
              <h5 class="mb-4 title is-size-5 has-text-grey-darker has-text-weight-medium">Repeat predefined</h5>
              <p class="has-text-grey-darker">Take care to develop resources continually and integrity them with previous projects.</p>
            </div>
            <div class="column">
              <div class="is-relative mb-8 is-inline-block">

<section class="section py-16 has-background-white-ter">
  <div class="container">
    <div class="columns is-align-items-center is-justify-content-space-between">
      <div class="column mb-12 mb-0-tablet is-narrow-widescreen">
        <img class="image mx-auto ml-0-tablet is-fullwidth" src="acros-assets/images/testimonials/man-medium.jpg" alt="">
      </div>
      <div class="column is-narrow-widescreen">
        <div class="has-mw-xl">
          <img class="mb-2" src="acros-assets/icons/testimonials/quote.svg" alt="">
          <h3 class="title is-size-3">The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</h3>
          <p class="subtitle mb-10 has-mw-md">If you have ever wondered how to develop your brand, this is the place for you.</p>
          <div class="is-flex">
            <img class="mr-6" src="acros-assets/images/testimonials/man-56x56.png" alt="">
            <div>
              <h6 class="title is-size-6 has-text-weight-medium mb-1">Danny Bailey</h6>
              <p class="has-text-grey-light">CEO &amp; Founder</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="section py-12" style="background-image: url('acros-assets/images/contacts/location.jpg'); background-repeat: no-repeat; background-position:center; background-size: cover;">
  <div class="container">
    <div class="has-background-white p-10 has-mw-md" style="border-radius: 6px;">
      <small class="mb-2 is-block is-uppercase has-text-weight-semibold">Contact us</small>
      <h2 class="title mb-4">Say Hello</h2>
      <p class="subtitle is-size-6 mb-10">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh.</p>
      <div class="columns">
        <div class="column">
          <img class="mb-6" src="acros-assets/icons/contacts/location.svg" alt="">
          <h6 class="title is-size-5 has-leading-3 has-text-weight-semibold mb-2">Address</h6>
          <p class="is-block">1686, Geraldine Lane</p>
          <p class="is-block">New York, NY 10013</p>
        </div>
        <div class="column">
          <img class="mb-6" src="acros-assets/icons/contacts/phone.svg" alt="">
          <h6 class="title is-size-5 has-leading-3 has-text-weight-semibold mb-2">Contact info</h6>
          <p class="is-block">hello@wireframes.org</p>
          <p class="is-block">+7-843-672-431</p>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="is-relative section py-16 has-background-primary">
  <div class="container">
    <img class="is-absolute" src="acros-assets/images/call-to-action/cta-1-bg.png">
    <div class="has-mw-2xl mx-auto has-text-centered is-relative" style="z-index: 1;">
      <small class="is-block has-text-white has-text-weight-semibold is-uppercase mb-2">New feature</small>
      <h2 class="mb-6 title has-text-white">Take quick action that increases your brand&apos;s regular profit.</h2>
      <p class="mb-12 subtitle has-text-white">If you have ever wondered how to develop your brand, this is the place for you. Take a&nbsp;big step forward in growing your business with this great tool.</p>
      <div class="buttons is-centered"><a class="button is-white has-text-grey-darker mr-3" href="#">Active Demo</a><a class="button is-white is-outlined" href="#">Share with friends</a></div>
    </div>
  </div>
</section>

<section class="section pt-20 pb-0 has-background-grey-darker">
  <div class="container">
    <div class="columns mb-0" style="border-bottom: 1px solid rgba(255,255,255,0.15)">
      <div class="column is-4 mb-12 mb-0-tablet mb-20-tablet">
        <a class="is-block mb-4 title is-size-4 has-text-white" href="#">
          <img src="acros-assets/logo/logo-acros-white.svg" alt="" width="auto">
        </a>
        <ul class="mb-8">
          <li class="mb-2">
            <a class="title is-size-6 is-flex is-align-items-center has-text-white" href="#">
              <img class="mr-3" src="acros-assets/icons/footers/contact.svg" alt="">
              <span>+44 20 6024 2068</span>
            </a>
          </li>
          <li>
            <a class="title is-size-6 is-flex is-align-items-center has-text-white" href="#">
              <img class="mr-3" src="acros-assets/icons/footers/email.svg" alt="">
              <span>office@neonic.co</span>
            </a>
          </li>
        </ul>
        <ul class="is-flex">
          <li>
            <a href="#">

<section class="section py-16">
  <div class="container">
    <div class="has-background-primary p-12 pb-14-tablet px-24-tablet" style="border-radius: 6px;">
      <div class="columns is-align-items-center">
        <div class="column mb-12 mb-0-tablet">
          <h2 class="title has-text-white mb-4 has-mw-xs">Sign up to our newsletter</h2>
          <p class="subtitle has-text-white">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
        <div class="column">
          <div class="columns">
            <div class="column">
              <div class="field">
                <div class="control">
                  <input class="input is-primary has-background-white-ter" type="text" placeholder="Type your e-mail">
                </div>
              </div>
            </div>
            <div class="column is-3">
              <div class="field">
                <div class="control">
                  <button class="button is-white">Sign up</button>
                </div>
              </div>
            </div>

<section class="section py-16 has-background-white-ter">
  <div class="container">
    <div class="columns is-align-items-center mb-16">
      <div class="column is-7 mb-5 mb-0-tablet">
        <h2 class="title">The latest version of this excellent product is waiting to deploy</h2>
      </div>
      <div class="column">
        <div class="buttons"><a class="button is-success is-outlined ml-auto-tablet" href="#">Learn more</a></div>
      </div>
    </div>
    <div class="columns">
      <div class="column mb-6 mb-0-tablet">
        <img class="mb-8" src="acros-assets/icons/features/auth.svg" alt="">
        <h5 class="mb-4 title is-size-5 has-text-weight-medium">Frequent authentication</h5>
        <p class="subtitle is-size-6">Take care to develop resources continually and integrity them with previous projects.</p>
      </div>
      <div class="column mb-6 mb-0-tablet">
        <img class="mb-8" src="acros-assets/icons/features/users.svg" alt="">
        <h5 class="mb-4 title is-size-5 has-text-weight-medium">List of regular users</h5>
        <p class="subtitle is-size-6">Take care to develop resources continually and integrity them with previous projects.</p>
      </div>
      <div class="column mb-6 mb-0-tablet">
        <img class="mb-8" src="acros-assets/icons/features/exchange.svg" alt="">
        <h5 class="mb-4 title is-size-5 has-text-weight-medium">Change of access</h5>