carbon-components/html/card/card--with-status.html

Carbon Components is a component library for IBM Cloud

<article class="bx--card" tabindex="0" aria-labelledby="card-title-1">
  <div class="bx--card__card-overview">
    <!-- OverflowMenu -->
    <div data-overflow-menu class="bx--overflow-menu" tabindex="0" aria-label="List of options">
      <svg class="bx--overflow-menu__icon" width="4" height="20" viewBox="0 0 4 20" fill-rule="evenodd">
        <title>list of options</title>
        <circle cx="2" cy="2" r="2"></circle>
        <circle cx="2" cy="10" r="2"></circle>
        <circle cx="2" cy="18" r="2"></circle>
      </svg>
      <ul class="bx--overflow-menu-options">
        <li class="bx--overflow-menu-options__option">
          <button type="button" class="bx--overflow-menu-options__btn">Stop App</button>
        </li>
        <li class="bx--overflow-menu-options__option">
          <button type="button" class="bx--overflow-menu-options__btn">Restart App</button>
        </li>
        <li class="bx--overflow-menu-options__option">
          <button type="button" class="bx--overflow-menu-options__btn">Restart App</button>
        </li>
        <li class="bx--overflow-menu-options__option">
          <button type="button" class="bx--overflow-menu-options__btn">Edit Routes and Access</button>
        </li>
        <li class="bx--overflow-menu-options__option bx--overflow-menu--divider">
          <button type="button" class="bx--overflow-menu-options__btn">Delete App</button>
        </li>
      </ul>
    </div>
    <div class="bx--card-overview__about">
      <figure class="bx--about__icon">
        <img src="/globals/assets/images/placeholder-icon-32x32.svg" alt="" class="bx--about__icon--img" />
      </figure>
      <header class="bx--about__title">
        <p id="card-title-1" class="bx--about__title--name bx--type-gamma">Card Name</p>
        <a href="" class="bx--link bx--about__title--link">Secondary Information</a>
      </header>
    </div>
  </div>
  <div class="bx--card-footer">
    <div class="bx--card-footer__app-status">
      <div class="bx--card-footer__app-status--running active">
        <div class="bx--running__text">Running</div>
      </div>
      <div class="bx--card-footer__app-status--not-running">
        <div class="bx--not-running__text">Not Running</div>
      </div>
      <div class="bx--card-footer__app-status--stopped">
        <div class="bx--stopped__text">Stopped</div>
      </div>
    </div>
    <div class="bx--card-footer__app-actions">
      <button class="bx--app-actions__button" id="restart-app" aria-label="restart-app">
        <svg class="bx--app-actions__button--icon" width="12" height="16" viewBox="0 0 12 16" fill-rule="evenodd">
          <path d="M6 8l1.3 1.3 1.9-1.9L10.6 6 12 4.7 7.3 0 6 1.2l2.6 2.4H6.1h-.2c-1.7 0-3.3.8-4.4 2C.5 6.7 0 8.1 0 9.6c0 3.3 2.7 6 6 6 1.6 0 3-.6 4-1.6l-1.4-1.4c-.7.6-1.6 1-2.6 1-2.2 0-4-1.8-4-4s1.8-4 4-4H8.8l-.6.6L6 8z"></path>
        </svg>
      </button>
      <button class="bx--app-actions__button" id="load-app" aria-label="load-app">
        <svg class="bx--app-actions__button--icon" width="16" height="16" viewBox="-3 5 16 16" fill-rule="evenodd">
          <path d="M7.5 12l3.6-3.6V11H13V5H7.1v2h2.5l-3.5 3.5z"></path>
          <path d="M11 19H-1V9h5V5h-7v16h16v-7h-2z"></path>
        </svg>
      </button>
    </div>
  </div>
</article>