lta.org.uk

Coach Level 3 — Accreditation+ override

Name, role, level and edit button are attributes. Indicators, accreditation date and Compliant badge are child markup.

Live preview

Markup (editable)

<div class="l-grid">
  <div class="l-grid__inner u-w-100">
    <div class="l-grid__cell--span-6-sm l-grid__cell--span-4-md l-grid__cell--span-6-xl">
      <lta-edit-card-info
  name="Jenna Smith"
  role="Coach"
  level="Level 3"
  button-label="Edit details"
  button-classes="js-team-info-edit-on-court-team"
>
  <div class="lta-edit-card-info__indicators">
  <span class="lta-edit-card-info__indicator lta-edit-card-info__indicator--warning">
    <lta-icon sprite-icon="alert-circle-no-fill" width="1.25rem" height="1.25rem"></lta-icon>
    DBS
  </span>
  <span class="lta-edit-card-info__indicator lta-edit-card-info__indicator--success">
    <lta-icon sprite-icon="check-circle-no-fill" width="1.25rem" height="1.25rem"></lta-icon>
    Safeguarding
  </span>
  <span class="lta-edit-card-info__indicator lta-edit-card-info__indicator--success">
    <lta-icon sprite-icon="check-circle-no-fill" width="1.25rem" height="1.25rem"></lta-icon>
    First Aid
  </span>
  <span class="lta-edit-card-info__indicator lta-edit-card-info__indicator--success">
    <lta-icon sprite-icon="check-circle-no-fill" width="1.25rem" height="1.25rem"></lta-icon>
    Accreditation+
  </span>
</div>
  <p class="lta-edit-card-info__note">Accreditation end date: 19/05/2027</p>
  <span class="lta-tag lta-tag--success lta-edit-card-info__status">Compliant</span>
</lta-edit-card-info>
    </div>
  </div>
</div>

Management and venue team

Name and role only. Role can be a single title or a comma-separated list.

Live preview

Markup (editable)

Welfare Officer

DBS and Safeguarding indicators passed as children.

Live preview

Markup (editable)

<div class="l-grid">
  <div class="l-grid__inner u-w-100">
    <div class="l-grid__cell--span-6-sm l-grid__cell--span-4-md l-grid__cell--span-6-xl">
      <lta-edit-card-info
  name="Rhys Doherty"
  role="Welfare Officer"
  button-label="Edit details"
>
  <div class="lta-edit-card-info__indicators">
  <span class="lta-edit-card-info__indicator lta-edit-card-info__indicator--success">
    <lta-icon sprite-icon="check-circle-no-fill" width="1.25rem" height="1.25rem"></lta-icon>
    DBS
  </span>
  <span class="lta-edit-card-info__indicator lta-edit-card-info__indicator--success">
    <lta-icon sprite-icon="check-circle-no-fill" width="1.25rem" height="1.25rem"></lta-icon>
    Safeguarding
  </span>
</div>
  <span class="lta-tag lta-tag--success lta-edit-card-info__status">Compliant</span>
</lta-edit-card-info>
    </div>
    <div class="l-grid__cell--span-6-sm l-grid__cell--span-4-md l-grid__cell--span-6-xl">
      <lta-edit-card-info
  name="Rhys Doherty"
  role="Welfare Officer"
  button-label="Edit details"
>
  <div class="lta-edit-card-info__indicators">
  <span class="lta-edit-card-info__indicator lta-edit-card-info__indicator--warning">
    <lta-icon sprite-icon="alert-circle-no-fill" width="1.25rem" height="1.25rem"></lta-icon>
    DBS
  </span>
  <span class="lta-edit-card-info__indicator lta-edit-card-info__indicator--success">
    <lta-icon sprite-icon="check-circle-no-fill" width="1.25rem" height="1.25rem"></lta-icon>
    Safeguarding
  </span>
</div>
  <span class="lta-tag lta-tag--danger lta-edit-card-info__status">Non-compliant</span>
</lta-edit-card-info>
    </div>
    <div class="l-grid__cell--span-6-sm l-grid__cell--span-4-md l-grid__cell--span-6-xl">
      <lta-edit-card-info
  name="Rhys Doherty"
  role="Welfare Officer"
  button-label="Edit details"
