Use the Card Row block for a variety of applications - including a row of images or a row of images with headings, subheadings, and CTA buttons. The Card Row is a versatile block that can be configured many different ways.
Content
Add Card
Add a card.
Card Image URL
Upload an image by dragging and dropping the image into the "drop zone". Alternately, click "Manually enter URL" to link to a secure, hosted image.
Image Presets
With Image Presets you are able to edit the look of your uploaded image. You can choose to apply a preset from the following options:
None: Automatically selected, this is your image without a preset
Invert: Inverts the colour of your image
Grayscale: Removes the colour from your image
Sepia: Applies a reddish-brown tone over your image
If you wish to add a colour overlay, click to select the “Add an overlay” checkbox.
Heading
Add a heading. Removing the text from this field will remove the heading from the corresponding section of the card block.
Subheading
Add a subheading. Removing the text from this field will remove the subheading from the corresponding section of the card block.
Body Text
Add a block of text. Removing the text from this field will remove the block of text from the corresponding section of the card block.
Link Text
Add the text that will appear as the call-to-action link.
Link URL
Add a link for the call-to-action URL.
Delete
Delete a card.
Add a Link
Turn the card row image into a clickable object that follows the link provided.
Button/Image
Choose whether the card row image shows a button for an attendee to click (following Add a Link's URL field) and the text of that field, and/or makes the image clickable.
Tip: Keep the number of characters in each field consistent across the cards to produce a uniform look. For example, in each of the "Heading" fields try to add headings that are a similar amount of characters.
Preferences
Background Colour
Click the colour swatch to select a section background colour.
Card Background Colour
Click the colour swatch to select the background colour of each card.
Number of Columns
Select the number of columns in the card row section.
If you have more cards than columns, surplus cards will be placed on a new row. If you have fewer cards than columns, there will be an empty space at the end of the card row.
Heading Level
Select the heading level of the main heading (not the subheading) for each of the cards.
Card Indent
Selecting an indent will add space to the beginning of the card row section.
Space Between Cards (px)
This value determines the distance between your cards, as measured in pixels.
Corner Radius (px)
The value entered in this field determines the roundness of each card’s corner, as measured in pixels. A value of 0 makes the corners square.
Show Border
Display a border around each card.
Note: This may only show on certain section and card background colours.
Border Color
Select the colour of the border.
Border Width (px)
Set the thickness of each card’s border, as measured in pixels.
Display Options
Text Position
Choose if the text for each card will appear above, below, or on top of the image in each card.
Text Alignment
Select whether the text is left, right, or centre-aligned.
Text Vertical Alignment
Select whether the text on the card is aligned to the top, centre, or bottom of the card.
Display the link as:
Select whether the link in the card will be displayed as a text link or as a button.