Resource Library Pro for Framer

Installation

1. Add Resource Library Pro to your project from the Marketplace. It arrives as a code component in your Assets.
2. Drag it onto a page. It drops in with sample resources, filters and the default styling, ready to edit.
3. Set its Width to Fill to follow the page, or give it a fixed width. Leave Height on Auto: the component grows with its content.
4. Select the component and edit it in the properties panel. Content controls come first, then the Style · … groups.
5. Use Preview or the published site to try search, filters, the view toggle and the drawer. On the canvas the cards render as a static layout so they stay easy to select.

Features

• Category Filtering — Filter pills are built from the categories you enter, sorted, with an “All” option first. Click to filter instantly.
• Live Search — Results update on every keystroke and match resource titles, descriptions and resource types.
• Grid & List Views — A card grid and a compact list. Both views respond to the same filters and search.
• Gated / Free Badges — A visual label for resources behind a form and resources that are free to take.
• Type Badges — Each card shows its resource type, or a custom label of your own.
• Thumbnails — Optional images with editable height and corner radius, or a type icon placeholder.
• Detail Drawer — A right-side drawer with the full description, image, badges, author, date, format and a CTA button.
• Downloads — Link each resource to a URL or upload the file itself.
• Structured Data — A schema.org ItemList of your resources for search engines.

Content

The first controls in the panel set the section header.

• Eyebrow — Small uppercase label above the heading (e.g., “Resources”). Leave it empty to hide it.
• Heading — Main section heading. Leave it empty to hide it.
• Heading Tag — H1, H2, H3 or H4, to fit the page’s heading order.
• Subtitle — Descriptive text beneath the heading.
• Header Alignment — Left, Center or Right. Centered subtitles keep a comfortable line length.

Resources

Resources is a list in the panel. Click a row to edit it, use + to add one, and drag rows to reorder. Cards appear in the same order. Each resource has these fields:

• Title — Resource name, shown as the card heading and the drawer title.
• Description — Short summary on the card, clamped to three lines.
• Thumbnail — Card and drawer image. Empty shows a type icon placeholder.
• Resource Type — Whitepaper, eBook, Case Study, Webinar, Template, Guide, Report, Video, Toolkit or Checklist. Sets the type badge and the placeholder icon.
• Custom Type Label (optional) — Replaces the type badge text, for formats outside the list (e.g., Podcast, Newsletter, Course).
• Category — Groups resources under a filter pill.
• Resource URL — Address of the download or detail page, or a link to one of your Framer pages.
• Open in new tab — Opens the resource in a new tab.
• No follow — Adds rel=“nofollow” to the resource link.
• Resource file (download) — Upload a file to link to it directly. Takes the place of the Resource URL.
• Gated Resource — Shows the Gated badge instead of Free.
• CTA Text — Card call to action and drawer button text (e.g., “Download”, “Watch Now”).
• Drawer Details (Rich Text) — Longer description for the drawer, in HTML.
• Author — Shown in the drawer details.
• Date / Year — Shown in the drawer details, as written.
• File Info (e.g. PDF, 24 pages) — Shown in the drawer as the Format.

Adding thumbnails

Click Thumbnail and pick or upload an image. Framer serves it at the right size for each screen. Add alt text in the image picker; without it, the resource title is used. Leave Thumbnail empty to show the type icon placeholder instead.

Linking files and pages

For a page or an external file, paste the address in Resource URL, or link to one of your Framer pages. For a file you host in Framer, use Resource file (download): upload a PDF, document, spreadsheet, slide deck, archive, image, audio or video file and it takes the place of the Resource URL. Open in new tab and No follow apply to whichever is set, on the card link and on the drawer button.

Drawer details

Drawer Details (Rich Text) accepts a small set of HTML tags: <p>, <br>, <h3>, <h4>, <ul>, <ol>, <li>, <strong>, <b>, <em>, <i>, <u>, <code>, <blockquote> and <a href>. Everything else is removed before it reaches the page: scripts, embeds, images, styles, event attributes and unsafe links. Leave it empty and the drawer shows the short description.

Settings

