Cookies cards

Component #1

Cookies

We use cookies to offer a better browsing experience. Cookies enhance site navigation, analyze site usage, and assist in our marketing efforts. By clicking Accept. you agree to the storing of cookies on your device. To refuse all non-required cookies, click on Decline.


Accept
        
<!--Cookies card-->
<div class="alert alert-primary py-5 px-4 px-lg-5 py-lg-7 shadow-lg">
   <div class="d-flex align-items-lg-center flex-column flex-md flex-md-row">
     <div class="flex-grow-1">
       <h4 class="mb-4">Cookies</h4>
       <p class="mb-5 mb-lg-0 w-lg-75">
         We use cookies to offer a better browsing experience. Cookies enhance site navigation, analyze site usage,
         and assist in our marketing efforts. By clicking <strong>Accept.</strong> you agree to the storing of 
         cookies on your device. To refuse all non-required cookies, click on Decline.
        </p>
      </div>
      <div class="flex-shrink-0 text-lg-center">
            <button type="button" class="btn me-2 me-lg-0 mb-lg-3 btn-secondary rounded-pill" data-bs-dismiss="alert">Decline</button>
            <br class="d-none d-lg-block">
            <a href="#!" class="btn btn-primary rounded-pill">Accept</a>
      </div>
  </div>
</div>

Component #2

Cookies

We use cookies to offer a better browsing experience. Cookies enhance site navigation, analyze site usage, and assist in our marketing efforts. By clicking Accept. you agree to the storing of cookies on your device. To refuse all non-required cookies, click on Decline.

Accept
        
<!--Cookies card-->
<div class="alert bg-primary text-white border-0 shadow-lg px-lg-5 px-4 py-5">
   <div class="d-flex flex-column">
      <div class="flex-grow-1">
       <h4 class="mb-3">Cookies</h4>
        <p class="mb-5 w-lg-75">
          We use cookies to offer a better browsing experience. Cookies enhance site navigation, analyze site usage,
          and assist in our marketing efforts. By clicking <strong>Accept.</strong> you agree to the storing of 
          cookies on your device. To refuse all non-required cookies, click on Decline.
        </p>
        <button type="button" class="btn me-2 btn-outline-gray-200 rounded-pill" data-bs-dismiss="alert">Decline</button>
        <a href="#!" class="btn btn-outline-white rounded-pill">Accept</a>
      </div>
  </div>
</div>

Let's start building stunning websites

Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.