Heartwood

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>
 
<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": "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"
    }
  ]
}

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