Section Message

  
   
<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 Section-message-light">
         <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/section-info.svg">
            </div>
            <div class="ps-4">
               <h5 class="custom-card">Title  
               </h5>
            </div>
         </div>
         <div class="d-flex align-items-center">
            <div class="ps-5">
               <p class="custom-p">Title and actions are optional. Toggle their visibility as needed.</p>
            </div>
         </div>
         <div class="ps-5">
            <a href="/docs/5.0/utilities/spacing/" class="flag-footer-a section-a ">Action Link</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 Section-message-normal">
         <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">Title  
               </h5>
            </div>
         </div>
         <div class="d-flex align-items-center">
            <div class="ps-5">
               <p class="custom-p">Title and actions are optional. Toggle their visibility as needed.</p>
            </div>
         </div>
         <div class="ps-5">
            <a href="/docs/5.0/utilities/spacing/" class="flag-footer-a section-a ">Action Link</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 Section-message-general">
         <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">Title  
               </h5>
            </div>
         </div>
         <div class="d-flex align-items-center">
            <div class="ps-5">
               <p class="custom-p">Title and actions are optional. Toggle their visibility as needed.</p>
            </div>
         </div>
         <div class="ps-5">
            <a href="/docs/5.0/utilities/spacing/" class="flag-footer-a section-a ">Action Link</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 Section-message-dangerlight">
         <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">Title  
               </h5>
            </div>
         </div>
         <div class="d-flex align-items-center">
            <div class="ps-5">
               <p class="custom-p">Title and actions are optional. Toggle their visibility as needed.</p>
            </div>
         </div>
         <div class="ps-5">
            <a href="/docs/5.0/utilities/spacing/" class="flag-footer-a section-a ">Action Link</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 Section-message-dangerdark">
         <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">Title  
               </h5>
            </div>
         </div>
         <div class="d-flex align-items-center">
            <div class="ps-5">
               <p class="custom-p">Title and actions are optional. Toggle their visibility as needed.</p>
            </div>
         </div>
         <div class="ps-5">
            <a href="/docs/5.0/utilities/spacing/" class="flag-footer-a section-a ">Action Link</a>
         </div>
      </div>
   </div>
</div>
</div>


              
            

  
   
    
     .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;
          }
          
     .Section-message-light {
         background: #F1FBFD;
     }
     
     .Section-message-normal {
         background: #F2F9F4;
     }
     .Section-message-general {
         background: #FEFCF1;
     }
     .Section-message-dangerlight {
         background: #FDF3F1;
     }
     .Section-message-dangerdark {
         background: #F4F4F4;
     }