Bootstrap 5 Components

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

Bootstrap Component #681

Bootstrap

Solstice

<section class="py-12 py-md-16 py-lg-24 bg-primary-light overflow-hidden">
  <div class="container">
    <div class="row">
      <div class="col-12 col-lg-4 mb-16 mb-lg-0">
        <div class="mw-xs pt-16">
          <h3 class="font-heading mb-6">What our users say</h3>
          <p class="text-light-dark mb-0">Hundreds of companies and</p>
          <p class="text-light-dark mb-10">thousands of happy users</p>
          <div class="d-flex align-items-center">
            <div class="bg-white me-6 rounded-pill" style="width: 48px; height: 48px;">
              <button class="btn d-inline-flex align-items-center justify-content-center p-0 btn-outline-light shadow" style="width: 48px; height: 48px;">
                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M13.125 16.25L6.875 10L13.125 3.75" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </button>
            </div>
            <div class="bg-white rounded-pill" style="width: 48px; height: 48px;">
              <button class="btn d-inline-flex align-items-center justify-content-center p-0 btn-outline-light shadow" style="width: 48px; height: 48px;">
                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M6.875 3.75L13.125 10L6.875 16.25" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </button>
            </div>
          </div>

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

Bootstrap Component #682

Bootstrap

Solstice

<section class="py-12 py-md-16 py-lg-24 bg-primary-light">
  <div class="container">
    <h3 class="font-heading mb-10">FAQ</h3>
    <div class="row">
      <div class="col-lg-6">
        <button class="btn btn-link border-0 border-bottom border-warning mb-2 p-6 d-flex w-100 justify-content-between align-items-center text-start text-black rounded-0">
          <span class="mw-md display-5 fw-bold mb-0 me-6">What is Solstice? What is it for?</span>
          <svg class="flex-shrink-0" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
            <g clip-path="url(#clip0_107_9284)">
              <path fill-rule="evenodd" clip-rule="evenodd" d="M16 2.66669C8.63586 2.66669 2.66663 8.63592 2.66663 16C2.66663 23.3641 8.63586 29.3334 16 29.3334C23.3641 29.3334 29.3333 23.3641 29.3333 16C29.3333 8.63592 23.3641 2.66669 16 2.66669ZM17.0256 11.8975C17.0256 11.6254 16.9175 11.3646 16.7252 11.1722C16.5329 10.9799 16.272 10.8718 16 10.8718C15.7279 10.8718 15.4671 10.9799 15.2747 11.1722C15.0824 11.3646 14.9743 11.6254 14.9743 11.8975V14.9744H11.8974C11.6254 14.9744 11.3645 15.0824 11.1722 15.2748C10.9798 15.4671 10.8718 15.728 10.8718 16C10.8718 16.272 10.9798 16.5329 11.1722 16.7253C11.3645 16.9176 11.6254 17.0257 11.8974 17.0257H14.9743V20.1026C14.9743 20.3746 15.0824 20.6355 15.2747 20.8278C15.4671 21.0202 15.7279 21.1282 16 21.1282C16.272 21.1282 16.5329 21.0202 16.7252 20.8278C16.9175 20.6355 17.0256 20.3746 17.0256 20.1026V17.0257H20.1025C20.3745 17.0257 20.6354 16.9176 20.8278 16.7253C21.0201 16.5329 21.1282 16.272 21.1282 16C21.1282 15.728 21.0201 15.4671 20.8278 15.2748C20.6354 15.0824 20.3745 14.9744 20.1025 14.9744H17.0256V11.8975Z" fill="#FF7100"></path>
            </g>
          </svg>
        </button>
        <button class="btn btn-link border-0 border-bottom border-warning mb-2 p-6 d-flex w-100 justify-content-between align-items-center text-start text-black rounded-0">
          <span class="mw-md display-5 fw-bold mb-0 me-6">Is there a particular subject I should focus on learning?</span>
          <svg class="flex-shrink-0" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
            <g clip-path="url(#clip0_107_9284)">
              <path fill-rule="evenodd" clip-rule="evenodd" d="M16 2.66669C8.63586 2.66669 2.66663 8.63592 2.66663 16C2.66663 23.3641 8.63586 29.3334 16 29.3334C23.3641 29.3334 29.3333 23.3641 29.3333 16C29.3333 8.63592 23.3641 2.66669 16 2.66669ZM17.0256 11.8975C17.0256 11.6254 16.9175 11.3646 16.7252 11.1722C16.5329 10.9799 16.272 10.8718 16 10.8718C15.7279 10.8718 15.4671 10.9799 15.2747 11.1722C15.0824 11.3646 14.9743 11.6254 14.9743 11.8975V14.9744H11.8974C11.6254 14.9744 11.3645 15.0824 11.1722 15.2748C10.9798 15.4671 10.8718 15.728 10.8718 16C10.8718 16.272 10.9798 16.5329 11.1722 16.7253C11.3645 16.9176 11.6254 17.0257 11.8974 17.0257H14.9743V20.1026C14.9743 20.3746 15.0824 20.6355 15.2747 20.8278C15.4671 21.0202 15.7279 21.1282 16 21.1282C16.272 21.1282 16.5329 21.0202 16.7252 20.8278C16.9175 20.6355 17.0256 20.3746 17.0256 20.1026V17.0257H20.1025C20.3745 17.0257 20.6354 16.9176 20.8278 16.7253C21.0201 16.5329 21.1282 16.272 21.1282 16C21.1282 15.728 21.0201 15.4671 20.8278 15.2748C20.6354 15.0824 20.3745 14.9744 20.1025 14.9744H17.0256V11.8975Z" fill="#FF7100"></path>
            </g>
          </svg>
        </button>
      </div>
      <div class="col-lg-6">
        <button class="btn btn-link border-0 border-bottom border-warning mb-2 p-6 d-flex w-100 justify-content-between align-items-center text-start text-black rounded-0">

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

Bootstrap Component #683

Bootstrap

Solstice