• Default View — Grid or List, the layout on page load.
• Show Search — Shows the search field.
• Show Category Filters — Shows the filter pills.
• Show View Toggle — Shows the grid and list buttons.
• Show Type Badge — Shows the type badge on cards and in the drawer.
• Show Gated/Free Badge — Shows the gated or free badge on cards and in the drawer.
• Show Description — Shows descriptions on the cards. The drawer always shows them.
• Show Thumbnail — Shows card images and placeholders. Off gives text-only cards; the drawer still shows images.
• Show Resource Count — Shows how many resources match the current filter and search.
• Search Placeholder — Placeholder text of the search field, also its accessible label.
• All Categories Label — Text of the first filter pill.
• No Results Text — Message shown when nothing matches.
• Gated Badge Label — Text of the gated badge.
• Free Badge Label — Text of the free badge.
• Card Click Action — Open Detail Drawer, Go to Resource URL (Direct Link) or No Action (Display Only). See Click Modes below.
• CTA Style — Text Link with Arrow, or Filled Button.
• Resource Count Suffix — Text after the count (e.g., “resources”, “items”, “results”).
• Emit structured data — Adds schema.org markup for search engines. See Structured Data below.

Filters, Search and Views

• Filters — One pill per category, sorted, after the “All” pill. Categories match on exact text, so “Design” and “design” are two pills. A resource with an empty category shows under “All” only.
• Search — Matches the title, the description and the resource type (e.g., “case-study”), ignoring case and surrounding spaces. Custom type labels, categories and authors are not searched.
• Filter and search together — A card shows when it matches both the active filter and the search.
• No results — When nothing matches, the grid hides and the No Results Text appears.
• Views — The view toggle switches between grid and list. With Show View Toggle off, the Default View is the only view.
• State — Filter, search and view reset when the page reloads. Nothing is stored in the address bar.

Click Modes and the Drawer

• Open Detail Drawer — The default. Clicking a card, or pressing Enter or Space on it, opens the drawer from the right. The close button, a click on the dimmed backdrop and Escape close it. The page doesn’t scroll while the drawer is open.
• Go to Resource URL (Direct Link) — The whole card is a link to the resource file or URL, with the new-tab and no-follow toggles applied.
• No Action (Display Only) — Cards are not clickable and the CTA is a label only. Use it for a catalogue view; for downloads, choose one of the other modes.
• Drawer content — Image (when set), the type and gated/free badges (following the badge settings), title, drawer details or description, then Author, Date, Category and Format when filled in, and the CTA button.
• Drawer colors — The drawer uses the Card Background color at full strength. With a transparent card it uses the Section Background, and with both transparent a dark #1a1a1a panel.

Style Controls

Each group is a Style · … entry in the panel. Click it to open the group.

Style · Container

• Max Width (px) — Widest the section gets, centered. 0 for full width.
• Horizontal Padding (px) — Space on the left and right. It narrows to 16px at the mobile breakpoint.

Style · Colors

Bind any of these to your project color styles.

• Section Background — Background of the whole section. Transparent by default.
• Heading Color — Section heading.
• Eyebrow Color — Eyebrow label.
• Subtitle Color — Subtitle.
• Card Background — Card fill, the drawer panel and the button text color.
• Card Border Color — Card border, the drawer edge and the drawer detail dividers.
• Card Hover Border Color — Card border on hover.
• Card Title Color — Card and drawer titles, the drawer button fill and the close icon.
• Card Description Color — Descriptions, the count, the empty message and the placeholder icon.
• Type Badge Background — Type badge fill and the thumbnail placeholder.
• Type Badge Text Color — Type badge text.
• Gated Badge Background — Gated badge fill.
• Gated Badge Text Color — Gated badge text.
• Free Badge Background — Free badge fill.
• Free Badge Text Color — Free badge text.
• Search Background — Search field fill.
• Search Border Color — Search field border.
• Search Focus Border Color — Search border and focus rings while focused.
• Search Text Color — Search text, icon and placeholder.
• Filter Background — Filter pill fill.
• Filter Active Background — Active filter pill and active view button.
• Filter Text Color — Filter text and the view button icons.
• Filter Active Text Color — Text on the active pill and active view button.
• Filter Border Color — Filter and view button borders.
• CTA Color — Card CTA, drawer links and the card focus ring.
• Shadow Color — Color of the card shadows.

Style · Heading Font and Style · Body Font

Font pickers. See Fonts below.

Style · Typography

• Heading Font Size (px) — Section heading. Scales down at the tablet and mobile breakpoints.
• Subtitle Font Size (px) — Subtitle and the empty message.
• Eyebrow Font Size (px) — Eyebrow label.
• Card Title Font Size (px) — Card titles; the drawer title is a little larger.
• Card Description Font Size (px) — Card and drawer descriptions.
• Filter Font Size (px) — Filter pills, the search field and the count. Also sets the toolbar control height.
• Search Font Size (px) — Kept for compatibility; the search uses Filter Font Size.
• CTA Font Size (px) — Card CTA and drawer button.
• Badge Font Size (px) — All badges.

