wix-style-react/src/Heading/docs/Heading.content.js

wix-style-react

export default {
  description:
    'Heading is a typography component used to create levels of hierarchies between text.',
  do: [
    'Use it as the title of each major section of a page.',
    'Use it for short and important titles or numerals.',
  ],
  dont: [
    'Don’t use it to display text paragraphs or item titles formed from multiple sentences. Use <Text/> instead.',
  ],
  featureExamples: [
    {
      title: 'Size',
      description: `Control the size of a heading with appearance prop. It supports sizes from \`H1\` to \`H6\`.`,
      example: '_size',
    },
    {
      title: 'Skin',
      description: `Invert skin of a heading with light prop. Use this skin for headings on color or image backgrounds.`,
      example: '_skin',
    },
    {
      title: 'Text overflow',
      description: `Control text overflow with an \`ellipsis\`. 
        Component inherits the width of a parent container and by default wraps inside of it.
        With \`ellipsis\` enabled text will be truncated at the end of a line of text.`,
      example: '_textOverflow',
    },
    {
      title: 'Children',
      description: `Render any kind of component within the \`<Heading>\` tag. Most commonly used to render an alternative style of text inline to the title.`,
      example: '_children',
    },
  ],
  commonUseCaseExamples: [
    {
      title: 'Content hierarchy',
      description: `Use headings to emphasize main sections of a page and group related content into entities.`,
      example: '_contentHierarchy',
    },
  ],
};