Task list
Code
Markup
<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="task-list-1-status">
Company Directors
</a>
</div>
<div class="govuk-task-list__status" id="task-list-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="task-list-2-status">
Registered company details
</a>
</div>
<div class="govuk-task-list__status" id="task-list-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="task-list-3-status">
Business plan
</a>
</div>
<div class="govuk-task-list__status" id="task-list-3-status">
<strong class="govuk-tag govuk-tag--blue">
Incomplete
</strong>
</div>
</li>
</ul>Macro
{% from "govuk/components/task-list/macro.njk" import govukTaskList %}
{{ govukTaskList({
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: "Business plan"
},
href: "#",
status: {
tag: {
text: "Incomplete",
classes: "govuk-tag--blue"
}
}
}
]
}) }}Task list example with 3 states
Open this example in a new tab: task list example with 3 states
Code
Markup
<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="task-list-1-status">
Company Directors
</a>
</div>
<div class="govuk-task-list__status" id="task-list-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="task-list-2-status">
Registered company details
</a>
</div>
<div class="govuk-task-list__status" id="task-list-2-status">
<strong class="govuk-tag govuk-tag--light-blue">
Not started
</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="task-list-3-status">
Business plan
</a>
</div>
<div class="govuk-task-list__status" id="task-list-3-status">
<strong class="govuk-tag govuk-tag--blue">
In progress
</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="task-list-4-status">
Documentation
</a>
</div>
<div class="govuk-task-list__status" id="task-list-4-status">
<strong class="govuk-tag govuk-tag--light-blue">
Not started
</strong>
</div>
</li>
</ul>Macro
{% from "govuk/components/task-list/macro.njk" import govukTaskList %}
{{ govukTaskList({
items: [
{
title: {
text: "Company Directors"
},
href: "#",
status: {
text: "Completed"
}
},
{
title: {
text: "Registered company details"
},
href: "#",
status: {
tag: {
text: "Not started",
classes: "govuk-tag--light-blue"
}
}
},
{
title: {
text: "Business plan"
},
href: "#",
status: {
tag: {
text: "In progress",
classes: "govuk-tag--blue"
}
}
},
{
title: {
text: "Documentation"
},
href: "#",
status: {
tag: {
text: "Not started",
classes: "govuk-tag--light-blue"
}
}
}
]
}) }}Task list example with hint text and additional states
Open this example in a new tab: task list example with hint text and additional states
Code
Markup
<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="task-list-1-status">
Company Directors
</a>
</div>
<div class="govuk-task-list__status" id="task-list-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="task-list-2-status">
Registered company details
</a>
</div>
<div class="govuk-task-list__status" id="task-list-2-status">
<strong class="govuk-tag govuk-tag--light-blue">
Not started
</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="task-list-3-hint task-list-3-status">
Business plan
</a>
<div id="task-list-3-hint" class="govuk-task-list__hint">
Ensure the plan covers objectives, strategies, sales, marketing and financial forecasts.
</div>
</div>
<div class="govuk-task-list__status" id="task-list-3-status">
<strong class="govuk-tag govuk-tag--pink">
Review
</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="task-list-4-status">
Documentation
</a>
</div>
<div class="govuk-task-list__status" id="task-list-4-status">
<strong class="govuk-tag govuk-tag--blue">
In progress
</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="task-list-5-status">
Charitable status
</a>
</div>
<div class="govuk-task-list__status" id="task-list-5-status">
<strong class="govuk-tag govuk-tag--red">
Error
</strong>
</div>
</li>
<li class="govuk-task-list__item">
<div class="govuk-task-list__name-and-hint">
<div>
Payment
</div>
<div id="task-list-6-hint" class="govuk-task-list__hint">
It will cost between £15 and £75
</div>
</div>
<div class="govuk-task-list__status govuk-task-list__status--cannot-start-yet" id="task-list-6-status">
Cannot start yet
</div>
</li>
</ul>Macro
{% from "govuk/components/task-list/macro.njk" import govukTaskList %}
{{ govukTaskList({
items: [
{
title: {
text: "Company Directors"
},
href: "#",
status: {
text: "Completed"
}
},
{
title: {
text: "Registered company details"
},
href: "#",
status: {
tag: {
text: "Not started",
classes: "govuk-tag--light-blue"
}
}
},
{
title: {
text: "Business plan"
},
href: "#",
hint: {
text: "Ensure the plan covers objectives, strategies, sales, marketing and financial forecasts."
},
status: {
tag: {
text: "Review",
classes: "govuk-tag--pink"
}
}
},
{
title: {
text: "Documentation"
},
href: "#",
status: {
tag: {
text: "In progress",
classes: "govuk-tag--blue"
}
}
},
{
title: {
text: "Charitable status"
},
href: "#",
status: {
tag: {
text: "Error",
classes: "govuk-tag--red"
}
}
},
{
title: {
text: "Payment"
},
hint: {
text: "It will cost between £15 and £75"
},
status: {
text: "Cannot start yet",
classes: "govuk-task-list__status--cannot-start-yet"
}
}
]
}) }}Task list example with all possible colours
Open this example in a new tab: task list example with all possible colours
Code
Markup
<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="task-list-1-status">
Task A
</a>
</div>
<div class="govuk-task-list__status" id="task-list-1-status">
Text colour
</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="task-list-2-status">
Task B
</a>
</div>
<div class="govuk-task-list__status govuk-task-list__status--cannot-start-yet" id="task-list-2-status">
Secondary text colour
</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="task-list-3-status">
Task C
</a>
</div>
<div class="govuk-task-list__status" id="task-list-3-status">
<strong class="govuk-tag govuk-tag--grey">
Grey
</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="task-list-4-status">
Task D
</a>
</div>
<div class="govuk-task-list__status" id="task-list-4-status">
<strong class="govuk-tag govuk-tag--blue">
Blue
</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="task-list-5-status">
Task E
</a>
</div>
<div class="govuk-task-list__status" id="task-list-5-status">
<strong class="govuk-tag govuk-tag--light-blue">
Light blue
</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="task-list-6-status">
Task F
</a>
</div>
<div class="govuk-task-list__status" id="task-list-6-status">
<strong class="govuk-tag govuk-tag--turquoise">
Turquoise
</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="task-list-7-status">
Task G
</a>
</div>
<div class="govuk-task-list__status" id="task-list-7-status">
<strong class="govuk-tag govuk-tag--green">
Green
</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="task-list-8-status">
Task H
</a>
</div>
<div class="govuk-task-list__status" id="task-list-8-status">
<strong class="govuk-tag govuk-tag--purple">
Purple
</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="task-list-9-status">
Task I
</a>
</div>
<div class="govuk-task-list__status" id="task-list-9-status">
<strong class="govuk-tag govuk-tag--pink">
Pink
</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="task-list-10-status">
Task J
</a>
</div>
<div class="govuk-task-list__status" id="task-list-10-status">
<strong class="govuk-tag govuk-tag--red">
Red
</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="task-list-11-status">
Task K
</a>
</div>
<div class="govuk-task-list__status" id="task-list-11-status">
<strong class="govuk-tag govuk-tag--orange">
Orange
</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="task-list-12-status">
Task L
</a>
</div>
<div class="govuk-task-list__status" id="task-list-12-status">
<strong class="govuk-tag govuk-tag--yellow">
Yellow
</strong>
</div>
</li>
</ul>Macro
{% from "govuk/components/task-list/macro.njk" import govukTaskList %}
{{ govukTaskList({
items: [
{
title: {
text: "Task A"
},
href: "#",
status: {
text: "Text colour"
}
},
{
title: {
text: "Task B"
},
href: "#",
status: {
text: "Secondary text colour",
classes: "govuk-task-list__status--cannot-start-yet"
}
},
{
title: {
text: "Task C"
},
href: "#",
status: {
tag: {
text: "Grey",
classes: "govuk-tag--grey"
}
}
},
{
title: {
text: "Task D"
},
href: "#",
status: {
tag: {
text: "Blue",
classes: "govuk-tag--blue"
}
}
},
{
title: {
text: "Task E"
},
href: "#",
status: {
tag: {
text: "Light blue",
classes: "govuk-tag--light-blue"
}
}
},
{
title: {
text: "Task F"
},
href: "#",
status: {
tag: {
text: "Turquoise",
classes: "govuk-tag--turquoise"
}
}
},
{
title: {
text: "Task G"
},
href: "#",
status: {
tag: {
text: "Green",
classes: "govuk-tag--green"
}
}
},
{
title: {
text: "Task H"
},
href: "#",
status: {
tag: {
text: "Purple",
classes: "govuk-tag--purple"
}
}
},
{
title: {
text: "Task I"
},
href: "#",
status: {
tag: {
text: "Pink",
classes: "govuk-tag--pink"
}
}
},
{
title: {
text: "Task J"
},
href: "#",
status: {
tag: {
text: "Red",
classes: "govuk-tag--red"
}
}
},
{
title: {
text: "Task K"
},
href: "#",
status: {
tag: {
text: "Orange",
classes: "govuk-tag--orange"
}
}
},
{
title: {
text: "Task L"
},
href: "#",
status: {
tag: {
text: "Yellow",
classes: "govuk-tag--yellow"
}
}
}
]
}) }}Task list example with very long single word tags
Open this example in a new tab: task list example with very long single word tags
Code
Markup
<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="task-list-1-status">
Company Directors
</a>
</div>
<div class="govuk-task-list__status" id="task-list-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="task-list-2-status">
Registered company details
</a>
</div>
<div class="govuk-task-list__status" id="task-list-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="task-list-3-status">
A very very very long Business plan
</a>
</div>
<div class="govuk-task-list__status" id="task-list-3-status">
<strong class="govuk-tag govuk-tag--blue">
Thisisaverylongwaytosaythatsomethingisincomplete
</strong>
</div>
</li>
</ul>Macro
{% from "govuk/components/task-list/macro.njk" import govukTaskList %}
{{ govukTaskList({
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: "A very very very long Business plan"
},
href: "#",
status: {
tag: {
text: "Thisisaverylongwaytosaythatsomethingisincomplete",
classes: "govuk-tag--blue"
}
}
}
]
}) }}