@kb-dk/kb-footer v2.15.0
kb-footer
kb-footer is a web component which shows KB design footer. Moreover, column items come from kb.dk footer API. In kb design manual, every application has to use exactly the same footer at in kb.dk, except for the first column which can be application specific.
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
| language | language | The language of the page. | "da" / "en" | "da" |
| jsonUuId | jsonUuId | Universally Unique IDentifier (uuid) of drupal site node | string | "" |
| bgColor | bgColor | If the footer background color is to be sky blue, set the value to "skyblue" otherwise the footer will be the dark blue default color. | "skyblue"/ "" | "" |
Additional considerations
KB design allows the first column to be overwritten by the application but the other three must be the same as in kb.dk.
- You can provide a
ulelement within the kb-footer which will be used as the first column. ulelement must have the following line inside<style>kb-footer > ul {display: none;}</style>.ulelement must have its id sat toappFooterColumnDAfor Danish orappFooterColumnENfor English.- If an
ulelement has its id sat toappFooterColumn, it will be used as the replacement for the missing language.
Local configuratin needed
You need two configuration files in the root folder of this web component. One called .env.dev and one called .env.prod. In those files you need to specify the variables BASEURL and JSONAPIURL taylored to your local and production environment. The variables are needed to fetch non default footer data. Both filenames/locations are already added to .gitignore
Links to cookie settings
If you want a link for Cookie Settings (), please add ':cookie:' in front of the footer element title e.g. ':cookie: Cookie Settings'.
### Examples
1. Exactly as in kb.dk
2. Footer with Application specific column <kb-footer>
<ul id="appFooterColumn">
<style>kb-footer > ul {display: none;}</style>
<li><a href="#">Om KBs Digitale samlinger</a></li>
<li><a href="#">Mediestream</a></li>
<li><a href="#">Danmark Set Fra Lunften</a></li>
</ul>
</kb-footer> 3. English footer
4. Footer with application specific footer for each language (English and Danish)11 months ago
12 months ago
11 months ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago