<div class="card">

    <div class="card-header">
        <div class="card-header__text">
            <div class="card-header__label">
                <?xml version="1.0" encoding="utf-8"?>
                <svg class='card-header__label-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="16px" height="18px" viewBox="0 0 16 18" enable-background="new 0 0 16 18" xml:space="preserve">
					<path fill="none" fill-rule="evenodd" clip-rule="evenodd" d="M2.5 9C2.5 8.17157 3.17157 7.5 4 7.5H12C12.8284 7.5 13.5 8.17157 13.5 9V15C13.5 15.8284 12.8284 16.5 12 16.5H4C3.17157 16.5 2.5 15.8284 2.5 15V9Z" stroke="#737780" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path fill="none" d="M4.5 7.5V5C4.5 3.067 6.067 1.5 8 1.5C9.933 1.5 11.5 3.067 11.5 5V7.5" stroke="#737780" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path fill="none" fill-rule="evenodd" clip-rule="evenodd" d="M8 13.5C8.82843 13.5 9.5 12.8284 9.5 12C9.5 11.1716 8.82843 10.5 8 10.5C7.17157 10.5 6.5 11.1716 6.5 12C6.5 12.8284 7.17157 13.5 8 13.5Z" stroke="#737780" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
					</svg>
                <span class="card-header__label-text">Private</span>
            </div>
            <h3 class="card-header__title">This card has a label</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__body">
        <div class="card__body-inner">Whatever you can do, or dream you can, begin it. Boldness has genius, power and magic in it.</div>
    </div>
    <div class="card__footer">
        <button class="btn btn-secondary btn-small " type="button">
					<span class="btn__inner">
							<span class="btn__text">Get some skills</span>
						
					</span>	
			</button>
    </div>
</div>
<div class="card{{#if centered}} card-centered{{/if}}">
	{{#if preHeader}}
		{{{preHeader}}}
	{{/if}}
	{{> @card-header}}
	<div class="card__body">{{{children}}}</div>
	{{#if footerActions}}
	<div class="card__footer">
		{{#each footerActions}}
			{{> @button}}
		{{/each}}
	</div>
	{{/if}}
</div>
{
  "title": "This card has a label",
  "children": "<div class=\"card__body-inner\">Whatever you can do, or dream you can, begin it. Boldness has genius, power and magic in it.</div>",
  "footerActions": [
    {
      "text": "Get some skills",
      "className": "btn-secondary btn-small"
    }
  ],
  "label": {
    "text": "Private",
    "icon": "<path fill=\"none\" fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M2.5 9C2.5 8.17157 3.17157 7.5 4 7.5H12C12.8284 7.5 13.5 8.17157 13.5 9V15C13.5 15.8284 12.8284 16.5 12 16.5H4C3.17157 16.5 2.5 15.8284 2.5 15V9Z\" stroke=\"#737780\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path fill=\"none\" d=\"M4.5 7.5V5C4.5 3.067 6.067 1.5 8 1.5C9.933 1.5 11.5 3.067 11.5 5V7.5\" stroke=\"#737780\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path fill=\"none\" fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M8 13.5C8.82843 13.5 9.5 12.8284 9.5 12C9.5 11.1716 8.82843 10.5 8 10.5C7.17157 10.5 6.5 11.1716 6.5 12C6.5 12.8284 7.17157 13.5 8 13.5Z\" stroke=\"#737780\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>",
    "iconWidth": "16",
    "iconHeight": "18"
  },
  "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"
      }
    ]
  }
}

Card

Cards bundle together content, and related links and actions.

Guidelines:

  • Every card should solve a problem for the user
  • Cards should communicate their own level of priority
  • Card states must be persistent
  • Cards should be concise and relevant to the user
  • Important actions should be represented as buttons in the card footer
  • Less important actions may be included in the header; a single Simple Button may be used, or a Context Menu if there are many actions