Heartwood

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

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