Components

Event list

A list of events.

<ul class="ho-lev-event-list">
  <li class="ho-lev-birth-summary">
    <article>
      <a
        class="govuk-link ho-lev-birth-summary__link"
        href="/?selected=1"
      >
        <div class="ho-lev-birth-summary__heading">
          John SMITH
        </div>
        <table class="ho-lev-birth-summary__data">
          <tbody>
            <tr>
              <th>Place of birth</th>
              <td>Bournemouth</td>
            </tr>
            <tr>
              <th>Mother</th>
              <td>Jane SMITH</td>
            </tr>
            <tr>
              <th>Father</th>
              <td>William SMITH</td>
            </tr>
          </tbody>
        </table>
      </a>
    </article>
  </li>
  <li class="ho-lev-birth-summary">
    <article>
      <a
        class="govuk-link ho-lev-birth-summary__link"
        href="/?selected=2"
      >
        <div class="ho-lev-birth-summary__heading">
          David STEWART
        </div>
        <table class="ho-lev-birth-summary__data">
          <tbody>
            <tr>
              <th>Place of birth</th>
              <td>Swansea</td>
            </tr>
            <tr>
              <th>Mother</th>
              <td>Sally STEWART</td>
            </tr>
            <tr>
              <th>Father</th>
              <td>Aiden STEWART</td>
            </tr>
          </tbody>
        </table>
      </a>
    </article>
  </li>
  <li class="ho-lev-birth-summary">
    <article>
      <a
        class="govuk-link ho-lev-birth-summary__link"
        href="/?selected=3"
      >
        <div class="ho-lev-birth-summary__heading">
          James HAMPTON
        </div>
        <table class="ho-lev-birth-summary__data">
          <tbody>
            <tr>
              <th>Place of birth</th>
              <td>Newcastle</td>
            </tr>
            <tr>
              <th>Mother</th>
              <td>Catherine HAMPTON</td>
            </tr>
            <tr>
              <th>Father</th>
              <td>Gary HAMPTON</td>
            </tr>
          </tbody>
        </table>
      </a>
    </article>
  </li>
</ul>
Props
Name Type Default Description
id string - 'id' attribute to place on the base HTML element
classBlock string - Block name override in BEM style classes applied to all elements
classModifiers other - BEM style modifiers to apply to the base HTML element
className string - Extra classes to apply to the base HTML element

Stories

Standard

A standard Event list.

<ul class="ho-lev-event-list">
  <li class="ho-lev-birth-summary">
    <article>
      <a
        class="govuk-link ho-lev-birth-summary__link"
        href="/?selected=1"
      >
        <div class="ho-lev-birth-summary__heading">
          John SMITH
        </div>
        <table class="ho-lev-birth-summary__data">
          <tbody>
            <tr>
              <th>Place of birth</th>
              <td>Bournemouth</td>
            </tr>
            <tr>
              <th>Mother</th>
              <td>Jane SMITH</td>
            </tr>
            <tr>
              <th>Father</th>
              <td>William SMITH</td>
            </tr>
          </tbody>
        </table>
      </a>
    </article>
  </li>
  <li class="ho-lev-birth-summary">
    <article>
      <a
        class="govuk-link ho-lev-birth-summary__link"
        href="/?selected=2"
      >
        <div class="ho-lev-birth-summary__heading">
          David STEWART
        </div>
        <table class="ho-lev-birth-summary__data">
          <tbody>
            <tr>
              <th>Place of birth</th>
              <td>Swansea</td>
            </tr>
            <tr>
              <th>Mother</th>
              <td>Sally STEWART</td>
            </tr>
            <tr>
              <th>Father</th>
              <td>Aiden STEWART</td>
            </tr>
          </tbody>
        </table>
      </a>
    </article>
  </li>
  <li class="ho-lev-birth-summary">
    <article>
      <a
        class="govuk-link ho-lev-birth-summary__link"
        href="/?selected=3"
      >
        <div class="ho-lev-birth-summary__heading">
          James HAMPTON
        </div>
        <table class="ho-lev-birth-summary__data">
          <tbody>
            <tr>
              <th>Place of birth</th>
              <td>Newcastle</td>
            </tr>
            <tr>
              <th>Mother</th>
              <td>Catherine HAMPTON</td>
            </tr>
            <tr>
              <th>Father</th>
              <td>Gary HAMPTON</td>
            </tr>
          </tbody>
        </table>
      </a>
    </article>
  </li>
</ul>