Card

<div class="card col-12 col-lg-9 px-0 px-md-3 px-lg-3  mb-3 border-0" aria-label="Card">
    <div class="row no-gutters align-items-start aha-card py-3">
        <div class="col-3 col-sm-3 col-md-3 col-lg-3 card-head-img">
            <img src="..." class="card-img mx-auto" alt="card head" />
        </div>
        <div class="col-9 col-sm-9 col-md-9 col-lg-9 px-4 py-0 card-body">
            <a href="#" class="d-block mb-2 mb-sm-4 card-title">
                <h5 class="m-0 h5" aria-label="Add to Cart US Version Spanish Heartsaver FA CPR AED Student Workbook">US Version Spanish Heartsaver FA CPR AED Student Workbook</h5>
            </a>
            <div class="card-detail">
                <span class="pr-sm-4 mb-2 mb-sm-0 d-block d-sm-inline">Product Number : 15-1407</span>
                <span class="pl-sm-4 d-block d-sm-inline">ISBN : 978-1-61669-643-6</span>
            </div>
            <div class="py-3 aha-card-tags">
                <span class="tag" aria-label="Heartsaver"><img class="pr-1" src="..."  alt="Heartsaver"/>Heartsaver</span>
                <span class="tag" aria-label="eLearning"><img class="pr-1" src="..."  alt="Bleanded and eLearning"/>Bleanded and eLearning</span>
                <span class="tag" aria-label="Online Course"><img class="pr-1" src="..."  alt="Online Course"/>Online Course</span>
                <span class="tag" aria-label="Online Course"><img class="pr-1" src="..."  alt="ACLS"/>ACLS</span>
                <span class="tag" aria-label="Online Course"><img class="pr-1" src="..."  alt="BLS"/>BLS</span>
                <span class="tag" aria-label="Online Course"><img class="pr-1" src="..."  alt="CE/CME"/>CE/CME</span>
            </div>
            <div class="d-flex justify-content-end align-items-center">
                <div class="special-card-price">
                    <p class="mb-0 card-price-label">Special Price</p>
                    <span class="card-price">$20.50</span>
                </div>
                <span class="card-price card-price-not">$ 22.50</span>
                <button type="button" class="btn btn-md btn-round btn-primary ml-4 d-none d-sm-none d-md-none d-lg-block" aria-label="Add to Cart US Version Spanish Heartsaver FA CPR AED Student Workbook">Add to Cart</button>
            </div>
        </div>
    </div>
</div>

<div class="col-12 col-md-6 col-xl-5 my-3">
    <div class="card p-0 p-sm-3 aha-card-sm" aria-label="Card">
        <div class="row no-gutters align-items-start">
            <div class="col-12 col-sm-3 p-4 p-sm-0 card-head-img">
                <img src="..." class="card-img mx-auto" alt="card head" />
            </div>
            <div class="col-12 col-sm-9 p-4 py-sm-0 card-body">
                <a href="#" class="d-block mb-2 mb-sm-2 card-title">
                    <h6 class="m-0 h8" aria-describedby="2015 American Heart Association Guidelines Update for CPR and ECC...">2015 American Heart Association Guidelines Update for CPR and ECC...</h6>
                </a>
                <div class="card-detail">
                    <span class="pr-sm-4 mb-2 mb-sm-0 d-block d-sm-inline" aria-describedby="This is the eBook version of the 2015 AHA Guidelines...">This is the eBook version of the 2015 AHA Guidelines...</span>
                </div>

                <div class="d-flex">
                    <button type="button" class="btn btn-md btn-round btn-sm btn-primary mt-3" aria-label="Read Online">Read Online</button>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="col-12 col-md-6 my-3">
    <div class="card aha-type-card">
        <div class="d-flex align-items-center justify-content-between typecard-header">
            <h5 class="h5 flex-grow-1 m-0">Stroke</h5>
            <i class="aha-icon-brain"></i>
        </div>
        <div class="typecard-body">
            <p>Offered by the American Stroke Association (ASA) in collaboration with the Middle East and North Africa Stroke Association (MENASO), the Primary and Comprehensive Stroke Center certification programs are based on standards developed independently and overseen by two mission-driven organizations, reflecting decades of science and clinical expertise.</p>
        </div>
        <div class="d-flex align-items-center justify-content-end typecard-footer">
            <button type="button" class="btn btn-round btn-sm btn-primary">Register</button>
        </div>
    </div>
