2018-04-26 17:51:48 +00:00
|
|
|
module.exports = {
|
|
|
|
id: 'footer',
|
|
|
|
title: 'Footer',
|
|
|
|
keywords: [`navigation`, `footer`, `sticky`, `link`],
|
|
|
|
description: `<p>The footer element has been minimally styled, aiming to provide you with a clean base to create your web apps' footers.</p>`,
|
|
|
|
example: `<footer> <p class="doc">© 2016-2017 Web Corporation | <a href="#" class="doc">About</a> | <a href="#" class="doc">Terms of use</a></p> </footer>`,
|
|
|
|
samples: [`<pre><span class="code-line"><span class="highlight-a"><footer></span></span>
|
|
|
|
<span class="code-line"> <span class="highlight-a"><p></span>Footer text<span class="highlight-a"></p></span></span>
|
|
|
|
<span class="code-line"><span class="highlight-a"></footer></span></span></pre>`],
|
|
|
|
notes: [],
|
|
|
|
customization: [
|
|
|
|
`Text color for the footer can be changed by changing the value of the <code>--footer-fore-color</code> variable.`,
|
|
|
|
`Background color for the footer can be changed by changing the value of the <code>--footer-back-color</code> variable.`,
|
|
|
|
`Border color for the footer can be changed by changing the value of the <code>--footer-border-color</code> variable.`,
|
|
|
|
`Text color for links inside the footer can be changed by changing the value of the <code>--footer-link-color</code> variable.`,
|
|
|
|
`Universal padding for elements can be changed globally by changing the value of the <code>--universal-padding</code> variable.`
|
|
|
|
],
|
|
|
|
modifiers: [
|
|
|
|
{
|
|
|
|
title : 'Sticky footer',
|
|
|
|
description: `<p>You can make your web app's footer sticky (<code>.sticky</code>), by applying the appropriate modifier.</p>`,
|
|
|
|
example: '',
|
|
|
|
samples: [`<pre><span class="code-line"><span class="highlight-a"><footer</span> <span class="highlight-b">class</span>=<span class="highlight-c">"sticky"</span><span class="highlight-a">></span></span>
|
|
|
|
<span class="code-line"> <span class="highlight-a"><p></span>Footer text<span class="highlight-a"></p></span></span>
|
|
|
|
<span class="code-line"><span class="highlight-a"></footer></span></span></pre>`]
|
|
|
|
}
|
|
|
|
],
|
|
|
|
dos: [],
|
|
|
|
donts: []
|
|
|
|
}
|