<section class="py-12 py-md-16 py-lg-24 bg-primary-light">
  <div class="container">
    <div class="mw-lg mw-lg-6xl mx-auto">
      <div class="row">
        <div class="col-12 col-lg-5 col-xl-6 mb-12 mb-lg-0">
          <div class="mw-md">
            <h3 class="font-heading mb-4">How can we help you today?</h3>
            <p class="text-light-dark mb-0">Submit your info and we’ll get back to you as soon as possible.</p>
            <div class="my-10">
              <svg width="49" height="3" viewBox="0 0 49 3" fill="none" xmlns="http://www.w3.org/2000/svg"><rect y="1" width="12" height="1" rx="0.5" fill="#FFC96D"></rect><circle cx="17.5" cy="1.5" r="1.5" fill="#FFA632"></circle><circle cx="24.5" cy="1.5" r="1.5" fill="#FFA632"></circle><circle cx="31.5" cy="1.5" r="1.5" fill="#FFA632"></circle><rect x="37" y="1" width="12" height="1" rx="0.5" fill="#FFC96D"></rect></svg>
            </div>
            <div class="mb-10">
              <div class="d-flex mb-4 align-items-center">
                <svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <rect width="36" height="36" rx="10" fill="#FF7100"></rect>
                  <path d="M26.3333 25.7083H9.66666C9.32499 25.7083 9.04166 25.9916 9.04166 26.3333C9.04166 26.675 9.32499 26.9583 9.66666 26.9583H26.3333C26.675 26.9583 26.9583 26.675 26.9583 26.3333C26.9583 25.9916 26.675 25.7083 26.3333 25.7083Z" fill="white"></path>
                  <path d="M22.1667 9.66669H13.8333C11.3333 9.66669 10.5 11.1584 10.5 13V26.3334H25.5V13C25.5 11.1584 24.6667 9.66669 22.1667 9.66669ZM16.3333 22.375H13.8333C13.4917 22.375 13.2083 22.0917 13.2083 21.75C13.2083 21.4084 13.4917 21.125 13.8333 21.125H16.3333C16.675 21.125 16.9583 21.4084 16.9583 21.75C16.9583 22.0917 16.675 22.375 16.3333 22.375ZM16.3333 18.625H13.8333C13.4917 18.625 13.2083 18.3417 13.2083 18C13.2083 17.6584 13.4917 17.375 13.8333 17.375H16.3333C16.675 17.375 16.9583 17.6584 16.9583 18C16.9583 18.3417 16.675 18.625 16.3333 18.625ZM16.3333 14.875H13.8333C13.4917 14.875 13.2083 14.5917 13.2083 14.25C13.2083 13.9084 13.4917 13.625 13.8333 13.625H16.3333C16.675 13.625 16.9583 13.9084 16.9583 14.25C16.9583 14.5917 16.675 14.875 16.3333 14.875ZM22.1667 22.375H19.6667C19.325 22.375 19.0417 22.0917 19.0417 21.75C19.0417 21.4084 19.325 21.125 19.6667 21.125H22.1667C22.5083 21.125 22.7917 21.4084 22.7917 21.75C22.7917 22.0917 22.5083 22.375 22.1667 22.375ZM22.1667 18.625H19.6667C19.325 18.625 19.0417 18.3417 19.0417 18C19.0417 17.6584 19.325 17.375 19.6667 17.375H22.1667C22.5083 17.375 22.7917 17.6584 22.7917 18C22.7917 18.3417 22.5083 18.625 22.1667 18.625ZM22.1667 14.875H19.6667C19.325 14.875 19.0417 14.5917 19.0417 14.25C19.0417 13.9084 19.325 13.625 19.6667 13.625H22.1667C22.5083 13.625 22.7917 13.9084 22.7917 14.25C22.7917 14.5917 22.5083 14.875 22.1667 14.875Z" fill="white"></path>
                </svg>
                <span class="ms-3 display-5 fw-bold">Company HQ</span>
              </div>
              <span class="d-block text-light-dark">4140 Parker Rd. Allentown,</span>
              <span class="text-light-dark">New Mexico 31134</span>
            </div>
            <div class="position-relative d-sm-inline-flex align-items-center px-8 py-7 bg-white border border-light rounded-3">

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

Bootstrap Component #684

Bootstrap

Solstice

<section class="pt-12 pt-lg-24 bg-info">
  <div class="container">
    <div class="pt-10 px-10 pb-20 pb-lg-32 bg-primary-light rounded-top">
      <div class="row">
        <div class="col-lg-4 mb-16 mb-lg-0">
          <a class="d-inline-block mb-6" href="#">
            <img src="solstice-assets/images/logos/solstice-logo-dark.svg" alt="">
          </a>
          <p class="text-dark-light small mb-0">© 2023 Solstice. All rights reserved.</p>
        </div>
        <div class="col-lg-8">
          <div class="row">
            <div class="col-6 col-md-3 mb-12">
              <h6 class="mb-6 fw-medium">Platform</h6>
              <ul class="list-unstyled mb-0">
                <li class="mb-6"><a class="btn btn-link text-dark-light p-0" href="#">Features</a></li>
                <li class="mb-6"><a class="btn btn-link text-dark-light p-0" href="#">How it works</a></li>
                <li class="mb-6"><a class="btn btn-link text-dark-light p-0" href="#">Pricing</a></li>
                <li class="mb-6"><a class="btn btn-link text-dark-light p-0" href="#">Features</a></li>
                <li><a class="btn btn-link text-dark-light p-0" href="#">Events</a></li>
              </ul>
            </div>
            <div class="col-6 col-md-3 mb-12">
              <h6 class="mb-6 fw-medium">Company</h6>

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

Bootstrap Component #685

Bootstrap

Solstice

<section class="py-12 py-md-16 py-lg-24 bg-primary-light overflow-hidden">
  <div class="bg-info border-top border-bottom border-info-dark">
    <div class="container">
      <div class="row">
        <div class="col-12 col-md-4">
          <div class="py-8 px-4 text-center">
            <h4 class="h2 text-secondary mb-1">101K+</h4>
            <p class="text-secondary text-uppercase mb-0">Users studying around the globe</p>
          </div>
        </div>
        <div class="col-12 col-md-4">
          <div class="py-8 px-4 text-center">
            <h4 class="h2 text-secondary mb-1">352K+</h4>
            <p class="text-secondary text-uppercase mb-0">Registered Users</p>
          </div>
        </div>
        <div class="col-12 col-md-4">
          <div class="py-8 px-4 text-center">
            <h4 class="h2 text-secondary mb-1">94K+</h4>
            <p class="text-secondary text-uppercase mb-0">Registered Users</p>
          </div>
        </div>
      </div>
    </div>

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

