No notes defined.
<div class='c-task-list'>
<h1 class='c-heading'>
Task list
</h1>
<ol class='c-task-list__items'>
<li class='c-task-list__items__item c-task-list__items__item--done'>
<span class='u-h4'>Prepare a checklist</span>
<span class='c-task-list__description'>Start by adding a few elements, together with descriptions.</span>
</li>
<li class='c-task-list__items__item c-task-list__items__item--done'>
<span class='u-h4'>Check the first 2 items off</span>
<span class='c-task-list__description'>Because we want more done than not done.</span>
</li>
<li class='c-task-list__items__item c-task-list__items__item--urgent'>
<span class='u-h4'>Urgent task</span>
<span class='c-task-list__description'>Because sometimes we procrastinate.</span>
<span class='c-task-list__items__item__links'>
<a class='c-link ' href="#" itemprop="item" itemid="#"><span itemprop="name">Take action now</span></a> </span>
</li>
<li class='c-task-list__items__item c-task-list__items__item--current'>
<span class='u-h4'>Style the possible statuses</span>
<span class='c-task-list__description'>They are done, current (or future, or unchecked), and blocked.</span>
<span class='c-task-list__items__item__links'>
<a class='c-link c-link--disabled ' href="#" itemprop="item" itemid="#"><span itemprop="name">Finished subtask</span></a> <a class='c-link ' href="#" itemprop="item" itemid="#"><span itemprop="name">To be done</span></a> </span>
</li>
<li class='c-task-list__items__item c-task-list__items__item--blocked'>
<span class='u-h4'>Leave one task blocked</span>
<span class='c-task-list__description'>More exactly, a task that depends on the previous tasks to become available.</span>
</li>
</ol>
</div>
<div class='{{ get_component_class( 'task-list', display ) }}'>
{% if heading %}
{% include '@unit/heading/heading.twig' with heading %}
{% endif %}
<ol class='c-task-list__items'>
{% for item in items %}
<li class='c-task-list__items__item c-task-list__items__item--{{ item.status }}'>
<span class='u-h4'>{{ item.title }}</span>
{% if item.description %}
<span class='c-task-list__description'>{{ item.description }}</span>
{% endif %}
{% if item.links %}
<span class='c-task-list__items__item__links'>
{% for link in item.links %}
{% include get_template( 'link', 'base' ) with link %}
{% endfor %}
</span>
{% endif %}
</li>
{% endfor %}
</ol>
</div>
{
"wrapperClass": [
"container-fluid"
],
"heading": {
"text": "Task list"
},
"items": [
{
"title": "Prepare a checklist",
"description": "Start by adding a few elements, together with descriptions.",
"status": "done"
},
{
"title": "Check the first 2 items off",
"description": "Because we want more done than not done.",
"status": "done"
},
{
"title": "Urgent task",
"description": "Because sometimes we procrastinate.",
"status": "urgent",
"links": [
{
"href": "#",
"text": "Take action now"
}
]
},
{
"title": "Style the possible statuses",
"description": "They are done, current (or future, or unchecked), and blocked.",
"status": "current",
"links": [
{
"display": {
"modifiers": [
"disabled"
]
},
"href": "#",
"text": "Finished subtask"
},
{
"href": "#",
"text": "To be done"
}
]
},
{
"title": "Leave one task blocked",
"description": "More exactly, a task that depends on the previous tasks to become available.",
"status": "blocked"
}
]
}