>
  <div class="lta-edit-card-info__indicators">
  <span class="lta-edit-card-info__indicator lta-edit-card-info__indicator--success">
    <lta-icon sprite-icon="check-circle-no-fill" width="1.25rem" height="1.25rem"></lta-icon>
    DBS
  </span>
  <span class="lta-edit-card-info__indicator lta-edit-card-info__indicator--warning">
    <lta-icon sprite-icon="alert-circle-no-fill" width="1.25rem" height="1.25rem"></lta-icon>
    Safeguarding
  </span>
</div>
  <span class="lta-tag lta-tag--danger lta-edit-card-info__status">Non-compliant</span>
</lta-edit-card-info>
    </div>
  </div>
</div>

Young Person Welfare Ambassador

Name and role only. No child markup.

Live preview

Markup (editable)

Activator

DBS, Safeguarding and Training passed as children.

Live preview

Markup (editable)

<div class="l-grid">
  <div class="l-grid__inner u-w-100">
    <div class="l-grid__cell--span-6-sm l-grid__cell--span-4-md l-grid__cell--span-6-xl">
      <lta-edit-card-info
  name="Rob George"
  role="Activator"
  button-label="Edit details"
>
  <div class="lta-edit-card-info__indicators">
  <span class="lta-edit-card-info__indicator lta-edit-card-info__indicator--success">
    <lta-icon sprite-icon="check-circle-no-fill" width="1.25rem" height="1.25rem"></lta-icon>
    DBS
  </span>
  <span class="lta-edit-card-info__indicator lta-edit-card-info__indicator--success">
    <lta-icon sprite-icon="check-circle-no-fill" width="1.25rem" height="1.25rem"></lta-icon>
    Safeguarding
  </span>
  <span class="lta-edit-card-info__indicator lta-edit-card-info__indicator--warning">
    <lta-icon sprite-icon="alert-circle-no-fill" width="1.25rem" height="1.25rem"></lta-icon>
    Training
  </span>
</div>
  <span class="lta-tag lta-tag--danger lta-edit-card-info__status">Non-compliant</span>
</lta-edit-card-info>
    </div>
    <div class="l-grid__cell--span-6-sm l-grid__cell--span-4-md l-grid__cell--span-6-xl">
      <lta-edit-card-info
  name="Rob George"
  role="Activator"
  button-label="Edit details"
>
  <div class="lta-edit-card-info__indicators">
  <span class="lta-edit-card-info__indicator lta-edit-card-info__indicator--success">
    <lta-icon sprite-icon="check-circle-no-fill" width="1.25rem" height="1.25rem"></lta-icon>
    DBS
  </span>
  <span class="lta-edit-card-info__indicator lta-edit-card-info__indicator--success">
    <lta-icon sprite-icon="check-circle-no-fill" width="1.25rem" height="1.25rem"></lta-icon>
    Safeguarding
  </span>
  <span class="lta-edit-card-info__indicator lta-edit-card-info__indicator--success">
    <lta-icon sprite-icon="check-circle-no-fill" width="1.25rem" height="1.25rem"></lta-icon>
    Training
  </span>
</div>
  <span class="lta-tag lta-tag--success lta-edit-card-info__status">Compliant</span>
</lta-edit-card-info>
    </div>
  </div>
</div>

Coach, Head Coach, Assistant Coach, Instructor — Level 1

Role plus level attributes, with DBS and Safeguarding as children.

Live preview

Markup (editable)

<div class="l-grid">
  <div class="l-grid__inner u-w-100">
    <div class="l-grid__cell--span-6-sm l-grid__cell--span-4-md l-grid__cell--span-6-xl">
      <lta-edit-card-info
  name="Fiona Thomson"
  role="Coach"
  level="Level 1"
  button-label="Edit details"
>
  <div class="lta-edit-card-info__indicators">
  <span class="lta-edit-card-info__indicator lta-edit-card-info__indicator--success">
    <lta-icon sprite-icon="check-circle-no-fill" width="1.25rem" height="1.25rem"></lta-icon>
    DBS
  </span>
  <span class="lta-edit-card-info__indicator lta-edit-card-info__indicator--success">
    <lta-icon sprite-icon="check-circle-no-fill" width="1.25rem" height="1.25rem"></lta-icon>
    Safeguarding
  </span>
