List Variants
Row List
Previews
Documentation
List options
-button-hover
-subtle-hover
Each row's hover effect is similar to how a button work. Use if row click opens something new.
Each row has a more subtle hover effect. Use for things like open/close toggling.
List item modules
<div class='status-label'>
<div class='hover-tools'>
<div class='symbol'>
<div><h3></h3>p></p><div>
Display temporary infor connected to the row
Add buttons only visible on hover. Typically used for a context button
Add an icon to the row
Add name (<h3>) and optional extra desciption (<p>)
Code example
<div class='row-list -button-hover'>
<div>
<div class='status-label'>
NEW
</div>
<div class='hover-tools'>
<button class='-icon -small'>
<ion-icon name="download"></ion-icon>
</button>
<button class='-icon -small -hover-rotate margin-left-tiny'>
<ion-icon name="cog"></ion-icon>
</button>
</div>
<div class='symbol -icon'>
<ion-icon name="flask"></ion-icon>
</div>
<div>
<h3>Name</h3>
<p>Additional information</p>
</div>
</div>
</div>
Card List
Will be added later