Tile

The Tile component can be used on any page.

Example image

tile.png

Code samples

{
"tasticType": "commercetools/ui/content/tile",
"name": "commercetools UI tile",
"icon": "image",
"category": "Content",
"schema": [
{
"name": "Image",
"helpText": "Customize your image",
"fields": [
{
"label": "Image",
"field": "image",
"type": "media",
"required": true
}
]
},
{
"name": "Message",
"helpText": "Customize your tile message",
"fields": [
{
"label": "Title",
"field": "title",
"type": "string",
"translatable": true,
"required": false
},
{
"label": "Subtitle",
"field": "subtitle",
"type": "string",
"translatable": true,
"required": false
}
]
},
{
"name": "Call to action",
"helpText": "Customize your call to action",
"fields": [
{
"label": "Button label",
"field": "ctaLabel",
"translatable": true,
"type": "string",
"required": false,
"default": ""
},
{
"label": "Link",
"field": "ctaReference",
"translatable": false,
"required": false,
"type": "reference",
"default": null
}
]
}
]
}
import React from 'react';
import Tile from 'components/commercetools-ui/content/tile';
const TileTastic = ({ data }) => {
return (
<Tile
image={data.image}
title={data.title}
subtitle={data.subtitle}
ctaLabel={data.ctaLabel}
ctaReference={data.ctaReference}
/>
);
};
export default TileTastic;