-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fixup! fixup! Feat(web): Introduce UNSTABLE_Footer component #DS-1367
- Loading branch information
1 parent
1ac8d10
commit f8c0c5b
Showing
2 changed files
with
294 additions
and
306 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,199 +1,239 @@ | ||
| # Footer | ||
|
|
||
| The Footer is a highly variable and customizable component. It comes in several | ||
| design variants and provides a handful of building blocks you can use to achieve | ||
| your specific design goals. | ||
| The Footer is a highly variable composition. It comes in several design variants to help you achieve your specific | ||
| design goals. | ||
|
|
||
| ## Composition | ||
|
|
||
| This is how all supported building blocks of the Footer build up the complete | ||
| composition: | ||
| The Footer supports several building blocks: | ||
|
|
||
| - [Navigation Links](#navigation-links) | ||
| - [Product Logo](#product-logo) | ||
| - [Social Media Links](#social-media-links) | ||
| - [Language Switch](#language-switch) | ||
| - [Secondary Links](#secondary-links) | ||
|
|
||
| This is how all supported building blocks of the Footer build up the complete composition: | ||
|
|
||
| ```html | ||
| <footer> | ||
| <!-- Footer columns – links relatable to the web hierarchy, etc. --> | ||
| <!-- Footer content – links to social sites, product logo, etc. --> | ||
| <!-- Footer copyright – links to the GDPR, cookies, etc. --> | ||
| <footer class="bg-cover pt-1100 pb-1000"> | ||
| <div class="Container"> | ||
| <!-- Grid with navigation links --> | ||
| <!-- Grid with product logo, social media links and language switch --> | ||
| <!-- Flex with secondary links --> | ||
| </div> | ||
| </footer> | ||
| ``` | ||
|
|
||
| 👉 Please, keep in mind that: | ||
| 👉 Good to know: | ||
|
|
||
| - to achieve the desired design, you can use the provided building blocks in any order you need, | ||
| - in case you need dividers between section, use the `Divider` component, | ||
| - to achieve the offset between columns and the rest of the Footer, please use spacing utility classes like `mb-*` or `pt-*`, | ||
| - the `Footer Content` is currently under development, so it's not part of this component yet. | ||
| - To achieve the desired design, you can use the provided building blocks in any order you need. | ||
| - All building blocks are optional, so you can use only the ones you need. | ||
| - Use [Grid][grid] and [Flex][flex] components to create the desired layout. | ||
| - Use the [Divider][divider] component to separate individual sections. | ||
| - Use spacing utility classes like `mb-*` or `pt-*` to achieve desired spacings between components. | ||
|
|
||
| ## Basic Usage | ||
| ## Navigation Links | ||
|
|
||
| The basic usage of this component could be: | ||
| Navigation links are structured in sections with a headline and a [Stack][stack] of links. | ||
|
|
||
| 👉 Please note how the `<nav>` element is paired with an `<h3>` element (using the `aria-labelledby` attribute) to | ||
| provide a semantic connection between the headline and the navigation component. | ||
|
|
||
| ```html | ||
| <footer> | ||
| <div class="Container"> | ||
| <div class="Grid Grid--cols-2 Grid--tablet--cols-4 mb-700 mb-tablet-400"> | ||
| <nav aria-labelledby="footer-part-one" class="mb-600 mb-tablet-800"> | ||
| <h3 class="typography-body-large-text-bold mb-600" id="footer-part-one">Section headline</h3> | ||
| <ul class="Stack Stack--hasSpacing" style="--stack-spacing: var(--spirit-space-500)"> | ||
| <li> | ||
| <a href="www.example.com">Link</a> | ||
| </li> | ||
| <li> | ||
| <a href="www.example.com">Link</a> | ||
| </li> | ||
| <li> | ||
| <a href="www.example.com">Link</a> | ||
| </li> | ||
| </ul> | ||
| </nav> | ||
| <nav aria-labelledby="footer-part-one"> | ||
| <h3 class="typography-body-large-text-bold mb-600" id="footer-part-one">Section headline</h3> | ||
| <ul class="Stack Stack--hasSpacing" style="--stack-spacing: var(--spirit-space-500)"> | ||
| <li> | ||
| <a href="https://www.example.com">Link</a> | ||
| </li> | ||
| <li> | ||
| <a href="https://www.example.com">Link</a> | ||
| </li> | ||
| <li> | ||
| <a href="https://www.example.com">Link</a> | ||
| </li> | ||
| </ul> | ||
| </nav> | ||
| ``` | ||
|
|
||
| <nav aria-labelledby="footer-part-two" class="mb-600 mb-tablet-800"> | ||
| <h3 class="typography-body-large-text-bold mb-600" id="footer-part-two">Section headline</h3> | ||
| You can use as many navigation sections like this as you need and wrap them in a responsive [Grid][grid] layout. | ||
|
|
||
| <ul class="Stack Stack--hasSpacing" style="--stack-spacing: var(--spirit-space-500)"> | ||
| <li> | ||
| <a href="www.example.com">Link</a> | ||
| </li> | ||
| <li> | ||
| <a href="www.example.com">Link</a> | ||
| </li> | ||
| <li> | ||
| <a href="www.example.com">Link</a> | ||
| </li> | ||
| <li> | ||
| <a href="www.example.com">Link</a> | ||
| </li> | ||
| </ul> | ||
| </nav> | ||
| ## Product Logo, Social Media Links and Language Switch | ||
|
|
||
| <nav aria-labelledby="footer-part-three" class="mb-600 mb-tablet-800"> | ||
| <h3 class="typography-body-large-text-bold mb-600" id="footer-part-three">Section headline</h3> | ||
| This section is optional and consists of a [Grid][grid] layout with up to three (also optional) columns: | ||
|
|
||
| <ul class="Stack Stack--hasSpacing" style="--stack-spacing: var(--spirit-space-500)"> | ||
| <li> | ||
| <a href="www.example.com">Link</a> | ||
| </li> | ||
| <li> | ||
| <a href="www.example.com">Link</a> | ||
| </li> | ||
| <li> | ||
| <a href="www.example.com">Link</a> | ||
| </li> | ||
| <li> | ||
| <a href="www.example.com">Link</a> | ||
| </li> | ||
| <li> | ||
| <a href="www.example.com">Link</a> | ||
| </li> | ||
| <li> | ||
| <a href="www.example.com">Link</a> | ||
| </li> | ||
| </ul> | ||
| </nav> | ||
| ```html | ||
| <div | ||
| class="Grid Grid--cols-1 Grid--desktop--cols-3 Grid--alignmentXCenter Grid--desktop--alignmentXStretch Grid--alignmentYCenter" | ||
| style="--grid-spacing-x: var(--spirit-space-900); --grid-spacing-y: var(--spirit-space-900)" | ||
| > | ||
| <div class="text-desktop-left"> | ||
| <!-- Product logo --> | ||
| </div> | ||
| <!-- Flex with social media links --> | ||
| <div class="text-desktop-right"> | ||
| <!-- Language switch --> | ||
| </div> | ||
| </div> | ||
| ``` | ||
|
|
||
| <nav aria-labelledby="footer-part-four" class="mb-600 mb-tablet-800"> | ||
| <h3 class="typography-body-large-text-bold mb-600" id="footer-part-four">Section headline</h3> | ||
| 👉 Please mind the `text-desktop-left` and `text-desktop-right` utility classes. They are used to align individual | ||
| grid columns to the left and right side of the container on desktop screens. | ||
|
|
||
| <ul class="Stack Stack--hasSpacing" style="--stack-spacing: var(--spirit-space-500)"> | ||
| <li> | ||
| <a href="www.example.com">Link</a> | ||
| </li> | ||
| <li> | ||
| <a href="www.example.com">Link</a> | ||
| </li> | ||
| <li> | ||
| <a href="www.example.com">Link</a> | ||
| </li> | ||
| </ul> | ||
| </nav> | ||
| </div> | ||
| ### Product Logo | ||
|
|
||
| <hr class="Divider mb-700 mb-tablet-400" /> | ||
| Use the [Product Logo][product-logo] component to display the logo of your product. | ||
|
|
||
| <ul class="UNSTABLE_Footer__copyright"> | ||
| <li> | ||
| <a href="www.example.com" class="link-secondary">Legal notice</a> | ||
| </li> | ||
| <li> | ||
| <a href="www.example.com" class="link-secondary">Terms of service</a> | ||
| </li> | ||
| <li> | ||
| <a href="www.example.com" class="link-secondary">Privacy policy</a> | ||
| </li> | ||
| <li> | ||
| <a href="www.example.com" class="link-secondary">Manage cookies</a> | ||
| </li> | ||
| </ul> | ||
| </div> | ||
| </footer> | ||
| ### Social Media Links | ||
|
|
||
| Use the secondary [Button][button] component to create social media links inside a [Flex][flex] container. | ||
|
|
||
| ```html | ||
| <div class="Flex Flex--row Flex--wrap Flex--alignmentXCenter Flex--alignmentYCenter"> | ||
| <!-- Repeat the `<a>` block for each social media link. --> | ||
| <a href="https://www.example.com" class="Button Button--secondary Button--medium Button--square"> | ||
| <span class="accessibility-hidden">Facebook</span> | ||
| <svg width="24" height="24" aria-hidden="true"> | ||
| <use xlink:href="/assets/icons/svg/sprite.svg#logo-facebook" /> | ||
| </svg> | ||
| </a> | ||
| </div> | ||
| ``` | ||
|
|
||
| ### Footer Columns Variation | ||
| ### Language Switch | ||
|
|
||
| Use the [Select][select] component to create a language switch, or list the languages as country flags in a [Flex][flex] | ||
| layout. | ||
|
|
||
| In case you need a specific number of columns for each row in the Footer Columns section with links, | ||
| you can use separated `Grid` components. The number of columns can be set for each breakpoint separately. | ||
| ## Secondary Links | ||
|
|
||
| This section is optional and consists of a [Flex][flex] layout with secondary links. | ||
|
|
||
| ```html | ||
| <footer> | ||
| <div class="Container"> | ||
| <div class="Grid Grid--cols-1 Grid--tablet--cols-3 Grid--desktop--cols-6 mb-tablet-600 mb-desktop-400"> | ||
| <nav aria-labelledby="footer-with-a-lot-of-blocks-part-one" class="mb-600 mb-tablet-400 mb-desktop-800"> | ||
| <h3 class="typography-body-large-text-bold mb-600" id="footer-with-a-lot-of-blocks-part-one"> | ||
| Section headline | ||
| </h3> | ||
| <ul | ||
| class="Flex Flex--column Flex--tablet--row Flex--wrap Flex--alignmentXStretch Flex--tablet--alignmentXCenter Flex--alignmentYStretch" | ||
| style="--flex-spacing: var(--spirit-space-500); --flex-spacing-tablet: var(--spirit-space-700)" | ||
| > | ||
| <!-- Repeat the `<li>` block for each secondary link. --> | ||
| <li> | ||
| <a href="https://www.example.com" class="link-secondary">Legal notice</a> | ||
| </li> | ||
| </ul> | ||
| ``` | ||
|
|
||
| ## Full Example | ||
|
|
||
| ```html | ||
| <footer class="bg-cover pt-1100 pb-1000"> | ||
| <div class="Container"> | ||
| <!-- Grid with navigation links --> | ||
| <div | ||
| class="Grid Grid--cols-1 Grid--tablet--cols-2 Grid--desktop--cols-4" | ||
| style="--grid-spacing-x: var(--spirit-space-800); --grid-spacing-y: var(--spirit-space-800)" | ||
| > | ||
| <!-- Repeat the `<nav>` block as many times as needed. --> | ||
| <nav aria-labelledby="footer-part-one"> | ||
| <h3 class="typography-body-large-text-bold mb-600" id="footer-part-one">Section headline</h3> | ||
| <ul class="Stack Stack--hasSpacing" style="--stack-spacing: var(--spirit-space-500)"> | ||
| <li> | ||
| <a href="www.example.com">Link</a> | ||
| </li> | ||
| <li> | ||
| <a href="www.example.com">Link</a> | ||
| <a href="https://www.example.com">Link</a> | ||
| </li> | ||
| <li> | ||
| <a href="www.example.com">Link</a> | ||
| <a href="https://www.example.com">Link</a> | ||
| </li> | ||
| <li> | ||
| <a href="www.example.com">Link</a> | ||
| </li> | ||
| <li> | ||
| <a href="www.example.com">Link</a> | ||
| <a href="https://www.example.com">Link</a> | ||
| </li> | ||
| </ul> | ||
| </nav> | ||
|
|
||
| <nav aria-labelledby="footer-with-a-lot-of-blocks-part-two" class="mb-600 mb-tablet-400 mb-desktop-800">…</nav> | ||
| … | ||
| </div> | ||
|
|
||
| <div class="Grid Grid--cols-1 Grid--tablet--cols-3"> | ||
| <nav aria-labelledby="footer-with-a-lot-of-blocks-part-seven" class="mb-600 mb-tablet-800">…</nav> | ||
|
|
||
| <nav aria-labelledby="footer-with-a-lot-of-blocks-part-eight" class="mb-600 mb-tablet-800">…</nav> | ||
| <!-- Divider --> | ||
| <hr class="Divider my-900" /> | ||
|
|
||
| <!-- Grid with product logo, social media links and language switch --> | ||
| <div | ||
| class="Grid Grid--cols-1 Grid--desktop--cols-3 Grid--alignmentXCenter Grid--desktop--alignmentXStretch Grid--alignmentYCenter" | ||
| style="--grid-spacing-x: var(--spirit-space-900); --grid-spacing-y: var(--spirit-space-900)" | ||
| > | ||
| <!-- Product logo --> | ||
| <div class="text-desktop-left"> | ||
| <a href="https://www.example.com"> | ||
| <div aria-label="Logo of the JobBoard" class="UNSTABLE_ProductLogo"> | ||
| <!-- Product logo image --> | ||
| </div> | ||
| </a> | ||
| </div> | ||
| <!-- Flex with social media links --> | ||
| <div class="Flex Flex--row Flex--wrap Flex--alignmentXCenter Flex--alignmentYCenter"> | ||
| <a href="https://www.example.com" class="Button Button--secondary Button--medium Button--square"> | ||
| <span class="accessibility-hidden">Facebook</span> | ||
| <svg width="24" height="24" aria-hidden="true"> | ||
| <use xlink:href="/assets/icons/svg/sprite.svg#logo-facebook" /> | ||
| </svg> | ||
| </a> | ||
| <a href="https://www.example.com" class="Button Button--secondary Button--medium Button--square"> | ||
| <span class="accessibility-hidden">X</span> | ||
| <svg width="24" height="24" aria-hidden="true"> | ||
| <use xlink:href="/assets/icons/svg/sprite.svg#logo-x" /> | ||
| </svg> | ||
| </a> | ||
| <a href="https://www.example.com" class="Button Button--secondary Button--medium Button--square"> | ||
| <span class="accessibility-hidden">YouTube</span> | ||
| <svg width="24" height="24" aria-hidden="true"> | ||
| <use xlink:href="/assets/icons/svg/sprite.svg#logo-youtube" /> | ||
| </svg> | ||
| </a> | ||
| </div> | ||
| <!-- Language switch --> | ||
| <div class="text-desktop-right"> | ||
| <div class="Select"> | ||
| <label for="select-language" class="Select__label Select__label--hidden">Language</label> | ||
| <div class="Select__inputContainer"> | ||
| <select id="select-language" name="language" class="Select__input"> | ||
| <option value="1">English</option> | ||
| <option value="2">Čeština</option> | ||
| </select> | ||
| <div class="Select__icon"> | ||
| <svg width="24" height="24" aria-hidden="true"> | ||
| <use xlink:href="/assets/icons/svg/sprite.svg#chevron-down" /> | ||
| </svg> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </footer> | ||
| ``` | ||
|
|
||
| ## Color Variants | ||
|
|
||
| If you need to place the Footer on a dark background, add `Footer--inverted` modifier class to the root element. | ||
|
|
||
| ⚠️ Keep in mind that it is necessary to set all the text and link content to the suitable color variant also. | ||
| <!-- Divider --> | ||
| <hr class="Divider my-900" /> | ||
|
|
||
| ```html | ||
| <footer class="UNSTABLE_Footer UNSTABLE_Footer--inverted"> | ||
| … | ||
| <nav aria-labelledby="footer-inverse-part-one"> | ||
| <h3 class="typography-body-large-text-bold text-primary-inverted mb-600" id="footer-inverse-part-one"> | ||
| Section headline | ||
| </h3> | ||
|
|
||
| <ul class="Stack Stack--hasSpacing mb-600" style="--stack-spacing: var(--spirit-space-500)"> | ||
| <!-- Flex with secondary links --> | ||
| <ul | ||
| class="Flex Flex--column Flex--tablet--row Flex--wrap Flex--alignmentXStretch Flex--tablet--alignmentXCenter Flex--alignmentYStretch" | ||
| style="--flex-spacing: var(--spirit-space-500); --flex-spacing-tablet: var(--spirit-space-700)" | ||
| > | ||
| <li> | ||
| <a href="https://www.example.com" class="link-secondary"> Legal notice </a> | ||
| </li> | ||
| <li> | ||
| <a href="www.example.com" class="link-inverted">Link</a> | ||
| <a href="https://www.example.com" class="link-secondary"> Terms of service </a> | ||
| </li> | ||
| <li> | ||
| <a href="https://www.example.com" class="link-secondary"> Privacy policy </a> | ||
| </li> | ||
| <li> | ||
| <a href="https://www.example.com" class="link-secondary"> Manage cookies </a> | ||
| </li> | ||
| … | ||
| </ul> | ||
| </nav> | ||
| </div> | ||
| </footer> | ||
| ``` | ||
|
|
||
| [button]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web/src/scss/components/Button/README.md | ||
| [divider]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web/src/scss/components/Divider/README.md | ||
| [flex]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web/src/scss/components/Flex/README.md | ||
| [grid]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web/src/scss/components/Grid/README.md | ||
| [stack]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web/src/scss/components/Stack/README.md | ||
| [product-logo]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web/src/scss/components/UNSTABLE_ProductLogo/README.md | ||
| [select]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web/src/scss/components/Select/README.md |
Oops, something went wrong.