<div class="card">

    <div class="card-header">
        <div class="card-header__text">
            <h3 class="card-header__title">If you could time travel, what would you do?</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">Twenty years from now you will be more disappointed by the things that you didn’t do than by the ones you did do, so throw off the bowlines, sail away from safe harbor, catch the trade winds in your sails. Explore, Dream, Discover.</div>
    </div>
    <div class="card__footer">
        <button class="btn btn-secondary btn-small " type="button">
					<span class="btn__inner">
							<span class="btn__text">Catch fireflies at night</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": "If you could time travel, what would you do?",
  "children": "<div class=\"card__body-inner\">Twenty years from now you will be more disappointed by the things that you didn’t do than by the ones you did do, so throw off the bowlines, sail away from safe harbor, catch the trade winds in your sails. Explore, Dream, Discover.</div>",
  "footerActions": [
    {
      "text": "Catch fireflies at night",
      "className": "btn-secondary btn-small"
    }
  ],
  "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