carbon-components/src/components/card/card.html

Carbon Components is a component library for IBM Cloud

<article class="bx--card" tabindex="0" aria-labelledby="card-title-2">
  <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>
    <section 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-2" class="bx--about__title--name bx--type-gamma" title="Card Name">Card Name</p>
        <p class="bx--about__title--additional-info bx--type-delta">Secondary Information</p>
      </header>
  </div>
  </section>
  <footer class="bx--card-footer">
    <button class="bx--btn bx--btn--primary bx--btn--sm" type="button">View credentials</button>
    <a href="" class="bx--card-footer__link">Docs</a>
  </footer>
</article>