Flag

Good news, everyone

Nothing to worry about, everything is going great!

Uh oh!

Pay attention to me, things are not going according to plan.

Uh oh!

You need to take action, something has gone terribly wrong!

Uh oh!

This alert needs your attention, but its not super important.

This alert needs your attention, but its not super important., though the transition does limit overflow.

Copy

    
<div class="row">
   <div class="col-lg-6">
   <div class="card info-card ">
      <div class="filter">
         <a class="icon" href="#" data-bs-toggle="dropdown" aria-expanded="false"><i class="bi bi-x"></i></a>
      </div>
      <div class="card-body">
         <div class="d-flex align-items-center custom-card">
            <div class=" rounded-circle d-flex align-items-center justify-content-center">
               <img class="custom-imgs-card-info" src="assets/img/success.svg">
            </div>
            <div class="ps-4">
               <h5 class="custom-card">Good news, everyone
               </h5>
            </div>
         </div>
         <div class="d-flex align-items-center">
            <div class="ps-5">
               <p class="custom-p">Nothing to worry about, everything is going great!</p>
            </div>
         </div>
         <div class="ps-5">
            <a href="/docs/5.0/utilities/spacing/" class="flag-footer-a ">Understood</a>
            <a href="/docs/5.0/utilities/spacing/" class="flag-footer-a ">No thanks</a>
         </div>
      </div>
   </div>
</div>
<div class="col-lg-6">
   <div class="card info-card ">
      <div class="filter">
         <a class="icon" href="#" data-bs-toggle="dropdown" aria-expanded="false"><i class="bi bi-x"></i></a>
      </div>
      <div class="card-body">
         <div class="d-flex align-items-center custom-card">
            <div class=" rounded-circle d-flex align-items-center justify-content-center">
               <img class="custom-imgs-card-info" src="assets/img/info.svg">
            </div>
            <div class="ps-4">
               <h5 class="custom-card">Uh oh!
               </h5>
            </div>
         </div>
         <div class="d-flex align-items-center">
            <div class="ps-5">
               <p class="custom-p">Pay attention to me, things are not going according to plan.</p>
            </div>
         </div>
         <div class="ps-5">
            <a href="/docs/5.0/utilities/spacing/" class="flag-footer-a ">Understood</a>
            <a href="/docs/5.0/utilities/spacing/" class="flag-footer-a ">No thanks</a>
         </div>
      </div>
   </div>
</div>
<div class="col-lg-6">
   <div class="card info-card ">
      <div class="filter">
         <a class="icon" href="#" data-bs-toggle="dropdown" aria-expanded="false"><i class="bi bi-x"></i></a>
      </div>
      <div class="card-body">
         <div class="d-flex align-items-center custom-card">
            <div class=" rounded-circle d-flex align-items-center justify-content-center">
               <img class="custom-imgs-card-info" src="assets/img/warningflag.svg">
            </div>
            <div class="ps-4">
               <h5 class="custom-card">Uh oh!
               </h5>
            </div>
         </div>
         <div class="d-flex align-items-center">
            <div class="ps-5">
               <p class="custom-p">You need to take action, something has gone terribly wrong!</p>
            </div>
         </div>
         <div class="ps-5">
            <a href="/docs/5.0/utilities/spacing/" class="flag-footer-a ">Understood</a>
            <a href="/docs/5.0/utilities/spacing/" class="flag-footer-a ">No thanks</a>
         </div>
      </div>
   </div>
</div>
<div class="col-lg-6">
   <div class="card info-card ">
      <div class="filter">
         <a class="icon" href="#" data-bs-toggle="dropdown" aria-expanded="false"><i class="bi bi-x"></i></a>
      </div>
      <div class="card-body">
         <div class="d-flex align-items-center custom-card">
            <div class=" rounded-circle d-flex align-items-center justify-content-center">
               <img class="custom-imgs-card-info" src="assets/img/alert.svg">
            </div>
            <div class="ps-4">
               <h5 class="custom-card">Uh oh!
               </h5>
            </div>
         </div>
         <div class="d-flex align-items-center">
            <div class="ps-5">
               <p class="custom-p">This alert needs your attention, but its not super important.</p>
            </div>
         </div>
         <div class="ps-5">
            <a href="/docs/5.0/utilities/spacing/" class="flag-footer-a ">Understood</a>
            <a href="/docs/5.0/utilities/spacing/" class="flag-footer-a ">No thanks</a>
         </div>
      </div>
   </div>
