Tile
Frontastic component name
Tile
Suggested page placement
Any page type
Example images


Code samples
{
"tasticType": "frontastic/ui/content/tile",
"name": "Frontastic 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": "Subtitle",
"field": "subtitle",
"type": "string",
"default": "New arrivals",
"translatable": true,
"required": false
},
{
"label": "Header",
"field": "header",
"type": "string",
"translatable": true,
"required": true
},
{
"label": "Header color",
"field": "headerColor",
"type": "string",
"default": "text-black",
"translatable": false
},
{
"label": "Text",
"field": "text",
"type": "markdown",
"translatable": true,
"required": true
},
{
"label": "Text color",
"field": "textColor",
"type": "string",
"default": "text-white",
"translatable": 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/frontastic-ui/content/tile';
const TileTastic = ({ data }) => {
return (
<Tile
image={data.image}
subtitle={data.subtitle}
header={data.header}
text={data.text}
ctaLabel={data.ctaLabel}
ctaReference={data.ctaReference}
headerColor={data.headerColor}
textColor={data.textColor}
/>
);
};
export default TileTastic;
Updated 10 days ago
Did this page help you?