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: `

Heading 1Subheading

Heading 2Subheading

Heading 3Subheading

Heading 4Subheading

Heading 5Subheading
Heading 6Subheading
`, samples: [ `
<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: [] }