Getting Started
Components
Lists
List are great components to show series of content.
Basic Lists
This is the basic list.
-
List Heading
- Item One
- Item Two
- Item Three
- Item Four
- Item Five
<ul class="lists">
<li class="lists__item lists__heading">
<h3>List Heading</h3>
</li>
<li class="lists__item">Item One</li>
<li class="lists__item">Item Two</li>
<li class="lists__item">Item Three</li>
<li class="lists__item">Item Four</li>
<li class="lists__item">Item Five</li>
</ul>
Stacked Lists
This is a stacked lists
- Item One
- Item Two
- Item Three
- Item Four
- Item Five
<ul class="lists lists--stacked">
<li class="lists__item lists__item--stacked">Item One</li>
<li class="lists__item lists__item--stacked">Item Two</li>
<li class="lists__item lists__item--stacked">Item Three</li>
<li class="lists__item lists__item--stacked">Item Four</li>
<li class="lists__item lists__item--stacked">Item Five</li>
</ul>
Inline Lists
This is inline list.
- Item One
- Item Two
- Item Three
<ul class="lists lists--inline">
<li class="lists__item">Item One</li>
<li class="lists__item">Item Two</li>
<li class="lists__item">Item Three</li>
</ul>
Stacked Notification Lists
This is usecase of list component.
-
1d
-
4h
<ul class="lists lists--stacked">
<li class="lists__item flex lists__item--stacked lists--notification">
<div class="lists__group">
<img src="your-img-url.png" alt="person" class="lists__img">
<p class="lists__message">Jenna12 has started following you.</p>
</div>
<div class="lists__group lists__group--time">
<p class="lists__notification-time">1d</p>
</div>
</li>
<li class="lists__item flex lists__item--stacked lists--notification">
<div class="lists__group">
<img src="your-img-url.png" alt="person" class="lists__img">
<p class="lists__message">Ani25 liked your post.</p>
</div>
<div class="lists__group lists__group--time">
<p class="lists__notification-time">4h</p>
</div>
</li>
</ul>