wix-style-react
Version:
43 lines (42 loc) • 1.65 kB
JavaScript
export default {
description:
'A divider is a thin line that separates or groups content in various layouts.',
do: [
'Use it to separate content in lists and layouts.',
'Use it to group content into single entities.',
'Use it to establish rhythm and hierarchy.',
],
featureExamples: [
{
title: 'Direction',
description: `Control how the divider is placed with direction prop. It supports 2 values:<br/>
 - \`horizontal\` - use it to separate content in rows.<br/>
 - \`vertical\` - use it to separate content in columns.<br/>`,
example: '_direction',
},
{
title: 'Skin',
description: `Control the color of a divider with skin prop. It supports 7 values:<br/>
 - \`light\` (default) - use it in all common cases on light background.<br/>
 - \`dark\` - use it in all common cases on dark background.<br/>
 - \`standard\` - use it on light blue background.<br/>
 - \`warning\` - use it on light orange background.<br/>
 - \`success\` - use it on light green background.<br/>
 - \`premium\` - use it on light purple background.<br/>`,
example: '_skin',
},
],
commonUseCaseExamples: [
{
title: 'Lists',
description:
'Use a divider to group content into same level entities and separate them from one another to create an easy-to-read list.',
example: '_lists',
},
{
title: 'Separated content',
description: 'Use a full bleed divider to separate secondary content.',
example: '_separatedContent',
},
],
};