Bulma Contact Components (46)

Framework

UI Library

7-Day Pass

Full Shuffle Editor access for just $10

Great for quick projects and for testing everything Shuffle can do. One-time payment, not a subscription.

New to Shuffle? Try our tools:

Multi-AI Designer Kick off several design directions at once, then build on your favorite. Visual Editor Build from UI components and templates, then customize every detail.

Components

Contact from Flaro

Bulma

Flaro

<section class="has-background-light py-24 is-relative is-clipped">
    <img class="is-absolute is-bottom-0" style="left: 50%; transform: translateX(-50%);" src="flaro-assets/images/contact/gradient.svg" alt="">
    <div class="container px-8">
        <h2 class="mb-5 title is-size-1 has-text-centered has-text-weight-bold">Get connected</h2>
        <p class="mb-20 has-text-grey has-text-centered has-text-weight-medium">Lorem ipsum dolor sit amet, to the con adipiscing. Volutpat tempor to the condimentum vitae vel purus.</p>
        <div class="columns">
            <div class="column is-4">
                <div class="box has-background-white">
                    <div class="mb-6 is-relative mx-auto has-background-link" style="width: 64px; height: 64px; border-radius: 50%;">
                        <div class="is-absolute" style="left: 50%; top: 50%; transform: translate(-50%, -50%);">
                          <svg width="32" height="33" viewBox="0 0 32 33" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M4 11.1666L14.5208 18.1805C15.4165 18.7776 16.5835 18.7776 17.4792 18.1805L28 11.1666M6.66667 25.8333H25.3333C26.8061 25.8333 28 24.6394 28 23.1666V9.83329C28 8.36053 26.8061 7.16663 25.3333 7.16663H6.66667C5.19391 7.16663 4 8.36053 4 9.83329V23.1666C4 24.6394 5.19391 25.8333 6.66667 25.8333Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                          </svg>
                        </div>
                    </div>
                    <h3 class="mb-3 has-text-weight-bold has-text-centered has-text-dark is-size-4">Send Email</h3>
                    <p class="has-text-weight-medium has-text-centered has-text-dark">info@mail.com</p>
                    <p class="has-text-weight-medium has-text-centered has-text-dark">support@mail.com</p>
                </div>
            </div>
            <div class="column is-4">
                <div class="box has-background-white">
                    <div class="mb-6 is-relative mx-auto has-background-white" style="width: 64px; height: 64px; border-radius: 50%; border: 1px solid #d8d5d5;">
                        <div class="is-absolute" style="left: 50%; top: 50%; transform: translate(-50%, -50%);">

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Contact from Zeus

Bulma

Zeus

<section class="pt-20">
  <div class="section py-0">
    <div class="container mb-20">
      <div class="columns is-vcentered is-centered">
        <div class="column is-6 mb-12 mb-0-desktop">
          <div class="has-mw-lg">
            <h2 class="title is-2">Lorem ipsum dolor sit amet consectutar domor at elis</h2>
          </div>
        </div>
        <div class="column is-4 ml-auto">
          <h3 class="mb-4 title is-4">Address</h3>
          <p class="mb-10 mb-8-desktop has-text-grey-dark">1686 Geraldine Lane New York, NY 10013</p>
          <h3 class="mb-4 title is-4">Contacts</h3>
          <p class="has-text-grey-dark">hello@wireframes.org</p>
        </div>
      </div>
    </div>
  </div>
  <div class="is-relative">
    <img class="image is-fullwidth is-cover" style="height:448px;" src="zeus-assets/images/map.png" alt="">
  </div>
</section>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Contact from Pstls.

Bulma

Pstls.

<section class="section py-24 is-relative">
  <div class="container">
    <img class="is-absolute is-top-0 is-bottom-0 is-left-0 is-fullwidth" style="object-fit: cover;" src="pstls-assets/images/contacts/pink-shadows.png" alt="">
    <div class="mb-8 mb-24-tablet columns is-multiline is-relative">
      <div class="column is-6-tablet">
        <h2 class="title is-size-2-mobile is-size-1-tablet">Contact</h2>
      </div>
      <div class="column is-6-tablet">
        <p class="is-size-5 has-text-grey-light">Is the answer to your question missing?</p>
        <p class="is-size-5">Get in touch with us.</p>
      </div>
    </div>
    <div class="columns is-multiline is-relative">
      <div class="column is-6-tablet">
        <div class="columns is-multiline">
          <div class="column is-12 is-6-desktop mb-12-tablet">
            <p class="is-size-5 has-text-grey-light">E-mail</p>
            <a class="is-size-5 has-text-dark" href="mailto:contact@pstls.com">contact@pstls.com</a>
          </div>
          <div class="column is-12 is-6-desktop mb-12-tablet">
            <p class="is-size-5 has-text-grey-light">Phone</p>
            <p class="is-size-5">+1-2020-555-109</p>
          </div>
          <div class="column is-6">

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Contact from Acros