Bootstrap Component #686

Bootstrap

Solstice

<section class="py-12 py-md-16 py-lg-24 bg-primary-light overflow-hidden">
  <div class="container">
    <div class="mw-5xl mx-auto">
      <div class="row">
        <div class="col-12 col-lg-5 mb-8 mb-lg-0">
          <p class="fs-6 fw-semibold text-secondary">Backed by leading education companies</p>
        </div>
        <div class="col-12 col-lg-7">
          <div class="row mb-n10">
            <div class="col-6 col-md-3 mb-10">
              <img class="img-fluid" src="solstice-assets/images/logos/placeholder-logo-secondary1.png" alt="">
            </div>
            <div class="col-6 col-md-3 mb-10">
              <img class="img-fluid" src="solstice-assets/images/logos/placeholder-logo-secondary2.png" alt="">
            </div>
            <div class="col-6 col-md-3 mb-10">
              <img class="img-fluid" src="solstice-assets/images/logos/placeholder-logo-secondary3.png" alt="">
            </div>
            <div class="col-6 col-md-3 mb-10">
              <img class="img-fluid" src="solstice-assets/images/logos/placeholder-logo-secondary4.png" alt="">
            </div>
            <div class="col-6 col-md-3 mb-10">
              <img class="img-fluid" src="solstice-assets/images/logos/placeholder-logo-secondary5.png" alt="">
            </div>

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

Bootstrap Component #687

Bootstrap

Solstice

<section class="py-12 py-md-16 py-lg-24 bg-primary-light">
  <div class="container">
    <div class="mw-lg mx-auto mb-20 text-center">
      <span class="badge mb-4 d-inline-flex align-items-center bg-white text-primary border border-info">
        <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M8.62293 3.37707C8.567 3.32115 8.50813 3.21714 8.50077 3.02581C8.62835 3.19081 8.77541 3.3237 8.91729 3.42581C8.95382 3.45211 8.99065 3.47685 9.02752 3.5H9.015C8.79742 3.5 8.68271 3.43685 8.62293 3.37707ZM10.485 3.5H10.469C10.508 3.47551 10.547 3.44928 10.5856 3.42134C10.7259 3.31979 10.8723 3.18774 10.9993 3.02426C10.9922 3.21658 10.9331 3.321 10.8771 3.37707C10.8173 3.43685 10.7026 3.5 10.485 3.5Z" fill="#FF7100" stroke="#FF7100"></path>
          <path d="M9.015 4.75C8.04 4.75 7.25 3.96 7.25 2.985V1.5C7.25 1.225 7.025 1 6.75 1H3.5C2.12 1 1 2.115 1 3.49V6.975C1 8.355 2.12 9.475 3.5 9.475H4.25C4.39 9.475 4.57 9.565 4.65 9.675L5.4 10.67C5.73 11.11 6.27 11.11 6.6 10.67L7.35 9.675C7.445 9.55 7.595 9.475 7.75 9.475H8.505C9.885 9.475 11 8.36 11 6.98V5.25C11 4.975 10.775 4.75 10.5 4.75H9.015ZM4 6C3.72 6 3.5 5.775 3.5 5.5C3.5 5.225 3.72 5 4 5C4.275 5 4.5 5.225 4.5 5.5C4.5 5.775 4.28 6 4 6ZM6 6C5.72 6 5.5 5.775 5.5 5.5C5.5 5.225 5.72 5 6 5C6.275 5 6.5 5.225 6.5 5.5C6.5 5.775 6.28 6 6 6Z" fill="#FF7100"></path>
        </svg>
        <span class="ms-1">Newsletter</span>
      </span>
      <h3 class="font-heading mb-0">Join 14K people embrace fun learning</h3>
    </div>
    <div class="mw-xl mw-lg-6xl mx-auto">
      <div class="row">
        <div class="col-lg-6 mb-6 mb-lg-0">
          <div class="d-flex gap-4 h-100 p-4 bg-primary rounded-3">
            <div class="d-inline-block px-8 pt-5 bg-info rounded-2 align-self-start">
              <img class="img-fluid" src="solstice-assets/images/newsletter/man-picture.png" alt="">
            </div>
            <div class="d-inline-block mt-24 mt-lg-auto ms-auto px-8 pt-5 bg-info-dark rounded-2">
              <img class="img-fluid" src="solstice-assets/images/newsletter/woman-picture.png" alt="">
            </div>
          </div>
        </div>

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

Bootstrap Component #688

Bootstrap

Solstice

<section class="py-12 py-md-16 py-lg-24 bg-primary-light">
  <div class="container">
    <div class="mw-md mw-md-5xl mx-auto">
      <div class="mw-md mw-lg-xl mx-auto mb-24 text-center">
        <h3 class="font-heading mb-4">How it works</h3>
        <p class="text-light-dark mb-0">What steps do I need to take to join?</p>
      </div>
      <div class="row mb-12 mx-0">
        <div class="col-12 col-md-4 px-0 mb-6 mb-md-0 border-bottom border-light">
          <button class="btn d-flex w-100 align-items-center justify-content-center border-0 rounded-0 px-0 pt-0 pb-6 text-light-dark">
            <div>
              <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                <rect width="40" height="40" rx="10" fill="#FFC96D"></rect>
                <path d="M24.8 10H22.2C19 10 17 12 17 15.2V19.25H21.44L19.37 17.18C19.22 17.03 19.15 16.84 19.15 16.65C19.15 16.46 19.22 16.27 19.37 16.12C19.66 15.83 20.14 15.83 20.43 16.12L23.78 19.47C24.07 19.76 24.07 20.24 23.78 20.53L20.43 23.88C20.14 24.17 19.66 24.17 19.37 23.88C19.08 23.59 19.08 23.11 19.37 22.82L21.44 20.75H17V24.8C17 28 19 30 22.2 30H24.79C27.99 30 29.99 28 29.99 24.8V15.2C30 12 28 10 24.8 10Z" fill="white"></path>
                <path d="M10.75 19.25C10.34 19.25 10 19.59 10 20C10 20.41 10.34 20.75 10.75 20.75H17V19.25H10.75Z" fill="white"></path>
              </svg>
              <span class="ms-3 fs-5 fw-semibold">Step I</span>
            </div>
          </button>
        </div>
        <div class="col-12 col-md-4 px-0 mb-6 mb-md-0 border-bottom border-light">
          <button class="btn d-flex w-100 align-items-center justify-content-center border-0 rounded-0 px-0 pt-0 pb-6 text-dark-light border-bottom border-4 border-primary">
            <div>
              <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">

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