</div>

<div class="aui-shopping-cart">
<div class="row">
<div class="col-lg-7 col-sm-12 col-12">
    <div class="row">
    <div class="col-lg-4 col-sm-4 col-4">
    <img src="..." class="card-img mx-auto" alt="card head" />
    </div>
    <div class="col-lg-8 col-sm-8 col-8">
    <a href="#" class="d-block mb-2 mb-sm-4 card-title">
    <h5 class="m-0 h5" aria-label="Add to Cart US Version Spanish Heartsaver FA CPR AED Student Workbook">US Version Spanish Heartsaver FA CPR AED Student Workbook</h5>
    </a>
    <div class="card-detail mt-3">
            <span class="pr-sm-4 mb-2 mb-sm-0 d-block d-sm-inline">Product Number : 15-1407</span>
    <div class="py-3 aha-card-tags">
            <div class="tag" aria-label="Heartsaver"><img class="pr-1 img-fluid" src="..."  alt="Heartsaver"/>Heartsaver</div>
            <div class="tag" aria-label="eLearning"><img class="pr-1 img-fluid" src="..."  alt="Bleanded and eLearning"/>Bleanded and eLearning</div>
            <div class="tag" aria-label="Online Course"><img class="pr-1 img-fluid" src="..."  alt="ACLS"/>ACLS</div>           
    </div>
    </div>
</div>
</div>
</div>
<div class="col-lg-5 offset-lg-0 offset-sm-4 col-sm-8 offset-4 col-8">
   <div class="row">
   <div class="col-lg-4">
   <h5 class="m-0 h5 float-sm-left float-left d-lg-none" aria-label="Unit Price">Unit Price</h5>
   <h5 class="m-0 h5 float-sm-right float-right" aria-label="Unit Price">$200</h5>
   </div>
   <div class="col-lg-4 mt-sm-3 mt-3 mt-lg-0">
   <label class="d-lg-none" id="quantity"><h5>Quantity</h5> </label><input type="number" min="1" max="999" class="shopping-product-qty" aria-labelledby="quantity" name="quantity"/>
       </div>
       <div class="col-lg-4">
       <h5 class="m-0 h5 d-none d-lg-block" aria-label="Total">$200</h5>
       </div>
   </div>
</div>
</div>
<div class="shopping-product-trash float-right mr-lg-5 mt-3 px-lg-5">
<a href="#" role="button">
            <span class="aha-icon-trash" aria-label="delete"></span>
        </a>
</div>
</div>

<div class="aui-collection-card col-lg-4 col-md-6 d-flex mb-5">
<div class="aui-img-sec">
    <img src="..." alt="English Healthcare Core Collection" />
</div>
<div class="aui-summary-sec pl-4">
    <h6 class="h7">English Healthcare Core Collection </h6>
    <p>Product Code : <span>20-3104</span></p>
    <div class="btn-holder">
        <button type="button" class="btn btn-round btn-primary mb-2"
            aria-label="View Titles English Healthcare Core Collection">View Titles</button>
        <button type="button" class="btn btn-round btn-secondary"
            aria-label="Subscribe English Healthcare Core Collection">Subscribe</button>
    </div>
</div>
</div>

<div class="aui-collection-card aui-catalog-card col-lg-4 col-md-6 d-flex mb-5">
<div class="aui-img-sec">
    <img src="..." alt="English Healthcare Core Collection" />
