Heartwood

Card Header 

<div class="card-header">
    <div class="card-header__text">
        <h3 class="card-header__title">Private Note</h3>
    </div>
    <div class="card-header__actions">
        <div class="context-menu context-menu--is-hidden">
            <button class="btn btn-simple context-menu__button  btn-icon-only " type="button">
							<span class="btn__inner">
								<span class="btn__icon-wrapper">
									<?xml version="1.0" encoding="utf-8"?>
									<svg
										class='btn__icon '
										version="1.1"
										id="Layer_1"
										xmlns="http://www.w3.org/2000/svg"
										xmlns:xlink="http://www.w3.org/1999/xlink"
										x="0px"
										y="0px"
										width="24px"
										height="24px"
										viewBox="0 0 24 24"
										enable-background="new 0 0 24 24"
										xml:space="preserve">
									<path fill-rule="evenodd" fill="none" clip-rule="evenodd" d="M3.375 14.648C4.82475 14.648 6 13.4727 6 12.023C6 10.5732 4.82475 9.39799 3.375 9.39799C1.92525 9.39799 0.75 10.5732 0.75 12.023C0.75 13.4727 1.92525 14.648 3.375 14.648Z"  stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path fill-rule="evenodd" fill="none" clip-rule="evenodd" d="M20.625 14.648C22.0747 14.648 23.25 13.4727 23.25 12.023C23.25 10.5732 22.0747 9.39799 20.625 9.39799C19.1753 9.39799 18 10.5732 18 12.023C18 13.4727 19.1753 14.648 20.625 14.648Z"  stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path fill-rule="evenodd" fill="none" clip-rule="evenodd" d="M12 14.648C13.4497 14.648 14.625 13.4727 14.625 12.023C14.625 10.5732 13.4497 9.39799 12 9.39799C10.5503 9.39799 9.375 10.5732 9.375 12.023C9.375 13.4727 10.5503 14.648 12 14.648Z"  stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
									</svg>
								</span>
								
							</span>	
					</button>
            <div class="context-menu__menu">
                <ul class="button-group button-group-floating">
                    <li class="button-group__item">
                        <button class="btn btn-simple btn-full-width " type="button">
										<span class="btn__inner">
												<span class="btn__text">Edit Service</span>
											
										</span>	
								</button>
                    </li>
                    <li class="button-group__item">
                        <button class="btn btn-simple btn-full-width " type="button">
										<span class="btn__inner">
												<span class="btn__text">Hide Service</span>
											
										</span>	
								</button>
                    </li>
                    <li class="button-group__item">
                        <button class="btn btn-simple btn-full-width " type="button">
										<span class="btn__inner">
												<span class="btn__text">Move to Category</span>
											
										</span>	
								</button>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
 
<div class="card-header">
	<div class="card-header__text">
		{{#if label}}
		<div class="card-header__label">
			{{#if label.icon}}
				{{> @icon icon=label.icon class="card-header__label-icon" width=label.iconWidth height=label.iconHeight}}
			{{/if}}
			<span class="card-header__label-text">{{label.text}}</span>
		</div>
		{{/if}}
		{{#if title}}
			<h3 class="card-header__title">{{{title}}}</h3>
		{{/if}}
	</div>
	{{#if headerActions}}
	<div class="card-header__actions">
		{{#each headerActions}}
			{{> @button}}
		{{/each}}
		{{#if contextMenu}}
			{{> @context-menu actions=contextMenu.actions}}
		{{/if}}
	</div>
	{{/if}}
</div>
 
{
  "title": "Private Note",
  "headerActions": true,
  "contextMenu": {
    "actions": [
      {
        "text": "Edit Service",
        "className": "btn-simple btn-full-width"
      },
      {
        "text": "Hide Service",
        "className": "btn-simple btn-full-width"
      },
      {
        "text": "Move to Category",
        "className": "btn-simple btn-full-width"
      }
    ]
  }
}

There are no notes for this item.