Poster

Portrait media: films, shows, and product covers. The one 2:3 shape in the system.

Now showing

A Film Title

In cinemas · 2h 04m

Another Title

Coming 12 Dec

A Third Title

Streaming

HTML

<div class="p234-strip">
  <div class="p234-strip__track">
    <a class="p234-poster" href="#" style="flex:0 0 8rem">
      <img class="p234-poster__img" src="data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 300'%3E%3Crect width='200' height='300' fill='%23c9c3b8'/%3E%3C/svg%3E" alt="" width="200" height="300">
      <p class="p234-poster__title">A Film Title</p>
      <p class="p234-poster__meta">In cinemas &middot; 2h 04m</p>
    </a>
    <a class="p234-poster" href="#" style="flex:0 0 8rem">
      <img class="p234-poster__img" src="data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 300'%3E%3Crect width='200' height='300' fill='%23c9c3b8'/%3E%3C/svg%3E" alt="" width="200" height="300">
      <p class="p234-poster__title">Another Title</p>
      <p class="p234-poster__meta">Coming 12 Dec</p>
    </a>
    <a class="p234-poster" href="#" style="flex:0 0 8rem">
      <img class="p234-poster__img" src="data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 300'%3E%3Crect width='200' height='300' fill='%23c9c3b8'/%3E%3C/svg%3E" alt="" width="200" height="300">
      <p class="p234-poster__title">A Third Title</p>
      <p class="p234-poster__meta">Streaming</p>
    </a>
  </div>
</div>

Why 2:3 and not 16:9

Film and product artwork is made portrait, and cropping it to 16:9 cuts the title off the art. This is the one place in the system where a different ratio is the correct answer rather than an exception, so it has its own component instead of a variant on Figure.

Commercial content

Affiliate products use the same component and must say what they are. A product recommendation that a reader cannot tell from editorial is the kind of thing that costs trust permanently, and this site's whole problem is readers not coming back. Label the row, not each item.

Put it inside a strip so the row scrolls on a phone.
Give the second line something useful: runtime, release date, where to watch, price.
Empty alt on the artwork, since the title is right under it.

Do not mix editorial and commercial items in one row.
Do not put posters on a news front. They belong on their own pages and in their own strip.

Tokens this component reads

--p234-color-ink--p234-color-ink-muted--p234-color-paper-sunk--p234-radius-sm--p234-type-ui-sm-*--p234-type-meta-*--p234-space-3