Patterns: Media

Used for listing lots of types of things.

Posts, bookmarks, etc

With a header and body.

A title is here

Some text in the body of the media item is here and might go on for a while, something along these lines.
This is another media item but this time it has a longer title like this

Some more text goes here.

<ol class="media-list">
  <li class="media">
    <div class="media__body">
      <h2 class="media__header">
        <a href="#">A title is here</a>
      </h2>
      <p>Some text in the body of the media item is here and might go on for a while, something along these lines.</p>
    </div>
  </li>

  <li class="media">
    <div class="media__body">
      <h2 class="media__header">
        <a href="#">This is another media item but this time it has a longer title like this</a>
      </h2>
      <p>Some more text goes here.</p>
    </div>
  </li>
</ol>

Open style

The same as before but with the .media-list--open class. Shown with heading and nav, as used on the home page.

Title

A title is here

Some text in the body of the media item is here and might go on for a while, something along these lines.
This is another media item but this time it has a longer title like this

Some more text goes here.

<h2 class="bordered">Title</h2>

<ol class="media-list media-list--open">
  <li class="media">
    <div class="media__body">
      <h2 class="media__header">
        <a href="#">A title is here</a>
      </h2>
      <p>Some text in the body of the media item is here and might go on for a while, something along these lines.</p>
    </div>
  </li>

  <li class="media">
    <div class="media__body">
      <h2 class="media__header">
        <a href="#">This is another media item but this time it has a longer title like this</a>
      </h2>
      <p>Some more text goes here.</p>
    </div>
  </li>
</ol>

<nav>
  <ul class="nav nav--right">
    <li class="nav__item">
      <a class="nav__link" href="#">See more</a>
    </li>
  </ul>
</nav>

With meta blocks

They can have meta blocks:

Glitz

by Elmore Leonard
- Started on 8 May 2018
London Review of Books, Vol. 40. No. 9, 10 May 2018
- Started on 8 May 2018

<ol class="media-list">
  <li class="media">
    <div class="media__body">
      <h2 class="media__header">
        <a href="/phil/reading/publications/97mvo/"><cite>Glitz</cite></a>
      </h2>
      <p>by <a href="/phil/creators/94yre/">Elmore Leonard</a></p>
      <div class="meta">
        <ul class="meta__inner">
          <li>Started on <time datetime="2018-05-08">8 May 2018</time></li>
        </ul>
      </div>
    </div>
  </li>
  <li class="media">
    <div class="media__body">
      <h2 class="media__header">
        <a href="/phil/reading/publications/8gm63/">
          <cite>London Review of Books</cite>,
          Vol. 40. No. 9, 10 May 2018
        </a>
      </h2>
      <div class="meta">
        <ul class="meta__inner">
          <li>Started on <time datetime="2018-05-08">8 May 2018</time></li>
        </ul>
      </div>
    </div>
  </li>
</ol>

Comments

With a byline instead of a header. (Note the use of .section-anchor.)

Bob Ferris at 14:27 on 27 Nov 2017 #

This comment’s byline has an optional icon and an optional link.
Terry Collier at 16:38 on 27 Nov 2017 #

This is my comment, which looks like this.

It could have two paragraphs of course, and the second might go on for a bit longer, you see?

<ol class="media-list">
  <li class="media" id="c1">
    <div class="media__body">
      <div class="media__byline">
        <span class="media__byline__author">
          <img class="media__byline__author__icon" src="/static/hines/img/site_icon.jpg" width="48" height="48" alt="">
          <a href="#">Bob Ferris</a>
        </span> at 14:27 on 27 Nov 2017
        &nbsp;
        <a class="section-anchor" href="#c1" title="Link to this comment">#</a>
      </div>
      <p>This comment’s byline has an optional icon and an optional link.</p>
    </div>
  </li>

  <li class="media" id="c2">
    <div class="media__body">
      <div class="media__byline">
        <span class="media__byline__author">
          Terry Collier
        </span> at 16:38 on 27 Nov 2017
        &nbsp;
        <a class="section-anchor" href="#c2" title="Link to this comment">#</a>
      </div>
      <p>This is my comment, which looks like this.</p>
      <p>It could have two paragraphs of course, and the second might go on for a bit longer, you see?</p>
    </div>
  </li>
