Skip to main content

Patterns: Media

Used for listing lots of types of things.

Posts, bookmarks, etc

With a header and body.

  1. 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.

<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

  1. 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.

<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:

  1. Glitz

    by Elmore Leonard

    • Started on
<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.)

  1. This comment’s byline has an optional icon and an optional link.

  2. 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.

  1. Bob's icon

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

  2. Terry's icon

    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

  1. Bob's icon

    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's icon

      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

  1. Bob's icon

    If a tweet has one or two images then they can be shown in two columns.

  2. Terry's icon

    If a tweet has three images then we can show them in three columns.

  3. Terry's icon

    If a tweet has four images then we can show them in four columns like this.

  4. Terry's icon

    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>