Card

<!-- Default -->
<div class="card">

    <div class="card-header">
        <div class="card-header__text">
            <h3 class="card-header__title">Get the most out of Sprucebot</h3>
        </div>
    </div>
    <div class="card__body">
        <div class="card__body-inner">Two roads diverged in a wood, and I took the one less traveled by, And that has made all the difference.</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>

<!-- Actions -->
<div class="card">

    <div class="card-header">
        <div class="card-header__text">
            <h3 class="card-header__title">Add your teammates</h3>
        </div>
        <div class="card-header__actions">
            <button class="btn btn-simple btn-small " type="button">
						<span class="btn__inner">
								<span class="btn__text">Go to team</span>
							
						</span>	
				</button>
        </div>
    </div>
    <div class="card__body">
        <div class="card__body-inner">
            <p>Whatever you can do, or dream you can, begin it. Boldness has genius, power and magic in it.</p>
        </div>
    </div>
    <div class="card__footer">
        <button class="btn btn-primary btn-small " type="button">
					<span class="btn__inner">
							<span class="btn__text">Add teammates</span>
						
					</span>	
			</button>
    </div>
</div>

<!-- Labelled -->
<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>

<!-- Label Only -->
<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>
        </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">Unapologetic travel nerd. Professional entrepreneur. Explorer. Bacon buff. Proud communicator. Introvert. Avid writer.</div>
    </div>
</div>

<!-- Context Only -->
<div class="card">

    <div class="card-header">
        <div class="card-header__text">
        </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">Unapologetic travel nerd. Professional entrepreneur. Explorer. Bacon buff. Proud communicator. Introvert. Avid writer.</div>
    </div>
</div>

<!-- Actions 02 -->
<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>

<!-- Centered -->
<div class="card card-centered">

    <div class="card-header">
        <div class="card-header__text">
        </div>
    </div>
    <div class="card__body">
        <div class="avatar-wrapper avatar-wrapper-large">
            <div class="avatar__image-wrapper"><img class="avatar" src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=5d43ec18ec2cf6ff854513b9e8395c1e&auto=format&fit=crop&w=192&h=192&q=80" alt="avatar" width="96" height="96" /></div>
        </div>
        <h3 class="card-header__title l-mb-xsmall">Say "Happy Birthday"</h3>
        <p>It’s Rosamond Mueller’s birthday today. Don’t forget to say happy birthday!</p>
    </div>
    <div class="card__footer">
        <button class="btn btn-secondary btn-small " type="button">
					<span class="btn__inner">
							<span class="btn__text">Send a birthday message</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>
/* Default */
{
  "title": "Get the most out of Sprucebot",
  "children": "<div class=\"card__body-inner\">Two roads diverged in a wood, and I took the one less traveled by, And that has made all the difference.</div>",
  "footerActions": [
    {
      "text": "Get some skills",
      "className": "btn-secondary btn-small"
    }
  ]
}

/* Actions */
{
  "title": "Add your teammates",
  "children": "<div class=\"card__body-inner\"><p>Whatever you can do, or dream you can, begin it. Boldness has genius, power and magic in it.</p></div>",
  "footerActions": [
    {
      "text": "Add teammates",
      "className": "btn-primary btn-small"
    }
  ],
  "headerActions": [
    {
      "text": "Go to team",
      "className": "btn-simple btn-small"
    }
  ]
}

/* Labelled */
{
  "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"
      }
    ]
  }
}

/* Label Only */
{
  "title": null,
  "children": "<div class=\"card__body-inner\">Unapologetic travel nerd. Professional entrepreneur. Explorer. Bacon buff. Proud communicator. Introvert. Avid writer.</div>",
  "footerActions": null,
  "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"
      }
    ]
  }
}

/* Context Only */
{
  "title": null,
  "children": "<div class=\"card__body-inner\">Unapologetic travel nerd. Professional entrepreneur. Explorer. Bacon buff. Proud communicator. Introvert. Avid writer.</div>",
  "footerActions": null,
  "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"
      }
    ]
  }
}

/* Actions 02 */
{
  "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"
      }
    ]
  }
}

/* Centered */
{
  "title": null,
  "children": "<div class=\"avatar-wrapper avatar-wrapper-large\"><div class=\"avatar__image-wrapper\"><img class=\"avatar\" src=\"https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=5d43ec18ec2cf6ff854513b9e8395c1e&auto=format&fit=crop&w=192&h=192&q=80\" alt=\"avatar\" width=\"96\" height=\"96\" /></div></div><h3 class=\"card-header__title l-mb-xsmall\">Say \"Happy Birthday\"</h3><p>It’s Rosamond Mueller’s birthday today. Don’t forget to say happy birthday!</p>",
  "footerActions": [
    {
      "text": "Send a birthday message",
      "className": "btn-secondary btn-small"
    }
  ],
  "centered": true
}

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