Resource Library Pro for HubSpot

Features

• Category Filtering — Auto-generated filter pills from resource categories. Click to filter instantly with smooth transitions. Includes an “All” option and resource count.
• Live Search — Real-time search across resource titles and descriptions. Debounced input with configurable placeholder text.
• Grid & List Views — Toggle between card grid and compact list layouts. Default view is configurable. Both views respond to the same filters and search query.
• Gated / Free Badges — Visual indicators for resources that require form submission vs. free downloads. Badge text, colors, and visibility are all configurable.
• Type Badges — Automatically displays the resource type (eBook, Report, Webinar, Template, etc.) as a styled badge on each card.
• Thumbnails — Optional image thumbnails with configurable height and border radius. Supports object-fit cover for consistent aspect ratios.
• Detail Drawer — Click any resource card to open a right-side slide-in drawer with full details, thumbnail, badges, and CTA button.
• Card Click Action — Choose what happens when a user clicks a card: open detail drawer, go directly to the resource link, or do nothing (CTA-only interaction).
• CTA Style — Display the call-to-action as a text link or a styled button. Button style includes configurable padding.
• Resource Metadata — Optional author, date, and file info fields per resource. Mix and match freely for realistic, varied card layouts.

Content Fields

Header

• Eyebrow — Small uppercase label above the heading (e.g., “Resources”).
• Heading — Main section heading with configurable heading tag (H2, H3, H4).
• Subtitle — Descriptive text beneath the heading.

Resources (Repeater)

Each resource has the following fields:

• Title — Resource name displayed as the card heading.
• Description — Short summary text for the resource.
• Thumbnail — Image field with src and alt. Leave empty for text-only cards.
• Resource Type — Dropdown: Whitepaper, eBook, Case Study, Webinar, Template, Guide, Report, Video, Toolkit, Checklist.
• Category — Free-text field used for filter grouping. Resources with the same category text are grouped together.
• Resource URL — Link field for the download or detail page.
• Is Gated — Boolean toggle. When true, shows a “Gated” badge.
• CTA Text — Custom button/link text per resource (e.g., “Download”, “Watch Now”, “Read Case Study”).
• Author — Optional text field for the resource author name.
• Date — Optional date field displayed on the card and in the detail drawer.
• File Info — Optional text for file details (e.g., “PDF, 42 pages”, “Google Sheets”, “Figma + ZIP”).

Settings

• Default View — Grid or List. Controls which layout appears on page load.
• Show Search — Toggle the search input on/off.
• Show Category Filters — Toggle filter pills on/off.
• Show View Toggle — Toggle the grid/list switcher on/off.
• Show Type Badge — Toggle resource type badges on/off.
• Show Gated/Free Badge — Toggle gated/free indicators on/off.
• Show Description — Toggle resource descriptions on/off.
• Show Thumbnail — Toggle thumbnails on/off. When off, cards are text-only.
• Show Resource Count — Toggle total matching resource count on/off.
• Count Suffix — Customize the text after the resource count (e.g., “resources”, “items”, “results”).
• Card Click Action — Choose behavior when a card is clicked: “drawer” opens the detail panel, “direct link” navigates to the resource URL, “none” disables card click (CTA only).
• CTA Style — Display the call-to-action as a “link” (text with arrow) or “button” (filled button with configurable padding).
• Custom Text — Search placeholder, “All” label, no-results message, gated/free badge labels are all editable.

Style Controls (60+)

Container (2)

Max width and horizontal padding for the entire section.

Colors (25)

• Section — Background color with opacity control.
• Header — Heading, eyebrow, and subtitle colors.
• Cards — Card background, border, hover border, title, and description colors.
• Badges — Type badge (bg + text), gated badge (bg + text), free badge (bg + text).
• Search — Background, border, focus border, and text colors.
• Filters — Default bg, active bg, text, active text, and border colors.
• CTA & Shadow — CTA link color and card shadow color.

Typography (10)

• Font Pickers — Separate heading and body font pickers (inherit from theme or override).
• Font Sizes — Independent control for heading, subtitle, eyebrow, card title, card description, filter, search, CTA, and badge text sizes.

Card (8)

• Layout — Padding, border radius, border width, gap between cards.
• Shadow — Card shadow and hover shadow (none, sm, md, lg, xl).
• Thumbnail — Image height and border radius.
• Badge Border Radius — Independent border radius control for type and gated/free badges.
• CTA Button Padding — When CTA style is set to “button”, control horizontal and vertical padding independently.

Grid (2)

Number of grid columns and list view gap between items.

Toolbar (6)

Search border radius, search padding, filter pill radius, filter vertical/horizontal padding, toolbar gap.

Spacing (4)

Section padding top/bottom, header-to-toolbar gap, toolbar-to-cards gap.

Responsive (2)

Tablet breakpoint (grid collapses to 2 columns) and mobile breakpoint (grid collapses to 1 column).

Accessibility

• Semantic HTML — Section, heading hierarchy, and list structure for screen readers.
• Keyboard navigation — All interactive elements (search, filters, view toggle, resource links) are keyboard accessible.
• ARIA labels — Search input, filter buttons, and view toggle have descriptive ARIA labels.
• Focus indicators — Visible focus rings on all interactive elements with focus-visible styling.
• Live regions — Resource count updates announced to assistive technology.
• Color contrast — Default color combinations meet WCAG 2.1 AA contrast requirements.

Responsive Behavior

• Desktop — Full grid layout with configurable columns (default 3). Search and filters on a single toolbar row.
• Tablet — Grid collapses to 2 columns at the configurable tablet breakpoint (default 768px). Filters wrap naturally.
• Mobile — Single column layout at the configurable mobile breakpoint (default 480px). Search and filters stack vertically. Cards fill full width.
• List view — Adapts gracefully at all breakpoints, with thumbnail and content stacking on smaller screens.

Demo Notes

• Demo 1 (Monochrome Minimal) — Inter throughout on white. Type badges only (gated/free hidden). Varied CTA text and metadata. 3-column grid, 8 resources across Engineering, Product, Design, and Marketing. Border-only cards, no shadows, 6px radius filter pills.
• Demo 2 (Light Warm) — Libre Baskerville + Inter on #f7f4f0 warm ivory section wrapper. Module bg is transparent to blend with wrapper. Gated/free badges only (type badges hidden). Brown #8b5e3c accent. Rounded filter pills (50px radius). 2-column grid, 6 resources with author, date, and file info metadata.
• Demo 3 (Dark Premium) — Cormorant Garamond + DM Sans on #0b0b0b dark background. Both badge types shown. Gold #d4a853 accent. Default list view, no thumbnails. Author and date metadata. 6 resources across Strategy, Design, and Engineering.