An Application Details component is used to display key information about an application process, such as eligibility, deadlines, required documents, and application steps.

Single Round

Lorem XX%

Lorem ipsum

US$X,XXX US$X,XXX

Lorem ipsum Month Date, Year at XX:XX ipsum

<div class="col-sm-8 col-12 m-auto">
  <div class="cards">
      <div class="bg-gray card">
      <div class="bg-accent savingsParent">
          <p class="text-light medium-text-1 savingsTitle">Lorem XX%</p>
      </div>
      <div class="detailsParent">
          <h4 class="text-secondary heading">Lorem ipsum</h4>
          <div class="priceParent">
          <span class="originalPrice">Lorem ipsum</span>
          <span class="large-text-3 text-h2 offeredPrice">US$X,XXX</span>
          </div>
          <div class="dueDate">Lorem ipsum dolor sit and ipsum</div>
      </div>
      </div>
  </div>
</div>

Multiple Rounds

Lorem XX%

Lorem ipsum

US$X,XXX US$X,XXX

Lorem ipsum Month Date, Year at XX:XX ipsum

Lorem XX%

Lorem ipsum

US$X,XXX US$X,XXX

Lorem ipsum Month Date, Year at XX:XX ipsum

<div class="col-sm-8 col-12 m-auto">
  <div class="cards">
      <div class="bg-gray card">
      <div class="bg-accent savingsParent">
          <p class="text-light medium-text-1 savingsTitle">Lorem XX%</p>
      </div>
      <div class="detailsParent">
          <h4 class="text-secondary heading">Lorem ipsum</h4>
          <div class="priceParent">
          <span class="originalPrice">Lorem ipsum</span>
          <span class="large-text-3 text-h2 offeredPrice">US$X,XXX</span>
          </div>
          <div class="dueDate">Lorem ipsum dolor sit and ipsum</div>
      </div>
      </div>
      <div class="bg-gray card">
      <div class="bg-accent savingsParent">
          <p class="text-light medium-text-1 savingsTitle">Lorem XX%</p>
      </div>
      <div class="detailsParent">
          <h4 class="text-secondary heading">Lorem ipsum</h4>
          <div class="priceParent">
          <span class="originalPrice">Lorem ipsum</span>
          <span class="large-text-3 text-h2 offeredPrice">US$X,XXX</span>
          </div>
          <div class="dueDate">Lorem ipsum dolor sit and ipsum</div>
      </div>
      </div>
  </div>
</div>