{{ aspExample({ code: "", nunjucks: "", json: "", title: "", example: "default", id: "65a92b83efc16" }) }}

 {{ aspExample({ code: "", nunjucks: "", json: "", title: "", example: "no-text", id: "66bb5e5b988d2" }) }}


<p class="wp-block-paragraph">WIP &#8211; Mention skeleton loading</p>



<h2 class="wp-block-heading">Alias</h2>



<p class="wp-block-paragraph">What was known as a card component on the &#8216;frontend&#8217; is now a signage component.<br>Previously known as a story component on the &#8216;citizen site&#8217;.</p>



<h2 class="wp-block-heading">Status of development</h2>



<p class="wp-block-paragraph">The below criteria all need to be met for a component to be considered as fully developed for use within the ASP Digital Design System.</p>



    
                                                                                                                                                                                                                                                                                    
  

<table class="asp-table">
  <thead class="asp-table__head">
    <tr class="asp-table__row asp-table__row--head">
                              <th class="asp-table__header" scope="col">
                Development criteria
              </th>
                              <th class="asp-table__header" scope="col">
                Status
              </th>
          </tr>
  </thead>
  <tbody class="asp-table__body">
                    <tr class="asp-table__row">
                                                                    <td class="asp-table__cell">
        <span class="asp-table__responsive-heading" aria-hidden="true">Development criteria </span>
                                                                      WCAG 2.2 compliant
                        </td>
                                                                    <td class="asp-table__cell">
        <span class="asp-table__responsive-heading" aria-hidden="true">Status </span>
                                                                      <span class="status">Not started</span>
                        </td>
          </tr>
                    <tr class="asp-table__row">
                                                                    <td class="asp-table__cell">
        <span class="asp-table__responsive-heading" aria-hidden="true">Development criteria </span>
                                                                      WCAG 2.1 compliant
                        </td>
                                                                    <td class="asp-table__cell">
        <span class="asp-table__responsive-heading" aria-hidden="true">Status </span>
                                                                      <span class="status status--green">Completed</span>
                        </td>
          </tr>
                    <tr class="asp-table__row">
                                                                    <td class="asp-table__cell">
        <span class="asp-table__responsive-heading" aria-hidden="true">Development criteria </span>
                                                                      HTML / Nunjucks version
                        </td>
                                                                    <td class="asp-table__cell">
        <span class="asp-table__responsive-heading" aria-hidden="true">Status </span>
                                                                      <span class="status status--green">Completed</span>
                        </td>
          </tr>
                    <tr class="asp-table__row">
                                                                    <td class="asp-table__cell">
        <span class="asp-table__responsive-heading" aria-hidden="true">Development criteria </span>
                                                                      Figma version
                        </td>
                                                                    <td class="asp-table__cell">
        <span class="asp-table__responsive-heading" aria-hidden="true">Status </span>
                                                                      <span class="status status">Not started</span>
                        </td>
          </tr>
                    <tr class="asp-table__row">
                                                                    <td class="asp-table__cell">
        <span class="asp-table__responsive-heading" aria-hidden="true">Development criteria </span>
                                                                      M365 versions
                        </td>
                                                                    <td class="asp-table__cell">
        <span class="asp-table__responsive-heading" aria-hidden="true">Status </span>
                                                                      <span class="status status--green">Completed</span>
                        </td>
          </tr>
                    <tr class="asp-table__row">
                                                                    <td class="asp-table__cell">
        <span class="asp-table__responsive-heading" aria-hidden="true">Development criteria </span>
                                                                      Documentation
                        </td>
                                                                    <td class="asp-table__cell">
        <span class="asp-table__responsive-heading" aria-hidden="true">Status </span>
                                                                      <span class="status status--yellow">In progress</span>
                        </td>
          </tr>
      </tbody>
</table>

<hr class="asp-hr"><h2>Make a change to the Design System</h2><p>Suggest an edit to this system, or any of the components in it, by submitting a <a href="https://forms.office.com/Pages/ResponsePage.aspx?id=bIFyLR9-wEGpSEeohw_zOlGCZNx8mwNDtJBjimlBuXZUODEzT0NIUlQwTUkyUzRRU0hRR1lMOUtFMSQlQCN0PWcu">Design System change request</a>.</p><hr class="asp-hr">