Bootstrap Component #689

Bootstrap

Solstice

<div class="position-fixed bottom-0 start-0 bg-primary-light" style="z-index: 50;">
  <div class="d-flex flex-wrap align-items-start">
    <div class="container py-16 pt-lg-24">
      <div class="py-12 py-md-6 px-12 px-sm-20 px-md-12 px-lg-6 w-100 bg-white border rounded-3 rounded-pill">
        <div class="row align-items-center">
          <div class="col-12 col-md-7 mb-10 mb-md-0">
            <div class="d-sm-flex align-items-center">
              <span class="d-block mb-4 mb-sm-0">
                <svg width="34" height="34" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M14.5002 13.6667C15.1946 13.6667 15.7852 13.4233 16.2718 12.9367C16.7585 12.45 17.0013 11.86 17.0002 11.1667C17.0002 10.4722 16.7568 9.88166 16.2702 9.39499C15.7835 8.90833 15.1935 8.66555 14.5002 8.66666C13.8057 8.66666 13.2152 8.91 12.7285 9.39666C12.2418 9.88333 11.9991 10.4733 12.0002 11.1667C12.0002 11.8611 12.2435 12.4517 12.7302 12.9383C13.2168 13.425 13.8068 13.6678 14.5002 13.6667ZM11.1668 22C11.8613 22 12.4518 21.7567 12.9385 21.27C13.4252 20.7833 13.6679 20.1933 13.6668 19.5C13.6668 18.8056 13.4235 18.215 12.9368 17.7283C12.4502 17.2417 11.8602 16.9989 11.1668 17C10.4724 17 9.88183 17.2433 9.39516 17.73C8.9085 18.2167 8.66572 18.8067 8.66683 19.5C8.66683 20.1944 8.91016 20.785 9.39683 21.2717C9.8835 21.7583 10.4735 22.0011 11.1668 22ZM22.0002 23.6667C22.4724 23.6667 22.8685 23.5067 23.1885 23.1867C23.5085 22.8667 23.6679 22.4711 23.6668 22C23.6668 21.5278 23.5068 21.1317 23.1868 20.8117C22.8668 20.4917 22.4713 20.3322 22.0002 20.3333C21.5279 20.3333 21.1318 20.4933 20.8118 20.8133C20.4918 21.1333 20.3324 21.5289 20.3335 22C20.3335 22.4722 20.4935 22.8683 20.8135 23.1883C21.1335 23.5083 21.5291 23.6678 22.0002 23.6667ZM17.0002 33.6667C14.6946 33.6667 12.5279 33.2289 10.5002 32.3533C8.47239 31.4778 6.7085 30.2906 5.2085 28.7917C3.7085 27.2917 2.52127 25.5278 1.64683 23.5C0.772385 21.4722 0.334607 19.3056 0.333496 17C0.333496 14.6667 0.833496 12.3889 1.8335 10.1667C2.8335 7.94444 4.22961 6.02777 6.02183 4.41666C7.81183 2.80555 9.93572 1.62499 12.3935 0.874994C14.8513 0.124994 17.5391 0.0555499 20.4568 0.666661C20.2068 1.91666 20.2902 3.09055 20.7068 4.18833C21.1235 5.28611 21.7485 6.20944 22.5818 6.95833C23.4152 7.70833 24.4013 8.22222 25.5402 8.5C26.6791 8.77777 27.8735 8.70833 29.1235 8.29166C28.2624 10.2083 28.4152 11.8472 29.5818 13.2083C30.7485 14.5694 32.0824 15.2778 33.5835 15.3333C33.8335 17.8056 33.5696 20.1528 32.7918 22.375C32.0141 24.5972 30.8679 26.5417 29.3535 28.2083C27.8402 29.875 26.0207 31.2017 23.8952 32.1883C21.7696 33.175 19.4713 33.6678 17.0002 33.6667Z" fill="#FF7100"></path>
                </svg>
              </span>
              <p class="ms-6 mb-0">By clicking “Accept Cookies”, you agree to the storing of cookies on your device to enhance site navigation, analyze site usage, and assist in our marketing efforts.</p>
            </div>
          </div>
          <div class="col-12 col-md-5 text-end"><a class="btn btn-sm py-4 btn-primary fs-6" href="#">Accept Cookies</a></div>
        </div>
      </div>
    </div>
  </div>
</div>

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

Bootstrap Component #690

Bootstrap

Solstice

<section class="overflow-hidden">
  <div class="row">
    <div class="col-lg-6 bg-primary-light order-last order-lg-first">
      <div class="d-flex h-100 align-items-center py-12 px-5">
        <div class="p-6 mw-xl mx-auto bg-white rounded-3">
          <div class="row mb-n4">
            <div class="col-sm-6 mb-4">
              <div class="d-inline-flex h-100 w-100 px-5 pt-14 rounded-3 bg-secondary">
                <img class="d-block mx-auto img-fluid" src="solstice-assets/images/sign-up/man-picture.png" alt="">
              </div>
            </div>
            <div class="col-sm-6 mb-4">
              <img class="d-block img-fluid w-100 h-100 rounded-3" src="solstice-assets/images/sign-up/tile-image.png" alt="">
            </div>
            <div class="col-sm-6 mb-4">
              <div class="d-inline-flex h-100 w-100 justify-content-center align-items-center p-5 bg-light-light rounded-3">
                <svg width="200" height="200" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M175 87.5V56.25C175 52.7982 172.202 50 168.75 50L150 50C146.549 50 143.75 52.7982 143.75 56.25V81.25C143.75 101.961 126.961 118.75 106.25 118.75L81.2503 118.75C77.7985 118.75 75.0003 121.548 75.0003 125V143.75C75.0003 147.202 77.7985 150 81.2503 150L112.5 150C147.018 150 175 122.018 175 87.5Z" fill="#E4E4E4"></path>
                  <path d="M25 112.5L25 143.75C25 147.202 27.7982 150 31.25 150H50C53.4518 150 56.25 147.202 56.25 143.75V118.75C56.25 98.0393 73.0393 81.25 93.75 81.25H118.75C122.202 81.25 125 78.4518 125 75V56.25C125 52.7982 122.202 50 118.75 50L87.5 50C52.9822 50 25 77.9822 25 112.5Z" fill="#E4E4E4"></path>
                </svg>
              </div>
            </div>
            <div class="col-sm-6 mb-4">
              <img class="d-block img-fluid w-100 h-100 rounded-3" src="solstice-assets/images/sign-up/woman-picture.png" alt="">

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

