Products
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 👇
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.
Last modified 26d ago
Copy link