What Are Card Blocks?

What Are Cards?

Overview

Cards are individual pieces of content that appear on your app’s Home Screen. A Card can include text, image, and an action. Think of Cards as digital signposts that help guide your customers to specific actions or information that you want them to take.

Cards are flexible and easy to manage — perfect for promotions, announcements, links, and general content you want to highlight.

Video Tutorial 


Video Timestamp

Intro -- 0:13
How to Create a Card -- 1:00
Prebuilt Cards -- 1:28
Edit Card -- 1:40
Add Card Description -- 2:04
Add Image -- 2:15
Image Alt Text -- 2:38
Review Card Options / Flexibility
Card Title Only -- 3:18
Card Description Only -- 3:20
Top Image & Card Title & Card Description -- 3:26
Bottom Image & Card Title -- 3:29
Right Image & Card Title -- 3:34
Left Image & Card Title -- 3:36
Title & Card Title & Card Description -- 3:38
Image Only (Use for Advertising) -- 3:45

Designing Cards: What You Can Customize

You have control over both the appearance and the action of each Card. 

🧱 Structure & Content

You can update the following elements: 

Field
What You Can Do
Title
Shows a text heading above the card. Optional. 
Card Title
Shows a text title on the card. Optional. Change the default title. 
Card Description
Shows a text description on the card. Optional. HTML works if desired. 
Image
You can upload an image or search for an image. Optional. Alt Text required if an image is used. 
Image Size
Choose how your image appears:
  1. Full = Original size; minimal constraints
  2. Cover = Cropped to fit 16:9; recommended
  3. Contain = Fits inside 16:9 without being cropped; most restrictive
Pro Tip: Use Cover for most cards. 
Image Alignment
Choose where the image displays:
  1. Top = Above the text (or with no text)
  2. Bottom = Below the text
  3. Left or Right = Next to the text
Visibility
Available if you wish to schedule or limit the audience of this content. Learn more about Visibility. 

👀 User Experience 

Block Title Only

Block Title + Image

Block Title + Card Title

Block Title + Card Description

Block Title + Image + Card Title + Card Description

Image (Full) - will not crop the image

Image (Cover) - will crop the image 16:9 (take 'middle' of image)

Image (Contain) - will contain the image inside 16:9 

Image + Card Title

Image + Card Description

Image (Bottom)

Image (Left)

Image (Right)

Card Title + Card Description

Card Description with HTML


💡Best Practices

  1. Use Cover Image Size for best visual results unless doing Image Only; then use full or cover based on desired look
  2. Limit description text to 2-3 lines for readability or use Max Description to truncate for you
  3. Make Card titles informative or clear (e.g., "Our Dinner Menu," "Course Conditions")
  4. Use high-quality images for a strong presentation (take advantage of the image picker)
  5. Group Cards into Lists if you need to organize multiple pieces of content under a Title. 

    • Related Articles

    • What Are List Blocks?

      Overview Lists are containers that group multiple Cards together on your app’s Home Screen. They help organize related content and can be styled in different ways depending on the user experience you want to create. Think of a List as a section — ...

    • How Home Screen Works

      Overview The Home Screen is where users land when they open your app. Use the App Studio– Home Screen tool to create a layout that matches your brand, highlights key content and features, shows seasonal information, and helps guide your users where ...

    • Engage Wallet Setup Step 3: Gallus Dashboard Setup

      Before You Begin Make sure you have a familiarity with the Gallus Wallet by reading our How The Engage Wallet Integration Works article. Looking for step 2? Please view our Engage Wallet Setup Step 2: Card Account Setup article. What's The Point? ...

    • How Styles Custom CSS Works

      Overview Take full control over the look and feel of your Home Screen with Custom CSS, available in Style. Whether you want to make some minor tweaks or apply additional design touches, Custom CSS gives you the flexibility to go beyond the standard ...

    • Engage Wallet Setup Step 2: Card Account Setup

      Before You Begin Make sure you have a familiarity with the Gallus Wallet by reading our How The Engage Wallet Integration Works article. Looking for step 1? Please view our Engage Wallet Setup Step 1: Payment Configuration article. What's The Point? ...