Lists
Lists are usually multiple rows of items containing text, buttons, toggles, icons, thumbnails, and much more. Lists generally contain items with similar data content, such as images and text.
Simple text list:
Hello world
I am a simple app that has been reused multiple times. I don’t complain too much.
Go Johnny Go
I am a popular song made even more popular by a popular movie.
<div class="app-list">
<div class="list__item">
<div class="list__content-item">
<h3>Hello world</h3>
<p>I am a simple app that has been reused multiple times. I don't complain too much.</p>
</div>
</div>
<div class="list__item">
<div class="list__content-item">
<h3>Go Johnny Go</h3>
<p>I am a popular song made even more popular by a popular movie.</p>
</div>
</div>
</div>
Image and text list:
John Doe
I have ruined the name John as I have a placeholder personality
Center align text
You can vertical align me at the center top or bottom
Flip columns and bottom align
You can flip my columns and align me at bottom
Space out columns towards the edges
You can flip my columns and align me at bottom
<div class="app-list">
<div class="list__item">
<div class="list__image-item">
<div class="app-avatar is--circled is--bordered" data-ui="ap-app-component"
style="width: 60px; height: 60px;">
<img src="https://pbs.twimg.com/profile_images/974603248119222272/N5PLzyan.jpg" alt="User Name">
</div>
</div>
<div class="list__content-item">
<h3>John Doe</h3>
<p>I have ruined the name John as I have a placeholder personality</p>
</div>
</div>
<div class="list__item is--valign-center">
<div class="list__image-item">
<div class="app-avatar is--circled is--bordered" data-ui="ap-app-component"
style="width: 160px; height: 160px;">
<img src="https://pbs.twimg.com/profile_images/974603248119222272/N5PLzyan.jpg" alt="User Name">
</div>
</div>
<div class="list__content-item">
<h3>Center align text</h3>
<p>You can vertical align me at the center top or bottom</p>
</div>
</div>
<div class="list__item is--valign-bottom">
<div class="list__content-item">
<h3>Flip columns and bottom align</h3>
<p>You can flip my columns and align me at bottom</p>
</div>
<div class="list__image-item">
<div class="app-avatar is--circled is--bordered" data-ui="ap-app-component"
style="width: 100px; height: 100px;">
<img src="https://pbs.twimg.com/profile_images/974603248119222272/N5PLzyan.jpg" alt="User Name">
</div>
</div>
</div>
<div class="list__item is--space-out">
<div class="list__content-item">
<h3>Space out columns towards the edges</h3>
<p>You can flip my columns and align me at bottom</p>
</div>
<div class="list__image-item">
<div class="app-avatar is--circled is--bordered" data-ui="ap-app-component"
style="width: 100px; height: 100px;">
<img src="https://pbs.twimg.com/profile_images/974603248119222272/N5PLzyan.jpg" alt="User Name">
</div>
</div>
</div>
</div>
Data and icon list:
Apple
I am more popular than the fruit
Android
I like chocolates as my last name
Windows
I am looking for a breakthrough
I am a social person
Amazon
I am huge like the forest
<div class="app-list is--hover-list">
<div class="list__item is--valign-center">
<div class="list__icon-item is--danger">
<i class="fa fa-apple"></i>
</div>
<div class="list__content-item">
<h4>Apple</h4>
<p>I am more popular than the fruit</p>
</div>
</div>
<div class="list__item is--valign-center">
<div class="list__icon-item is--circular">
<i class="fa fa-android"></i>
</div>
<div class="list__content-item">
<h4>Android</h4>
<p>I like chocolates as my last name</p>
</div>
</div>
<div class="list__item is--valign-center">
<div class="list__icon-item is--primary">
<i class="fa fa-windows"></i>
</div>
<div class="list__content-item">
<h4>Windows</h4>
<p>I am looking for a breakthrough</p>
</div>
</div>
</div>