ionic-framework/ionic/components/item/test/accessories/main.html

<ion-view nav-title="Item Accessories">

  <ion-list>

    <div class="item">
      <div class="item-content">
        <div class="item-label">
          Item Label
        </div>
        <div class="item-media item-note">
          Item Note
        </div>
      </div>
    </div>

    <div class="item">
      <icon class="item-media ion-ios-home"></icon>
      <div class="item-content">
        <div class="item-label">
          Icon Left, outside item-content
        </div>
      </div>
    </div>

    <div class="item">
      <div class="item-content">
        <icon class="item-media ion-ios-home"></icon>
        <div class="item-label">
          Icon Left, inside item-content
        </div>
      </div>
    </div>

    <div class="item">
      <div class="item-content">
        <div class="item-label">
          Icon Right
        </div>
        <icon class="item-media ion-ios-arrow-forward"></icon>
      </div>
    </div>

    <div class="item">
      <div class="item-content">
        <div class="item-label">
          I tried to picture clusters of information
          as they moved through the computer.
          What do they look like?
          Ships, motorcycles?

          With the circuits like freeways.
          I kept dreaming of a world
          I thought I'd never see.

          And then, one day,
          I got in.
        </div>
        <div class="item-media">
          <div class="badge">
            5
          </div>
        </div>
      </div>
    </div>

    <div class="item">
      <div class="item-content">
        <div class="item-media">
        </div>
        <div class="item-label">
          Red Balloons
        </div>
        <div class="item-media">
          <div class="badge">
            99
          </div>
        </div>
      </div>
    </div>

    <div class="item">
      <div class="item-media item-avatar">
        <img style="background:gray; width:40px; height:40px;">
      </div>
      <div class="item-content">
        <div class="item-label">
          Avatar Left, item-label
        </div>
      </div>
    </div>

    <div class="item">
      <div class="item-content">
        <div class="item-label">
          Avatar Right, item-label
        </div>
        <div class="item-media item-avatar">
          <img style="background:gray; width:40px; height:40px;">
        </div>
      </div>
    </div>

    <div class="item">
      <div class="item-media item-avatar">
        <img style="background:gray; width:40px; height:40px;">
      </div>
      <div class="item-content">
        <div class="item-label">
          <h2>
            Avatar Right, h2 header, p content
          </h2>
          <p>
            Your mother was a hamster and your father smelt of elderberries!
          </p>
        </div>
      </div>
    </div>

  </ion-list>

</ion-view>