Card list with a text based avatar instead of an image

1

Hello,

How can I create a card list with a header containing a text + title/subtitle where the text is placed where the standard avatar image is?
I’m looking for the Nine Inch Nails header sample replacing the NIN image by a custom counter (number value).

<div class="list card">
  <div class="item item-avatar">
    {{counter}}
    <h2>Title</h2>
    <p>Subtitle</p>
  </div>
</div>

Thanks!