Cards Component

The Cards Component provides an option to display text overlayed on a background image with hover-over interaction. 

Here is an example:

Example Cards

Concierge Services
Card Icon
Concierge Services

We'll never let you get lost when you use us! Our constant communication and in-depth destination knowledge let you relax and know you're in good hands.

Unique Adventures
Card Icon
Unique Adventures

Ask us about our adventure trips! We love our active adventures and often have groups available for hiking, biking, kayaking, and more for the outdoor enthusiasts!

On Location Photography
Card Icon
On Location Photography

For those extra special vacation moments, we can't speak highly enough of our on-location photography services. We'll coordinate a local photographer to help capture your dream trip.

Wine River Cruises
Card Icon
Wine River Cruises

European Wine River Cruises offer a relaxing way to explore renowned wine regions, with vineyard tours, tastings, and scenic river sailing—all curated for wine lovers.

Add the Card Content

Navigate to an Unused Area on your site and click the + Add button in the top left, or the Add Content button in the middle:

 

Select the Cards page element within the components section:

 

Configure the Card Properties

 

  1. Title: Enter a name for this card set (e.g., “Example Cards”). The title will show above the cards.
  2. Title Alignment: Choose how the title aligns: left, center, or right.
  3. Alignment: Choose card alignment within the container.
  4. Width: Define card container width in % or pixels.
  5. Padding: Space around the card content.
  6. Cards per row: Set how many cards are displayed per row (e.g., 4).
  7. Column Gap: Set spacing between columns of cards.
  8. Row Gap: Set spacing between rows of cards.
  9. Background Color:Set a background color for the full card section.

 

Add and Manage Cards

 

  1. Add Card: Click + Add Card to create a new card.
  2. Card List: Each card is listed by name after being added.
  3. Edit Icon: Click the pencil icon to open the card for editing.
  4. Link Icon: Click to add or modify a hyperlink associated with the card.
  5. Delete Icon: Click the trash can to remove the card.

 

Edit Card Properties

 

  1. Title: Enter the name of the card (e.g., “Concierge Services”). This appears as the card’s headline.
  2. Icon: Select the folder icon to go to your Images and Files, where you can select the icon image you want to use. (We have icons for you to choose from! Look for the icons folder )
  3. Background Image: Select the folder icon to go to your Images and Files, where you can select the image that will fill the background of the card.
  4. Background Color: The default color of the card background will be white, but you can select a different color here.
  5. Text: Use the rich text editor to enter and format your card’s content, such as descriptions, bold text, links, or bullet points.

 

💡 Tips

Use consistent image sizes for icons and background images.

Make sure your text is clear and concise for quick scanning.