Media List View

Media list view is extended case of list view indended to display more complex data like products, services, users, etc.

And of course it has a bit more complex layout:

<!-- Media list block has additional "media-list" class -->
<div class="list-block media-list">
    <ul>
        <li>
            <div class="item-content">
                <div class="item-media">
                    <img src="path/to/img.jpg">
                </div>
                <div class="item-inner">
                    <div class="item-title-row">
                        <div class="item-title">Element title</div>
                        <div class="item-after">Element label</div>
                    </div>
                    <div class="item-subtitle">Subtitle</div>
                    <div class="item-text">Additional description text</div>
                </div>
            </div>
        </li>
    </ul>
</div>  

Where:

  • item-content - main flex wrapper for item-media and item-inner. Requred element.

    • item-media - container for your media element like icon, image, etc. Optional element.

    • item-inner - Requred element.

      • item-title-row - main flex wrapper for item-title and item-after. Optional element.

        • item-title - single-line list item title. Optional element.

        • item-after - list item label. Could countain any additional HTML elements, like label text, or badge, or switch/toggle or button, etc. Optional element.

      • item-subtitle - additional single-line title. Optional element.

      • item-text - additional two-lines container for detailed description. Optional element.

Example

<div class="content-block-title">Songs</div>
<div class="list-block media-list">
  <ul>
    <li>
      <a href="#" class="item-link item-content">
        <div class="item-media"><img src="..." width="80"></div>
        <div class="item-inner">
          <div class="item-title-row">
            <div class="item-title">Yellow Submarine</div>
            <div class="item-after">$15</div>
          </div>
          <div class="item-subtitle">Beatles</div>
          <div class="item-text">Lorem ipsum dolor sit amet...</div>
        </div>
      </a>
    </li>
    ...
  </ul>
</div>
 
<div class="content-block-title">Mail App</div>
<div class="list-block media-list">
  <ul>
    <li>
      <a href="#" class="item-link item-content">
        <div class="item-inner">
          <div class="item-title-row">
            <div class="item-title">Facebook</div>
            <div class="item-after">17:14</div>
          </div>
          <div class="item-subtitle">New messages from John Doe</div>
          <div class="item-text">Lorem ipsum dolor sit amet...</div>
        </div>
      </a>
    </li>
    ...
 
  </ul>
</div>
 
<div class="content-block-title">Something more simple</div>
<div class="list-block media-list">
  <ul>
    <li>
      <div class="item-content">
        <div class="item-media"><img src="..." width="44"></div>
        <div class="item-inner">
          <div class="item-title-row">
            <div class="item-title">Yellow Submarine</div>
          </div>
          <div class="item-subtitle">Beatles</div>
        </div>
      </div>
    </li>
    ...
  </ul>
</div>
 
<div class="content-block-title">Inset</div>
<div class="list-block media-list inset">
  <ul>
    <li>
      <a href="#" class="item-link item-content">
        <div class="item-media"><img src="..." width="44"></div>
        <div class="item-inner">
          <div class="item-title-row">
            <div class="item-title">Yellow Submarine</div>
          </div>
          <div class="item-subtitle">Beatles</div>
        </div>
      </a>
    </li>
    ...
  </ul>
</div>