<svg style="display: none">
  <symbol id="icon-bubble" viewBox="0 0 32 32">
  <title>speech bubble</title>
  <path class="path1" d="M16 2c8.837 0 16 5.82 16 13s-7.163 13-16 13c-0.849 0-1.682-0.054-2.495-0.158-3.437 3.437-7.539 4.053-11.505 4.144v-0.841c2.142-1.049 4-2.961 4-5.145 0-0.305-0.024-0.604-0.068-0.897-3.619-2.383-5.932-6.024-5.932-10.103 0-7.18 7.163-13 16-13z"></path>
</symbol>
</svg>


<ul class="c-tile-list">
  
  <li class="c-tile-list__item">
    <article class="c-article-tile t-sass" itemscope itemtype="http://schema.org/Article">
      <div class="c-article-tile__header">
        <a href="https://www.sitepoint.com/html-css/" class="c-article-tile__category" itemprop="keywords">
           HTML & CSS
        </a>

        <a class="c-article-tile__comment-count" href="https://www.sitepoint.com/a-tale-of-css-and-sass-precision/#comments" itemprop="commentCount">
          8
          <svg class="icon icon-bubble" aria-label="comments"><use xlink:href="#icon-bubble"></use></svg>
        </a>
      </div>

      <div class="c-article-tile__body">
        <h2 class="c-article-tile__title" itemprop="headline">
          <a href="https://www.sitepoint.com/a-tale-of-css-and-sass-precision/">A Tale of CSS and Sass Precision</a>
        </h2>
      </div>

      <footer class="c-article-tile__footer">
        <span class="c-article-tile__author">
          by <a href="https://www.sitepoint.com/author/hgiraudel/" itemprop="author">Hugo Giraudel</a>
        </span>

        <time datetime="2016-05-12T12:00" class="c-article-tile__date" itemprop="datePublished">
          May 12, 2016
        </time>
      </footer>
    </article>
  </li>
  
  <li class="c-tile-list__item">
    <article class="c-article-tile t-svg" itemscope itemtype="http://schema.org/Article">
      <div class="c-article-tile__header">
        <a href="https://www.sitepoint.com/html-css/" class="c-article-tile__category" itemprop="keywords">
           SVG
        </a>

        <a class="c-article-tile__comment-count" href="https://www.sitepoint.com/a-working-svg-workflow-for-accessible-icons/#comments" itemprop="commentCount">
          14
          <svg class="icon icon-bubble" aria-label="comments"><use xlink:href="#icon-bubble"></use></svg>
        </a>
      </div>

      <div class="c-article-tile__body">
        <h2 class="c-article-tile__title" itemprop="headline">
          <a href="https://www.sitepoint.com/a-working-svg-workflow-for-accessible-icons/">A Working SVG Workflow for Accessible Icons</a>
        </h2>
      </div>

      <footer class="c-article-tile__footer">
        <span class="c-article-tile__author">
          by <a href="https://www.sitepoint.com/author/hgiraudel/" itemprop="author">Hugo Giraudel</a>
        </span>

        <time datetime="2016-04-15T12:00" class="c-article-tile__date" itemprop="datePublished">
          April 15, 2016
        </time>
      </footer>
    </article>
  </li>
  
  <li class="c-tile-list__item">
    <article class="c-article-tile t-web" itemscope itemtype="http://schema.org/Article">
      <div class="c-article-tile__header">
        <a href="https://www.sitepoint.com/web/" class="c-article-tile__category" itemprop="keywords">
           Web
        </a>

        <a class="c-article-tile__comment-count" href="https://www.sitepoint.com/the-importance-of-code-reviews/#comments" itemprop="commentCount">
          2
          <svg class="icon icon-bubble" aria-label="comments"><use xlink:href="#icon-bubble"></use></svg>
        </a>
      </div>

      <div class="c-article-tile__body">
        <h2 class="c-article-tile__title" itemprop="headline">
          <a href="https://www.sitepoint.com/the-importance-of-code-reviews/">The Importance of Code Reviews</a>
        </h2>
      </div>

      <footer class="c-article-tile__footer">
        <span class="c-article-tile__author">
          by <a href="https://www.sitepoint.com/author/hgiraudel/" itemprop="author">Hugo Giraudel</a>
        </span>

        <time datetime="2016-06-10T12:00" class="c-article-tile__date" itemprop="datePublished">
          June 10, 2016
        </time>
      </footer>
    </article>
  </li>
