Cards Block

The Cards Block is a flexible component for displaying a collection of items in a grid layout. It's perfect for showcasing features, services, or team members. Each card can contain an image, title, description, and call-to-action, with options to control the overall appearance and link behavior.

Example on the current website

-   Example: View live example

-   Preview with image:

-   Editor preview:

Content Editor Fields

General Content

• Title:

  • Description: The main heading displayed above the grid of cards.
  • Usage: Enter a title for the entire section (e.g., "Our Services," "Plan Your Visit").
  • Requirement: Optional.

• Excerpt:

  • Description: A short paragraph of introductory text displayed below the main title.
  • Usage: Provide brief context for the cards.
  • Requirement: Optional.

Style & Layout Options

• CTA Display:

  • Description: Controls how users interact with the cards to navigate to a link.
  • Options:
    • On CTAs: Each card will display one or more distinct call-to-action buttons inside it.
    • Off CTAs: The entire card becomes a single clickable link.
  • Usage: Choose On CTAs if you have multiple links per card. Choose Off CTAs for a simpler, single-action card.
  • Requirement: Required.

• Transparent Cards:

  • Description: A toggle to make the card backgrounds transparent.
  • Usage: Enable this if you want the cards to blend into the section's background color, rather than having their own distinct background.
  • Requirement: Optional.

Cards (Repeater)

• Description: A list of individual card items that will be displayed in the grid.

• Usage: Click "Add Card" to create a new item.

• Requirement: At least one card is required for the block to render.

• Fields (per card):

  • Image:
    • Description: The primary image for the card, displayed at the top.
    • Requirement: Optional, but highly recommended. A placeholder will be used if empty.
  • Title:
    • Description: The heading for the individual card.
    • Requirement: Optional.
  • Description:
    • Description: The main body of text for the card.
    • Requirement: Optional.
  • Background Colour:
    • Description: Sets the background color for the individual card.
    • Usage: Select a color from the predefined list (e.g., Shore, Tropical).
    • Requirement: Optional.
  • Link (Conditional):
    • Description: Appears when CTA Display is set to Off CTAs. Defines the single destination URL for the entire card.
    • Usage: Add a URL and Link Text.
    • Requirement: Required for the card to be a functional link.
  • CTAs (Conditional):
    • Description: A repeater field that appears when CTA Display is set to On CTAs. Allows you to add one or more buttons inside the card.
    • Fields (per button):
      • URL: The destination link for the button.
      • Title: The text displayed on the button.
    • Requirement: Optional.

Example Usage:

Steps:

1. Add the block: Insert the Cards Block into your page.
2. Add General Content:
   • Title: "Explore Our Exhibits"
3. Choose Style & Layout:
   • Set CTA Display to Off CTAs (to make each card a single link).
4. Add Cards:
   • Click "Add Card" for the first item:
     • Image: Upload a photo of the shark tunnel.
     • Title: "Shark Tunnel"
     • Description: "Walk through our famous underwater tunnel and come face-to-face with our sand tiger sharks."
     • Background Colour: shore
     • Link: Add a link to the "/exhibits/shark-tunnel" page.
   • Click "Add Card" for a second item:
     • Image: Upload a photo of jellyfish.
     • Title: "Jellyfish Zone"
     • Description: "Be mesmerized by the graceful dance of our stunning jellyfish collection."
     • Background Colour: weed
     • Link: Add a link to the "/exhibits/jellyfish" page.
5. Save the Page: The block will now display a title followed by a grid of two clickable cards.

Result:

The Cards Block renders a clean, responsive grid of content cards. Depending on the configuration, each card will either be a self-contained internal buttons or the entire card clickable. This provides a visually appealing and organized way to present multiple pieces of related information.

Benefits:

• Flexible Linking: Offers two distinct ways to handle calls-to-action, either via internal buttons or by making the whole card a link.
• Structured Content: Organizes information into a clear, digestible grid format that is easy for users to scan.
• Visually Consistent: Ensures all cards have a uniform structure, creating a professional and polished look.
• Easy to Manage: The repeater interface makes it simple to add, reorder, or remove cards as needed.

Conclusion:

The Cards Block is a fundamental and highly versatile component for presenting grouped content. Its control over layout and linking behavior makes it suitable for a wide variety of use cases, from service highlights to navigational entry points.