</div>
<div class="aui-summary-sec pl-4">
    <h6 class="h7" role="heading">2015 American Heart Association Guidelines Update </h6>
    <p>Product Code : <span>20-3104</span></p>
    <div class="btn-holder">
        <button type="button" class="btn btn-round btn-primary mb-2"
            aria-label="View 2015 American Heart Association Guidelines Update">View</button>
        <button type="button" class="btn btn-round btn-secondary"
            aria-label="Subscribe 2015 American Heart Association Guidelines Update">Subscribe</button>
    </div>
</div>
</div>

 <section class="aui-coursecardsection row">
    <h2 class="pl-3">Course card title</h2>
    <div class="aui-course-container row m-0 d-lg-flex align-items-lg-stretch">
        <div class="aui-coursecard col-12 col-sm-12 col-md-12 col-lg-4 pb-3 pt-3 px-sm-0 px-lg-3 d-lg-block d-md-flex align-items-md-start card-border-right card-border-left card-border-bottom"> 
            <div class="aui-coucard-img col-12 col-sm-12 col-md-5 col-lg-12 px-lg-0">
                <img class="mb-2" src="https://stg-shopcpr.laerdalblr.in/pub/media/catalog/category/Courses-HS-BBP-900.png" alt="course card"/>
            </div>
            <div  class="aui-coucard-content col-12 col-sm-12 col-md-7 col-lg-12 px-lg-0">
                <h4 class="card-title w-100 my-lg-3 mb-sm-0 mb-2 mb-sm-2">Course card name</h4>
                <p class="aui-coucard-desc">As the global source of the official resuscitation science and education guidelines the AHA is proud to offer the 2020 Guidelines for CPR and ECC and the 2020 Handbook for Emergency Cardiovascular Care.</p>
                <div class="card-link d-lg-none aui-coucard-link">
                    <a href=""  >Guidelines Resources
                        <i class="aha-icon-arrow-right"></i>
                    </a>
                </div>
            </div>
            <div class="card-link d-lg-block d-sm-none d-none aui-coucard-link" >
                <a href="" >Guidelines Resources
                    <i class="aha-icon-arrow-right"></i>
                </a>
            </div>
        </div>

        <div class="aui-coursecard col-12 col-sm-12 col-md-12 col-lg-4 pb-3 pt-3 px-sm-0 px-lg-3 d-lg-block d-md-flex align-items-md-start card-border-right card-border-bottom"> 
            <div class="aui-coucard-img col-12 col-sm-12 col-md-5 col-lg-12 px-lg-0">
                <img class="mb-2" src="https://stg-shopcpr.laerdalblr.in/pub/media/catalog/category/Courses-HS-BBP-900.png" alt="course card"/>
            </div>
            <div class="aui-coucard-content col-12 col-sm-12 col-md-7 col-lg-12 px-lg-0">
                <h4 class="card-title w-100 my-lg-3 mb-sm-0 mb-2 mb-sm-2">Course card name</h4>
                <p  class="aui-coucard-desc">As the global source of the official resuscitation science and education guidelines .</p>
                <div class="card-link d-lg-none aui-coucard-link">
                    <a href=""  >Guidelines Resources
                        <i class="aha-icon-arrow-right"></i>
                    </a>
                </div>
            </div>
            <div class="card-link d-lg-block d-sm-none d-none aui-coucard-link" >
                <a href="" >Guidelines Resources
                    <i class="aha-icon-arrow-right"></i>
                </a>
            </div>
        </div>


        <div class="aui-coursecard col-12 col-sm-12 col-md-12 col-lg-4 pb-3 pt-3 px-sm-0 px-lg-3 d-lg-block d-md-flex align-items-md-start card-border-right card-border-bottom"> 
            <div class="aui-coucard-img col-12 col-sm-12 col-md-5 col-lg-12 px-lg-0">
                <img class="mb-2" src="https://stg-shopcpr.laerdalblr.in/pub/media/catalog/category/Courses-HS-BBP-900.png" alt="course card"/>
            </div>
            <div class="aui-coucard-content col-12 col-sm-12 col-md-7 col-lg-12 px-lg-0">
                <h4 class="card-title w-100 my-lg-3 mb-sm-0 mb-2 mb-sm-2">Course card name</h4>
                <p  class="aui-coucard-desc">As the global source of the official resuscitation science and education guidelines the AHA is proud to offer the 2020 Guidelines for CPR and ECC and the 2020 Handbook for Emergency Cardiovascular Care.</p>
                <div class="card-link d-lg-none aui-coucard-link">
                    <a href=""  >Guidelines Resources
                        <i class="aha-icon-arrow-right"></i>
                    </a>
                </div>
            </div>
            <div class="card-link d-lg-block d-sm-none d-none aui-coucard-link" >
                <a href="" >Guidelines Resources
                    <i class="aha-icon-arrow-right"></i>
                </a>
            </div>
        </div>

 
    </div>
