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.

Media list

Media lists are composed of media objects. Media objects are patterns of image and content. Image is on the left and content on the right.

  • Title media object

    Some content

  • Title media object

    Some content

  • Title media object

    Some content

Add the class media-list to the <ul> element.

Inside each <li> item add a media object

Ordered media list

Ordered media list will show the number of the list item in the same style used for media list rows.

You can also add the dotted-list class next to the media-list class in the ol element.

  1. A step in some process

    Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque.

  2. Another step in the same process

    In pellentesque faucibus vestibulum. Nulla at nulla justo.

Inside the element containing the .media-image class there should be no content. Empty (see example code). The style for the item numbers will be generated via CSS

Note: The div element containing the .media-image is actually not required for ordered media list. You can keep it for markup consistency.

We have to sizes for padding inside the rows. By default is 24px. By adding the class .slim next to the media-list and rows class the padding changes to 12px.

Media list rows

Media list that look like rows on a table. Used in send campaign confirm page.

Add the rows class next to the media-list class in the ul element.

  • Email authentication

    Email authentication is enabled for this message.

  • Tracking

    You chose to track clicks and opens in the HTML email.

We have to sizes for padding inside the rows. By default is 24px. By adding the class .slim next to the media-list and rows class the padding changes to 12px.

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.

Yesterday

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.