Power Plus - Renderer Block (Cards)

The Block Renderer displays each data item as a card or tile. Cards are a versatile visual format that works well for blog posts, products, team members, job listings, partner logos, resources, and event listings.

The renderer is powered by the Isotope layout library, which provides advanced layout modes like masonry (Pinterest-style staggered grids), packery (bin-packing), and fitted rows. Each card can display multiple data fields (images, text, links), support hover overlays, 3D tilt effects, and animate into view as the visitor scrolls.

Configuration

Field	Type	Description
Name	Text	A unique identifier for this renderer (e.g. `product_renderer`, `blog_renderer`). The List module references this name in its Renderer Name field.

Fields (Repeating Group)

Each field defines a piece of data displayed on the card. You can add as many fields as needed — for example, an image field, a title field, a description field, and a price field. Fields are rendered in order from top to bottom within each card.

Field Property	Description
Name	A CSS class suffix used for styling. For example, `image` produces the class `pwr-list-field-image` on the HTML element. This lets you target specific fields in custom CSS. Use descriptive, lowercase names: `image`, `title`, `description`, `price`, `category`, `date`.
Display	Controls the HTML element type. `text` — renders as a `<div>` containing your HTML content template. `image` — renders as an `<img>` tag (the Value provides the `src` URL). `input` — renders as a `<input>` form field (used by interactive lists like the cart). `link` — renders as an `<a>` tag.
Value	A JSONata expression that extracts the primary data value. For images, this is the image URL: `[[ object.values.image.url ]]`. For inputs, this is the default value. The expression is evaluated against each data object — `object` refers to the current item.
Alt Text	For images only. A JSONata expression for the image’s alt attribute. Example: `[[ object.values.image.altText ]]` or `[[ object.values.name ]]`. Always set this for accessibility.
Content	For text display. A rich text (HTML) template with embedded JSONata expressions in `[[ ]]` brackets. For example: `<h3>[[object.name]]</h3><p>[[object.description]]</p>`. This is where you build the visual layout of each card’s content area. You can use any HTML, including classes from the POWER THEME.
Enable Content on Hover	When checked, this field’s content is hidden by default and only appears when the visitor hovers over the card (or taps on mobile if the touch button is enabled). This is useful for “Read More” prompts or secondary details.
Hover Content	Rich text shown on hover instead of the field’s regular Content. Supports the same JSONata syntax.
Enable Match Height	When checked, all cards in the same row are forced to the same height for this field. Useful for ensuring alignment when card content varies in length.
Link	Makes this specific field clickable. You can set the URL (JSONata expression), whether it opens in a new tab, and whether to add `rel="nofollow"`. For example, set the image field’s link to `[[ object.values.link ]]` to make the card image clickable.
3D Box Effect	Enables a 3D perspective tilt on hover for this specific field. The card tilts toward the mouse cursor position, creating a floating, interactive feel. Works best on image fields.

Global Card Settings

These settings apply to the entire card, not individual fields.

Field	Description
Enable Content on Hover	A global hover overlay for the card. When enabled, a semi-transparent overlay with custom content appears on hover. The overlay covers the entire card and is useful for “Read More” prompts, quick action buttons, or content summaries.
Hover Content	Rich text template for the global hover overlay. Supports JSONata. Example: `<div class="hover-prompt"><strong>Read More →</strong></div>`.
Enable Touch Button	On touch devices (phones, tablets), CSS hover doesn’t work reliably. When enabled, a “TOUCH” button appears on each card. Tapping it triggers the hover state, showing the hover content. Tapping again dismisses it. This ensures the hover interaction works on all devices.
Preload Images	When `true` (the default), all images in a card are loaded before the card is revealed. This prevents layout jumps that occur when images load after the card is already positioned. Set to `false` for faster initial rendering at the cost of possible layout shifts.
Link	A global link that makes the entire card clickable. Set the URL as a JSONata expression (e.g. `[[ object.values.link ]]` or `product/[[ object.hs_sku ]]`). You can configure the target (`_blank` for new tab) and `rel` attribute (`nofollow`).

Layout Options

