Designsystem

Keydata list: Horizontal 

<ul class="keydataList keydataList--horizontal">
    <li class="keydataList-item">
        <div class="keydata keydataList-item-step">2005</div>
        <div class="keydataList-item-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
        </div>
    </li>
    <li class="keydataList-item">
        <div class="keydata keydataList-item-step">2011</div>
        <div class="keydataList-item-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
        </div>
    </li>
    <li class="keydataList-item">
        <div class="keydata keydataList-item-step">2016</div>
        <div class="keydataList-item-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
        </div>
    </li>
    <li class="keydataList-item">
        <div class="keydata keydataList-item-step">2017</div>
        <div class="keydataList-item-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
        </div>
    </li>
    <li class="keydataList-item">
        <div class="keydata keydataList-item-step">2019</div>
        <div class="keydataList-item-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
        </div>
    </li>
</ul>
 
<ul class="keydataList keydataList--horizontal">
        {{#each datas}}
        <li class="keydataList-item">
                <div class="keydata keydataList-item-step">{{year}}</div>
                <div class="keydataList-item-content">
                        <p>{{text}}</p>
                </div>
        </li>
        {{/each}}
</ul>
 
{
  "datas": [
    {
      "year": "2005",
      "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit"
    },
    {
      "year": "2011",
      "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit"
    },
    {
      "year": "2016",
      "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit"
    },
    {
      "year": "2017",
      "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit"
    },
    {
      "year": "2019",
      "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit"
    }
  ]
}

There are no notes for this item.