</section>

<section class="aui-coursecardsectionclp row">
<h2 class="pl-3">Courses</h2>
<div class="aui-courserow d-flex w-100 justify-content-between p-4">
    <div class="aui-catcourse-container">
        <div class="aui-catcourseimg position-relative">
            <span class="aui-courseimg-icon position-absolute aui-blueiconborder">
                <img src="..." alt="heart saver" />
            </span>
            <img class="mb-2" src="https://stg-shopcpr.laerdalblr.in/pub/media/catalog/category/Courses-HS-BBP-900.png" alt="course card"/>
        </div>
        <div class="aui-coursname-descp mt-2">
            <div class="aui-clphd mb-3">
                <h4>Pediatric Emergency Assessment, Recognition and Stabilization</h4>
                <p>As the global source of the official resuscitation science and education guidelines the AHA is proud to offer the 2020 Guidelines for CPR and ECC and the 2020 Handbook for Emergency Cardiovascular Care.</p>
            </div>
        </div>
        <div class="aui-courselinks justify-content-between d-flex">
            <a class="aui-courslinklearn font-500" href="#"><span class="aha-icon-arrow-right position-relative">Learn More</span></a>
            <a class="aui-courslinkview font-500" href="#"><span class="aha-icon-arrow-right position-relative">View Products</span></a>
        </div>
    </div>
    <div class="aui-clpboxspliter"></div>
    <div class="aui-catcourse-container">
        <div class="aui-catcourseimg position-relative">
            <span class="aui-courseimg-icon position-absolute aui-rediconborder">
                <img src="..." alt="heart saver" />
            </span>
            <img class="mb-2" src="https://stg-shopcpr.laerdalblr.in/pub/media/catalog/category/Courses-HS-BBP-900.png" alt="course card"/>
        </div>
        <div class="aui-coursname-descp mt-2">
            <div class="aui-clphd mb-3">
                <h4>Pediatric Emergency Assessment, Recognition and Stabilization</h4>
                <p>As the global source of the official resuscitation science and education guidelines the AHA is proud to offer the 2020 Guidelines for CPR and ECC and the 2020 Handbook for Emergency Cardiovascular Care. As the global source of the official resuscitation science and education guidelines the AHA is proud to offer the 2020 Guidelines for CPR and ECC and the 2020 Handbook for Emergency Cardiovascular Care.</p>
            </div>
        </div>
        <div class="aui-courselinks justify-content-between d-flex">
            <a class="aui-courslinklearn font-500" href="#"><span class="aha-icon-arrow-right position-relative">Learn More</span></a>
            <a class="aui-courslinkview font-500" href="#"><span class="aha-icon-arrow-right position-relative">View Products</span></a>
        </div>
    </div>
