Card

Overview

  • inprogress

Useful for displaying a linked excerpt or summary (perhaps in a grid) with :hover animation.

Created for our PWA Stats project.

<article class="Card ">
  <a class="Card-main" href="">
    <h2 class="Card-mainContent">
        Sometimes when you <b>innovate</b>, you make mistakes. It is best to admit them quickly, and get on with improving your other innovations.
    </h2>
  </a>
</article>

To add an additional block of supporting information, use the Card-meta class. You can also style special subdued links with Card-metaLink.

<article class="Card ">
  <a class="Card-main" href="">
    <h2 class="Card-mainContent">
        Sometimes when you <b>innovate</b>, you make mistakes. It is best to admit them quickly, and get on with improving your other innovations.
    </h2>
  </a>
  <footer class="Card-meta">
    <h3 class="u-hiddenVisually">
      Tags
    </h3>
    <div class="Grid Grid--withGutter Grid--alignMiddle u-textShrink1">
      <div class="Grid-cell u-sizeFill">
        <ul class="u-listInline">
          <li>
            <a class="Card-metaLink" href="">
                #veru
              </a>
          </li>
          <li>
            <a class="Card-metaLink" href="">
                #asideb
              </a>
          </li>
          <li>
            <a class="Card-metaLink" href="">
                #dek
              </a>
          </li>
        </ul>
      </div>
      <p class="Grid-cell u-sizeFit">
        <a class="Card-metaLink" href="" title="Permalink">
          <svg viewBox="0 0 24 24" width="24" height="24" class="Icon Icon--large">
  <g fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round">
    <path d="M13.77,10.09l-0.71-.71a4,4,0,0,0-5.65,0L3.16,13.63a4,4,0,0,0,0,5.66l1.4,1.4a4,4,0,0,0,5.67,0l1.41-1.41"/>
    <path d="M10.23,13.62l0.71,0.71a4,4,0,0,0,5.65,0l4.25-4.25a4,4,0,0,0,0-5.66L19.43,3a4,4,0,0,0-5.67,0L12.35,4.43"/>
  </g>
</svg>
        </a>
      </p>
    </div>

  </footer>
</article>

You can pin an image to the top-right corner using the Card-mainObject class. Markup order is important: If adjacent to Card-mainContent, fancy floating behavior will take effect.

<article class="Card ">
  <a class="Card-main" href="">
      <img class="Card-mainObject" alt=""
        src="/apple-touch-icon.png">
    <h2 class="Card-mainContent">
        Sometimes when you <b>innovate</b>, you make mistakes. It is best to admit them quickly, and get on with improving your other innovations.
    </h2>
  </a>
  <footer class="Card-meta">
    <h3 class="u-hiddenVisually">
      Tags
    </h3>
    <div class="Grid Grid--withGutter Grid--alignMiddle u-textShrink1">
      <div class="Grid-cell u-sizeFill">
        <ul class="u-listInline">
          <li>
            <a class="Card-metaLink" href="">
                #udenajru
              </a>
          </li>
          <li>
            <a class="Card-metaLink" href="">
                #ki
              </a>
          </li>
          <li>
            <a class="Card-metaLink" href="">
                #tuom
              </a>
          </li>
        </ul>
      </div>
      <p class="Grid-cell u-sizeFit">
        <a class="Card-metaLink" href="" title="Permalink">
          <svg viewBox="0 0 24 24" width="24" height="24" class="Icon Icon--large">
  <g fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round">
    <path d="M13.77,10.09l-0.71-.71a4,4,0,0,0-5.65,0L3.16,13.63a4,4,0,0,0,0,5.66l1.4,1.4a4,4,0,0,0,5.67,0l1.41-1.41"/>
    <path d="M10.23,13.62l0.71,0.71a4,4,0,0,0,5.65,0l4.25-4.25a4,4,0,0,0,0-5.66L19.43,3a4,4,0,0,0-5.67,0L12.35,4.43"/>
  </g>
</svg>
        </a>
      </p>
    </div>

  </footer>
</article>

Consider hiding the border with u-borderNone when displaying against a dark background.

<article class="Card u-borderNone">
  <a class="Card-main" href="">
    <h2 class="Card-mainContent">
        Sometimes when you <b>innovate</b>, you make mistakes. It is best to admit them quickly, and get on with improving your other innovations.
    </h2>
  </a>
</article>