# Notification

## Component #1

- Preview
- HTML

##### Cookie preferences

Note! This is just a simple popup modal to demonstrate how you can display a cookie message. This website uses the following types of cookies; strictly necessary, functional, visitor statistics and advertising cookies.

Strictly necessary
Functional
Visitor statistics
Advertising

                    <!-- Cookie Alert -->
                    <div class="container position-fixed bottom-0 start-0 end-0 zi-3">
                      <div class="alert alert-white w-lg-75 shadow-sm mx-auto" role="alert">
                        <h5 class="text-dark">Cookie preferences</h5>
                        <p class="small"><span class="fw-semi-bold">Note!</span> This is just a simple popup modal to demonstrate how you can display a cookie message. This website uses the following types of cookies; strictly necessary, functional, visitor statistics and advertising cookies.</p>

                        <div class="row align-items-sm-center">
                          <div class="col-sm-8 mb-3 mb-sm-0">
                            <div class="form-check form-check-inline">
                              <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1" checked disabled>
                              <label class="form-check-label small" for="inlineCheckbox1">Strictly necessary</label>
                            </div>
                            <div class="form-check form-check-inline">
                              <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2" checked>
                              <label class="form-check-label small" for="inlineCheckbox2">Functional</label>
                            </div>
                            <div class="form-check form-check-inline">
                              <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3">
                              <label class="form-check-label small" for="inlineCheckbox3">Visitor statistics</label>
                            </div>
                            <div class="form-check form-check-inline">
                              <input class="form-check-input" type="checkbox" id="inlineCheckbox4" value="option4">
                              <label class="form-check-label small" for="inlineCheckbox4">Advertising</label>
                            </div>
                          </div>
                          <!-- End Col -->

                          <div class="col-sm-4 text-sm-end">
                            <button type="button" class="btn btn-primary btn-transition" data-bs-dismiss="alert" aria-label="Close">Got it!</button>
                          </div>
                          <!-- End Col -->
                        </div>
                        <!-- End Row -->
                      </div>
                    </div>
                    <!-- End Cookie Alert -->