An example of Grid Layout tile

An Grid Layout may look like this.


A Grid Layout tile example

For this example, we used the following configuration: 

{
	"generalsettings": {
		"gridSpacing": "small",
		"footer": {
			"actionAlign": "center",
			"actionExternal": false,
			"actionUrl": "",
			"actionLabel": ""
		},
		"header": {
			"headlineAlign": "center",
			"descriptionAlign": "center",
			"headline": ""
		},
		"customTitle": "What's happening on Jive - Our Collaborative Hub",
		"columnCount": "6",
		"body": {
			"backgroundPosition": "top center",
			"textColor": "#000000"
		}
	},
	"gridSpacing": "small",
	"saved": true,
	"options": {},
	"columnCount": "6",
	"items": [
		{
			"itemStyle": "imageTextOverlay",
			"backgroundOpacity": "0.3",
			"description": "Connect, Collaborate, and Share - Get Started",
			"mediaType": "imageUrl",
			"titleSize": "h1",
			"title": "Welcome to Your Jive Community",
			"textColor": "#ffffff",
			"overlayColor": "#5F9EA0",
			"iconStyle": "light",
			"url": "https://jep-qa.jiveon.com/places",
			"imageUrl": "https://jep-qa.jiveon.com/resources/statics/1003/skyline%252Bbanner.jpg",
			"showOverlayOnHover": false,
			"itemSize": "scuare2X2",
			"backgroundPosition": "left_top",
			"id": 1
		},
		{
			"itemStyle": "imageTextOverlay",
			"backgroundOpacity": "0.3",
			"description": "Read the Security Blog",
			"mediaType": "imageUrl",
			"titleSize": "h2",
			"title": "Security Updates",
			"textColor": "#ffffff",
			"overlayColor": "#5F9EA0",
			"iconStyle": "light",
			"url": "https://jep-qa.jiveon.com/community/information-technology-it/blog/2019/12/04/december-security-blog-industry-thoughts?sr=stream",
			"imageUrl": "https://jep-qa.jiveon.com/resources/statics/1003/map%252Bbanner.jpg",
			"showOverlayOnHover": false,
			"itemSize": "rectangle2X1",
			"backgroundPosition": "center_center",
			"id": 2
		},
		{
			"itemStyle": "imageTextOverlay",
			"backgroundOpacity": "0.3",
			"description": "Watch Now",
			"mediaType": "imageUrl",
			"titleSize": "h2",
			"title": "Latest All Hands Recording",
			"textColor": "#ffffff",
			"overlayColor": "#5F9EA0",
			"iconStyle": "light",
			"url": "https://jep-qa.jiveon.com/content",
			"imageUrl": "https://jep-qa.jiveon.com/resources/statics/1003/people%252Bbanner%2B%25281%2529.jpg",
			"showOverlayOnHover": false,
			"itemSize": "rectangle2X1",
			"backgroundPosition": "center_center",
			"id": 3
		},
		{
			"itemStyle": "imageTextOverlay",
			"backgroundOpacity": "0.4",
			"description": "Take Tour Now",
			"mediaType": "imageUrl",
			"titleSize": "h2",
			"title": "Tour The New Offices",
			"textColor": "#ffffff",
			"overlayColor": "#5F9EA0",
			"iconStyle": "light",
			"url": "https://jep-qa.jiveon.com/content",
			"imageUrl": "https://jep-qa.jiveon.com/resources/statics/1003/office%252Bbanner%2B%25281%2529.jpg",
			"showOverlayOnHover": false,
			"itemSize": "scuare1X1",
			"backgroundPosition": "center_bottom",
			"id": 4
		},
		{
			"itemStyle": "imageTextOverlay",
			"backgroundOpacity": "0.3",
			"description": "Access the Experts here!",
			"mediaType": "imageUrl",
			"titleSize": "h2",
			"title": "Travel & Expense Policy Changes",
			"textColor": "#ffffff",
			"overlayColor": "#5F9EA0",
			"iconStyle": "light",
			"url": "https://jep-qa.jiveon.com",
			"imageUrl": "https://jep-qa.jiveon.com/resources/statics/1003/planelanding.jpg",
			"showOverlayOnHover": false,
			"itemSize": "rectangle2X1",
			"backgroundPosition": "right_bottom",
			"id": 5
		},
		{
			"itemStyle": "imageTextOverlay",
			"backgroundOpacity": "0.1",
			"description": "New Blog Available",
			"mediaType": "imageUrl",
			"titleSize": "h2",
			"title": "CEO Blog",
			"textColor": "#ffffff",
			"overlayColor": "#5F9EA0",
			"iconStyle": "light",
			"url": "https://jep-qa.jiveon.com",
			"imageUrl": "https://jep-qa.jiveon.com/resources/statics/1003/Blog-Banner-1024x469.png",
			"showOverlayOnHover": false,
			"itemSize": "scuare1X1",
			"backgroundPosition": "center_bottom",
			"id": 6
		}
	]
}