module.exports = { id: 'heading', title: 'Headings', keywords: [`heading`, `h1`, `h2`, `h3`, `h4`, `h5`, `h6`, `small`, `title`, `subtitle`, `subheading`], description: `
All of the HTML5 heading elements are styled, using a customizable ratio and simple rules, providing a clean base for your web app's titles. Apart from the headings themselves, customized rules are provided for displaying subheadings or explanatory text below your web app's headings.
`, example: `<h1>Heading 1 <small>Subheading</small></h1> <h2>Heading 2 <small>Subheading</small></h2> <h3>Heading 3 <small>Subheading</small></h3> <h4>Heading 4 <small>Subheading</small></h4> <h5>Heading 5 <small>Subheading</small></h5> <h6>Heading 6 <small>Subheading</small></h6>` ], notes: [], customization: [ `Text color can be changed globally by changing the value of the
--fore-color
variable. This will affect the color of the headings' main text.`,
`Secondary text color can be changed globally by changing the value of the --secondary-fore-color
variable. This will affect the color of subheadings.`,
`Universal margin for elements can be changed globally by changing the value of the --universal-margin
variable. As a rule of thumb, consider the universal margin to be the distance you want your paragraphs to have from the sides of the screen.`,
`You can change the ratio of headings' size by chaning the value of the --heading-ratio
variable. Bear in mind that the value of this variable must be unitless to work properly.`
],
modifiers: [],
dos: [],
donts: []
}