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