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.
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.
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.
Add a heading. Removing the text from this field will remove the heading from the corresponding section of the card block.
Add a subheading. Removing the text from this field will remove the subheading from the corresponding section of the card block.
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.
Add the text that will appear as the call-to-action link.
Add a link for the call-to-action URL.
Delete a card.
Add a card.
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.
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.
Select the heading level of the main heading (not the subheading) for each of the cards.
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.
Display a border around each card.
Note: This may only show on certain section and card background colours.
Select the colour of the border.
Border Width (px)
Set the thickness of each card’s border, as measured in pixels.
Choose if the text for each card will appear above, below, or on top of the image in each card.
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.