Bootstrap Component #691

Bootstrap

Solstice

<section class="pb-12 pb-lg-24 overflow-hidden">
  <div class="position-relative bg-info">
    <div class="position-absolute start-0 w-100 top-0 d-flex justify-content-center">
      <div class="mt-n6 me-6 rounded-3" style="width: 324px; height: 340px; background: linear-gradient(180deg, rgba(255, 224, 165, 0.00) 0%, rgba(255, 224, 165, 0.50) 100%);"></div>
      <div class="mt-n32 me-6 rounded-3" style="width: 324px; height: 340px; background: linear-gradient(180deg, rgba(255, 224, 165, 0.00) 0%, rgba(255, 224, 165, 0.50) 100%);"></div>
      <div class="mt-n32 me-6 rounded-3" style="width: 324px; height: 340px; background: linear-gradient(180deg, rgba(255, 224, 165, 0.00) 0%, rgba(255, 224, 165, 0.50) 100%);"></div>
      <div class="mt-n6 rounded-3" style="width: 324px; height: 340px; background: linear-gradient(180deg, rgba(255, 224, 165, 0.00) 0%, rgba(255, 224, 165, 0.50) 100%);"></div>
    </div>
    <div class="container position-relative">
      <div class="mw-3xl mx-auto pt-20 pb-72 text-center">
        <span class="d-block mb-6 small fw-bold text-primary">BLOG</span>
        <h2 class="font-heading">
          <span class="d-block">Discover the latest</span>
          <span>news, stories &amp; insights</span>
        </h2>
      </div>
    </div>
  </div>
  <div class="container position-relative">
    <div class="mw-6xl mx-auto mt-n52">
      <a class="d-block bg-white mb-20 border rounded-3 overflow-hidden" href="#">
        <div class="row">
          <div class="col-12 col-lg-6">
            <div class="mw-md mx-auto py-12 py-md-24 py-lg-32 px-8">

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

Bootstrap Component #692

Bootstrap

Solstice

<section class="py-12 py-md-16 py-lg-24 overflow-hidden position-relative">
  <div class="position-absolute top-0 start-0 w-100 bg-primary">
    <div class="d-flex justify-content-center overflow-hidden pt-12 pt-lg-24 pb-44 pb-md-64 pb-lg-80">
      <div class="flex-shrink-0 mt-n40 mt-sm-n6 me-6 rounded-3" style="width: 324px; height: 340px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, rgba(255, 255, 255, 0.10) 100%);"></div>
      <div class="flex-shrink-0 mt-n40 mt-sm-n32 me-6 rounded-3" style="width: 324px; height: 340px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, rgba(255, 255, 255, 0.10) 100%);"></div>
      <div class="flex-shrink-0 mt-n40 mt-sm-n32 me-6 rounded-3" style="width: 324px; height: 340px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, rgba(255, 255, 255, 0.10) 100%);"></div>
      <div class="flex-shrink-0 mt-n40 mt-sm-n6 rounded-3" style="width: 324px; height: 340px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, rgba(255, 255, 255, 0.10) 100%);"></div>
    </div>
  </div>
  <div class="container position-relative">
    <div class="mw-3xl mb-8">
      <div class="mb-4">
        <span class="me-3 small text-white">17 Jul 2023</span>
        <svg width="4" height="4" viewBox="0 0 4 4" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="2" cy="2" r="2" fill="#D1D1D1"></circle></svg>
        <span class="ms-3 small text-white">4 min read</span>
      </div>
      <h3 class="font-heading text-white">The Art and Science of Design Development: Crafting Digital Experiences</h3>
    </div>
    <div class="d-flex align-items-start mb-8">
      <img class="img-fluid d-block w-100 mw-md me-8 rounded-2" src="solstice-assets/images/blog/post-picture2.png" alt="">
      <img class="img-fluid d-block h-auto w-100 mw-2xl me-8 rounded-2" src="solstice-assets/images/blog/post-picture3.png" alt="">
      <img class="img-fluid d-block h-auto w-100 mw-4xl me-8 rounded-2" src="solstice-assets/images/blog/post-picture4.png" alt="">
    </div>
    <div class="mb-10">

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

Bootstrap Component #693

Bootstrap

Solstice

<section class="py-12 py-md-16 py-lg-24 bg-primary overflow-hidden">
  <div class="container">
    <div class="mw-6xl mx-auto">
      <div class="mw-xl mx-auto mb-24 text-center">
        <h1 class="font-heading text-white mb-6">Pricing</h1>
        <p class="fs-5 text-primary-light">Simple pricing that fits for everyone for the price of a cup of coffee. Start for free, no credit card required.</p>
      </div>
      <div class="mb-24 pb-4 overflow-scroll">
        <div class="row" style="min-width: max-content;">
          <div class="col-4 col-xl-5 pt-10">
            <div>
              <div class="d-flex mb-4 align-items-center">
                <span class="fs-5 fw-bold text-white">Monthly</span>
                <div class="d-inline-flex mx-4 bg-secondary rounded-pill" style="padding: 1.5px;">
                  <button class="btn bg-transparent border-0 p-0" style="width: 20px; height: 20px;"></button>
                  <button class="btn bg-white border-0 p-0" style="width: 20px; height: 20px;"></button>
                </div>
                <span class="fs-5 fw-bold text-white">Annually</span>
              </div>
              <div class="d-inline-block py-2 px-4 mb-10 bg-primary-light rounded-pill">
                <span class="text-primary-dark">SAVE 15% with annual billing</span>
              </div>
              <div class="pt-10 border-top border-info">
                <span class="d-block fs-5 fw-bold text-white mb-14">What you’ll get</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

