App list and app sheet

Writing about apps, subscriptions and in-app purchases.

A composition built on key-value for writing about apps, subscriptions and in-app purchases. A <section class="key-value key-value--app-list"> wraps any number of <dl> rows — each row is an app (app-list row), an app detail block (app-sheet row) or a sub-total line.

App list row

Icon, name and price on a single line. Use .align-right and .small-caps on the price to match the subscriptions post treatment.

<section class="key-value key-value--app-list">
  <dl class="key-value--item key-value--item--app-list">
    <dt class="key-value--key sr-only">App icon</dt>
    <dd class="key-value--value">
      <img class="app-icon" src="/path/to/icon.png" alt="">
    </dd>
    <dt class="key-value--key">App name</dt>
    <dd class="key-value--value align-right small-caps">£2.99/mo</dd>
  </dl>
</section>

Sub-total row

A spanning label and a right-aligned amount. The .span--two-columns modifier stretches the <dt> across the icon + name columns.

<section class="key-value key-value--app-list">
  <dl class="key-value--item key-value--item--app-list">
    <dt class="key-value--key sr-only">App icon</dt>
    <dd class="key-value--value">
      <img class="app-icon" src="/images/photos/2016-05-01-in-flight.jpeg" alt="" width="57" height="57">
    </dd>
    <dt class="key-value--key">Notes</dt>
    <dd class="key-value--value align-right small-caps">£2.99/mo</dd>
  </dl>
  <dl class="key-value--item key-value--item--app-list">
    <dt class="key-value--key sr-only">App icon</dt>
    <dd class="key-value--value">
      <img class="app-icon" src="/images/photos/2016-05-01-in-flight.jpeg" alt="" width="57" height="57">
    </dd>
    <dt class="key-value--key">Calendar</dt>
    <dd class="key-value--value align-right small-caps">Free</dd>
  </dl>
  <dl class="key-value--item key-value--item--app-list">
    <dt class="key-value--key span--two-columns">Sub-total</dt>
    <dd class="key-value--value align-right">£26.00 per month</dd>
  </dl>
</section>

App sheet

A detail block for a single app — large icon on the left, stacked metadata on the right. Each row of metadata is a separate <dt>/<dd> pair inside the same <dl>.

<section class="key-value key-value--app-list">
    <dl class="key-value--item key-value--item--app-sheet">
        <dt class="key-value--key sr-only">App icon</dt>
        <dd class="key-value--value key-value--value--app-icon">
            <img class="app-icon large" src="/images/posts/2023-02-06-tweetbot.jpg" alt="Tweetbot for Twitter iOS app icon">
        </dd>
        <dt class="key-value--key sr-only">App name</dt>
        <dd class="key-value--value"><strong>Tweetbot for Twitter</strong></dd>
        <dt class="key-value--key sr-only">In-app purchase description</dt>
        <dd class="key-value--value small-text secondary-text">Tweetbot yearly</dd>
        <dt class="key-value--key sr-only">Type</dt>
        <dd class="key-value--value small-text secondary-text">In-app purchase</dd>
        <dt class="key-value--key">Developer</dt>
        <dd class="key-value--value align-right">Tapbots</dd>
        <dt class="key-value--key">Price</dt>
        <dd class="key-value--value align-right">£5.99 per year</dd>
    </dl>
</section>