DAHLIA Pattern Library

Status Update 

<div class="status-update ">
    <h3 class="status-update_title">Update Status</h3>
    <div class="status-update_action">
        <button class="button dropdown-button has-icon--right text-align-left small is-processing" href="#" aria-expanded="false">
      <span class="ui-icon ui-small" aria-hidden="true">
        <svg>
          <use xlink:href="#i-arrow-down"></use>
        </svg>
      </span>
      Processing
    </button>
        <ul class="dropdown-menu" role="listbox" aria-hidden="true" aria-activedescendant tabindex="-1" style="display: none;">
            <li class="dropdown-menu_item" role="option" aria-selected="false"><a href="#">This is a link</a></li>
            <li class="dropdown-menu_item" role="option" aria-selected="false"><a href="#">This is another</a></li>
            <li class="dropdown-menu_item is-selected" role="option" aria-selected="true"><a href="#">Yet another</a></li>
        </ul>
    </div>
    <div class="status-update_message">
        <div class="status-update_comment">
            <p class="status-update_note">Some comment</p>
            <span class="status-update_date">03/12/18 </span>
        </div>
        <div class="status-update_footer">
            <button class="button tiny tertiary" type="button" data-event="">Add a comment</button>
            <a href="#" class="t-small right">See Status History</a>
        </div>
    </div>
</div>
 
<div class="status-update {{default classes ''}}">
  <h3 class="status-update_title">Update Status</h3>
  <div class="status-update_action">
    {{> @button-dropdown classes="is-processing" text="Processing"}}
  </div>
  <div class="status-update_message">
    <div class="status-update_comment">
      <p class="status-update_note">{{default note 'Some comment'}}</p>
      <span class="status-update_date">{{default date '03/12/18'}} </span>
    </div>
    <div class="status-update_footer">
      {{> @button classes="tiny tertiary" text="Add a comment" }}
      <a href="#" class="t-small right">See Status History</a>
    </div>
  </div>
</div>
 
/* No context defined for this component. */

There are no notes for this item.