Components

• Button
• Cookie banner
• Filter
• Graph
• Highlight
• Notification
• Pagination
• Panel
• Rating
• Search form
• Search results
• Table
• Tabs
• Tag
• Time line

Time line

Open this example in a new tab

HTML

<ul class="das-timeline">
    <li class="das-timeline__item">
        <h2 class="das-timeline__title">
            You started with a new employer
        </h2>
        <p>Your employer changed from Konami to Electronic Arts.</p>
        <p class="das-timeline__date">
            <time datetime="2021-03-15T16:27:00.000Z">
                1 Jun 2021
            </time>
        </p>
    </li>
    <li class="das-timeline__item">
        <h2 class="das-timeline__title">
            Progress shared with new employer
        </h2>
        <p>Your prior learning was confirmed.</p>
        <p class="das-timeline__date">
            <time datetime="2021-01-25T09:35:00.000Z">
                1 Jun 2021
            </time>
        </p>
    </li>
    <li class="das-timeline__item ">
        <h2 class="das-timeline__title">
            You completed your job with Konami
        </h2>
        <p class="das-timeline__date">
            <time datetime="2021-03-15T16:27:00.000Z">
                3 April 2021
            </time>
        </p>
    </li>
    <li class="das-timeline__item">
        <h2 class="das-timeline__title">
            End of employment review
        </h2>
        <p>You attended an end of employment review. During the review the following progress was recorded </p>
        <ul class="govuk-list govuk-list--bullet">
            <li>23 KSBs completed</li>
        </ul>
        <p class="das-timeline__date">
            <time datetime="2021-01-25T09:35:00.000Z">
                3 April 2021
            </time>
        </p>
    </li>
    <li class="das-timeline__item">
        <h2 class="das-timeline__title">
            Initial confirmation
        </h2>
        <p>You confirmed your apprenticeship details.</p>
        <p>No prior learning was recorded.</p>
        <p>You started job with Konami.</p>
        <p class="das-timeline__date">
            <time datetime="2021-01-25T09:35:00.000Z">
                20 Jan 2021
            </time>
        </p>
    </li>
</ul>