Use the cubby portfolio component to display a full or filtered list of your facilities
The Cubby Portfolio component display a portfolio - a list of facilities. The list is made up of either all published facilities in the Marketing site or a filtered list of facilities which can be setup within the Marketing site. Changing your storefront-wide defaults can be done through the Marketing site -> Components -> Portfolio page.
Basic usage
To place a Cubby Portfolio component on your page add the following snippet.
<cubby-portfolio></cubby-portfolio>
This will display a list of all published facilities on the page.
Targeting specific portfolios
You can create and edit portfolios in the Marketing site. These are subsets of all your facilities that are controlled by filters. You can filter by specifying exact facilities you'd like to add to your portfolio, facilities tagged by specific tags or facilities within a radius around a certain location. Each portfolio has a "slug" property which can be overridden and this slug can be passed to the Cubby Portfolio component to tell it which portfolio to display. As an example, you might have two portfolios, one only showing facilities within a radius in New York, while the other shows all facilities tagged as "Brand new". If their respective slugs are "new-york" and "brand-new" you can display them in the following way
<cubby-portfolio portfolio="new-york"></cubby-portfolio>
<cubby-portfolio portfolio="brand-new"></cubby-portfolio>
Parameters
You can use html attributes to set parameter values on the Cubby Portfolio component.
<cubby-portfolio layout="list"></cubby-portfolio>
Note that most settings accepted by the Cubby Portfolio component can be set within the Marketing site. If you want to apply these settings to all or most Cubby Portfolio components within your site you should do so in the Marketing site, which will make the settings the default. Parameters passed through attributes are generally considered overrides.
A full list of all parameters for the Cubby Portfolio component
| Attribute name | Possible values | Description |
| portfolio | Any valid portfolio slug | Forces the component to display a specific portfolio of facilities |
| layout | grid | carousel | list |
Changes the layout of items within the component. grid - items are placed in columns, overflowing items go to the next row carousel - items are placed in columns, in case of overflowing items vertical scrolling is enabled list - items are placed in rows |
|
imageAspectRatio
|
square | wide | horizontal | vertical
|
The aspect ratio of facility images. square - 1:1 wide - 16:9 horizontal - 4:3 vertical - 3:4 |
|
spacing
|
normal | none | dense | spacious
|
The space between individual facility items. normal - 8px none - 0px dense - 4px spacious -16px Can be further customised through CSS variables |
|
title-source
|
name | description | address | phone | email | schedule
|
Controls the data shown in the title of each item |
|
body-sources
|
A common separated list of any of the following
name | description | address | phone | email | schedule
|
Controls the data shown in the body of the each item. The order they're listed in will affect the order they appear in. |
|
arrow-variant
|
arrow_forward | chevron_right | arrow_right
Also accepts any valid Material Symbols name
|
Only used when layout="carousel" and there are enough facility items for the container to horizontally overflow. |
Advanced styling
The portfolio component has support for all standart Cubby CSS variables.
Parts
The Cubby Portfolio component supports the following part selectors.
| Part name | Description |
| card | The container for a single item within the component. Each item represents one facility. |
| card-image | The container for the image or images of a single item |
| card-title | The <h2> element representing the title of a single item |
| card-body | The container of all body elements |
| card-body-name | card-body-description | card-body-address | card-body-phone | card-body-email | card-body-schedule | Selectors for individual elements that can appear within the card-body |