Lists
Leaders list
Leaders lists are usually to display statistics. The label is on the left side while the value is on the right. A consecutive line of dots separate the label and value.
- List average 61.7%
- Industry average 61.7%
<ul class="leaders">
<li>
<span>List average</span>
<span class="font-weight--bold">61.7%</span>
</li>
<li>
<span>Industry average</span>
<span class="font-weight--bold">61.7%</span>
</li>
</ul>
Add the class leaders
to the <ul>
element and use <span>
tags to wrap labels and values.
Linear dots
To make a linear list use the linear-list
class in a ul
element.
- item uno
- item dos
- item tres
x
<ul class="linear-list dots">
<li>item uno
</li>
<li>item dos
</li>
<li>item tres
</li>
</ul>
To separate the items with dots use the dots
class.
Linear spaces
Items on a linear list are separated by spaces.
- item uno
- item dos
- item tres
x
<ul class="linear-list spaces">
<li>item uno
</li>
<li>item dos
</li>
<li>item tres
</li>
</ul>
To separate the items with spaces use the spaces
class.
Unordered list with link
Regular style for unordered list with link elements in the list items
x
<ul class="regular">
<li class="selected">
<a href="javascript:;">item one</a>
</li>
<li>
<a href="javascript:;">item two</a>
</li>
<li>
<a href="javascript:;">item three</a>
</li>
</ul>
Add class regular
to the <ul>
element.
Notice the state for<li>
elements with the selected
class.
Activity timeline
To convert a list to an activity timeline we need to wrap the list in a div that has the class c-activityTimeline
. The div is needed in order to style the date associated with the list. A relative
class is also required on the list. We need relative
because we are absolute positioning some elements inside the list items.
The timeline pattern requires some extra markup inside the list items in order to display time and icons.
-
1 new subscribers to "Mailchimp UX Newsletter"
Nice! Guess people like what you're saying. Here are a few: freddie@mailchimp.com. -
Inbox Preview
Check your profile
x
<div class="c-activityTimeline">
<div class="activity-date inline-block font-weight--bold !margin-bottom--lv6 alignc">Yesterday
</div>
<ul id="chatter-list" class="relative">
<li id="chatter-msg-1854329" class="flex padding--lv3 !padding-left--lv0 !margin-bottom--lv6">
<div class="activity-meta relative alignc">
<div class="activity-time">1:23pm
</div>
<div class="activity-icon inline-block-i success">
<div class="activity-sprite subscribe">
</div>
</div>
</div>
<div class="activity-content">
<h4 class="p full-width">
<a href="#" target="_blank" rel="noopener noreferrer">1 new subscribers to "Mailchimp UX Newsletter"</a>
</h4>
<div class="!margin-bottom--lv3"> Nice! Guess people like what you're saying. Here are a few:
<a href="#">freddie@mailchimp.com</a>.
</div>
</div>
</li> ...
</ul>
</div>
Activity is grouped by date. The date is located outside of the unordered list.
The date and icon are located inside of activity-meta
div.
For time add activity-time
for icons add activiy-icon
and activity-sprite.
Content goes inside activity-content
section.