</div>
<div class="aui-courserow d-flex w-100 justify-content-between p-4">
    <div class="aui-catcourse-container">
        <div class="aui-catcourseimg position-relative">
            <span class="aui-courseimg-icon position-absolute aui-ligbluiconborder">
                <img src="..." alt="heart saver" />
            </span>
            <img class="mb-2" src="https://stg-shopcpr.laerdalblr.in/pub/media/catalog/category/Courses-HS-BBP-900.png" alt="course card"/>
        </div>
        <div class="aui-coursname-descp mt-2">
            <div class="aui-clphd mb-3">
                <h4>Pediatric Emergency Assessment, Recognition and Stabilization</h4>
                <p>As the global source of the official resuscitation science and education guidelines the AHA is proud to offer the 2020 Guidelines for CPR and ECC and the 2020 Handbook for Emergency Cardiovascular Care.</p>
            </div>
        </div>
        <div class="aui-courselinks justify-content-between d-flex">
            <a class="aui-courslinklearn font-500" href="#"><span class="aha-icon-arrow-right position-relative">Learn More</span></a>
            <a class="aui-courslinkview font-500" href="#"><span class="aha-icon-arrow-right position-relative">View Products</span></a>
        </div>
    </div>
    <div class="aui-clpboxspliter"></div>
    <div class="aui-catcourse-container">
        <div class="aui-catcourseimg position-relative">
            <span class="aui-courseimg-icon position-absolute aui-rediconborder">
                <img src="..." alt="heart saver" />
            </span>
            <img class="mb-2" src="https://stg-shopcpr.laerdalblr.in/pub/media/catalog/category/Courses-HS-BBP-900.png" alt="course card"/>
        </div>
        <div class="aui-coursname-descp mt-2">
            <div class="aui-clphd mb-3">
                <h4>Pediatric Emergency Assessment, Recognition and Stabilization</h4>
                <p>As the global source of the official resuscitation science and education guidelines the AHA is proud to offer the 2020 Guidelines for CPR and ECC and the 2020 Handbook for Emergency Cardiovascular Care.</p>
            </div>
        </div>
        <div class="aui-courselinks justify-content-between d-flex">
            <a class="aui-courslinklearn font-500" href="#"><span class="aha-icon-arrow-right position-relative">Learn More</span></a>
            <a class="aui-courslinkview font-500" href="#"><span class="aha-icon-arrow-right position-relative">View Products</span></a>
        </div>
    </div>
</div>
</section>

<div class="row aui-discount-card m-0 p-0">
<div class="col-12 col-md-12 col-lg-8 p-0">
     <div class="aui-discount-section">
         <p class="aui-discount-title">Discount Code</p>
         <p class="aui-discount-info">
         If you have a discount code, please enter it here.
         </p>
         <input class="aui-discount-input" type="text" placeholder="please enter"></input>
         <a href="#" class="aui-discount-apply btn btn-round btn-primary">Apply</a>
         <div class="aui-validation-msg d-flex d-lg-none">
         <i class="aha-icon-cross error d-lg-none"></i><p class="aui-error-msg pl-2 m-0">The discount code you entered cannot be combined with products selected.</p>
         </div>
     </div>
     <div class="aui-validation-msg d-flex">
     <i class="aha-icon-cross error d-none d-md-none d-lg-block"></i><p class="aui-error-msg pl-2 d-none d-md-none d-lg-block">The discount code you entered cannot be combined with products selected.</p>
     </div>
</div>
<div class="col-12 col-md-12 col-lg-4 p-0">
</div>
</div>

<div class="row aui-status-card m-0 p-0">
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-3 p-0">
    <div class="card aui-card shadow-sm m-0">
        <div class="aui-img-container">
            <img class="aui-card-img-top" src="..." alt="product image"/>
            <img class="aui-premium-icon" src="..." alt=""/>
        </div>
        <div class="card-body py-2">
            <h2 class="card-text aui-card-title h6" aria-label="Neurological Assessments Online">Neurological Assessments Online</h2>
            <div class="aui-card-status in-progress pb-1" aria-label="Status, In Progress">In Progress</div>
        </div>
    </div>
</div>
</div>