Field	Default	Description
Layout Type	`vertical`	`vertical` — cards flow in a grid from left to right, top to bottom (the standard behavior). `horizontal` — cards flow in a single horizontal row (used for horizontal scrolling or single-row displays).
Layout	`masonry`	The Isotope layout mode. See the Layout Modes section below for detailed descriptions.
Items Per Page	6	How many cards to render before showing the “Load More” button or triggering infinite scroll. Choose based on the card size and typical viewport: 6–12 for large cards, 12–24 for small cards, 4–6 for wide/horizontal cards.
Columns	3	The number of columns in vertical layout. The framework adjusts this responsively: 3 columns on desktop might become 2 on tablet and 1 on mobile.
Rows	(auto)	For horizontal layout only. The number of rows visible before scrolling.
Height Mode	`auto`	For horizontal layout. `auto` — card height is determined by content. `same_row` — all cards in a row have equal height. Or set a fixed pixel height.
Spacing	`default`	Gap between cards. `default` — uses the theme’s standard spacing. `none` — no gap (cards touch edges). `hs-column` — uses HubSpot’s column gap.

Visual Style

The renderer includes several built-in CSS styles that provide complete card designs out of the box:

Style	Description
`default`	Clean cards with minimal styling. No background, no border, no shadow. Good as a starting point for custom designs.
`blog_1`	Blog-style cards: image fills the top portion, text content below with padding, rounded corners, subtle shadow. Optimized for content listings with featured images.
`product`	Product cards: square image container, bold product name, subtle price text, clean layout. Designed for e-commerce product grids.
`team_reduced`	Team member cards: circular or portrait photo, centered name and job title. Compact design for “Meet the Team” sections.
`job`	Job listing cards: title-focused layout with icon prefixes for location and department metadata. Clean, professional look for career pages.
`custom`	No built-in styles. Instead, specify a Custom Style Name — the filename (without `.css`) of a custom stylesheet in `css/components/shared/list/block/`. This gives you complete control over the card design.

Advanced

Field	Description
Renderer	The JavaScript renderer class. Default: `BlockListRenderer`. Override this to use a custom renderer class that extends `BlockListRenderer` with additional behavior. For example, the Wishlist uses `ProductListRenderer` which adds heart/wishlist toggle buttons to each card. The renderer class must be registered with `registerListRendererClass()`.
Custom Style Name	When Style is `custom`, this specifies the CSS file. The value is the filename without extension — for example, `content_library` loads `css/components/shared/list/block/content_library.css`.

Examples

Blog Cards with Hover and 3D Effect

A content library or blog listing with image cards that tilt on hover and show a “Read More” overlay:

Renderer Module:
  Name: blog_renderer
  Style: blog_1
  Layout: fit, 3 columns, 6 items per page
  Fields:
    - Name: image
      Display: image
      Value: [[ object.values.image.url ]]
      Alt Text: [[ object.values.image.altText ]]
    - Name: name
      Display: text
      Content: <h4>[[object.values.name]]</h4>
  Hover Content: <p><strong>Read More</strong></p>
  Link: [[object.values.link]]
  3D Box Effect: enabled

When the visitor hovers over a card, the card tilts in 3D and a “Read More” overlay appears. Clicking anywhere on the card navigates to the linked page.

Product Catalog with Dual Images

A product grid that shows a secondary image on hover (common in e-commerce for showing a product from a different angle):

Renderer Module:
  Name: product_renderer
  Style: product
  Layout: fit, 4 columns, 8 items per page
  Fields:
    - Name: product-img
      Display: image
      Value: [[ object.hs_images ? object.hs_images.$split(',')[0] : '' ]]
      Alt Text: [[ object.name ]]
    - Name: product-hover-img
      Display: image
      Value: [[ object.hs_images ? object.hs_images.$split(',')[1] : '' ]]
      Enable Content on Hover: true
    - Name: name
      Display: text
      Content: [[object.name]]
    - Name: price
      Display: text
      Content: [[ $formatNumber(object.hs_price_eur, "#,##0.00") ]]€
  Link: product/[[object.hs_sku]]
  Advanced Renderer: ProductListRenderer

The CRM product’s hs_images field stores comma-separated image URLs. $split(',')[0] gets the first image (default), and $split(',')[1] gets the second (shown on hover). The ProductListRenderer extends BlockListRenderer to add wishlist heart buttons.

Content Library Cards with Tag Badges

A content library showing typed resources with tag badges and a custom CSS style:

