NovaCards

This is a special Gutenberg component that maps to a Nova <Card /> component in the component library.

The job of NovaCards is to abstract all the UI and settings that could go into hydrating a cards component, offering a consistent and powerful editorial UI experience.

Each block will have top-level keys which correspond to the slugs used by the component.

So in our example, the pmc/nova-cards-ribbon has a prop called ribbonCards which we know is the same key in both locations.

[
	"pmc/nova-cards-ribbon",
	{
		"blockIndex": "1",
		"mapTo": "pmc-ncr-01",
		"ribbonCards": {
			"button": {
				"text": "See More",
				"url": "/page/2/"
			}
			"cards": [
				{},
				{},
				{}
			],
			"config": {
				"control": [
					"heading",
					"button"
				],
				"defaults": {

				},
				"locked": [
					"heading",
					"button"
				]
			},
			"heading": {
				"text": "Latest"
			},
			"min": 3,
			"max": 3,
			"visibility": {
				"showImage": false,
				"showKicker": true,
				"showDek": false,
				"showTimestamp": false,
				"showByline": false
			}
		}
	}
],

ribbonCards is an instance of NovaCards, which is our Gutenberg equivelant of the <Cards /> component in the Nova component library.

This allows us to heavily customize our homepages for each brand.

NovaCards options,

• button - Set the values on the button object. Disables editorial control.
• cards - Array of card objects. Adding or removing objects from this array adjusts the number of cards rendered.
• config - Tk.
• config.control - Tk.
• config.defaults - Object that mimics defaults.json, gets merged into the component.
• config.locked - Array of which fields should not be editor controlled.
• heading - Set the values on the heading object. Disables editorial control.
• min and max - The minimum and maximum cards that can display.
• visibility - Toggle the visibility of card fields such as image, dek, and byline.