wix-style-react
Version:
68 lines (67 loc) • 2.85 kB
JavaScript
export default {
description:
'Marketing layout makes content stand out compared to the rest of the page.',
do: [
'Use it to promote new features or products.',
'Use it to inform people about existing features or products that users could benefit from.',
'Wrap it with a <Card/> before using.',
],
dont: ['Don’t use it to create lists, use <Table/> instead.'],
featureExamples: [
{
title: 'Structure',
description: `This component consists of \`title\`, \`description\`, \`actions\` and \`image\` containers. All these areas accept any component as a child element.
All of the areas are optional, so the component can be customised according to your needs.<br/><br/>
Layout should be used in a \`<Card/>\` which provides a white background.`,
example: '_structure',
},
{
title: 'Size',
description: `Adjust component size using size prop. It supports 3 sizes:<br/>
 - \`tiny\` - use it to promote side features that are not mandatory or when multiple layouts are displayed in the same row.<br/>
 - \`small\` (default) - use it in all common cases.<br/>
 - \`medium\` - use it to promote core or mandatory releases. Use it in spacious layouts only.`,
example: '_size',
},
{
title: 'Image position',
description: 'Flip content and image positions with `inverted` prop.',
example: '_imagePosition',
},
{
title: 'Image background',
description:
'Add a background color to an image on the side with `imageBackgroundColor`.',
example: '_imageBackground',
},
{
title: 'Badge',
description: `Emphasize new or top items with a label on the top left corner. <br/></br>
Adding a badge increases layout height. Use \`hiddenBadge\` prop to add extra height to a layout to align layouts that are displayed in a row.`,
example: '_badge',
},
{
title: 'Align items',
description: `Control how content aligns with an image with \`alignItems\` prop. It supports 2 values:<br/>
 - \`center\` (default) - use it to center content and image vertically.<br/>
 - \`stretch\` - use it to stretch content to match the height of an image area.`,
example: '_alignItems',
},
],
commonUseCaseExamples: [
{
title: 'Multi column layout',
description:
'Display multiple marketing layouts in the same row to promote multiple features at the same time.',
example: '_multiColumnLayout',
wide: true,
},
{
title: 'Footnote',
description:
'Add additional notes or conditions that users should know about by constructing a footnote in the same card `<MarketingLayout/>` is wrapped to.',
example: '_footnote',
wide: true,
},
],
};