# HubSpot Event Cards Module

This documentation is for the HubSpot Scrolling Content Banner module created by Stephanie O'Gay Garcia

[Download](https://ecosystem.hubspot.com/marketplace/modules/event-cards-module-by-stephanie-o-gay-garcia) | [Demo](/content/demo/event-cards/index.html)

If you can't find the answer to your question, email me at [support@stephanieogaygarcia.com](mailto:support@stephanieogaygarcia.com)

## How does structured data/schema work?

Structured data/schema is code that's added to your website to help search engines understand the data on your page.

This module uses [the Event structured data](https://developers.google.com/search/docs/appearance/structured-data/event) which tells the search engine that your page contains an event.

An important note here is that Google currently only allows you to use schema for a single event. So my recommendation would be to only enable the schema/structured data if you are using the module to show a single card on an event page.

You can use the module without schema/structured data on your "event listings" page to showcase multiple events, then have each event click through to a page that also uses the module with schema/structured data enabled for that specific event.

To enable structured data/schema on your Event Cards module, click into the Contents tab and open the "</> Schema/Structured Data" tab, then select the "Enable Schema" option:

Don't forget to save after doing so!

If you want to test your page for structured data, you can use [Google's Schema Markup Testing Tool](https://developers.google.com/search/docs/appearance/structured-data).

## What configuration option are available for the Event Cards module?

Below is a list of all the customization options available for the Event Cards module.

### Content:

- **Events**(repeater, add as many as you need!)

- Image
    - Image (image)
  - Title
    - Title (text)
  - Date and Time
    - Start Date (date and time)
    - End Date (date and time)
    - Status (choice)
  - Location
    - Attendance Mode (choice)
    - Venue Location
      - Name (text)
      - Address (text)
      - City (text)
      - Postal Code/Zip Code (text)
      - Province/State/Country (text)
      - Country (text)
      - Directions (URL)
    - Online Location
      - Name (text)
      - URL (URL)
  - Description
    - Description (rich text)
  - Tickets
    - Type (choice)
    - Availability (choice)
    - Label (text)
    - Prices (number)
    - Currency (text)
    - On Sale Date (date and time)
    - Purchase URL (URL)
    - Sold Out Label (text)
    - Preorder Label (text)
  - Organizer
    - Label (text)
    - Name (text)
    - URL (URL)
  - Performer(s)
    - Label (text)
    - Performers
      - Type (choice)
      - Name (text)
  - Buttons
    - Buttons
      - Text (text)
      - Link (link)
  - Link
    - Link (link)

- **Schema/Structured Data**
  - Enable Schema (boolean)

- **Advanced**
  - Custom CSS Class (text)
  - Custom CSS (text)

### Styles:

- **Display Settings**
  - Display Image
  - Display Date
  - Display Location
  - Display Description
  - Display Ticket Prices
  - Display Organizer
  - Display Performer(s)

- **Layout**
  - Cards Per Row (Large Screens ≥992px)
  - Cards Per Row (Medium Screens ≥768px)
  - Cards Per Row (Small Screens <768px)

- **Cards**
  - Background
    - Color
  - Border
    - Border
  - Corner
    - Radius
  - Shadow
    - V-Offset
    - H-Offset
    - Blur
    - Spread
    - Color
  - Spacing
    - Padding

- **Image**
  - Corner
    - Radius
  - Size
    - Aspect Ratio

- **Title**
  - Text
    - Heading Level
    - Font

- **Date and Time**
  - Text
    - Font

- **Location**
  - Text
    - Font
    - Color (On Hover)

- **Description**
  - Text
    - Font

- **Tickets**
  - Label
    - Text
      - Font
  - Text
    - Font
  - Banner
    - Background
      - Color
    - Text
      - Font

- **Organizer**
  - Label
    - Text
      - Font
  - Text
    - Font

- **Performer(s)**
  - Label
    - Text
      - Font
  - Text
    - Font

- **Buttons**
  - Alignment
    - Alignment
  - Button One
    - Text
      - Font
      - Color (On Hover)
    - Background
      - Color
      - Color (On Hover)
    - Border
      - Border
      - Color (On Hover)
    - Corner
      - Radius
    - Spacing
      - Spacing
  - Button Two
    - Text
      - Font
      - Color (On Hover)
    - Background
      - Color
      - Color (On Hover)
    - Border
      - Border
      - Color (On Hover)
    - Corner
      - Radius
    - Spacing
      - Spacing

- **Icons**
  - Fill
    - Color
  - Size
    - Height

## Contact / How can I get support?

If you're still having trouble or have any questions or feedback, contact me at [support@stephanieogaygarcia.com](mailto:support@stephanieogaygarcia.com)

## Changelog / Version History

### Version 3 (Mar 1, 2024)

**Fixed:** date formatting:

- No end date: Mmm DD, YYYY, HH:MM a
- Same start/end day: Mmm, DD, YYYY, HH:MM a - HH:MM a
- Different start/end day: Mmm, DD, YYYY, HH:MM a - Mmm, DD, YYYY, HH:MM a

**Added**:
- Sort order under settings
- All colour and font fields inherit from theme (adjust as needed from Styles).

### Version 2 (Jun 16, 2023)

**Fixed:**
- Updated schema times from hh (12-hour) to HH (24-hour)

### Version 1 (May 31, 2023)