</ol>

Tweets

With an avatar.

Bob Ferris @bobferris • 14:27 on 27 Nov 2017 • In reply to…

This is my tweet, which looks like this and goes on for a while so we can see it stretch onto two lines.
Terry Collier @TerryCollier • 16:38 on 27 Nov 2017

This is my tweet, which looks like this and goes on for a while so we can see it stretch onto two lines.

<ol class="media-list">
  <li class="media">
    <img class="media__img" src="/static/hines/img/site_icon.jpg" width="48" height="48" alt="Bob's icon">
    <div class="media__body">
      <div class="media__byline">
        <span class="media__byline__author">
          <a href="#">Bob Ferris</a>
        </span>
        @bobferris
        • <a href="#">14:27</a> on 27 Nov 2017
        • <a href="#">In reply to…</a>
      </div>
      <p>This is my tweet, which looks like this and goes on for a while so we can see it stretch onto two lines.</p>
    </div>
  </li>

  <li class="media">
    <img class="media__img" src="/static/hines/img/site_icon.jpg" width="48" height="48" alt="Terry's icon">
    <div class="media__body">
      <div class="media__byline">
        <span class="media__byline__author">
          Terry Collier
        </span>
        @TerryCollier
        • <A href="#">16:38</a> on 27 Nov 2017
      </div>
      <p>This is my tweet, which looks like this and goes on for a while so we can see it stretch onto two lines.</p>
    </div>
  </li>
</ol>

Nested Tweets

Bob Ferris @bobferris • 14:27 on 27 Nov 2017 • In reply to…

This is my tweet, which looks like this and goes on for a while so we can see it stretch onto two lines.
1. Terry Collier @TerryCollier • 16:38 on 27 Nov 2017
  
  This is my tweet, which looks like this and goes on for a while so we can see it stretch onto two lines.

<ol class="media-list">
  <li class="media">
    <img class="media__img" src="/static/hines/img/site_icon.jpg" width="48" height="48" alt="Bob's icon">
    <div class="media__body">
      <div class="media__byline">
        <span class="media__byline__author">
          <a href="#">Bob Ferris</a>
        </span>
        @bobferris
        • <a href="#">14:27</a> on 27 Nov 2017
        • <a href="#">In reply to…</a>
      </div>
      <p>This is my tweet, which looks like this and goes on for a while so we can see it stretch onto two lines.</p>
      <ol class="media-list">
        <li class="media">
          <img class="media__img" src="/static/hines/img/site_icon.jpg" width="48" height="48" alt="Terry's icon">
          <div class="media__body">
            <div class="media__byline">
              <span class="media__byline__author">
                Terry Collier
              </span>
              @TerryCollier
              • <A href="#">16:38</a> on 27 Nov 2017
            </div>
            <p>This is my tweet, which looks like this and goes on for a while so we can see it stretch onto two lines.</p>
          </div>
        </li>
      </ol>
    </div>
  </li>
</ol>

Tweets with images

Bob Ferris @bobferris • 14:27 on 27 Nov 2017 • In reply to…

If a tweet has one or two images then they can be shown in two columns.
Terry Collier @TerryCollier • 16:38 on 27 Nov 2017

If a tweet has three images then we can show them in three columns.
Terry Collier @TerryCollier • 16:38 on 27 Nov 2017

If a tweet has four images then we can show them in four columns like this.
Terry Collier @TerryCollier • 16:38 on 27 Nov 2017

And videos appear like this.