<div class="col-lg-5 col-md-6">
<div class="aui-portfolioCoursecard">
    <figure class="aui-portfolio-card-img">
        <a href="#" aria-label="portfolio detail link">
            <img class="aui-stroke-img" src="../../images/stroke.png" alt="stroke cardiovascular prevention portfolio image"/>
        </a>
    </figure>
    <h3 class="aui-card-heading h6 font-600">
        Cardiovascular Prevention
    </h3>
    <div class="aui-portfolioCoucard-desc mb-3">
        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque <a href="#" class="aui-learnMore btn-text-link font-600" aria-label="learn more about cardiovascular prevention"> Learn More...</a>
    </div>
    <div>
        <h4 class="h8 mb-3 font-600">Subscription Includes</h4>
        <div class="d-flex aui-subscription-type free-type d-flex align-items-center" id="freeCourse">
            <div class="aui-course-count d-flex align-items-center justify-content-center font-500">
                <span>7</span>
            </div>
            <div class="aui-courses-desc font-500">Free Course</div>
        </div>
        <div class="d-flex aui-subscription-type subs-type d-flex align-items-center mt-2" id="subscriptionCourse">
            <div class="aui-course-count d-flex align-items-center justify-content-center font-500">
                <span>10</span>
            </div>
            <div class="aui-courses-desc">More Courses With Subscription</div>
        </div>
    </div>
    <div class="aui-subscription-details d-flex align-items-center justify-content-end">
        <div class="aui-price-for-month font-600">$20/ Month</div>
        <button type="button" class="btn btn-sm btn-round btn-primary py-2" aria-label="Subscribe portfolio button">Subscribe</button>
    </div>
</div>
</div>

<div class="row">
<div class="col-sm-5">
    <div class="aui-hcard d-flex flex-column" aria-label="card">
        <div>
            <img src="../../../images/bg-brain.png" class="aui-hcard-main-img" alt="course image" />
        </div>
        <div class="aui-hcard-play-container">
            <div class="aui-hcard-play-icon-wrap">
                <i class="aha-icon-play-dark aui-hcard-play-icon" aria-label="resume the course neurological assessments online "> </i>
            </div>
        </div>
        <div class="row mx-1">
            <div class="col-12">
                <div class="mt-3 aui-hcard-header">
                    <h5 class="aui-hcard-header" aria-label="Neurological Assessments Online">Neurological Assessments Online</h5>
                </div>
            </div>
        </div>
        <div class="row mx-1">
            <div class="col-12">
                <i class="mt-2 aui-hcard-description">
                    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
                </i>
            </div>
        </div>
        <div class="row mx-1">
            <div class="col-12">
                <div class="mt-3">
                    <div class="px-2 py-1 aui-hcard-tag-btn d-inline">
                        <img class="mr-1" src="../../images/premium.png" alt="premium tag" />
                        <button type="button" class="btn btn-sm btn-text">Premium</button>
                    </div>
                    <div class="px-2 py-1 aui-hcard-tag-btn d-inline ml-5 ">
                        <img class="mr-1" src="../../images/strokes.png" alt="strokes tag" />
                        <button type="button" class="btn btn-sm btn-text">Stroke</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="aui-hcard-line m-3">
        </div>
        <div class="px-3 pb-2">
            <div class="d-flex flex-wrap align-items-center justify-content-between">
                <div class="my-2">
                    <button type="button" class="btn btn-round btn-primary" aria-label="resume neurological assessments online course " > || Resume</button>
                </div>
                <div class="aui-hcard-more-info-link my-2">
                    <a href="#" class="d-inline" aria-label="Topics and more info about neurological assessments online course"> Topics and More Info </a>
                    <i class="aha-icon-arrow-right d-inline"></i>
                </div>
            </div>
        </div>
    </div>
</div>
</div>

