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

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 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.

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.

Did this answer your question?