</div>
<div class="col-lg-6">
   <div class=" info-card ">
      <div class="" id="cust-id">
         <div class=" align-items-center custom-card">
            <div class="accordion-custom">
               <div class="accordion " id="accordionExample">
                  <div class="accordion-item">
                     <h2 class="accordion-header" id="headingOne">
                        <div class=" rounded-circle d-flex">
                           <img class="custom-img-card-info" src="assets/img/InfoIcon.svg">
                           <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">Hey, did you know...</button>
                        </div>
                     </h2>
                     <div id="collapseOne" class="accordion-collapse collapse" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
                        <div class="accordion-body ps-5">
                           This alert needs your attention, but its not super important., though the transition does limit overflow.
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>
<div class="col-lg-6">
   <div class=" info-card ">
      <div class="">
         <div class=" align-items-center custom-card">
            <div class="accordion-custom">
               <div class="accordion " id="accordionExampletwo">
                  <div class="accordion-item">
                     <h2 class="accordion-header" id="headingtwo">
                        <div class=" rounded-circle d-flex">
                           <img class="custom-img-card-info" src="assets/img/InfoIcon.svg">
                           <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapsetwo" aria-expanded="false" aria-controls="collapsetwo">Hey, did you know...</button>
                        </div>
                     </h2>
                     <div id="collapsetwo" class="accordion-collapse collapse show" aria-labelledby="headingtwo" data-bs-parent="#accordionExampletwo">
                        <div class="accordion-body ps-5">
                           This alert needs your attention, but its not super important., though the transition does limit overflow.
                        </div>

                        <div class="ps-5"><button type="button" class="btn btn-custom ">
                           Understood
                         </button>
                         <button type="button" class="btn btn-custom ">
                           No Way!
                         </button>
                        </div>

                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>
<div class="col-lg-6">
   <div class=" info-card ">
      <div class="" id="cust-id">
         <div class=" align-items-center custom-card">
            <div class="accordion-custom">
               <div class="accordion success" id="accordionExample3">
                  <div class="accordion-item">
                     <h2 class="accordion-header" id="headingthree">
                        <div class=" rounded-circle d-flex">
                           <img class="custom-img-card-info" src="assets/img/SuccessIcon.svg">
                           <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapsethree" aria-expanded="false" aria-controls="collapseOne">Good news, everyone</button>
                        </div>
                     </h2>
                     <div id="collapsethree" class="accordion-collapse collapse" aria-labelledby="headingOne" data-bs-parent="#accordionExample3">
                        <div class="accordion-body ps-5">
                           This alert needs your attention, but its not super important., though the transition does limit overflow.
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>
<div class="col-lg-6">
   <div class=" info-card ">
      <div class="">
         <div class=" align-items-center custom-card">
            <div class="accordion-custom">
               <div class="accordion success" id="accordionExamplefour">
                  <div class="accordion-item">
                     <h2 class="accordion-header" id="headingfour">
                        <div class=" rounded-circle d-flex">
                           <img class="custom-img-card-info" src="assets/img/SuccessIcon.svg">
                           <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapsefour" aria-expanded="false" aria-controls="collapsefour">Good news, everyone</button>
                        </div>
                     </h2>
                     <div id="collapsefour" class="accordion-collapse collapse show" aria-labelledby="headingfour" data-bs-parent="#accordionExamplefour">
                        <div class="accordion-body ps-5">
                           This alert needs your attention, but its not super important., though the transition does limit overflow.
                        </div>

                        <div class="ps-5"><button type="button" class="btn btn-custom ">
                           Understood
                         </button>
                         <button type="button" class="btn btn-custom ">
                           No Way!
                         </button>
                        </div>

                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>