<section class="row aui-portfolio-card-subscribed m-0 p-0">
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-4 p-0">
    <div class="card m-0">
        <div class="aui-img-container d-inline-block">
            <div class="round-container my-3">
                <a class="aui-card-img-link d-block" role="img" aria-label="product image" href="#" style={{ background: 'url(../../images/card-img.png)' }}></a>
            </div>
            <div class="aui-subscribed-tag">SUBSCRIBED</div>                
        </div>
        <div class="card-body py-2">
            <h2 class="card-title h6">Cardiovascular Prevention</h2>
            <p class="card-text">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque<a 
                href="#" class="aui-learn-more px-2" aria-label="learn more about cardiovascular prevention">Learn More...</a></p>
            <section class="aui-portfolio-progress-section">
                <h2 class="aui-portfolio-progress-title h8 font-600">Portfolio Progress</h2>
                <div class="d-flex justify-content-between my-3">
                    <div class="aui-portfolio-progress">
                        <div class="aui-progress" data-percentage="70">
                            <span class="aui-progress-left">
                                <span class="aui-progress-bar-left"></span>
                            </span>
                            <span class="aui-progress-right">
                                <span class="aui-progress-bar-left"></span>
                            </span>
                            <div class="aui-progress-value">
                                <div class="aui-count">
                                    <span class="mt-2">7</span>
                                </div>
                            </div>
                        </div>
                        <div class="aui-portfolio-progress-status mt-2">In Progress</div>
                    </div>
                    <div class="aui-portfolio-progress">
                        <div class="aui-progress" data-percentage="30">
                            <span class="aui-progress-left">
                                <span class="aui-progress-bar-centre"></span>
                            </span>
                            <span class="aui-progress-right">
                                <span class="aui-progress-bar-centre"></span>
                            </span>
                            <div class="aui-progress-value">
                                <div class="aui-count">
                                    <span class="mt-2">4</span>
                                </div>
                            </div>
                        </div>
                        <div class="aui-portfolio-progress-status mt-2">Completed</div>
                    </div>
                    <div class="aui-portfolio-progress">
                        <div class="aui-progress" data-percentage="50">
                            <span class="aui-progress-left">
                                <span class="aui-progress-bar-right"></span>
                            </span>
                            <span class="aui-progress-right">
                                <span class="aui-progress-bar-right"></span>
                            </span>
                            <div class="aui-progress-value">
                                <div class="aui-count">
                                    <span class="mt-2">6</span>
                                </div>
                            </div>
                        </div>
                        <div class="aui-portfolio-progress-status mt-2">Not Started</div>
                    </div>
                </div>                            
            </section>
            <div class="aui-divider-line my-3"></div>
            <div class="aui-portfolio-link d-flex justify-content-end my-2">
                <a href="#" class="font-600" aria-label="Open Portfolio">Open Portfolio<i class="aha-icon-arrow-right"></i></a>
            </div>
        </div>                   
    </div>
</div>
</section>

