DAHLIA Pattern Library

Status List 

<div class="status-list">
    <ul>
        <li class="status-list_item">
            <div class="status-list_tag is-default">No Status</div>
            <div class="status-list_comment">
                <p class="status-list_note">The first time I met this person</p>
                <span class="status-list_date">01/01/18</span>
            </div>
        </li>
        <li class="status-list_item">
            <div class="status-list_tag is-processing">Processing</div>
            <div class="status-list_comment">
                <p class="status-list_note">The next time I met this person</p>
                <span class="status-list_date">02/02/18</span>
            </div>
        </li>
        <li class="status-list_item">
            <div class="status-list_tag is-approved">Approved</div>
            <div class="status-list_comment">
                <p class="status-list_note">The last time I met this person</p>
                <span class="status-list_date">03/03/18</span>
            </div>
        </li>
    </ul>
    <div class="status-list_footer">
        <button class="button tertiary tiny margin-bottom-none" type="button" data-event="">Add a comment</button>
    </div>
</div>
 
<div class="status-list">
  <ul>
    {{#each items}}
    <li class="status-list_item">
      <div class="status-list_tag is-{{status-class}}">{{status}}</div>
      <div class="status-list_comment">
        <p class="status-list_note">{{comment}}</p>
        <span class="status-list_date">{{date}}</span>
      </div>
    </li>
    {{else}}
      {{#each history}}
        <li class="status-list_item">
          <div class="status-list_tag is-{{status-class}}">{{status}}</div>
          <div class="status-list_comment">
            <p class="status-list_note">{{comment}}</p>
            <span class="status-list_date">{{date}}</span>
          </div>
        </li>
      {{/each}}
    {{/each}}
  </ul>
  <div class="status-list_footer">
    {{> @button text="Add a comment" classes="tertiary tiny margin-bottom-none"}}
  </div>
</div>
 
{
  "history": [
    {
      "status": "No Status",
      "comment": "The first time I met this person",
      "date": "01/01/18",
      "status-class": "default"
    },
    {
      "status": "Processing",
      "comment": "The next time I met this person",
      "date": "02/02/18",
      "status-class": "processing"
    },
    {
      "status": "Approved",
      "comment": "The last time I met this person",
      "date": "03/03/18",
      "status-class": "approved"
    }
  ]
}

There are no notes for this item.