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