<div class="license-card">
<div class="row">
    <div class="col-sm-3 col-lg-2">
        <figure class="license-card-img card-circle">
            <img src="../../images/stroke.png" alt=" " />
        </figure>
        <div class="product-id text-center font-700">
            <span class="font-500">Product ID:</span> 325364
        </div>
    </div>
    <div class="col-sm-9 col-lg-10">
        <h2 class="h7 font-600 mt-3 mt-md-0">Advanced Cardiovascular Life Support for Experienced</h2>
        <div class="license-detail-card month-green-card">
            <div class="d-flex flex-wrap flex-lg-nowrap">
                <div class="duration-type d-flex align-items-center py-2 px-3">
                    <div>Monthly:
                        <span class="font-700"> 120</span> of
                        <span class="font-700"> 150</span> in use</div>
                </div>
                <div class="duration-time py-2 px-3 d-flex align-items-center">
                    <div>
                        <div>
                            <span class="title">Duration</span> :
                            <span class="font-700 px-1">01-03-2022</span> to <span class="font-700 px-1">31-03-2022</span>
                        </div>
                        <div>
                            <span class="title">Next charge</span> :
                            <span class="px-1 font-700">31st March</span>
                        </div>
                    </div>
                </div>
                <div class="col-action ml-auto px-4 px-lg-5 py-2 d-flex align-items-center justify-content-center">
                    <div class="btn-group dropup">
                        <button type="button" class="btn btn-text btn-dots" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-label="Action menu">
                            <svg width="16" height="16" fill="#C10E21" viewBox="0 0 16 16">
                                <path d="M3 9.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z" />
                            </svg>
                        </button>
                        <div class="dropdown-menu">
                            <ul class="list-unstyled mb-0">
                                <li><a href="#" aria-label="Buy License">Buy License</a></li>
                                <li><a href="#" aria-label="View/Assign Learner">View / Assign Learner</a></li>
                                <li><a href="#" aria-label="Billing Details">Billing Details</a></li>
                                <li><a href="#" aria-label="Order History">Order History</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="license-detail-card year-green-card">
            <div class="d-flex flex-wrap flex-lg-nowrap">
                <div class="duration-type d-flex align-items-center py-2 px-3">
                    <div>Yearly:
                        <span class="font-700"> 40</span> of
                        <span class="font-700"> 150</span> in use</div>
                </div>
                <div class="duration-time py-2 px-3 d-flex align-items-center">
                    <div>
                        <div>
                            <span class="title">Duration</span> :
                            <span class="font-700 px-1">01-03-2022</span> to <span class="font-700 px-1">31-03-2023</span>
                        </div>
                        <div>
                            <span class="title">Next charge</span> :
                            <span class="px-1 font-700">31st March</span>
                        </div>
                    </div>
                </div>
                <div class="col-action ml-auto px-4 px-lg-5 py-2 d-flex align-items-center justify-content-center">
                    <div class="btn-group dropup">
                        <button type="button" class="btn btn-text btn-dots" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-label="Action menu">
                            <svg width="16" height="16" fill="#C10E21" viewBox="0 0 16 16">
                                <path d="M3 9.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z" />
                            </svg>
                        </button>
                        <div class="dropdown-menu">
                            <ul class="list-unstyled mb-0">
                                <li><a href="#" aria-label="Buy License">Buy License</a></li>
                                <li><a href="#" aria-label="View/Assign Learner">View / Assign Learner</a></li>
                                <li><a href="#" aria-label="Billing Details">Billing Details</a></li>
                                <li><a href="#" aria-label="Order History">Order History</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>

<div class="row justify-content-between aui-certificate-card-row">
    <div class="col-lg-6 mb-4">
        <div class="card p-2 h-100">
            <div class="row h-100">
                <div class="col-12 col-lg-4">
                    <div class="aui-certificate-card-image"><img src="../../../images/bg-brain.png" alt=""/></div>
                </div>
                <div class="col-12 col-lg-8">
                    <div class="card-body p-0 h-100">
                        <h2 class="h7 aui-certificate-card-heading mb-2 font-500">Neurological Assessments Online</h2>
                        <div class="aui-certificate-completion-date font-500 mb-3">Completion Date: 31-03-2022</div>
                        <div class="row justify-content-between align-items-center aui-certiButton-section">
                            <div class="col-9">
                                <button type="button " class="btn btn-round btn-secondary ">View Certificate</button>
                            </div>
                            <div class="col-3 aui-certificate-download text-right">
                                <button type="button " class="btn btn-link btn-sm"  aria-label='Download certificate'><img src="../../../images/download@2x.png " alt="Download icon"/></button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-6 mb-4">
        <div class="card p-2 h-100">
            <div class="row h-100">
                <div class="col-12 col-lg-4">
                    <div class="aui-certificate-card-image"><img src="../../../images/bg-brain.png" alt=""/></div>
                </div>
                <div class="col-12 col-lg-8">
                    <div class="card-body p-0 h-100">
                        <h2 class="h7 aui-certificate-card-heading mb-2 font-500">Neurological Assessments Online</h2>
                        <div class="aui-certificate-completion-date font-500 mb-3">Completion Date: 31-03-2022</div>
                        <div class="row justify-content-between align-items-center aui-certiButton-section">
                            <div class="col-9">
                                <button type="button " class="btn btn-round btn-secondary ">View Certificate</button>
                            </div>
                            <div class="col-3 aui-certificate-download text-right">
                                <button type="button " class="btn btn-link btn-sm"  aria-label='Download certificate'><img src="../../../images/download@2x.png " alt="Download icon"/></button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>