<div class="timeline">
  <div class="timeline__item">
    <h2 class="timeline__heading">September to October 2020</h2>
    <ul class="list list--bare">
      <li class="list__item ">
        Meet your Community Engagement Manager and set up regular catch up meetings</li>
      <li class="list__item ">
        Local Authority Toolkit available online</li>
    </ul>
  </div>
  <div class="timeline__item">
    <h2 class="timeline__heading">September 2020</h2>
    <p>ONS to provide Councillor Handbook for distribution</p>
  </div>
  <div class="timeline__item">
    <h2 class="timeline__heading">November 2020</h2>
    <p>ONS to provide you with content for magazines and publications</p>
  </div>
  <div class="timeline__item">
    <h2 class="timeline__heading">January to March 2021</h2>
    <p>ONS to provide a range of press releases for external use</p>
  </div>
  <div class="timeline__item">
    <h2 class="timeline__heading">February to April 2021</h2>
    <p>Promote your local Census Support Centres</p>
  </div>
</div>

{% from "components/timeline/_macro.njk" import onsTimeline %}
{{
    onsTimeline({
    "items": [
            {
                "heading": 'September to October 2020',
                "itemsList": [
                    {
                        "text": "Meet your Community Engagement Manager and set up regular catch up meetings"
                    },
                    {
                        "text": "Local Authority Toolkit available online"
                    }
                ]
            },
            {
                "heading": 'September 2020',
                "content": '<p>ONS to provide Councillor Handbook for distribution</p>'
            },
            {
                "heading": 'November 2020',
                "content": '<p>ONS to provide you with content for magazines and publications</p>'
            },
            {
                "heading": 'January to March 2021',
                "content": '<p>ONS to provide a range of press releases for external use</p>'
            },
            {
                "heading": 'February to April 2021',
                "content": '<p>Promote your local Census Support Centres</p>'
            }
        ]
    })
}}

{% macro onsTimeline(params) %}
    {% from "components/lists/_macro.njk" import onsList %}
    <div class="timeline{{ ' ' + params.classes if params.classes else '' }}">
        {% for item in params.items %}
        <div class="timeline__item">
            <h2 class="timeline__heading">{{ item.heading }}</h2>
            {% if item.itemsList is defined and item.itemsList %}
                {{
                    onsList({
                        "classes": 'list--bare',
                        "itemsList": item.itemsList
                    })
                }}
            {% else %}
                {{ item.content | safe }}
            {% endif %}
        </div>
        {% endfor %}
    </div>
{% endmacro %}

.timeline {
  padding-left: 1.5rem;
  position: relative;
  &::before {
    border-left: 4px solid $color-black;
    content: '';
    height: 100%;
    left: 0;
    position: absolute;
    top: 10px;
  }
}
.timeline__item {
  margin-bottom: 1.5rem;
  position: relative;
  &::before {
    background-color: $color-black;
    content: '';
    height: 4px;
    left: -1.5rem;
    position: absolute;
    top: 10px;
    width: 12px;
  }
  :last-child {
    margin-bottom: 0;
  }
}
.timeline__heading {
  font-size: 1rem !important;
  margin-bottom: 0.5rem;
}