Card list with a text based avatar instead of an image


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