Overview
A card layout shows content side by side in separate boxes. Each box is called a card. Cards work well for speakers, products, events, or features.
Knak columns sit right next to each other. To add space between cards, add a thin, empty column between each card. This empty column is called a placeholder column. The section background shows through the placeholder column. This creates the gap.
On mobile, the columns stack on top of each other. A Spacer block inside each placeholder column keeps a gap between the stacked cards.
Before You Begin
Decide how many cards you want. Then plan your columns.
You need one column for each card.
You need one placeholder column between each pair of cards.
All column widths must add up to 100%.
Decide if the cards will stack on mobile. See Choose How Cards Behave on Mobile below.
The values in the steps below are recommended starting points. Change them to fit your design.
Steps
Step 1: Set Up the Section
Add a section to your asset.
Open the section settings.
Set the background color. Sections have three color options, layered from outside to inside:
Section color fills the full width of the section, edge to edge.
Outer content color fills only the content area (the width of your email body). The section color can still show on either side.
Set the section Padding, for example 10px on all sides. This adds a frame of your background color around the cards.
Set Column height to Equal height. This makes every column the same height even when the text in one column is longer.
Step 2: Add Your Columns
Add the total number of columns you need.
Arrange the columns so card columns and placeholder columns take turns: card, placeholder, card, placeholder, card.
Adjust Column Width
Click inside the section.
Select the pencil and ruler icon in the bottom right.
Drag the slider left or right to adjust the column width.
⚠️ Important: Widths you set in desktop view also apply on mobile. To set different widths for mobile, see Option 2: Don’t Stack on Mobile below.
Recommended Column Widths
Number of cards | Total columns | Column widths (%) |
2 | 3 | 49 / 2 / 49 |
3 | 5 | 32 / 2 / 32 / 2 / 32 |
4 | 7 | 22 / 4 / 22 / 4 / 22 / 4 / 22 |
To work out even widths for any number of cards, add up all the placeholder column widths. Subtract that number from 100. Divide the result by the number of cards. That is the width of each card column.
Example: For 3 cards with 2% placeholder columns, the placeholder columns add up to 4%. 100 – 4 = 96. 96 ÷ 3 = 32. Each card column is 32%.
Tip: In a 600 pixel (px) wide email, a 2% placeholder column is about 12px. Keep the placeholder column width close to your section padding. This makes the space around each card look even.
To learn more about columns, see Change Sections and Column Properties.
Step 3: Set Up the Placeholder Columns
Do this for each placeholder column.
Leave the column Background empty. The section color shows through.
Drag a Spacer block from the Content Bar into the column.
Set the Spacer height to your desired pixel height. When columns stack on mobile, this becomes the gap between cards.
Step 4: Set Up the Card Columns
Do this for each card column.
Set the column Background color. White (#FFFFFF) works well on a dark section.
Set the Border radius to round the corners, for example 15px.
Set the column Padding to 0. This lets the image sit flush against the top of the card.
Step 5: Add an Image to Each Card
Drag an Image block to the top of the card.
Set the image border radius to round only the top corners. For example, set the top-left and top-right corners to 15px and the bottom corners to 0px. The top corners now match the card. The bottom corners stay square.
Add alternative text (alt text) to the image. Alt text is a short description that screen readers read aloud. Use the Knak AI suggestions if you'd like alt text recommendations.
Make the Image Fill the Card
Want the image to stretch across the full width of the card? Set its width to 100%.
Select the image.
Set the image width to Custom and 100%.
Select the phone icon next to the image width. Set the mobile row to Custom and 100% too.
Why not use Auto? Auto sizes the image from the width of the file you uploaded. If the file is narrower than the card, the image will not fill the card. Custom at 100% always fills the card.
Tip: Check the image in mobile view. Do you see a gap on either side? The mobile row may still be set to Auto or less than 100%. The card column Padding may also be more than 0.
Step 6: Add Text to Each Card
Drag Text blocks below the image. Add one block for each line of content, such as a label, a title, a name, and a description.
Give each Text block the same left and right padding, for example 25px.
Give the last Text block extra bottom padding, for example 20px to 25px. This keeps the text away from the bottom edge of the card.
Click Save.
Choose How Cards Behave on Mobile
Compare the Options
| Stack on mobile (default) | Don’t stack on mobile |
Layout on mobile | Cards sit on top of each other | Cards stay side by side |
Card width on mobile | Full screen width | The mobile column widths you set |
Gap between cards | The Spacer block height (20px) | The placeholder column width |
Image size on mobile | Large and easy to see | Small, because each card is narrow |
Best for | 2 or more cards with images and longer text | 2 cards with short text, or icons and logos |
Option 1: Stack on Mobile (Default)
There is nothing to turn on. Columns stack on mobile by default.
Each card fills the full width of the screen.
Each placeholder column shows as a 20px gap between the cards.
With the image set to 100% on mobile, each image fills the full width of its card.
Cards stack when the screen is narrower than the email’s Mobile breakpoint. To change it, open the email settings and edit Mobile breakpoint.
To show the cards in the opposite order on mobile, turn on Reverse column order on mobile in the section settings.
Option 2: Don’t Stack on Mobile
Open the section settings.
Turn on Don’t stack on mobile.
Switch the editor to mobile view.
Click inside the section.
Select the pencil and ruler icon.
Drag the slider to set the mobile column widths. These widths apply only on mobile. Your desktop widths stay the same.
Keep these points in mind:
Phone screens are narrow. Three or more cards side by side can be hard to read. Use this option for two cards, or for cards with very little text.
Make the placeholder columns a little wider on mobile, for example 48 / 4 / 48. This keeps the gap visible.
You cannot turn on Don’t stack on mobile and Reverse column order on mobile at the same time.
Note: How mobile column widths work:
Until you set mobile widths, mobile uses your desktop widths.
After you set mobile widths, changes you make in desktop view no longer update mobile. Adjust mobile widths separately in mobile view.
You can only change mobile column widths on the canvas in mobile view. There is no separate width field in the settings panel.
If you turn Don’t stack on mobile off later, your mobile column widths are removed. The columns stack again.
Example Settings
This example shows a three-card speaker invite. Use these settings as a starting point. Change the colors to match your brand.
Layout Settings
Item | Setting |
Section | Background #014739, Padding 10px, Column height Equal height |
Columns | 32 / 2 / 32 / 2 / 32 |
Placeholder columns | No background, 20px Spacer block |
Card columns | Background #FFFFFF, Border radius 15px, Padding 0, no border |
Card image | Top corners 15px, bottom corners 0px |
Tips
Keep the text style the same on every card. For example, write all names in capital letters or none of them.
Add alt text to every card image, even placeholder images.
Build one card first. Then copy its blocks to the other card columns.
Send a test email before you launch. Check every card on desktop and mobile.
FAQs
Why are my card corners square in Outlook?
The classic Outlook desktop app does not support rounded corners. Your cards show with square corners there. They still line up at the same height.
Why do my cards have different heights?
Check that Column height is set to Equal height in the section settings.
Why are there no gaps between my cards on mobile?
Check that each placeholder column has a Spacer block inside it. When cards stack, the placeholder column only keeps its height if it has content.
Why doesn’t my image fill the card on mobile?
Select the phone icon next to the image width and check the mobile row. Set it to Custom and 100%. Also check that the card column Padding is 0.
Why can’t I change column widths in mobile view?
Mobile column widths only work when Don’t stack on mobile is turned on. When cards stack, each card is always full width on mobile.
Why is the "Don’t stack on mobile" toggle grayed out?
Check to see if the Reverse column order on mobile toggle is turned on. Turn it off first to see if this resolves the issue.
How many cards can I make?
You can make two or more cards. Add one card column for each card and one placeholder column between each pair. Make sure all column widths add up to 100%. More cards means narrower cards, so keep the text short.
Need more help? Contact support via live chat within Knak using the chat bubble in the bottom right corner or email support@knak.com.