An Application Details component is used to display key information about an application process, such as eligibility, deadlines, required documents, and application steps.
Lorem ipsum dolor sit
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
<section class="application--details-container">
<div class="container">
<div class="row">
<div class="col-lg-8 col-12 m-auto">
<div class="application--details-card">
<div class="application--details-card-benefits">
<h3 class="large-text-3 m-b-0">Lorem ipsum dolor sit</h3>
<h5 class="medium-text-2"> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt </h5>
<button class="link text-accent btn p-0">
<span class="link-txt">Lorem ipsum dolor sit amet</span>
<span class="blueprint-icon icon-arrow_right"></span>
</button>
<button class="link text-accent btn p-0">
<span class="link-txt">Lorem ipsum dolor sit amet</span>
<span class="blueprint-icon icon-arrow_right"></span>
</button>
</div>
<div class="application--details-card-price-wrapper">
<div class="saving-price">
<h4 class="medium-text-1">Lorem $XXX</h4>
</div>
<div class="offer-price">
<h1 class="large-text-1 ">US$X,XXX</h1>
</div>
<p class="para--two m-b-0"> Lorem ipsum dolor sit </p>
<button type="button" class="btn btn--large btn--primary col-12" aria-label="Large Button"> Button </button>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-8 col-12 m-x-auto m-t-24">
<p class="para--four">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation</p>
</div>
</div>
</div>
</div>
</section>Lorem ipsum dolor sit
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
<section class="application--details-container">
<div class="container">
<div class="row">
<div class="col-lg-8 col-12 m-auto">
<div class="application--details-card">
<div class="application--details-card-benefits">
<h3 class="large-text-3 m-b-0">Lorem ipsum dolor sit</h3>
<h5 class="medium-text-2"> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt </h5>
<button class="link text-accent btn p-0">
<span class="link-txt">Lorem ipsum dolor sit amet</span>
<span class="blueprint-icon icon-arrow_right"></span>
</button>
<button class="link text-accent btn p-0">
<span class="link-txt">Lorem ipsum dolor sit amet</span>
<span class="blueprint-icon icon-arrow_right"></span>
</button>
</div>
<div class="application--details-card-price-wrapper">
<div class="original-price">
<h4 class="medium-text-1 text-decoration-line-through">Lorem $XXX </h4>
</div>
<div class="offer-price">
<h1 class="large-text-1 ">US$X,XXX</h1>
</div>
<p class="para--two m-b-0"> Lorem ipsum dolor sit </p>
<button type="button" class="btn btn--large btn--primary col-12" aria-label="Large Button"> Button </button>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-8 col-12 m-x-auto m-t-24">
<p class="para--four">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation</p>
</div>
</div>
</div>
</section>Lorem ipsum dolor sit amet, consectetur
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
<section class="application--details-container">
<div class="container">
<div class="row">
<div class="col-lg-8 col-12 m-auto">
<div class="application--details-card">
<div class="application--details-card-benefits">
<h3 class="large-text-3 m-b-0">Lorem ipsum dolor sit</h3>
<h5 class="medium-text-2"> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt </h5>
<button class="link text-accent btn p-0">
<span class="link-txt">Lorem ipsum dolor sit amet</span>
<span class="blueprint-icon icon-arrow_right"></span>
</button>
<button class="link text-accent btn p-0">
<span class="link-txt">Lorem ipsum dolor sit amet</span>
<span class="blueprint-icon icon-arrow_right"></span>
</button>
</div>
<div class="application--details-card-price-wrapper">
<div class="offer-price">
<h1 class="large-text-1 ">US$X,XXX</h1>
</div>
<p class="para--two m-b-0"> Fees will increase $150 on <span>[Month ##]</span>
</p>
<button type="button" class="btn btn--large btn--primary col-12" aria-label="Large Button"> Button </button>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-8 col-12 m-x-auto m-t-24">
<p class="para--four">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation</p>
</div>
</div>
</div>
</section>