Bootstrap Component #694

Bootstrap

Solstice

<section class="py-12 py-md-16 py-lg-24 bg-primary">
  <div class="container">
    <div class="text-center mb-16">
      <h2 class="font-heading text-white mb-4">FAQ</h2>
      <p class="text-primary-light">Here you will find the answers to the frequently asked questions.</p>
    </div>
    <div class="d-flex flex-wrap mb-n3 justify-content-center">
      <div class="d-inline-block mb-3 me-6 bg-white rounded-pill"><a class="btn btn-outline-light text-dark" href="#">General</a></div>
      <a class="btn mb-3 me-6 btn-outline-primary-dark text-white" href="#">Community</a><a class="btn mb-3 btn-outline-primary-dark text-white" href="#">Pricing</a>
    </div>
    <div class="mw-3xl mx-auto mt-10">
      <button class="btn btn-outline-warning mb-3 p-6 d-flex w-100 justify-content-between align-items-center text-start rounded-3">
        <span class="h5 text-white mb-0 me-6">What is Solstice? What is it for?</span>
        <svg class="flex-shrink-0" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
          <g clip-path="url(#clip0_107_9546)">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M16 2.6665C8.63586 2.6665 2.66663 8.63573 2.66663 15.9998C2.66663 23.3639 8.63586 29.3332 16 29.3332C23.3641 29.3332 29.3333 23.3639 29.3333 15.9998C29.3333 8.63573 23.3641 2.6665 16 2.6665ZM17.0256 11.8973C17.0256 11.6253 16.9175 11.3644 16.7252 11.172C16.5329 10.9797 16.272 10.8716 16 10.8716C15.7279 10.8716 15.4671 10.9797 15.2747 11.172C15.0824 11.3644 14.9743 11.6253 14.9743 11.8973V14.9742H11.8974C11.6254 14.9742 11.3645 15.0823 11.1722 15.2746C10.9798 15.4669 10.8718 15.7278 10.8718 15.9998C10.8718 16.2719 10.9798 16.5327 11.1722 16.7251C11.3645 16.9174 11.6254 17.0255 11.8974 17.0255H14.9743V20.1024C14.9743 20.3744 15.0824 20.6353 15.2747 20.8276C15.4671 21.02 15.7279 21.128 16 21.128C16.272 21.128 16.5329 21.02 16.7252 20.8276C16.9175 20.6353 17.0256 20.3744 17.0256 20.1024V17.0255H20.1025C20.3745 17.0255 20.6354 16.9174 20.8278 16.7251C21.0201 16.5327 21.1282 16.2719 21.1282 15.9998C21.1282 15.7278 21.0201 15.4669 20.8278 15.2746C20.6354 15.0823 20.3745 14.9742 20.1025 14.9742H17.0256V11.8973Z" fill="#FFF2D6"></path>
          </g>
        </svg>
      </button>
      <button class="btn btn-outline-warning mb-3 p-6 d-flex w-100 justify-content-between align-items-center text-start rounded-3">
        <span class="h5 text-white mb-0 me-6">What steps do I need to take to join?</span>
        <svg class="flex-shrink-0" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
          <g clip-path="url(#clip0_107_9546)">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M16 2.6665C8.63586 2.6665 2.66663 8.63573 2.66663 15.9998C2.66663 23.3639 8.63586 29.3332 16 29.3332C23.3641 29.3332 29.3333 23.3639 29.3333 15.9998C29.3333 8.63573 23.3641 2.6665 16 2.6665ZM17.0256 11.8973C17.0256 11.6253 16.9175 11.3644 16.7252 11.172C16.5329 10.9797 16.272 10.8716 16 10.8716C15.7279 10.8716 15.4671 10.9797 15.2747 11.172C15.0824 11.3644 14.9743 11.6253 14.9743 11.8973V14.9742H11.8974C11.6254 14.9742 11.3645 15.0823 11.1722 15.2746C10.9798 15.4669 10.8718 15.7278 10.8718 15.9998C10.8718 16.2719 10.9798 16.5327 11.1722 16.7251C11.3645 16.9174 11.6254 17.0255 11.8974 17.0255H14.9743V20.1024C14.9743 20.3744 15.0824 20.6353 15.2747 20.8276C15.4671 21.02 15.7279 21.128 16 21.128C16.272 21.128 16.5329 21.02 16.7252 20.8276C16.9175 20.6353 17.0256 20.3744 17.0256 20.1024V17.0255H20.1025C20.3745 17.0255 20.6354 16.9174 20.8278 16.7251C21.0201 16.5327 21.1282 16.2719 21.1282 15.9998C21.1282 15.7278 21.0201 15.4669 20.8278 15.2746C20.6354 15.0823 20.3745 14.9742 20.1025 14.9742H17.0256V11.8973Z" fill="#FFF2D6"></path>

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

Bootstrap Component #695

Bootstrap

Solstice

<section class="py-12 py-md-16 py-lg-24 bg-primary">
  <div class="container">
    <div class="mw-sm mw-lg-lg mb-16">
      <span class="badge mb-4 bg-primary-light text-primary border border-info">Events</span>
      <h3 class="font-heading text-white mb-0">Engage in our weekly online events</h3>
    </div>
    <div class="overflow-scroll pb-2 mb-12">
      <div style="min-width: max-content;">
        <div class="position-relative bg-white p-6 border border-light rounded-3 mw-6xl mx-auto overflow-hidden" style="height: 524px;">
          <div class="position-absolute bottom-0 start-0 w-100 py-14" style="background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, rgba(255, 255, 255, 0.60) 53.65%, #FFF 100%);"></div>
          <div class="d-flex mb-4 flex-wrap align-items-center justify-content-between">
            <div>
              <select class="form-select ps-1 py-1 pe-9 border-0 fw-bold" name="" id="">
                <option value="1">August 2023</option>
                <option value="2">July 2023</option>
                <option value="3">June 2023</option>
              </select>
            </div>
            <div class="d-flex flex-wrap align-items-center">
              <span class="d-inline-block py-3 px-4 me-2 small fw-semibold lh-1 border border-light rounded-pill shadow">Today</span>
              <button class="btn btn-outline-light p-0 me-2 shadow d-flex align-items-center justify-content-center" style="width: 40px; height: 40px;">
                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M13.125 16.25L6.875 10L13.125 3.75" stroke="#282828" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>

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

