Source code

Edit Card Info Component

Single card

Sample code
<!-- With status badge and alert indicator -->
<lta-edit-card-info
  name="Joe White"
  role="Main contact"
  status="Active"
  alert="No Safeguarding"
></lta-edit-card-info>

<!-- With confirmed indicator only (status and alert hidden when omitted) -->
<lta-edit-card-info
  name="Laura Smith"
  role="Administrator"
  confirmed="DBS Valid"
></lta-edit-card-info>

Grid of cards

Sample code
<div class="l-grid__inner">

  <!-- Card with both indicators (side-by-side) + non-compliant badge -->
  <div class="l-grid__cell--span-6-sm l-grid__cell--span-2-md l-grid__cell--span-6-xl">
    <lta-edit-card-info
      name="Rhys Doherty"
      role="Welfare Officer"
      confirmed="DBS Valid"
      alert="No Safeguarding"
      status="Non-compliant"
    ></lta-edit-card-info>
  </div>

  <!-- Card with confirmed indicator only -->
  <div class="l-grid__cell--span-6-sm l-grid__cell--span-2-md l-grid__cell--span-6-xl">
    <lta-edit-card-info
      name="Laura Smith"
      role="Administrator"
      confirmed="DBS Valid"
    ></lta-edit-card-info>
  </div>

  <!-- Card with status badge + both indicators -->
  <div class="l-grid__cell--span-6-sm l-grid__cell--span-2-md l-grid__cell--span-6-xl">
    <lta-edit-card-info
      name="Lisa Long"
      role="Chair"
      status="Inactive"
      alert="No Safeguarding"
      confirmed="DBS Valid"
    ></lta-edit-card-info>
  </div>

  <!-- Card with pending badge only -->
  <div class="l-grid__cell--span-6-sm l-grid__cell--span-2-md l-grid__cell--span-6-xl">
    <lta-edit-card-info
      name="Larissa Shipton"
      role="Treasurer"
      status="Pending"
    ></lta-edit-card-info>
  </div>

</div>