</ul>

/* -------------------------------------------------------------------------- *\
 * .c-tile-list
 * -------------------------------------------------------------------------- */

/**
 * 1. Reset default list styles
 * 2. Flexbox used for a grid-like layout for the tiles.
 */
.c-tile-list {
  list-style: none; /* 1 */
  margin: 0; /* 1 */
  padding: 0; /* 1 */
  display: flex; /* 2 */
  flex-wrap: wrap; /* 2 */
}

/**
 * 1. Flexbox used for equal-height tiles on a same line.
 * 2. Make sure a time never looks distorded.
 * 3. Spacing between tiles.
 */
.c-tile-list__item {
  display: flex; /* 1 */
  flex-direction: column; /* 1 */
  flex: 0 0 300px; /* 2 */
  margin: 10px; /* 3 */
}


/* -------------------------------------------------------------------------- *\
 * .c-article-tile
 * -------------------------------------------------------------------------- */

/**
 * 1. Make it possible to bottom align the footer in a tile that has a minimum
 *    height.
 * 2. Make sure the tile spread across the full height of the parent if inside
 *    a flex container.
 */
.c-article-tile {
  display: flex; /* 1 */
  flex-direction: column; /* 1 */
  flex: 1 0 auto; /* 2 */
  border: 1px solid rgba(0, 0, 0, 0.1);
  background-color: rgb(255, 255, 255);
}

.c-article-tile a {
  color: inherit;
  text-decoration: none;
}

.c-article-tile__header,
.c-article-tile__body,
.c-article-tile__footer {
  display: flex;
  padding-left: 20px;
  padding-right: 20px;
}

.c-article-tile__header,
.c-article-tile__footer {
  font-size: 80%;
}

.c-article-tile__header {
  padding-top: 15px;
  padding-bottom: 10px;
  border-bottom: 2px solid;
}

.c-article-tile__category {
  font-weight: bold;
}

/**
 * 1. Right align the comment count container in the header.
 */
.c-article-tile__comment-count {
  margin-left: auto; /* 1 */
}

.c-article-tile__body {
  padding-top: 20px;
  padding-bottom: 20px;
}

.c-article-tile__title {
  margin: 0;
  color: #333;
  font-size: 150%;
}

/**
 * 1. Make the title link inherit the color only when not active / hovered,
 *    effectively making it themed when active / hovered.
 */
.c-article-tile__title:not(:hover):not(:active) > a {
  color: inherit; /* 1 */
}

/**
 * 1. Bottom align the footer in the tile.
 * 2. Prevent any content from the footer from wrapping, effectively forcing it
 *    on a single line at all time.
 */
.c-article-tile__footer {
  padding-top: 10px;
  padding-bottom: 15px;
  margin-top: auto; /* 1 */
  white-space: nowrap; /* 2 */
  color: #949494;
}

/**
 * 1. Prevent the author and the date from overlapping in case they both don’t
 *    fit on the line; add an ellipsis to the author name.
 * 2. Visually no effect when both the author and the date fit; however make
 *    sure they are slightly spaced from each other if they meet on the line.
 */
.c-article-tile__author {
  text-overflow: ellipsis; /* 1 */
  overflow: hidden; /* 1 */
  margin-right: 5px; /* 2 */
}

/**
 * 1. Right align the date container in the footer.
 */
.c-article-tile__date {
  margin-left: auto; /* 1 */
}


/* -------------------------------------------------------------------------- *\
 * [Theming] .c-article-tile
 * -------------------------------------------------------------------------- */

.c-article-tile.t-sass,
.c-article-tile.t-sass a {
  color: #c69;
}

.c-article-tile.t-svg,
.c-article-tile.t-svg a {
  color: #2abc67;
}

.c-article-tile.t-web,
.c-article-tile.t-web a {
  color: #2980b9;
}


/* -------------------------------------------------------------------------- *\
 * Global styles
 * -------------------------------------------------------------------------- */

* {
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
}

body {
  margin: 20px;
  background-color: #EFEFEF;
}

.icon {
  width: 1em;
  height: 1em;
  fill: currentcolor;
  vertical-align: top;
}