</div>
  <span class="lta-tag lta-tag--success lta-edit-card-info__status">Compliant</span>
</lta-edit-card-info>
    </div>
    <div class="l-grid__cell--span-6-sm l-grid__cell--span-4-md l-grid__cell--span-6-xl">
      <lta-edit-card-info
  name="Fiona Thomson"
  role="Coach"
  level="Level 1"
  button-label="Edit details"
>
  <div class="lta-edit-card-info__indicators">
  <span class="lta-edit-card-info__indicator lta-edit-card-info__indicator--warning">
    <lta-icon sprite-icon="alert-circle-no-fill" width="1.25rem" height="1.25rem"></lta-icon>
    DBS
  </span>
  <span class="lta-edit-card-info__indicator lta-edit-card-info__indicator--success">
    <lta-icon sprite-icon="check-circle-no-fill" width="1.25rem" height="1.25rem"></lta-icon>
    Safeguarding
  </span>
</div>
  <span class="lta-tag lta-tag--danger lta-edit-card-info__status">Non-compliant</span>
</lta-edit-card-info>
    </div>
    <div class="l-grid__cell--span-6-sm l-grid__cell--span-4-md l-grid__cell--span-6-xl">
      <lta-edit-card-info
  name="Fiona Thomson"
  role="Coach"
  level="Level 1"
  button-label="Edit details"
>
  <div class="lta-edit-card-info__indicators">
  <span class="lta-edit-card-info__indicator lta-edit-card-info__indicator--success">
    <lta-icon sprite-icon="check-circle-no-fill" width="1.25rem" height="1.25rem"></lta-icon>
    DBS
  </span>
  <span class="lta-edit-card-info__indicator lta-edit-card-info__indicator--warning">
    <lta-icon sprite-icon="alert-circle-no-fill" width="1.25rem" height="1.25rem"></lta-icon>
    Safeguarding
  </span>
</div>
  <span class="lta-tag lta-tag--danger lta-edit-card-info__status">Non-compliant</span>
</lta-edit-card-info>
    </div>
  </div>
</div>

Coach, Head Coach, Assistant Coach, Instructor — Level 0, 2, 3, 4, 5

First Aid, Accreditation / Accreditation+, dates and status badge are children.

Live preview

Markup (editable)

<div class="l-grid">
  <div class="l-grid__inner u-w-100">
    <div class="l-grid__cell--span-6-sm l-grid__cell--span-4-md l-grid__cell--span-6-xl">
      <lta-edit-card-info
  name="Jenna Smith"
  role="Coach"
  level="Level 2"
  button-label="Edit details"
>
  <div class="lta-edit-card-info__indicators">
  <span class="lta-edit-card-info__indicator lta-edit-card-info__indicator--success">
    <lta-icon sprite-icon="check-circle-no-fill" width="1.25rem" height="1.25rem"></lta-icon>
    DBS
  </span>
  <span class="lta-edit-card-info__indicator lta-edit-card-info__indicator--success">
    <lta-icon sprite-icon="check-circle-no-fill" width="1.25rem" height="1.25rem"></lta-icon>
    Safeguarding
  </span>
  <span class="lta-edit-card-info__indicator lta-edit-card-info__indicator--success">
    <lta-icon sprite-icon="check-circle-no-fill" width="1.25rem" height="1.25rem"></lta-icon>
    First Aid
  </span>
  <span class="lta-edit-card-info__indicator lta-edit-card-info__indicator--warning">
    <lta-icon sprite-icon="alert-circle-no-fill" width="1.25rem" height="1.25rem"></lta-icon>
    Accreditation
  </span>
</div>
  <span class="lta-tag lta-tag--danger lta-edit-card-info__status">Non-compliant</span>
</lta-edit-card-info>
    </div>
    <div class="l-grid__cell--span-6-sm l-grid__cell--span-4-md l-grid__cell--span-6-xl">
      <lta-edit-card-info
  name="Jenna Smith"
  role="Coach"
  level="Level 2"
  button-label="Edit details"