Renderer Module:
  Name: content_library_renderer
  Style: custom (content_library)
  Layout: fit, 3 columns
  Fields:
    - Name: image
      Display: image
      Value: [[ object.values.cover_image.url ]]
      Alt Text: [[ object.values.name ]]
    - Name: content
      Display: text
      Content: |
        [[ for item in object.values.types ]]
          <span class="pwr-tag">[[item.name]]</span>
        [[ endfor ]]
        <div class="pwr-image-box__title">[[object.values.name]]</div>
  Hover Content: <p><strong>[[object.values.link_label]]</strong>...</p>
  Link: [[object.values.link]]
  3D Box Effect: enabled

The [[ for item in object.values.types ]]...[[endfor]] loop iterates over the HubDB multi-select types column and renders a badge for each tag. This is a powerful pattern for showing multiple tags or categories per item.

Job Listing Cards

Cards for a Greenhouse-powered job board with location and department metadata:

Renderer Module:
  Name: jobs_renderer
  Style: job
  Fields:
    - Name: title
      Display: text
      Content: [[object.title]]
    - Name: location
      Display: text
      Content: [[object.location.name]]
    - Name: department
      Display: text
      Content: [[object.metadata[name='Department'].value]]
  Link: [[object.absolute_url]] (opens in new tab)
  Hover Content: <a href="[[object.absolute_url]]">Start your journey now ...</a>

The JSONata expression object.metadata[name='Department'].value filters the job’s metadata array to find the entry named “Department” and extracts its value. This is a common pattern when working with APIs that return metadata as key-value arrays.

Hover & 3D Effects

The Block renderer supports several interactive visual effects that enhance the visitor experience:

Hover Content Overlay: A semi-transparent layer that slides over the card when the visitor hovers. Typically used for “Read More” prompts, action buttons, or quick summaries. The overlay can contain any HTML including links, buttons, and formatted text with JSONata expressions.
3D Box Effect: Cards tilt in 3D perspective as the mouse moves over them. The tilt direction follows the cursor position — moving the mouse to the left edge tilts the card left, moving to the top edge tilts it up. Combined with a subtle shadow, this creates a “floating card” effect. The effect is powered by CSS transforms and runs at 60fps for smooth animation.
Touch Button: On mobile devices, CSS hover doesn’t work (there’s no cursor to hover with). When the touch button is enabled, a small “TOUCH” prompt appears on each card. The first tap reveals the hover content; a second tap triggers the card’s link. This ensures the hover interaction works across all devices.

Layout Modes

The layout mode determines how cards are arranged within the grid. All modes use the Isotope library for positioning and animation.

Mode	Behavior	Best For
Masonry	Pinterest-style layout. Cards are placed in the shortest column, creating a staggered, natural-looking grid. Cards maintain their natural height.	Blog posts with varying image heights, mixed content types, visually interesting layouts.
Packery	Bin-packing algorithm. Cards are packed as tightly as possible, filling gaps. Similar to masonry but with better gap-filling.	Dense, magazine-style layouts where you want minimal whitespace.
Fit	Cards are arranged in rows. All cards in the same row have equal height (the height of the tallest card in that row).	Product grids, team pages, any layout where aligned rows are important.
Cells	All cards have the same fixed size. The grid is completely uniform.	Logo grids, icon galleries, thumbnail grids.
Stack	Cards are stacked vertically in a single column.	Sidebar content, mobile-first layouts, narrow containers.

Image Handling

The renderer includes smart image handling:

Image Preloading: When Preload Images is enabled (the default), the renderer waits for all images in a card to finish loading before revealing the card. This prevents layout jumps that occur when Isotope calculates positions before images are loaded.
Image Resizing: The framework automatically generates HubSpot image resize URLs for images hosted on hubspot.net. This means large images are scaled down to the card’s display size, reducing bandwidth and improving load times. For example, a 2000×1500 image will be served at the card’s actual display width instead.
Fallback Handling: If an image URL is empty or fails to load, the card is still rendered without the broken image icon.

Discovering Available Fields

If you’re unsure what data fields are available for your renderer configuration, use debug mode. Preview the page in HubSpot, open the browser console (F12 → Console), and look for the “Available JSONata placeholders in Block Renderer” message. It lists every field, its type, and the exact [[ object.field.path ]] expression you can copy into your Content or Value fields.