Heartwood

List Header: With Actions 

<div class="list-header">
    <div class="list-header__text">
        <h3 class="list-header__title">Categories</h3>
    </div>
    <ul class="list-header__actions">
        <li class="list-header__action-wrapper">
            <button class="btn btn-simple btn-small list-header__action-secondary " type="button">
						<span class="btn__inner">
								<span class="btn__text">Cancel</span>
							
						</span>	
				</button>
        </li>
        <li class="list-header__action-wrapper">
            <button class="btn btn-simple btn-small " type="button">
						<span class="btn__inner">
								<span class="btn__text">Done</span>
							
						</span>	
				</button>
        </li>
    </ul>
</div>
 
<div class="list-header{{#if isSmall}} list-header-small{{/if}}">
	<div class="list-header__text">
		<h3 class="list-header__title">{{listHeaderTitle}}</h3>
		{{#if listHeaderSubtitle}}
		<p class="list-header__subtitle">{{listHeaderSubtitle}}</p>
		{{/if}}
	</div>
	{{#if actions}}
	<ul class="list-header__actions">
		{{#each actions}}
			<li class="list-header__action-wrapper">
				{{> @button text=text className=class }}
			</li>
		{{/each}}
	</ul>
	{{/if}}
</div>
 
{
  "listHeaderTitle": "Categories",
  "actions": [
    {
      "text": "Cancel",
      "class": "btn-simple btn-small list-header__action-secondary"
    },
    {
      "text": "Done",
      "class": "btn-simple btn-small"
    }
  ]
}

There are no notes for this item.