<ol class="media-list">
  <li class="media">
    <img class="media__img" src="/static/hines/img/site_icon.jpg" width="48" height="48" alt="Bob's icon">
    <div class="media__body">
      <div class="media__byline">
        <span class="media__byline__author">
          <a href="#">Bob Ferris</a>
        </span>
        @bobferris
        • <a href="#">14:27</a> on 27 Nov 2017
        • <a href="#">In reply to…</a>
      </div>
      <p>If a tweet has one or two images then they can be shown in two columns.</p>

      <ul class="gallery">
        <li class="gallery__item">
          <div class="gallery__item__img">
            <a href="#" title="See this tweet on Twitter"><img src="https://c1.staticflickr.com/5/4541/24646717028_9844df8076_z.jpg" width="559" height="640" alt=""></a>
          </div>
        </li>
        <li class="gallery__item">
          <div class="gallery__item__img">
            <a href="#" title="See this tweet on Twitter"><img src="https://c1.staticflickr.com/5/4583/38812704271_65fd249f7b_z.jpg" width="640" height="480" alt=""></a>
          </div>
        </li>
      </ul>
    </div>
  </li>
  <li class="media">
    <img class="media__img" src="/static/hines/img/site_icon.jpg" width="48" height="48" alt="Terry's icon">
    <div class="media__body">
      <div class="media__byline">
        <span class="media__byline__author">
          Terry Collier
        </span>
        @TerryCollier
        • <A href="#">16:38</a> on 27 Nov 2017
      </div>
      <p>If a tweet has three images then we can show them in three columns.</p>

      <ul class="gallery gallery--3">
        <li class="gallery__item">
          <div class="gallery__item__img">
            <a href="#" title="See this tweet on Twitter"><img src="https://c1.staticflickr.com/5/4541/24646717028_9844df8076_z.jpg" width="559" height="640" alt=""></a>
          </div>
        </li>
        <li class="gallery__item">
          <div class="gallery__item__img">
            <a href="#" title="See this tweet on Twitter"><img src="https://c1.staticflickr.com/5/4583/38812704271_65fd249f7b_z.jpg" width="640" height="480" alt=""></a>
          </div>
        </li>
        <li class="gallery__item">
          <div class="gallery__item__img">
            <a href="#" title="See this tweet on Twitter"><img src="https://c1.staticflickr.com/5/4586/38487289062_80e71b9ca1_z.jpg" width="640" height="480" alt=""></a>
          </div>
        </li>
      </ul>
    </div>
  </li>

  <li class="media">
    <img class="media__img" src="/static/hines/img/site_icon.jpg" width="48" height="48" alt="Terry's icon">
    <div class="media__body">
      <div class="media__byline">
        <span class="media__byline__author">
          Terry Collier
        </span>
        @TerryCollier
        • <A href="#">16:38</a> on 27 Nov 2017
      </div>
      <p>If a tweet has four images then we can show them in four columns like this.</p>

      <ul class="gallery gallery--4">
        <li class="gallery__item">
          <div class="gallery__item__img">
            <a href="#" title="See this tweet on Twitter"><img src="https://c1.staticflickr.com/5/4541/24646717028_9844df8076_z.jpg" width="559" height="640" alt=""></a>
          </div>
        </li>
        <li class="gallery__item">
          <div class="gallery__item__img">
            <a href="#" title="See this tweet on Twitter"><img src="https://c1.staticflickr.com/5/4583/38812704271_65fd249f7b_z.jpg" width="640" height="480" alt=""></a>
          </div>
        </li>
        <li class="gallery__item">
          <div class="gallery__item__img">
            <a href="#" title="See this tweet on Twitter"><img src="https://c1.staticflickr.com/5/4586/38487289062_80e71b9ca1_z.jpg" width="640" height="480" alt=""></a>
          </div>
        </li>
        <li class="gallery__item">
          <div class="gallery__item__img">
            <a href="#" title="See this tweet on Twitter"><img src="https://c1.staticflickr.com/5/4564/38482484111_3d7ae6e309_z.jpg" width="640" height="480" alt=""></a>
          </div>
        </li>
      </ul>
    </div>
  </li>

  <li class="media">
    <img class="media__img" src="/static/hines/img/site_icon.jpg" width="48" height="48" alt="Terry's icon">
    <div class="media__body">
      <div class="media__byline">
        <span class="media__byline__author">
          Terry Collier
        </span>
        @TerryCollier
        • <A href="#">16:38</a> on 27 Nov 2017
      </div>
      <p>And videos appear like this.</p>

      <video class="video-fluid" width="340" height="272" poster="https://pbs.twimg.com/ext_tw_video_thumb/905536422869917702/pu/img/8CRSfAcBFJ8hX1o6.jpg:large" controls="" preload="none">
        <source src="https://video.twimg.com/ext_tw_video/905536422869917702/pu/pl/BTtKvWcLgLM8USsD.m3u8" type="application/x-mpegURL">
      </video>
    </div>
  </li>
</ol>