Type Name
FeaturedContent
Usage
This block consists of series of blocks with thumbnail and linking to other pages and content.
Type
Content
Content Category
Event Information
- About the Featured Content
- Creating a Featured Content Block
- Block Settings
- JSON Config
- Attributes
- Sample
About the Featured Content
The Featured Content block is used to display series of blocks with thumbnails and links to other pages and content
Creating a Featured Content Block
To create a Featured Content block, in the Venue Editor, click on "Add Blocks" button in the settings panel on the left, then choose "Featured Content" under the Event Information category.

Block Settings
The main setting of the Featured Content block is the Content where you can insert content blocks including titles, descriptions, links and static images.

JSON Config
Attributes
Name | Type | Description | Common to All |
---|---|---|---|
backgroundCoverImage | String | The cover image that you would want to set as default for the block. Eg: “https://files-myxp.s3-ap-southeast-1.amazonaws.com/livestream/default_background/Light_BG_1.png” | Yes |
backgroundCoverImageDisablePopup | Boolean | Does not allow popup to occur when this field is true. | Yes |
backgroundCoverImageDistortion | Object | Refer here. | Yes |
backgroundCoverImageVisibility | Boolean | Only render background image when this field is true. | Yes |
blockHeight | String | Sets the height of the block, only useful when fitHeightToContent is false. Eg: “200px”, “2rem”Units can be: px, em, rem, %. | Yes |
blockVisibility | Boolean | Determines if the block visibility should be rendered by default. | Yes |
blockWidth | String | Only needs to be specified when widthType is “custom”. Eg: “100%”Units can be: px, em, rem, %. | Yes |
boundingBox | Boolean | Value of true would result in the block being wrapped with a white background. | Yes |
breakpoints | Object | Refer here. | Yes |
cardBoundingBox | Boolean | false | No |
cardDescriptionVisibility | Boolean | false | No |
cardHeight | String | “338px”
Width to height ratio must be at least 1:1.3
Units can be: px, em, rem, %. | No |
cardPadding | String | “2px”
Units can be: px, em, rem, %. | No |
cardTitleVisibility | Boolean | false | No |
cardWidth | String | 260px
Units can be: px, em, rem, %. | No |
contentMargin | Array | [“0”, “0”, “0”, “0”, “px”]Last index can be: “px”, “rem”, “em”, “%”, “”. | Yes |
contentPadding | String | [“0”, “0”, “0”, “0”, “px”]
Last index can be: “px”, “rem”, “em”, “%”, “”. | Yes |
featuredContent | Array | Refer here. | No |
fitHeightToContent | Boolean | Setting this field to true would result in blockHeight to have a predetermined value. | Yes |
heading | String | “heading” | Yes |
headingAlignment | Enum | "center" | "left" | Yes |
headingVisibility | Boolean | true | Yes |
order | Integer | 1 | Yes |
type | Enum | “HeroContent” | "FeaturedContent" | No |
widthType | Enum | Renders the block width styling based on the value selected. Only when “custom” is selected, blockWidth needs to be specified. Eg: “full” | “half” | “custom” | “fit-content” | Yes |
Sample
"featured-block": {
"type": "FeaturedContent",
"title": "Featured Content",
"data": {
"heading": "Featured Content",
"title": "Featured Content",
"headingVisibility": true,
"headingAlignment": "center",
"cardBoundingBox": true,
"cardHeight": "340px",
"cardPadding": "16px",
"cardWidth": "260px",
"fitCardHeightToContent": true,
"cardDescriptionVisibility": true,
"cardTitleVisibility": true,
"featuredcontent": [
{
"coverDisplayImage": null,
"coverDisplayType": "image",
"coverDisplayVideo": null,
"description": "<p>Add some description about your featured content here.</p>",
"link": null,
"openInNewWindow": true,
"order": 1,
"title": "Featured content 1",
"visibility": true
},
{
"coverDisplayImage": null,
"coverDisplayType": "image",
"coverDisplayVideo": null,
"description": "<p>Add some description about your featured content here.</p>",
"link": null,
"openInNewWindow": true,
"order": 2,
"title": "Featured content 2",
"visibility": true
},
{
"coverDisplayImage": null,
"coverDisplayType": "image",
"coverDisplayVideo": null,
"description": "<p>Add some description about your featured content here.</p>",
"link": null,
"openInNewWindow": true,
"order": 3,
"title": "Featured content 3",
"visibility": true
}
],
"order": 5,
"alignment": "left",
"blockWidth": "100%",
"blockHeight": "fit-content",
"widthType": "full",
"fitHeightToContent": true,
"boundingBox": false,
"contentPadding": ["0", "0", "0", "0", "px"],
"contentMargin": ["56", "0", "0", "0", "px"]
}
}