Portfolio¶
A filterable grid of project / work cards - image, optional tag badge, title, and description - with category filter buttons, a responsive filter dropdown, and a Load more button. Best for: portfolio and case-study galleries, project showcases, work-sample grids, "our projects" sections with category filtering.
📷 Hero image
Target file: assets/img/portfolio/hero.webp
A filterable project gallery on a Light background: a row of category filter buttons across the top with the active filter highlighted in the Secondary color, above a three-column grid of project cards. Each card shows a project image with a small tag badge in the corner, a bold title, and a short description. Captured at desktop width.
At a glance¶
Portfolio Gallery Filterable
- What it does: renders a responsive grid of project cards. Cards can be grouped into named categories and filtered live with a button bar (which collapses into a dropdown on small screens), or supplied as a flat list. Each card has an image, an optional tag badge, a title, and a rich-text description, and can be made clickable.
- Best used for: a gallery of projects, case studies, or work samples where visitors filter by category and reveal more in batches.
- Not the right fit if: you want a simple image gallery without titles or filtering (use Image Box) or a set of feature cards (use Features).
- 🔗 Live demo: (add demo link)
Add it to your page¶
- In the HubSpot page editor, click Add and search for Portfolio.
- Drag it onto your page where you want the gallery.
- Choose a Card style (
simpleoroverlay). - With the filter bar on, add categories under Portfolio (categorized), each holding its own Portfolio card list. With it off, use the flat Portfolio cards list instead.
- Fill in each card: image, title, description, optional Show tag badge, and optional Applied link on card?.
- In the Style tab, set Layout › Columns per breakpoint, and optionally turn on the Load more button.
Design recipes¶
Each recipe is a look plus the exact fields to reproduce it.
Category filter buttons above a 3-up grid.
📷 Result
Target file: recipe-filtered-grid-button-bar.webp
A horizontal category filter bar led by an "All" button, the active filter in the Secondary color, above a three-column grid of project cards.
| Field | Set to |
|---|---|
| Category › Show category filter bar | on |
| Content › Card style | simple |
| Layout › Columns › Large / Medium / Small | 3 / 2 / 1 |
| Category › "All" button label | All |
Bordered, padded cards with a caption beneath the image.
📷 Result
Target file: recipe-simple-cards.webp
Project cards with the image on top and a bordered, padded, softly shadowed caption area beneath holding the title and description.
| Field | Set to |
|---|---|
| Content › Card style | simple |
| Simple card › Make a card | on |
| Simple card › Shadow › Card shadow | light-shadow |
| Simple card › Round corner › Card round corner | round-m |
Image-filling cards with a tint and caption over them.
📷 Result
Target file: recipe-overlay-cards.webp
Cards where the image fills the whole tile under a dark overlay tint, with the title and description sitting over the image and anchored to the bottom.
| Field | Set to |
|---|---|
| Content › Card style | overlay |
| Overlay card › Overlay › Overlay style | full_cover |
| Overlay card › Vertical content position | bottom |
| Overlay card › Overlay › Overlay color | bg-overlay-2 |
Show a first batch, then reveal more on click.
📷 Result
Target file: recipe-load-more.webp
A first batch of six project cards with a centered "Load more" button styled as btn-1 beneath the grid.
| Field | Set to |
|---|---|
| Load more › Show "Load more" button | on |
| Load more › Initial items shown | 6 |
| Load more › Items revealed per click | 6 |
| Style › Load more button › Style | btn-1 |
"I want to..." quick reference¶
| Goal | Setting |
|---|---|
| Filter projects by category | Content › Category › Show category filter bar + add categories under Portfolio (categorized) |
| Flat gallery with no filtering | Content › Category › Show category filter bar off (uses Portfolio cards list) |
| Image-fill cards with text over them | Content › Card style = Overlay |
| Bordered / padded cards | Content › Card style = Simple, then Simple card › Make a card |
| Caption at the top of an overlay card | Overlay card › Vertical content position = Top |
| Tint only behind the overlay caption | Overlay card › Overlay › Overlay style = Content specific |
| Corner "Featured" badge | Card › Show tag badge + Style › Tag › Placement = On image |
| Tag as a subtitle above the title | Style › Tag › Tag placement = Below image |
| One project per row on mobile | Layout › Columns › Small screen = 1 |
| Reveal cards in batches | Content › Load more › Show "Load more" button + Initial items shown |
| Filter buttons become a dropdown on tablet | Category › Responsive select box › breakpoint = Max tablet |
| Instant filter (no animation) | Layout › Filter transition duration = 0 |
| Make the whole card a link | Card › Applied link on card? + Link |
| Glass-effect simple card | Simple card › Background › Add backdrop blur + semi-transparent background |
| Tint the caption strip in a simple card | Simple card › Caption strip › Caption background |
Field reference¶
The editor is organized into a Content tab and a Style tab. Full field lists are grouped exactly as they appear in HubSpot. (249 fields total - expand each group as needed.)
Content tab¶
Section background settings
| Field | Type | Options | Default |
|---|---|---|---|
| Type | choice | none / color / gradient / image / video | none |
| Upload background image | image | - | - |
| Video | file | - | - |
Click to update content
| Field | Type | Default |
|---|---|---|
| Card style | choice (simple / overlay) | simple |
- Portfolio (categorized) (repeater): Category name + a nested Portfolio card repeater (image, show tag badge, tag text, "Also appears in", title, description, applied link + link).
- Portfolio cards (flat repeater): same card fields, used when the filter bar is off.
- Category: Show category filter bar (default on), "All" button label.
- Load more: Show button (off), initial items shown (6), items per click (6), button label.
Drag to section name / Developer use only
- Section name: custom anchor name for in-page links.
- Add custom css here: per-module CSS injection field.
Style tab¶
Color scheme
| Field | Options | Default |
|---|---|---|
| Color scheme | light / dark | light |
Drives the section's surface and text tokens. Set the background Type to none (shown as "Default (scheme)") to let the scheme supply the background colour.
Section background settings
Color token (default bg-white), gradient (bg-gradient-1 to 3), image / video overlay (none / bg-overlay-1 to 6) and position, optional blur, parallax (scale + speed), and dual radial glows (color, position, size, opacity - defaults secondary and tertiary).
Section divider settings
Divider type: none / shape / border / shadow.
- Border divider: from top/bottom/both, width, color (default
--tertiary). - Shadow divider: regular/light/dark/custom with x/y/blur/spread/color.
- Shape divider: 25 shapes, top/bottom/both, flip/invert, color or gradient, responsive heights.
Section spacing settings
| Field | Options | Default |
|---|---|---|
| Top | top-y-0 to top-4xl | top-l |
| Bottom | bottom-y-0 to bottom-4xl | bottom-l |
| Left | left-x-0 / left-m / left-l / left-xl | left-m |
| Right | right-x-0 / right-m / right-l / right-xl | right-m |
Top and Bottom also accept custom, which reveals Custom top / Custom bottom number fields for desktop, tablet, and mobile (defaults 80 / 60 / 40).
Layout settings
- Columns: per-breakpoint count (default 3 / 2 / 1).
- Gap between column: per-breakpoint gap (default 24 each).
- Section wrapper container / Inner content container: width + alignment control.
- Filter transition duration: show/hide animation time in ms (default 400; set
0for an instant snap).
Preset Settings (key groups)
- Alignment: text-left / center / right for the caption.
- Title: heading tag (h1 to h6 / typo / default
h5), color, transform, spacing. - Description: typo style, color, spacing.
- Image: aspect ratio (9 ratios) or custom height, round corner, shadow, focal point, spacing below.
- Tag: placement (on-image corner / below-image subtitle), position, background (color/gradient, default
bg-secondary), text color, transform, bold, padding, round corner, border, font size. - Load more button: style (
btn-1tobtn-8), alignment, responsive spacing above. - Category: spacing, alignment, gap, round corner, border, font; separate simple / hover / active state colors, plus a Responsive select box (breakpoint, full-width toggle, colors, border, round corner, select icon).
Simple card
| Field | Type | Default |
|---|---|---|
| Make a card | boolean | off |
| Background | choice (token / gradient / transparent / custom) | bg-white |
| Background › Add backdrop blur | boolean (glass effect) | off |
| Border | toggle + width + color | off |
| Card padding | responsive spacing | 20 / 16 / 12 px |
| Round corner | round-0 to round-xxl / custom | round-m |
| Shadow | none / light / regular / dark | shadow-none |
| Caption strip › Caption background | color / gradient behind the text area | none |
Overlay card
| Field | Type | Default |
|---|---|---|
| Overlay › Overlay style | full_cover / content_specific | full_cover |
| Overlay › Overlay color | bg-overlay-1 to 6 / custom color / gradient | bg-overlay-2 |
| Vertical content position | top / center / bottom | bottom |
| Caption padding | responsive spacing | 24 / 20 / 16 px |
| Round corner | round-0 to round-xxl / custom | round-m |
| Shadow | none / light / regular / dark | shadow-none |
Tips & gotchas¶
Categorized vs flat list
With Show category filter bar on, cards live under Portfolio (categorized). With it off, the module uses the flat Portfolio cards list. Fill in the list that matches your filter choice.
Overlay mode forces on-image tags
In Overlay card style the tag badge is always on the image. The Below image tag placement only applies in Simple card style.
Cross-category cards
Use Also appears in (a comma-separated list of category names already defined above) to show one card under several filters. It does not create new filter buttons.
Related modules¶
- Image Box: a simpler image-and-caption grid without live filtering.
- Features: icon or image feature cards for services and benefits.
- Blog Listing: a filterable, paginated grid of blog posts.