Style · Card

• Card Padding (px) — Space inside the card body.
• Card Border Radius (px) — Card corners, also the CTA button and drawer button corners.
• Card Border Width (px) — 0 for no border.
• Card Shadow — None, Small, Medium or Large.
• Card Hover Shadow — None, Small, Medium, Large or Extra Large.
• Thumbnail Height (px) — Image height. 0 for a 16:9 image.
• Thumbnail Border Radius (px) — Top corners of the image.
• Gap Between Cards (px) — Grid gap. At 0 the card borders meet in a single line.
• CTA Button Padding Vertical (px) — With the Filled Button style, and the drawer button.
• CTA Button Padding Horizontal (px) — With the Filled Button style, and the drawer button.
• Badge Border Radius (px) — Badge corners.
• Badge Padding Vertical (px) — Badge padding.
• Badge Padding Horizontal (px) — Badge padding.
• Title Font Weight — Regular, Medium, Semibold or Bold.
• List View Thumbnail Width (px) — Image width in list view.

Style · Grid

• Grid Columns — Columns in grid view.
• List View Gap (px) — Space between rows in list view.

Style · Toolbar

• Search Border Radius (px) — Kept for compatibility; the search uses Filter Pill Radius.
• Search Padding (px) — Kept for compatibility; the search uses the filter padding.
• Filter Pill Radius (px) — Corners of the pills, the search field and the view buttons.
• Filter Padding Vertical (px) — Pill and search padding.
• Filter Padding Horizontal (px) — Pill padding and the search text inset.
• Toolbar Gap (px) — Space between the filters and the search group.

Style · Spacing

• Padding Top (px) — Space above the section content.
• Padding Bottom (px) — Space below it.
• Header to Toolbar Gap (px) — Space under the header.
• Toolbar to Cards Gap (px) — Space under the toolbar.

Style · Responsive

• Tablet Breakpoint (px) — Component width where the grid drops to two columns.
• Mobile Breakpoint (px) — Component width where the grid drops to one column.

Fonts

• Style · Heading Font — Sets the section heading, the card titles, the drawer title and the drawer subheadings. Its weight and italic style apply to the section heading.
• Style · Body Font — Sets everything else: eyebrow, subtitle, search, filters, count, badges, descriptions, CTAs, the drawer text and the empty-state message. Only the family is used.
• Defaults — Left untouched, the heading font shows Framer’s default serif (Noto Serif) in the panel and renders as Georgia, the classic default of this component. The body font renders Framer’s default sans (Inter); pick Arial for the classic body default.
• Your own fonts — Any other family you pick, including Google and uploaded fonts, is used as chosen. Picking Noto Serif for the heading on purpose also gives Georgia; choose another serif if you want Noto Serif itself.
• Sizes — Font sizes come from Style · Typography. The size inside the font pickers has no effect.

Structured Data

With Emit structured data on, the component adds a schema.org ItemList of your resources as JSON-LD, so search engines can read the library. Each resource is listed with its title, description, link, type, category, image and whether it is free.

• Type — Case studies are listed as an Article; whitepapers, eBooks, reports, guides, templates, toolkits and checklists as a DigitalDocument; videos, webinars and anything else as a CreativeWork.
• Links — A resource still linking to # is listed without a link. For files, the format is read from the extension (PDF, Word, Excel, PowerPoint, CSV, ZIP).
• Dates — Date / Year is included when it is written as 2026, 2026-03 or 2026-03-15. Free text like “Spring 2026” still shows in the drawer but is left out of the data.
• Turning it off — Switch it off when the page already describes these resources in its own structured data, to avoid duplicates.

Accessibility

• Semantic HTML — A section with a real heading hierarchy (the Heading Tag is yours to set), buttons for filters and views, and links for direct-link cards.
• Keyboard — Tab reaches the filters, the search field, the view buttons and the cards. Enter or Space opens a card’s drawer, and Escape closes it.
• Drawer focus — Focus moves into the drawer when it opens, stays inside while it is open, and returns to the card when it closes.
• Labels — The search field (labelled with the Search Placeholder), the view buttons, the drawer and its close button carry descriptive labels.
• Focus indicators — Visible focus rings on cards, filters, view buttons and the search field, shown for keyboard use.
• Images — Thumbnails use the alt text from the image picker, or the resource title.

Responsive Behavior

