wix-style-react
Version:
64 lines (63 loc) • 2.72 kB
JavaScript
export default {
description:
'Marketing page layout presents a product and its key features for first time users.',
do: [
'Use it to onboard users during their first visit.',
'Use it to promote a product the user may not be aware of.',
],
dont: [
'Don’t use it to promote a feature within a product. Use <MarketingLayout/> instead.',
],
featureExamples: [
{
title: 'Structure',
description: `Control the option label type by passing relevant compound components as child items. It accepts 2 types:<br/>
 - \`content\` - use it to add textual content using \`<MarketingPageLayoutContent/>\` component.<br/>
 - \`image\` - use it to show a preview of a promoted product.<br/>
 - \`footer\` - use it to list key features or user testimonials.<br/>`,
example: '_structure',
},
{
title: 'Content',
description: `Use
<a href="https://www.wix-style-react.com/?path=/story/components-api-components--marketingpagelayoutcontent" target="_blank">\\<MarketingPageLayoutContent/></a>
component to layout text inside a content area. It consists of outline, title, subtitle, content and actions areas.`,
example: '_content',
},
{
title: 'Padding',
description: `Control side paddings of a page with \`horizontalSize\` prop. It supports 2 values:<br/>
 - \`large\` (default) - use for screen sizes with width >1464px.<br/>
 - \`medium\` - use for screen sizes with width <1464px.<br/>
<br/>
Control top and bottom paddings of a page with \`verticalSize\` prop. It supports 2 values:<br/>
 - \`large\` (default) - use for screen sizes with height >630px.<br/>
 - \`medium\` - use for screen sizes with height <630px.<br/>
`,
example: '_padding',
},
{
title: 'Full Size Image',
description:
'Extend preview image to the edges of a screen by removing paddings for it with `removeImageHorizontalPadding` and `removeImageVerticalPadding` props.',
example: '_fullSizeImage',
wide: true,
},
],
commonUseCaseExamples: [
{
title: 'List in a footer',
description: `Emphasize product quality and benefits by listing user testimonials or product features in a footer.<br/><br/>
Use \`<TestimonialList/>\` and \`<FeatureList/>\` components for that.`,
example: '_listInAFooter',
wide: true,
},
{
title: 'Extended Image',
description:
'Provide detailed visuals for product marketing by extending the image to the edges of a page.',
example: '_extendedImage',
wide: true,
},
],
};