Claim Header

Currently used on the Home page, the Claim Header displays valuable claim information at-a-glance. It is also responsive by nature, and the information on display changes depending on the screen size.

Design Sample

Number A01234567879

Items 18

Attachments 14

html

<div class="claim-header">
  <div class="claim-information">
    <div class="claim-details number">
      <div class="claim-details-icon">
        <span class="icon"><i class="la la-map-signs"></i></span>
      </div>
      <div class="details">
        <span class="claim-label">Number</span>
        <span class="claim-data">{Claim_Number}</span>
      </div>
    </div>
    <div class="claim-details items">
      <div class="claim-details-icon">
        <span class="icon"><i class="la la-list-ol"></i></span>
      </div>
      <div class="details">
        <span class="claim-label">Items</span>
        <span class="claim-data">{Claim_Items}</span>
      </div>
    </div>
    <div class="claim-details attachments">
      <div class="claim-details-icon">
        <span class="icon"><i class="la la-paperclip"></i></span>
      </div>
      <div class="details">
        <span class="claim-label">Attachments</span>
        <span class="claim-data">{Claim_Attachments}</span>
      </div>
    </div>
  </div>
</div>