salesforce-slds-card

slds-card

<article class="slds-card">
  <div class="slds-card__header slds-grid">
    <header class="slds-media slds-media_center slds-has-flexi-truncate">
      <div class="slds-media__figure">
        <span class="slds-icon_container slds-icon-standard-account" title="account">
          <svg class="slds-icon slds-icon_small" aria-hidden="true">
            <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#account"></use>
          </svg>
          <span class="slds-assistive-text">Card Header</span>
        </span>
      </div>
      <div class="slds-media__body">
        <h2 class="slds-card__header-title">
          <a href="#" class="slds-card__header-link slds-truncate" title="Accounts">
            <span>Accounts</span>
          </a>
        </h2>
      </div>
      <div class="slds-no-flex">
        <button class="slds-button slds-button_neutral">New</button>
      </div>
    </header>
  </div>
  <div class="slds-card__body slds-card__body_inner">Your card body is here</div>
  <footer class="slds-card__footer">
    <a class="slds-card__footer-action" href="#">Card Footer <span class="slds-assistive-text">Accounts</span></a>
  </footer>
</article>