Slats

Slats are used to group information that are relevant only to itself. Slats should not be used to compare data with other slats - use a table for that. Unlike a table, slats do not necessarily have to hold the same amount of information as each other which gives it more flexibility when displaying data.

The content within is often variable so there are no specific markup rules to follow apart from the outer shell (ie) <ul class="slat-list"><ul>. However most slat listings have a heading or title and an action button to the far right.

Usage

Example
  • Approve quarterly BAS report
    Dean's Landscaping Pty Ltd • Overdue by 21 days

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi mattis tempor justo. Quisque augue lectus, suscipit eget suscipit at, porta et turpis.

The following are some examples of slat designs however designs and content within will vary project-to-project

Variations

Example

Flush slats

Using class slat-item-horizontal-flush <li class="slat-item slat-item-horizontal-flush"><li>, removes the padding left and right of the slat-list row.

Example
  • Approve quarterly BAS report
    Dean's Landscaping Pty Ltd • Overdue by 21 days

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi mattis tempor justo. Quisque augue lectus, suscipit eget suscipit at, porta et turpis.