Source code

Web Components ·Playgrounds

Edit Card Info

Card with name, role, status and indicators. Edit attributes and click Apply.

Single card

Live preview

Markup (editable)

Grid of cards

Live preview

Markup (editable)

<div class="l-grid__inner">
  <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>
  <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>
  <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>
  <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>