<div class="col-lg-6">
   <div class=" info-card ">
      <div class="" id="cust-id">
         <div class=" align-items-center custom-card">
            <div class="accordion-custom">
               <div class="accordion warning" id="accordionExample5">
                  <div class="accordion-item">
                     <h2 class="accordion-header" id="headingfive">
                        <div class=" rounded-circle d-flex">
                           <img class="custom-img-card-info" src="assets/img/WarningIcon.svg">
                           <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapsefive" aria-expanded="false" aria-controls="collapseOne">Uh oh!</button>
                        </div>
                     </h2>
                     <div id="collapsefive" class="accordion-collapse collapse" aria-labelledby="headingOne" data-bs-parent="#accordionExample5">
                        <div class="accordion-body ps-5">
                           This alert needs your attention, but its not super important., though the transition does limit overflow.
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>
<div class="col-lg-6">
   <div class=" info-card ">
      <div class="">
         <div class=" align-items-center custom-card">
            <div class="accordion-custom">
               <div class="accordion warning" id="accordionExamplesix">
                  <div class="accordion-item">
                     <h2 class="accordion-header" id="headingsix">
                        <div class=" rounded-circle d-flex">
                           <img class="custom-img-card-info" src="assets/img/WarningIcon.svg">
                           <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapsesix" aria-expanded="false" aria-controls="collapsesix">Uh oh!</button>
                        </div>
                     </h2>
                     <div id="collapsesix" class="accordion-collapse collapse show" aria-labelledby="headingsix" data-bs-parent="#accordionExamplesix">
                        <div class="accordion-body ps-5">
                           This alert needs your attention, but its not super important., though the transition does limit overflow.
                        </div>

                        <div class="ps-5"><button type="button" class="btn warning-btn-custom ">
                           Understood
                         </button>
                         <button type="button" class="btn warning-btn-custom ">
                           No Way!
                         </button>
                        </div>

                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>
<div class="col-lg-6">
   <div class=" info-card ">
      <div class="" id="cust-id">
         <div class=" align-items-center custom-card">
            <div class="accordion-custom">
               <div class="accordion error" id="accordionExample7">
                  <div class="accordion-item">
                     <h2 class="accordion-header" id="headingseven">
                        <div class=" rounded-circle d-flex">
                           <img class="custom-img-card-info" src="assets/img/ErrorIcon.svg">
                           <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseseven" aria-expanded="false" aria-controls="collapseOne">Can’t connect</button>
                        </div>
                     </h2>
                     <div id="collapseseven" class="accordion-collapse collapse" aria-labelledby="headingOne" data-bs-parent="#accordionExample7">
                        <div class="accordion-body ps-5">
                           This alert needs your attention, but its not super important., though the transition does limit overflow.
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>
<div class="col-lg-6">
   <div class=" info-card ">
      <div class="">
         <div class=" align-items-center custom-card">
            <div class="accordion-custom">
               <div class="accordion error" id="accordionExampleeight">
                  <div class="accordion-item">
                     <h2 class="accordion-header" id="headingeight">
                        <div class=" rounded-circle d-flex">
                           <img class="custom-img-card-info" src="assets/img/ErrorIcon.svg">
                           <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseeight" aria-expanded="false" aria-controls="collapseeight">Can’t connect</button>
                        </div>
                     </h2>
                     <div id="collapseeight" class="accordion-collapse collapse show" aria-labelledby="headingeight" data-bs-parent="#accordionExampleeight">
                        <div class="accordion-body ps-5">
                           This alert needs your attention, but its not super important., though the transition does limit overflow.
                        </div>

                        <div class="ps-5"><button type="button" class="btn error-btn-custom ">
                           Understood
                         </button>
                         <button type="button" class="btn error-btn-custom ">
                           No Way!
                         </button>
                        </div>

                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>
</div>

Copy

    
         .card {
         margin-bottom: 30px;
         border: none;
         border-radius: 5px;
         box-shadow: 0px 0 30px rgb(1 41 112 / 10%);
     }
     
     .filter {
         position: absolute;
         right: 0px;
         top: 15px;
     }
     .filter .icon {
         padding-right: 20px;
         padding-bottom: 5px;
         transition: 0.3s;
         font-size: 24px;
         color: #42526E;
     }
     
     
     .card-body {
         padding: 0 20px 20px 20px;
     }
     .custom-card {
         padding: 12px 0 0px 0px;
         font-size: 14px;
         font-weight: 700;
         color: #363431;
     }
     .rounded-circle {
         border-radius: 50%!important;
     }
     
     
     img.custom-imgs-card-info {
         width: 22px;
         height: 22px;
         margin-top: 10px;
     }
     p.custom-p {
         font-weight: 400;
         font-size: 12px;
         color: #363431;
     }