Task list

<ul class="govuk-task-list">
  
  <li class="govuk-task-list__item govuk-task-list__item--with-link">
    <div class="govuk-task-list__name-and-hint">
    
      <a class="govuk-link govuk-task-list__link" href="#" aria-describedby="company-details-1-status">
        Company Directors
      </a>
    
    
    </div>
    <div class="govuk-task-list__status" id="company-details-1-status">
    
      Completed
    
    </div>
  </li>
  
  <li class="govuk-task-list__item govuk-task-list__item--with-link">
    <div class="govuk-task-list__name-and-hint">
    
      <a class="govuk-link govuk-task-list__link" href="#" aria-describedby="company-details-2-status">
        Registered company details
      </a>
    
    
    </div>
    <div class="govuk-task-list__status" id="company-details-2-status">
    
      <strong class="govuk-tag govuk-tag--blue">
        Incomplete
      </strong>
    
    </div>
  </li>
  
  <li class="govuk-task-list__item govuk-task-list__item--with-link">
    <div class="govuk-task-list__name-and-hint">
    
      <a class="govuk-link govuk-task-list__link" href="#" aria-describedby="company-details-3-hint company-details-3-status">
        Financial history
      </a>
    
    
      <div id="company-details-3-hint" class="govuk-task-list__hint">
        Include 5 years of the company’s relevant financial information
      </div>
    
    </div>
    <div class="govuk-task-list__status" id="company-details-3-status">
    
      <strong class="govuk-tag govuk-tag--blue">
        Incomplete
      </strong>
    
    </div>
  </li>
  
  <li class="govuk-task-list__item govuk-task-list__item--with-link">
    <div class="govuk-task-list__name-and-hint">
    
      <a class="govuk-link govuk-task-list__link" href="#" aria-describedby="company-details-4-status">
        Business plan
      </a>
    
    
    </div>
    <div class="govuk-task-list__status" id="company-details-4-status">
    
      <strong class="govuk-tag govuk-tag--blue">
        Incomplete
      </strong>
    
    </div>
  </li>
  
  <li class="govuk-task-list__item govuk-task-list__item--with-link">
    <div class="govuk-task-list__name-and-hint">
    
      <a class="govuk-link govuk-task-list__link" href="#" aria-describedby="company-details-5-status">
        References
      </a>
    
    
    </div>
    <div class="govuk-task-list__status" id="company-details-5-status">
    
      <strong class="govuk-tag govuk-tag--blue">
        Incomplete
      </strong>
    
    </div>
  </li>
  
</ul>

{{ govukTaskList({
  "idPrefix": "company-details",
  "items": [
    {
      "title": {
        "text": "Company Directors"
      },
      "href": "#",
      "status": {
        "text": "Completed"
      }
    },
    {
      "title": {
        "text": "Registered company details"
      },
      "href": "#",
      "status": {
        "tag": {
          "text": "Incomplete",
          "classes": "govuk-tag--blue"
        }
      }
    },
    {
      "title": {
        "text": "Financial history"
      },
      "hint": {
        "text": "Include 5 years of the company’s relevant financial information"
      },
      "href": "#",
      "status": {
        "tag": {
          "text": "Incomplete",
          "classes": "govuk-tag--blue"
        }
      }
    },
    {
      "title": {
        "text": "Business plan"
      },
      "href": "#",
      "status": {
        "tag": {
          "text": "Incomplete",
          "classes": "govuk-tag--blue"
        }
      }
    },
    {
      "title": {
        "text": "References"
      },
      "href": "#",
      "status": {
        "tag": {
          "text": "Incomplete",
          "classes": "govuk-tag--blue"
        }
      }
    }
  ]
}) }}