@wix/design-system
Version:
@wix/design-system
71 lines (60 loc) • 1.85 kB
Markdown
## Feature Examples
### Skins
- description: <p>A Skeleton can be rendered on any background, in order to prevent high contrast we provide 2 skins, \</p>
- example:
```jsx
() => {
return (
<Layout>
<Cell span={6}>
<Box backgroundColor="white" padding="SP5" width="200">
<SkeletonGroup skin="light" backgroundColor="white">
<Layout>
<Cell>
<Layout>
<Cell span={2}>
<SkeletonCircle diameter="32px" />
</Cell>
<Cell span={5}>
<Box direction="vertical">
<SkeletonLine marginBottom="5px" />
<SkeletonLine marginBottom="5px" />
</Box>
</Cell>
</Layout>
</Cell>
<Cell>
<SkeletonRectangle height="150px" />
</Cell>
</Layout>
</SkeletonGroup>
</Box>
</Cell>
<Cell span={6}>
<Box backgroundColor="gray" padding="SP5" width="200">
<SkeletonGroup skin="dark" backgroundColor="gray">
<Layout>
<Cell>
<Layout>
<Cell span={2}>
<SkeletonCircle diameter="32px" />
</Cell>
<Cell span={5}>
<Box direction="vertical">
<SkeletonLine marginBottom="5px" />
<SkeletonLine marginBottom="5px" />
</Box>
</Cell>
</Layout>
</Cell>
<Cell>
<SkeletonRectangle height="150px" />
</Cell>
</Layout>
</SkeletonGroup>
</Box>
</Cell>
</Layout>
);
};
```