module.exports = { id: 'header', title: 'Header', keywords: [`navigation`, `header`, `sticky`, `button`, `logo`, `link`], description: `

The header element has been minimally styled, allowing you to create modern headers for your web apps. A header can include a logo element (.logo), as well as buttons, links and labels, styled as buttons (.button).

`, example: `

Logo News

`, samples: [`

<header>
  <a href="#" class="logo">Logo</a>
  <a href="#" class="button">Home</a>
  <button>Download</button>
</header>

`], notes: [`The header element is partially responsive on smaller screens, displaying a scrollbar indicating that there is more content off-screen.`, `The header element can be a row in a grid system, allowing you to create responsive headers.`], customization: [ `Text color for the header can be changed by changing the value of the --header-fore-color variable.`, `Background color for the header can be changed by changing the value of the --header-back-color variable.`, `Border color for the header can be changed by changing the value of the --header-border-color variable.`, `Background color for focused buttons inside the header can be changed by changing the value of the --header-hover-back-color variable.` ], modifiers: [ { title : 'Sticky header', description: `

You can make your web app's header sticky (.sticky), by applying the appropriate modifier.

`, example: '', samples: [`

<header class="sticky">
  <a href="#" class="logo">Logo</a>
  <a href="#" class="button">Home</a>
  <button>Download</button>
</header>

`] } ], dos: [], donts: [ { description: `You should not apply a .button class to the logo of your header, but you must make sure that all other elements inside the header are styled as buttons.`, sample: `

<header>
  <a href="#" class="button logo">Logo</a>
  <a href="#">Home</a>
</header>

` } ] }