Bootstrap Component #696

Bootstrap

Solstice

<section class="pb-12 pb-lg-24 bg-primary">
  <div class="container position-relative">
    <div class="position-absolute top-0 h-100 start-0 ms-md-14">
      <svg width="500" height="500" viewBox="0 0 500 500" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M0.5 498.311V304.054C0.5 136.406 136.406 0.5 304.054 0.5H498.311C498.967 0.5 499.5 1.03289 499.5 1.68919V136.561C499.5 137.217 498.967 137.75 498.311 137.75H342.061C290.59 137.75 239.516 163.123 201.319 201.319C163.123 239.516 137.75 290.59 137.75 342.061V498.311C137.75 498.967 137.217 499.5 136.561 499.5H1.68919C1.03249 499.5 0.5 498.967 0.5 498.311Z" fill="url(#paint0_linear_243_16525)" stroke="#FF8A0A"></path>
        <defs><linearGradient id="paint0_linear_243_16525" x1="0" y1="500" x2="500" y2="0" gradientUnits="userSpaceOnUse"><stop stop-color="#FF8A0A"><stop offset="1" stop-color="#FF8A0A" stop-opacity="0"></stop></stop></linearGradient></defs>
      </svg>
    </div>
    <div class="position-absolute top-0 h-100 end-0 me-md-14">
      <svg width="500" height="500" viewBox="0 0 500 500" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M499.5 1.68919V195.946C499.5 363.594 363.594 499.5 195.946 499.5H1.68919C1.03289 499.5 0.5 498.967 0.5 498.311V363.439C0.5 362.783 1.03289 362.25 1.68919 362.25H157.939C209.41 362.25 260.484 336.877 298.681 298.681C336.877 260.484 362.25 209.41 362.25 157.939V1.68919C362.25 1.03289 362.783 0.5 363.439 0.5H498.311C498.967 0.5 499.5 1.03289 499.5 1.68919Z" fill="url(#paint0_linear_243_16524)" stroke="#FF8A0A"></path>
        <defs><linearGradient id="paint0_linear_243_16524" x1="499.998" y1="2.85805e-05" x2="8.49831" y2="500" gradientUnits="userSpaceOnUse"><stop stop-color="#FF8A0A"><stop offset="1" stop-color="#FF8A0A" stop-opacity="0"></stop></stop></linearGradient></defs>
      </svg>
    </div>
    <div class="position-relative pt-24 pb-12 pb-md-32 mw-3xl mx-auto text-center">
      <h1 class="font-heading text-white">On a mission to make learning fun</h1>
    </div>
    <div class="position-relative mw-sm mw-md-xl mx-auto mw-lg-none mb-20 mb-md-32 py-10 bg-warning-light rounded-3">
      <div class="row">
        <div class="col-12 col-md-6 col-lg-3 mb-4 mb-md-0 position-relative">
          <div class="d-none d-md-block position-absolute top-0 h-100 end-0 border-end border-warning"></div>
          <div class="text-center py-4 py-lg-0">
            <span class="d-block mb-2 text-light-dark">Founded</span>
            <span class="h2 fw-semibold">2023</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

Bootstrap Component #697

Bootstrap

Solstice

<section class="py-12 py-md-16 py-lg-24 bg-primary">
  <div class="mb-8 mb-md-16 pb-8 pb-md-16 border-bottom border-info">
    <div class="container">
      <div class="mw-5xl mx-auto">
        <span class="badge mb-4 bg-primary-light fw-medium text-primary border border-warning">CAREERS</span>
        <h3 class="font-heading text-white">Careers at Solstice</h3>
      </div>
    </div>
  </div>
  <div class="container">
    <div class="mw-5xl mx-auto">
      <div class="mb-24">
        <h4 class="mb-4 text-white">What we’re building</h4>
        <div class="row mb-16 mx-md-n8">
          <div class="col-12 col-md-7 px-md-8 mb-6 mb-md-0">
            <div>
              <p class="text-primary-light mb-0">People are shifting to a new form of collaboration in distributed teams and are wasting too much effort connecting the dots between different work streams to understand the bigger picture. Solstice is building a work hub that gives people a radically simpler way to coordinate work across teams and get context on what’s happening.</p>
            </div>
          </div>
          <div class="col-12 col-md-5 px-md-8">
            <div>
              <p class="text-primary-light mb-0">By bringing structure, access, and efficiency to teamwork. Backed by Atomico, Salesforce Ventures, and Mosaic, we’re on a mission to unlock the collective potential of teams and would love for you to join us!</p>
            </div>
          </div>

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

Bootstrap Component #698

Bootstrap

Solstice

<section class="py-64 py-lg-40 position-relative bg-primary">
  <div class="position-absolute top-0 start-0 w-100 h-100 py-10">
    <div class="container d-flex flex-column h-100">
      <div class="d-flex mb-auto w-100 justify-content-between align-items-start">
        <div class="d-inline-block me-auto mt-10 px-5 pt-2 bg-primary-light rounded-2">
          <img class="img-fluid" src="solstice-assets/images/cta/men-picture1.png" alt="">
        </div>
        <div class="d-inline-block ms-auto px-5 pt-2 bg-info rounded-2">
          <img class="img-fluid" src="solstice-assets/images/cta/woman-picture1.png" alt="">
        </div>
      </div>
      <div class="d-flex w-100 justify-content-between align-items-start">
        <div class="d-inline-block ms-lg-20 px-5 pt-2 bg-info-dark rounded-2">
          <img class="img-fluid" src="solstice-assets/images/cta/woman-picture2.png" alt="">
        </div>
        <div class="d-inline-block ms-auto me-lg-20 px-5 pt-2 bg-warning-light rounded-2">
          <img class="img-fluid" src="solstice-assets/images/cta/men-picture2.png" alt="">
        </div>
      </div>
    </div>
  </div>
  <div class="container position-relative">
    <div class="mw-lg mw-xl-2xl mx-auto text-center">
      <div class="mb-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

Bootstrap Component #699

Bootstrap

Solstice

<div class="position-fixed bottom-0 start-0 bg-primary" style="z-index: 50;">
  <div class="d-flex flex-wrap align-items-start">
    <div class="container py-16 pt-lg-24">
      <div class="py-12 py-md-6 px-12 px-sm-20 px-md-12 px-lg-6 w-100 bg-white rounded-3">
        <div class="row align-items-center">
          <div class="col-12 col-md-6 mb-10 mb-md-0">
            <div class="mw-md">
              <p class="mb-0">By clicking “Accept All Cookies”, you agree to the storing of cookies on your device.</p>
            </div>
          </div>
          <div class="col-12 col-md-6">
            <div class="row justify-content-end g-4">
              <div class="col-12 col-md-auto">
                <div class="d-inline-block bg-white rounded-pill"><a class="btn btn-sm py-4 btn-outline-light fs-6 text-dark w-100" href="#">Cookie Settings</a></div>
              </div>
              <div class="col-12 col-md-auto"><a class="btn btn-sm py-4 btn-primary fs-6 w-100" href="#">Accept All Cookies</a></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

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

Bootstrap Component #700

Bootstrap

Solstice

<section class="py-12 py-md-16 py-lg-24 bg-primary">
  <div class="container">
    <div class="mw-lg mw-lg-6xl mx-auto">
      <div class="row">
        <div class="col-12 col-lg-5 col-xl-6 mb-12 mb-lg-0">
          <div class="mw-sm mw-xl-md d-flex flex-column align-items-start h-100">
            <span class="badge mb-6 d-inline-flex align-items-center bg-primary-light text-primary border border-warning">
              <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M8.5 1.215H3.5C2 1.215 1 2.215 1 3.715V6.715C1 8.215 2 9.215 3.5 9.215H5.5L7.725 10.695C8.055 10.915 8.5 10.68 8.5 10.28V9.215C10 9.215 11 8.215 11 6.715V3.715C11 2.215 10 1.215 8.5 1.215ZM7.75 5.625H4.25C4.045 5.625 3.875 5.455 3.875 5.25C3.875 5.045 4.045 4.875 4.25 4.875H7.75C7.955 4.875 8.125 5.045 8.125 5.25C8.125 5.455 7.955 5.625 7.75 5.625Z" fill="#FF7100"></path>
              </svg>
              <span class="ms-1 lh-base">Contact Support</span>
            </span>
            <h3 class="font-heading text-white mb-4">How can we help you today?</h3>
            <p class="text-primary-light mb-10">Submit your info and we’ll get back to you as soon as possible.</p>
            <div class="mw-sm mt-auto p-8 bg-secondary rounded-2">
              <p class="display-3 fw-semibold text-white mb-6">Click here to report an incident</p>
              <a class="btn btn-sm d-inline-flex flex-wrap align-items-center btn-light text-secondary bg-white border border-warning-light" href="#">
                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M10.9261 14.2967L10.9457 14.2791L10.9633 14.2595C11.0647 14.1468 11.1612 14.0141 11.2308 13.836C11.2923 13.6864 11.3333 13.515 11.3333 13.3334C11.3333 13.1492 11.2911 12.9755 11.2282 12.8244C11.164 12.6704 11.0747 12.531 10.9633 12.4072L10.9457 12.3876L10.9261 12.37C10.8023 12.2586 10.6629 12.1693 10.5089 12.1051C10.1859 11.9705 9.81406 11.9705 9.49099 12.1051C9.33705 12.1693 9.19764 12.2586 9.07381 12.37L9.05425 12.3876L9.03665 12.4072C8.9252 12.531 8.8359 12.6704 8.77175 12.8244C8.70878 12.9755 8.66663 13.1492 8.66663 13.3334C8.66663 13.515 8.70762 13.6864 8.76915 13.836C8.83871 14.0141 8.93524 14.1468 9.03665 14.2595L9.05425 14.2791L9.07381 14.2967C9.19763 14.4081 9.33704 14.4974 9.49099 14.5616C9.64213 14.6245 9.81578 14.6667 9.99996 14.6667C10.1841 14.6667 10.3578 14.6245 10.5089 14.5616C10.6629 14.4974 10.8023 14.4081 10.9261 14.2967ZM2.16663 10C2.16663 5.6845 5.68443 2.16669 9.99996 2.16669C14.3155 2.16669 17.8333 5.6845 17.8333 10C17.8333 14.3155 14.3155 17.8334 9.99996 17.8334C5.68443 17.8334 2.16663 14.3155 2.16663 10ZM9.99996 5.54169C9.38215 5.54169 8.87496 6.04888 8.87496 6.66669V10.8334C8.87496 11.4512 9.38215 11.9584 9.99996 11.9584C10.6178 11.9584 11.125 11.4512 11.125 10.8334V6.66669C11.125 6.04888 10.6178 5.54169 9.99996 5.54169Z" fill="#530031" stroke="#530031"></path>
                </svg>
                <span class="ms-2">Report</span>
              </a>
            </div>
          </div>

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

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

Framework

UI Library

Components

Bootstrap Component #681

Get the code for 13,400+ components

Bootstrap Component #682

Get the code for 13,400+ components

Bootstrap Component #683

Get the code for 13,400+ components

Bootstrap Component #684

Get the code for 13,400+ components

Bootstrap Component #685

Get the code for 13,400+ components

Bootstrap Component #686

Get the code for 13,400+ components

Bootstrap Component #687

Get the code for 13,400+ components

Bootstrap Component #688

Get the code for 13,400+ components

Bootstrap Component #689

Get the code for 13,400+ components

Bootstrap Component #690

Get the code for 13,400+ components

Bootstrap Component #691

Get the code for 13,400+ components

Bootstrap Component #692

Get the code for 13,400+ components

Bootstrap Component #693

Get the code for 13,400+ components

Bootstrap Component #694

Get the code for 13,400+ components

Bootstrap Component #695

Get the code for 13,400+ components

Bootstrap Component #696

Get the code for 13,400+ components

Bootstrap Component #697

Get the code for 13,400+ components

Bootstrap Component #698

Get the code for 13,400+ components

Bootstrap Component #699

Get the code for 13,400+ components

Bootstrap Component #700

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