Bulma

Acros

<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>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Contact from Bendis

Bulma

Bendis

<section class="is-relative section pt-32 pb-96 has-background-primary is-overflow-hidden">
  <div class="is-absolute is-bottom-0 mb-40" style="left: 50%; transform: translateX(-50%); z-index: 1;">
    <svg width="75" height="95" viewbox="0 0 75 95" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M70.1233 20.455C60.9233 2.15497 38.6233 -5.24503 20.3233 3.95497C2.0233 13.155 -5.0767 36.255 3.8233 53.755C8.0233 62.055 25.5233 83.6549 33.2233 93.1549C35.1233 95.5549 38.7233 95.5549 40.7233 93.1549C48.4233 83.6549 65.7233 62.055 70.2233 53.755C75.8233 43.555 75.6233 31.355 70.1233 20.455ZM37.0233 56.5549C26.3233 56.5549 17.7233 47.855 17.7233 37.255C17.7233 26.555 26.3233 17.955 37.0233 17.955C47.7233 17.955 56.3233 26.655 56.3233 37.255C56.4233 47.855 47.7233 56.5549 37.0233 56.5549Z" fill="#182885"></path>
    </svg>
  </div>
  <img class="is-absolute is-bottom-0 is-left-0 image is-fullwidth" style="height: 532px; object-fit: cover" src="bendis-assets/images/map1.png" alt="">
  <div class="container">
    <div class="py-12 px-8 p-20-tablet has-background-white">
      <div class="columns is-vcentered is-justify-content-space-between">
        <div class="column is-6 mb-8 mb-0-desktop">
          <div class="has-mw-md mx-auto-mobile">
            <h2 class="title is-size-3 has-leading-3 has-text-primary">Take quick action that increases your brand&apos;s regular profit.</h2>
          </div>
        </div>
        <div class="column is-5 is-offset-1-desktop">
          <div class="has-mw-md mx-auto-mobile">
            <div class="mb-4">
              <h4 class="has-text-info has-text-weight-semibold is-uppercase">Address</h4>
              <span class="has-text-grey">1686 Geraldine Lane New York, NY 10013</span>
            </div>
            <div>
              <h4 class="has-text-info has-text-weight-semibold is-uppercase">Contacts</h4>
              <span class="has-text-grey">hello@wireframes.org</span>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Contact from Metis

Bulma

Metis

<section class="section">
  <div class="container">
    <div class="columns is-desktop is-vcentered">
      <div class="column is-6-desktop">
        <div class="is-max-w-96 pb-6">
          <span class="subtitle is-spaced">Contact Us</span>
          <h2 class="title">We will be glad to hear from you!</h2>
        </div>
        <div class="mt-6 has-text-black">
          <div class="mb-5">
            <h3 class="subtitle is-spaced mb-1">Phone</h3>
            <p>+ 48 654-430-309</p>
          </div>
          <div class="mb-5">
            <h3 class="subtitle is-spaced mb-1">
              E-mail
              <p>info@metis.com</p>
            </h3>
          </div>
          <div class="mb-5">
            <h3 class="subtitle is-spaced mb-1">
              Address
              <p>11567 E Broadview Dr</p>
              <p>Kiowa, Colorado(CO), 80117</p>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Contact from Cronos

Bulma

Cronos

<section class="pt-20 pb-20 pb-32-desktop">
  <div class="container px-4 mb-16 mb-32-desktop">
    <div class="columns is-multiline">
      <div class="column is-12 is-6-desktop mb-6 mb-0-desktop">
        <h2 class="title is-size-2 is-spaced">Lorem ipsum dolor sit amet consectutar</h2>
      </div>
      <div class="column is-12 is-6-desktop">
        <div class="has-mw-md-desktop ml-auto-desktop">
          <h6 class="title is-size-4">Address</h6>
          <p class="mb-6">1686 Geraldine Lane New York, NY 10013</p>
          <h6 class="title is-size-4">Contacts</h6>
          <p>hello@wireframes.org</p>
        </div>
      </div>
    </div>
  </div>
  <div class="is-relative">
    <img class="is-absolute is-block-tablet is-hidden-touch is-top-0 is-right-0 image" src="cronos-assets/elements/warning-light-small.svg" alt="">
    <img class="is-absolute is-block-tablet is-hidden-touch is-left-0 image" src="cronos-assets/elements/green-light-left.svg" alt="">
    <img class="image is-fullwidth is-cover" style="height: 448px;" src="cronos-assets/images/maps/map.png" alt="">
  </div>