Breakpoints follow the width of the component itself, so the layout adapts the same way in a full-width section or a narrow column.

• Desktop — The grid uses your column count. Filters sit left; search, the view toggle and the count sit right on one row.
• Tablet — At the tablet breakpoint the grid drops to two columns, the heading scales down and the toolbar stacks.
• Mobile — At the mobile breakpoint the grid drops to one column, the side padding narrows to 16px and the filter pills become a single row that scrolls sideways.
• List view — Thumbnail and text sit side by side, and stack on small screens.

FAQ and Troubleshooting

• Clicking a card does nothing on the canvas — The canvas shows a static layout. Open Preview or the published site to use the drawer, filters and search.
• The heading shows Georgia, but the panel says Noto Serif — That is the default described under Fonts. Pick any other serif to change it.
• My category shows up twice — Category text must match exactly, including capitals and spaces.
• The drawer opens behind something or in the wrong place — The drawer opens on top of the whole page, above other layers and outside any parent effects. If another element still covers it, check that element’s z-index is below 99999.
• A resource has no link in the drawer — The drawer button uses the Resource file when set, otherwise the Resource URL. An empty value, or a link that isn’t a web, email or phone address (such as javascript: or data:), links to #.
• Some of my HTML disappeared — Drawer Details keeps only the tags listed under Drawer details. Other tags keep their text, and scripts, embeds, images and inline styles are removed for safety.
• I want only one column on tablets — The tablet layout always uses two grid columns. Set the Tablet Breakpoint lower, or use the list view.
• A setting seems to do nothing — Search Font Size, Search Border Radius and Search Padding are kept for compatibility and have no effect: the search field follows the filter size, radius and padding.
• Two libraries on one page — Each instance keeps its own filters, search, view and drawer.
• On a phone the filter pills run off the edge — That row scrolls sideways at the mobile breakpoint; swipe it. Search and the view buttons sit on their own row below.
• The mobile layout appears on desktop — Breakpoints follow the component’s width. In a narrow column, lower the Mobile Breakpoint and Tablet Breakpoint.
• I don’t want the structured data — Turn off Emit structured data. Do that when the same resources are already described elsewhere on the page.
• Changing the order of the cards — Drag the rows in the Resources list. Cards keep that order; only the filter pills are sorted.

Known Limits

• Rich text — Drawer Details is an HTML text field limited to a safe set of tags; Framer has no rich-text editor for code components.
• Gated — Gated is a label. The component doesn’t collect emails or lock files; link gated resources to a page with your form.
• Empty list — If you remove every resource, the header and toolbar stay and the grid is empty.
• Fonts — The panel can’t preset a font family, so an untouched heading font shows Noto Serif in the panel and renders Georgia, and the body renders Framer’s Inter until you pick Arial (see Fonts). Picking Noto Serif for the heading also gives Georgia.
• Breakpoints — Tablet and mobile layouts follow the component’s own width, not the screen. In a narrow column the mobile layout can apply on a desktop screen; that is by design. On a full-width layer they match the screen, give or take a scrollbar.
• All controls always visible — Every control stays in the panel, even when it has no effect in the current setup. CTA Button Padding applies only with the Filled Button style; the badge colors only when that badge is shown; List View Thumbnail Width only in list view.
• Compatibility controls — Search Font Size, Search Border Radius and Search Padding have no effect; the search field follows the filter size, radius and padding.
• Tablet columns — The tablet layout always uses two grid columns, even with Grid Columns set to one.
• Search scope — Search covers titles, descriptions and resource types; custom type labels, categories and authors are not searched.
• Many resources — Every resource is in the page, filtered in place; there is no pagination. Keep the list to what a visitor can scan.
• Labels in English — The drawer labels Author, Date, Category and Format, and the view button labels, are fixed English text.

Demo Notes

• Demo 1 (Monochrome Minimal) — Inter throughout on white. Type badges only, gated/free hidden. Varied CTA text and drawer details. Three-column grid, border-only cards, no shadows, 6px filter pills.
• Demo 2 (Light Warm) — Libre Baskerville and Inter on a #f7f4f0 warm ivory band; the component background is transparent so it blends in. Gated/free badges only, type badges hidden. Brown #8b5e3c accent, fully rounded filter pills, two-column grid with author, date and file info.
• Demo 3 (Dark Gold) — Cormorant Garamond and DM Sans on a #0b0b0b background. Both badge types shown. Gold #d4a853 accent. List view by default, no thumbnails, borders that meet in a single line.