@wix/design-system
Version:
@wix/design-system
230 lines (210 loc) • 6.85 kB
Markdown
## Feature Examples
### 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:
```jsx
<MarketingPageLayout
content={
<StorybookComponents.Stack height="400px">
<StorybookComponents.Placeholder>Content</StorybookComponents.Placeholder>
</StorybookComponents.Stack>
}
image={<Image height="400px" />}
footer={
<StorybookComponents.Stack height="100px">
<StorybookComponents.Placeholder>Footer</StorybookComponents.Placeholder>
</StorybookComponents.Stack>
}
/>;
```
### Content
- description: Use
<a href="https://www.wix-pages.com/wix-design-system-employees/?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:
```jsx
<MarketingPageLayout
content={
<MarketingPageLayoutContent
overline="Overline"
title="Title"
subtitle="Subtitle"
content="Content"
actions={<Button size="large">Action</Button>}
/>
}
image={<Image />}
/>;
```
### 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:
```jsx
<StorybookComponents.Stack flexDirection="column">
<Card>
<MarketingPageLayout
horizontalSize="large"
verticalSize="large"
image={<Image />}
content={
<MarketingPageLayoutContent
size="large"
title="Large title"
content={
<Text size="medium">
<ul>
<li>Large content item one</li>
<li>Large content item two</li>
<li>Large content item three</li>
</ul>
</Text>
}
actions={<Button size="large">Large Action</Button>}
/>
}
/>
</Card>
<Card>
<MarketingPageLayout
horizontalSize="medium"
verticalSize="medium"
image={<Image />}
content={
<MarketingPageLayoutContent
size="medium"
title="Medium title"
content={
<Text size="small">
<ul>
<li>Medium content item one</li>
<li>Medium content item two</li>
<li>Medium content item three</li>
</ul>
</Text>
}
actions={<Button size="medium">Medium Action</Button>}
/>
}
/>
</Card>
</StorybookComponents.Stack>;
```
### Full Size Image
- description: Extend preview image to the edges of a screen by removing paddings for it with `removeImageHorizontalPadding` and `removeImageVerticalPadding` props.
- example:
```jsx
<Card>
<MarketingPageLayout
content={
<MarketingPageLayoutContent
overline="Overline"
title="Title"
content={
<Text>
<ul>
<li>Bullet item 1</li>
<li>Bullet item 2</li>
<li>Bullet item 3</li>
</ul>
</Text>
}
actions={<Button size="large">Action</Button>}
/>
}
image={<Image />}
removeImageHorizontalPadding
removeImageVerticalPadding
/>
</Card>;
```
## Common Use Case Examples
### 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:
```jsx
<Card>
<MarketingPageLayout
content={
<Box height="612px" verticalAlign="middle">
<MarketingPageLayoutContent
title="Reach the Right Shoppers on Facebook & Instagram"
subtitle="Get set up and Wix’s AI will take care of the rest"
content={
<Text>
<ul>
<li>Show your ad to the people most likely to buy</li>
<li>Test your ad non-stop to see what’s working </li>
<li>Optimize your budget to get you the best results </li>
</ul>
</Text>
}
actions={
<Box gap="12px">
<Button size="medium">Start Now</Button>
<Button priority="secondary" prefixIcon={<Icons.PlayFilled />}>
Get to Know Wix's AI
</Button>
</Box>
}
/>
</Box>
}
image={<Image src="MarketingIllustration2.png" />}
footer={
<TestimonialList
testimonials={[
{
id: '0001',
avatar: <Avatar name="Guy in glasses" size="size60" />,
text: 'I love it! It helped me to increase the sales.',
authorName: 'John Smith',
},
{
id: '0002',
avatar: <Avatar name="Person with a hat" size="size60" />,
text: 'Amazing! It is simple to use, I had no struggle to setup.',
authorName: 'Templeton Peck',
},
{
id: '0003',
avatar: <Avatar name="Smiling lady" size="size60" />,
text: 'A perfect tool for creating ad campaigns that sell.',
authorName: 'Bosco B.A.',
},
]}
/>
}
/>
</Card>;
```
### Extended Image
- description: Provide detailed visuals for product marketing by extending the image to the edges of a page.
- example:
```jsx
<Card>
<MarketingPageLayout
removeImageHorizontalPadding
removeImageVerticalPadding
content={
<Box height="840px" verticalAlign="middle">
<MarketingPageLayoutContent
title="Streamline your workflow with Ascend business tools"
content="Simplify the way you track leads, bill clients* and manage your projects. Unlock email marketing, workflows and automations when you reach Pioneer level."
actions={<Button>Check Your Level</Button>}
/>
</Box>
}
image={<Image borderRadius={0} src="MarketingIllustration3.png" />}
/>
</Card>;
```