</section>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Contact from Plain

Bulma

Plain

<section>
  <div class="section">
    <div class="container mb-4">
      <div class="is-vcentered columns is-multiline">
        <div class="column is-6">
          <h2 class="is-size-1 is-size-3-mobile has-text-weight-bold">Lorem ipsum dolor sit amet consectutar domor at elis</h2>
        </div>
        <div class="column is-4 ml-auto">
          <h4 class="is-size-4 has-text-weight-bold">Address</h4>
          <p class="mb-4 has-text-grey">1686 Geraldine Lane New York, NY 10013</p>
          <h4 class="is-size-4 has-text-weight-bold">Contacts</h4>
          <p class="has-text-grey">hello@wireframes.org</p>
        </div>
      </div>
    </div>
  </div>
  <div>
    <img class="image is-fullwidth" src="bulma-plain-assets/images/map.png" alt="">
  </div>
</section>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Contact from asitrastudio

Bulma

asitrastudio

<section class="section has-background-white-ter">
  <div class="container">
    <div class="columns is-multiline">
      <div class="column is-12 is-6-desktop mb-16 mb-0-desktop">
        <div class="has-mw-xl mx-auto mx-0-desktop">
          <div class="has-mw-lg mb-10">
            <h1 class="title is-size-2-mobile is-size-1-tablet mb-8" style="letter-spacing: -0.04em;">Let&grave;s talk</h1>
            <p class="subtitle is-size-6">Whereby Embedded is the easiest way to embed video calls directly into your app, website, or anywhere else you need beautiful, custom video chat &ndash; that just works.</p>
          </div>
          <div class="mb-20 columns is-multiline">
            <div class="column is-6">
              <div class="box py-6 has-text-centered" style="border-radius: 20px;">
                <span class="mb-2 is-block has-text-grey-dark">Call us</span>
                <span class="has-text-weight-medium has-text-dark">+48 291 821 114</span>
              </div>
            </div>
            <div class="column is-6">
              <div class="box py-6 has-text-centered" style="border-radius: 20px;">
                <span class="mb-2 is-block has-text-grey-dark">Email us</span>
                <span class="has-text-weight-medium has-text-dark">contact@asitrastudio.co</span>
              </div>
            </div>
          </div>
          <div class="mb-16">

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

A clear contact path is a key component of a successful website. The contact form or address data should be clearly highlighted on it.

Choose from many variations of the Bulma components contacts. The variants shown here are available in various UI libraries in the Shuffle editor. You will also find many other types of components that will be in the same style. This will allow you to build a comprehensive Bulma website template. Each library is designed by a professional designer and coded by our team of developers.

Get access to all sections of the Bulma components contacts, code and our editor. Try the demo for free.

Try for Free →

Redirecting to PayPal

Supporting tools

Plans

Bulma Contact Components

Framework

UI Library

Components

Contact from Flaro

Get the code for 13,400+ components

Contact from Zeus

Get the code for 13,400+ components

Contact from Pstls.

Get the code for 13,400+ components

Contact from Acros

Get the code for 13,400+ components

Contact from Bendis

Get the code for 13,400+ components

Contact from Metis

Get the code for 13,400+ components

Contact from Cronos

Get the code for 13,400+ components

Contact from Plain

Get the code for 13,400+ components

Contact from asitrastudio

Get the code for 13,400+ components

The easiest way to create beautiful websites

monthly

annual

lifetime

monthly

annual

Create an account

From idea to beautiful design in minutes.

Products

Extensions

UI Components

Company

Support

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 Contact Components

Framework

UI Library

Components

Contact from Flaro

Get the code for 13,400+ components

Contact from Zeus

Get the code for 13,400+ components

Contact from Pstls.

Get the code for 13,400+ components

Contact from Acros

Get the code for 13,400+ components

Contact from Bendis

Get the code for 13,400+ components

Contact from Metis

Get the code for 13,400+ components

Contact from Cronos

Get the code for 13,400+ components

Contact from Plain

Get the code for 13,400+ components

Contact from asitrastudio

Get the code for 13,400+ components

The easiest way to create beautiful websites

monthly

annual

lifetime

monthly

annual

Create an account

From idea to beautiful design in minutes.

Products

Extensions

UI Components

Company

Support