Cards Layout (Apps)

The Cards layout creates a single or double column layout, turning our list of items into cards which have images inside of them. Like the Tiles Layout, the Cards Layout is incredibly resourceful and allows us to generate multiple layout variations.

Data

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

1. Image

2. Header

3. Title

4. Details

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

pageOverlays

Design

There are a lot of design configurations that we 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, the card takes up the whole space of the app screen and only displays one card per row. In Half Size, the card takes up half the space and displays two cards per 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 the three options:

Card Style Options

Orientation

There are two options for orientation: Vertical or Horizontal.

Setting the Card Layout Orientation

Corners

We can also configure the edges or corners of each card. We 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 a way to display text-only lists. This is perfect for when we don't have any images to support our existing data or for when we don't need to add any images to our list view. We can also select the text size, we have three options, Small, Medium, Large. We can also select the Lines of text that will directly affect the Details, we can choose from one line to six.