Lists

Here are some list entries that you can just copy-and-paste into your Card Designer project.

Small list

This is a basic list that is suitable for showing various lengths of data. The list entries' description will be truncate if it is longer than three lines.

Big list

A big list features an image on the left and a bolder title than the small list, perfect for News. The title will be truncated at more than two lines, and the description at more than three lines.

List with images

This list features for 4 small images for each list entry, useful to display thumbnails or user avatars.

List with button

This is useful if you want to be able to allow a basic action for each list entry.

Mini table

A mini table is useful if you want to display data in a very compact format. They aren't actually <table> elements, but rather just styled to look like one.

Adjust the layout-flex-4 upwards or downwards for each description to increase or decrease the width of the second column.

How do I generate multiple list entries?

Since we are using a 'Liquid View' we can take advantage of dozens of Liquid functions and operators to bring in more logic and conditional formatting to our Cards.

In this instance to generate one entry for every one item in the array of our JSON file, we will wrap our list entry into an 'Iteration loop' which looks like this {% for item in items %} and is follwed by {% endfor %}.

In this examle the array in our JSON would be called items but this can be adjusted as necessary.

If this in turn is placed inside a container <div> with a class layout-vertical, then we ensure that all our list entries will appear underneath the next.

Got an issue? Or want to submit feedback?
Submit your feedback

Our new Feedback and Issue Tracker is built on GitHub Issues. Just leave your comment below and you can track our team resolve it, or browse issues others have already submitted.

Read how to use the Feedback and Issue Tracker