Patterns: Meta

Meta blocks are used to show information about a thing: dates, tags, next/previous navigation, etc. It could be used for an <aside> block or just a <div>.

Standard

Containing one item:

<div class="meta">
  <ul class="meta__inner">
    <li>
      A single item
    </li>
  </ul>
</div>

Or several items:

<div class="meta">
  <ul class="meta__inner">
    <li>
      09:49 on 2 Oct 2017
    </li>
    <li>
      Another <a href="#">thing</a> here
    </li>
    <li>
      And one more
    </li>
  </ul>
</div>

Aligned right

<article>

  <aside class="meta meta--right">
    <ul class="meta__inner">
    <li>
      09:49 on 2 Oct 2017
    </li>
    <li>
      Another longer <a href="#">thing</a> here
    </li>
    <li>
      And one more
    </li>
    </ul>
  </aside>

  <p>The meta box can be aligned right and it will take up a maximum of 50% of the horizontal width, at wide browser widths. <strong>Note:</strong> The container must have clearfix applied or else things below might collapse upwards, which wouldn't be much fun. I'll just write another fairly long sentence so we can see this text wrapping around the box in a pleasing fashion.</p>

</article>

Inline

<div class="meta meta--inline">
  <ul class="meta__inner">
    <li>
      09:49 on 2 Oct 2017
    </li>
    <li>
      Another <a href="#">thing</a> here
    </li>
    <li>
      And one more
    </li>
  </ul>
</div>