Cards
How to add, edit and style cards.
What Are Cards?
Cards are used to group and display content in an easily readable way. There are loads of example cards in the Parts Library to choose from, add to your canvas, and edit as needed.
Location in the Parts Library: Base Parts > Data Display > Card
Adding a Card
Choose the card most closely aligned with what you need from the Parts Library.
Choose your preferred card variation, select the part where you’d like to add your card, and click ‘+ add to page’.
The card is a versatile part. You can add most other base parts to a card. For example, you can add rows, columns, images, text, chats, collapses - anything that you'd like to display in your card, including any of the pre-built sections in the parts library.
Adding parts to the card will adjust the card size accordingly.
Some Components of a Card
Many of the prebuilt cards come with parts that you may typically want to display in a card. For example, many come with a card title, a subtitle, and card actions containing a button. Some have images, avatars, and icons. Any parts inside a card can be deleted if you don't want them.
Below is a brief video showing some key parts within cards, and their parent/child relationship. Click the play button to view.
Card Title
Within the Parts Library > Cards, all titles inside cards are created as Card Titles. This means that by default, the text is larger and bolder than the default text. You can still change the family, size, weight, line height, and style using the Font editor in the property editor on the right.
Text is edited by selecting the text part, and then going to the Text Editor in the right menu. There you'll replace the value with the text you'd like to see. The subtitles appearing in within the Parts Library > Cards are all text parts and are edited in the same way as any other text.
Card Image
Within the Parts Library > Cards, the feature images inside cards are housed within a Card Image part. This can assist with the layout of the image within the card.
Card Actions
Within the Parts Library > Cards, any buttons inside cards are housed within Card Actions.
Card Actions form a container around the button, and can be aligned vertically or horizontally.
You can set up your cards however you like!
Despite the cards within the Cards page of the Parts Library being set up in this format, you can set up a card however you like. It's up to you how creative you'd like to be, and how you'd like to style your cards! For example, a button can be placed wherever you like, the same with an image, and the same with a title. These parts are just helpers.
Editing and Formatting the Card
Like many other parts, borders, shadow, opacity, sizes, and spacing can be applied using the property editor on the right, once the card has been selected.
Rounding
Default cards are naturally rounded.
Cards can be given a hard edge or have the level of rounding changed using the Decoration Editor, in the 'Rounding' tab.
Rounding can be applied to all of the card, the top left, top right, bottom left, and bottom right, or a combination of these. There are various degrees of rounding ranging from none to full, with incremental size points in between.
To remove all rounding from a card, giving it a hard edge, choose rounding of 'none'.
In the rounding editor, when 'full' is applied to 'all' of the card, the card will become either completely round if the card was originally square; or will have a pill shape if the card was rectangular.
Changing The Card Image To Be On The Side
To place the image to the side of a card, select the card, and go to the 'Side' property in the right property editor. Check the 'Side' checkbox.
Making the Card Image Fill the Card
Even if you have other contents in your card besides an image, you can make your image fill the card, placing other contents on the top of the image.
Select the card, and go to the 'Full' property in the right property editor. Check the 'Full' checkbox.
You may need to adjust the size, color, and positioning of the contents above the image, as well as the opacity of the image.
Applying a Glass Effect
The 'Glass' property gives your card a glass effect. The glass effect is most noticeable when there is a background behind the card (such as a container, row, or column), and a hint of what is behind the card becomes visible.
To apply a glass effect, select the card, then go to the 'Glass' property in the right property editor. Check the 'Glass' checkbox.
Here is an example:
Card Outline
The 'Outlined' property creates a faint outline around the card. To apply an outline, select the card, then go to the 'Outlined' property in the right property editor. Check the 'Outlined' checkbox.
The border property can be used if you want to apply a colored border, or if you want to vary the thickness and style of the border.
White Space
The 'White Space' property allows you to set 'normal' or 'compact' levels of white space within the card. The compact choice means there is less white space within the card.
Linking the Card
To add a link to your card, first select the card. On the right editor menu, select 'link to', and you'll see the current list of pages within your app that you can link to. If the page you want to link to within your app hasn't been created yet, select 'new page'. You'll then be prompted to complete some details for your new page. You can also link to an external URL.
How Do I Create a Row of Cards?
In the Parts Library, there are some prebuilt rows of cards ready for you to add and edit. All of the card rows have contents sourced from data. They are designed this way so you can replace the data with your own, and add as many pieces of data (and therefore cards) as needed.
Location in the Parts Library: Composed Parts > Page Sections > Card Rows
Here's an example:
Card rows can be helpful if you have lots of different items or products to display. Formatting the look of one card results in the rest of the cards adopting that format, making editing the look of your card display easy.
More on formatting card rows, and editing card rows with data coming soon!
Related Information
Last updated
Was this helpful?