Posted by & filed under PatternFly, UX Research.

by Melody, Tao & Haley

List views have been used widely across products. After we did some research about the applications list view (Research could be found here) , we find out that we could update and create some new guidelines for PatternFly. Summarized as following:


1. New Content Layout Template

Currently we don’t have a content layout template for Pattenfly list view pattern. Following is a new layout template to clarify the content order of the list view pattern.

2.  Alignment rule and Responsive Rule Improvement

Currently Patternfly have two different list view status:

1. Standard List View

2. Stacked List View ( list-view-pf-stacked)

We redesigned the alignment and responsive rule based on the two above situation:
1. Standard list view alignment – The default alignment for the list view row is vertical center aligned. When the screen size is less than 992px, the list view row will change to top aligned ( the same as stacked list view).
2. Stacked list view alignment – The list view row is top aligned in all screen sizes.

List View Row Change Based On the New Alignment Rule

The second and the third row will change form vertical aligned to top aligned.

3. New List View Row Template

“Date” and “Lable” are common element in application, so we try add some new template to PatternFly.

Please feel free to leave comments and suggestions.

Leave a Reply

(will not be published)