Forms: Search

              
                <!-- Search -->
                <div class="bg-dark" style="background-image: url(../assets/svg/components/wave-pattern-light.svg);">
                  <div class="container py-4">
                    <div class="w-lg-75 mx-lg-auto">
                      <form>
                        <!-- Input Card -->
                        <div class="input-card">
                          <div class="input-card-form">
                            <div class="input-group input-group-merge">
                              <label for="searchAnswersForm" class="form-label visually-hidden">Search for answers</label>
                              <span class="input-group-prepend input-group-text">
                                <i class="bi-search"></i>
                              </span>
                              <input type="text" class="form-control" id="searchAnswersForm" placeholder="Search for answers" aria-label="Search for answers">
                            </div>
                          </div>
                          <button type="button" class="btn btn-primary btn-icon">
                            <i class="bi-arrow-right"></i>
                          </button>
                        </div>
                        <!-- End Input Card -->
                      </form>
                    </div>
                  </div>
                </div>
                <!-- End Search -->
              
            

              
                <!-- Search -->
                <div class="mb-4">
                  <div class="mb-3">
                    <h4>24 Results <span class="text-body small">for "Developer tools"</span></h4>
                  </div>

                  <form>
                    <!-- Input Card -->
                    <div class="input-card border">
                      <div class="input-card-form">
                        <label for="searchAppsForm" class="form-label visually-hidden">Search for apps</label>
                        <div class="input-group input-group-merge">
                          <span class="input-group-prepend input-group-text">
                            <i class="bi-search"></i>
                          </span>
                          <input type="text" class="form-control" id="searchAppsForm" placeholder="Search for apps" aria-label="Search for apps">
                        </div>
                      </div>
                      <button type="button" class="btn btn-primary">
                        <i class="bi-arrow-right"></i>
                      </button>
                    </div>
                    <!-- End Input Card -->
                  </form>
                </div>
                <!-- End Search -->
              
            

              
                <!-- Hero -->
                <div class="gradient-x-three-sm-primary">
                  <div class="container content-space-2">
                    <form>
                      <!-- Input Card -->
                      <div class="input-card input-card-sm mb-3">
                        <div class="input-card-form">
                          <label for="jobTitleForm" class="form-label visually-hidden">Job, title, skills, or company</label>
                          <div class="input-group input-group-merge">
                            <span class="input-group-prepend input-group-text">
                              <i class="bi-search"></i>
                            </span>
                            <input type="text" class="form-control" id="jobTitleForm" placeholder="Job, title, skills, or company" aria-label="Job, title, skills, or company">
                          </div>
                        </div>

                        <div class="input-card-form">
                          <label for="cityForm" class="form-label visually-hidden">City, state, or zip</label>
                          <div class="input-group input-group-merge">
                            <span class="input-group-prepend input-group-text">
                              <i class="bi-geo-alt"></i>
                            </span>
                            <input type="text" class="form-control" id="cityForm" placeholder="City, state, or zip" aria-label="City, state, or zip">
                          </div>
                        </div>
                        <button type="button" class="btn btn-primary">Search</button>
                      </div>
                      <!-- End Input Card -->
                    </form>

                    <div class="row align-items-center">
                      <div class="col-md-auto mb-3 mb-lg-0">
                        <h6 class="mb-1">Limit search to:</h6>
                      </div>
                      <!-- End Col -->

                      <div class="col-md mb-3 mb-lg-0">
                        <!-- Check -->
                        <div class="form-check form-check-inline">
                          <input class="form-check-input" type="checkbox" id="jobSearchToCheckbox1" value="option1" checked>
                          <label class="form-check-label" for="jobSearchToCheckbox1">Job title</label>
                        </div>
                        <!-- End Check -->

                        <!-- Check -->
                        <div class="form-check form-check-inline">
                          <input class="form-check-input" type="checkbox" id="jobSearchToCheckbox2" value="option2">
                          <label class="form-check-label" for="jobSearchToCheckbox2">Skills</label>
                        </div>
                        <!-- End Check -->

                        <!-- Check -->
                        <div class="form-check form-check-inline">
                          <input class="form-check-input" type="checkbox" id="jobSearchToCheckbox3" value="option3">
                          <label class="form-check-label" for="jobSearchToCheckbox3">Companies</label>
                        </div>
                        <!-- End Check -->

                        <!-- Check -->
                        <div class="form-check form-check-inline">
                          <input class="form-check-input" type="checkbox" id="jobSearchToCheckbox4" value="option4">
                          <label class="form-check-label" for="jobSearchToCheckbox4">Field of study</label>
                        </div>
                        <!-- End Check -->
                      </div>

                      <div class="col-md-auto">
                        <!-- Switch -->
                        <div class="form-check form-switch">
                          <input class="form-check-input" type="checkbox" id="remoteOnlySwitch">
                          <label class="form-check-label" for="remoteOnlySwitch">Remote only</label>
                        </div>
                        <!-- End Switch -->
                      </div>
                      <!-- End Col -->
                    </div>
                    <!-- End Row -->
                  </div>
                </div>
                <!-- End Hero -->