Cards layout

The cards layout creates a single or or double column layout, turning your list items into cards which have images inside of them. Like the Tiles Layout, the Cards Layout is very versatile and allows you to generate many, many different layout variations.

Data

The cards layout allows you to display the following information for each card:

  1. Image

  2. Header

  3. Title

  4. Details

If you need to display more data, you can use the Overlay configuration for the component. Read more abut overlays here 👇

Design

There are a lot of design configurations that you can set with the cards layout, from the card size to edge corners, and more.

Card Size Options:

There are two options for card size, Full Size or Half Size. In Full Size, your card takes up the whole space of the app screen and only displays one card per row. In Half Size, you card takes up half the space and displays two cards for every row.

Configuring the Card Size Option

Card Style

There are three card styles to choose from: Float, Outline and None. Check the image below to see the difference between these three options:

Card Style Options

Orientation

There are two options for orientation: Vertical or Horizontal.

Setting the Card Layout Orientation

Corners

You can also configure the edges or corners of each card. You have two options to choose from: Sharp or Rounded.

Sharp vs Rounded Corners in the Card Layout Design

Text-Only Lists

The Cards Layout also provides way to display text-only lists. This is perfect for when you don't have any images to support your existing data or for when you don't need to add any images to your list view.