candidate

Step by step

Use this component when you want a user to be able to copy content easily.

Open example in new window
HTML 

<div class="govuk-grid-row">
    <div class="govuk-grid-column-two-thirds">

<ol class="dl-sbs">




<li class="dl-sbs__entry">
    <h3 class="govuk-heading-s dl-sbs__entry-heading">Upload CSV</h3>

    <div class="dl-timeline__entry__content"></div>
</li>





<li class="dl-sbs__entry dl-sbs__entry--current">
    <h3 class="govuk-heading-s dl-sbs__entry-heading">View data
      <strong class="govuk-tag govuk-tag--yellow">
        Active
      </strong>
    </h3>

    <div class="dl-timeline__entry__content"></div>
</li>





<li class="dl-sbs__entry">
    <h3 class="govuk-heading-s dl-sbs__entry-heading">Download</h3>

    <div class="dl-timeline__entry__content"></div>
</li>

    </ol>

    </div>
</div>
Jinja 
{%- from "design-system/components/step-by-step/macro.html" import dlStepByStep %}
<div class="govuk-grid-row">
    <div class="govuk-grid-column-two-thirds">
        {{ dlStepByStep({
            "entries": [
                {
                    "heading": "Upload CSV"
                },{
                    "heading": "View data",
                    "current": True
                },{
                    "heading": "Download"
                }
            ]
        }) }}
    </div>
</div>