>
  <div class="lta-edit-card-info__indicators">
  <span class="lta-edit-card-info__indicator lta-edit-card-info__indicator--success">
    <lta-icon sprite-icon="check-circle-no-fill" width="1.25rem" height="1.25rem"></lta-icon>
    DBS
  </span>
  <span class="lta-edit-card-info__indicator lta-edit-card-info__indicator--success">
    <lta-icon sprite-icon="check-circle-no-fill" width="1.25rem" height="1.25rem"></lta-icon>
    Safeguarding
  </span>
  <span class="lta-edit-card-info__indicator lta-edit-card-info__indicator--success">
    <lta-icon sprite-icon="check-circle-no-fill" width="1.25rem" height="1.25rem"></lta-icon>
    First Aid
  </span>
  <span class="lta-edit-card-info__indicator lta-edit-card-info__indicator--success">
    <lta-icon sprite-icon="check-circle-no-fill" width="1.25rem" height="1.25rem"></lta-icon>
    Accreditation
  </span>
</div>
  <p class="lta-edit-card-info__note">Accreditation end date: 19/05/2027</p>
  <span class="lta-tag lta-tag--success lta-edit-card-info__status">Compliant</span>
</lta-edit-card-info>
    </div>
    <div class="l-grid__cell--span-6-sm l-grid__cell--span-4-md l-grid__cell--span-6-xl">
      <lta-edit-card-info
  name="Jenna Smith"
  role="Coach"
  level="Level 0"
  button-label="Edit details"
>
  <div class="lta-edit-card-info__indicators">
  <span class="lta-edit-card-info__indicator lta-edit-card-info__indicator--success">
    <lta-icon sprite-icon="check-circle-no-fill" width="1.25rem" height="1.25rem"></lta-icon>
    DBS
  </span>
  <span class="lta-edit-card-info__indicator lta-edit-card-info__indicator--success">
    <lta-icon sprite-icon="check-circle-no-fill" width="1.25rem" height="1.25rem"></lta-icon>
    Safeguarding
  </span>
  <span class="lta-edit-card-info__indicator lta-edit-card-info__indicator--success">
    <lta-icon sprite-icon="check-circle-no-fill" width="1.25rem" height="1.25rem"></lta-icon>
    First Aid
  </span>
  <span class="lta-edit-card-info__indicator lta-edit-card-info__indicator--warning">
    <lta-icon sprite-icon="alert-circle-no-fill" width="1.25rem" height="1.25rem"></lta-icon>
    Accreditation
  </span>
</div>
  <p class="lta-edit-card-info__note">Accreditation grace period end date: 18/07/2026</p>
  <span class="lta-tag lta-tag--danger lta-edit-card-info__status">Non-compliant</span>
</lta-edit-card-info>
    </div>
    <div class="l-grid__cell--span-6-sm l-grid__cell--span-4-md l-grid__cell--span-6-xl">
      <lta-edit-card-info
  name="Jenna Smith"
  role="Coach"
  level="Level 3"
  button-label="Edit details"
>
  <div class="lta-edit-card-info__indicators">
  <span class="lta-edit-card-info__indicator lta-edit-card-info__indicator--warning">
    <lta-icon sprite-icon="alert-circle-no-fill" width="1.25rem" height="1.25rem"></lta-icon>
    DBS
  </span>
  <span class="lta-edit-card-info__indicator lta-edit-card-info__indicator--warning">
    <lta-icon sprite-icon="alert-circle-no-fill" width="1.25rem" height="1.25rem"></lta-icon>
    Safeguarding
  </span>
  <span class="lta-edit-card-info__indicator lta-edit-card-info__indicator--warning">
    <lta-icon sprite-icon="alert-circle-no-fill" width="1.25rem" height="1.25rem"></lta-icon>
    First Aid
  </span>
  <span class="lta-edit-card-info__indicator lta-edit-card-info__indicator--success">
    <lta-icon sprite-icon="check-circle-no-fill" width="1.25rem" height="1.25rem"></lta-icon>
    Accreditation+
  </span>
</div>
  <p class="lta-edit-card-info__note">Accreditation end date: 19/05/2027</p>
  <span class="lta-tag lta-tag--success lta-edit-card-info__status">Compliant</span>
</lta-edit-card-info>
    </div>
  </div>
</div>

LTA Young Leader

Name and role only. No child markup.

Live preview

Markup (editable)

Edit Card Info