FOOTER (Globale Elemente )
src/app/core/components/footer/templates
Demo Section
Each variation will be presented in the following section.
Readme
footer (coreComponent)
Description
Footer with list of social media links, address, navigation links and copyright.
JIRA
Installation
Installation with Veams from local machine
veams install bp absolute/filepath/to/footer
Installation with npm or Veams
When published on npm you can install the coreComponent by executing:
veams install veams-coreComponent footer
Fields
footer.hbs
Settings
| Parameter | Type | Default | Description |
|---|---|---|---|
| settings.footerClasses | String | '' |
Modifier classes for component |
Content
| Parameter | Type | Description |
|---|---|---|
| content.navigation | Object | Data for embedded navigation (social media links) |
| content.footerContent | Object | Data for the footer content (address) |
| content.headline | String | Headline from the address |
| content.termTel | String | Definition term from telephone |
| content.property | String | Property attribute for phone number |
| content.definitionTel | String | Phone number |
| content.termFax | String | Definition term from fax |
| content.definitionFax | String | Fax number |
| content.contentLink | String | Link text |
| content.siteNavigation | Object | Data for embedded navigation (links and copyright) |
footer__navigation.hbs
Content
| Parameter | Type | Description |
|---|---|---|
| content.headline | String | Hidden headline |
| content.items | Array | List of list items |
footer__navigation-item.hbs
Content
| Parameter | Type | Description |
|---|---|---|
| content.itemClasses | String | Modifier Class for the list item |
footer__address-teaser.hbs
Content
| Parameter | Type | Description |
|---|---|---|
| content.addressTeaser | Object | Data for address |
| content.headline | String | Headline |
| content.linkHref | String | Link href |
| content.linkTarget | String | Link target |
| content.linkText | String | Link text |
| content.src | String | Image source |
| content.alt | String | Alternative text for the image |
footer__site-navigation.hbs
Content
| Parameter | Type | Description |
|---|---|---|
| content.headline | String | Hidden headline |
| content.items | Array | List of list items |
footer-site-navigation-item.hbs
Content
| Parameter | Type | Description |
|---|---|---|
| content.itemClasses | String | Modifier class for copyright |
| content.copyrightText | String | Copyright text |
SASS
Modifier Classes
You can add the following modifiers to footer__navigation-list-item in the footer-navigation-item.hbs:
| Modifier | Description |
|---|---|
| is-home | For the home icon |
| is-map | For the facebook icon |
| is-mastodon | For the mastodon icon |
| is-bluesky | For the bluesky icon |
| is-facebook | For the facebook icon |
| is-twitter | For the X icon |
| is-instagram | For the instagram icon |
Templates
footer.hbs
<footer id="footer" class="c-footer{{#if settings.footerClasses}} {{settings.footerClasses}}{{/if}}" data-js-item="footer">
{{#wrapWith "grid__container"}}
{{#wrapWith "grid__row"}}
{{#with content.navigation}}
{{> footer__navigation }}
{{/with}}
{{#with content.footerContent}}
<div class="footer__content">
<div class="footer__wrapper">
<div class="footer__content-wrapper" itemscope itemtype="https://schema.org/Organization">
<h2 class="footer__content-headline" itemprop="name">{{headline}}</h2>
<address class="footer__content-address" itemprop="address" itemscope itemtype="https://schema.org/PostalAddress">
<span class="footer__content-address-line" itemprop="streetAddress">{{street}}</span>
<span itemprop="postalCode">{{plz}}</span> <span itemprop="addressLocality">{{city}}</span>
</address>
<div class="footer__content-address">
<dl class="footer__content-address-list">
<dt class="footer__content-address-list-term">{{termTel}}</dt>
<dd class="footer__content-address-list-definition"><a class="footer__content-address-list-definition-link {{#if modifierClasses}}{{modifierClasses}}{{/if}}" href="tel:+498921800" {{#if property}}property="{{property}}"{{/if}}><span class="footer__content-address-list-definition-text" itemprop="telephone">{{definitionTel}}</span></a></dd>
</dl>
<dl class="footer__content-address-list">
<dt class="footer__content-address-list-term">{{termFax}}</dt>
<dd class="footer__content-address-list-definition"><a class="footer__content-address-list-definition-link {{#if modifierClasses}}{{modifierClasses}}{{/if}}" href="tel:+498921802322" {{#if property}}property="{{property}}"{{/if}}><span class="footer__content-address-list-definition-text" itemprop="faxNumber">{{definitionFax}}</span></a></dd>
</dl>
</div>
<div class="footer__content-link-wrapper">
<a href="#" class="footer__content-link">{{contentLink}}</a>
</div>
</div>
</div>
</div>
{{/with}}
{{#with content.siteNavigation}}
{{> footer__site-navigation }}
{{/with}}
{{/wrapWith}}
{{/wrapWith}}
</footer>
footer__address-teaser.hbs
{{#with addressTeaser}}
<div class="footer__address-teaser">
<div class="footer__address-teaser-text-section">
<h3 class="footer__address-teaser-headline">{{content.headline}}</h3>
<a href="{{#if content.linkHref}}{{content.linkHref}}{{else}}#{{/if}}"{{#if content.linkTarget}} target="{{content.linkTarget}}" title="Link öffnet in neuem Fenster"{{/if}} class="footer__address-teaser-link">{{content.linkText}}</a>
</div>
<div class="footer__address-teaser-image-section">
<span class="footer__address-teaser-image-pulse"></span>
<img class="footer__address-teaser-image" src="{{getUrl content.src}}" alt="{{content.alt}}"/>
</div>
<a href="{{#if content.linkHref}}{{content.linkHref}}{{else}}#{{/if}}" class="footer__address-teaser-a11y-clickarea"{{#if content.linkTarget}} target="{{content.linkTarget}}" title="Link öffnet in neuem Fenster"{{/if}} aria-hidden="true" tabindex="-1"></a>
</div>
{{/with}}
footer__navigation.hbs
<div class="footer__wrapper">
<div class="footer__content-wrapper">
<nav class="footer__navigation">
<h6 class="footer__navigation-headline">{{headline}}</h6>
<ul class="footer__navigation-list">
{{#each items }}
{{> footer__navigation-item}}
{{/each}}
</ul>
</nav>
</div>
</div>
footer__navigation-item.hbs
<li class="footer__navigation-list-item{{#if itemClasses}} {{itemClasses}}{{/if}}">
{{#if linkText }}
<a class="footer__navigation-list-link" href="{{#if linkHref}}{{linkHref}}{{else}}#{{/if}}"{{#if linkTarget}} target="{{linkTarget}}" title="Link öffnet in neuem Fenster" {{/if}}><span class="footer__navigation-list-link-text">{{{linkText}}}</span></a>
{{else}}
{{> footer__address-teaser}}
{{/if}}
</li>
footer__site-navigation.hbs
<div class="footer__wrapper">
<div class="footer__content-wrapper">
<nav class="footer__site-navigation">
<h6 class="footer__site-navigation-headline">{{headline}}</h6>
<ul class="footer__site-navigation-list">
{{#each items }}
{{> footer__site-navigation-item}}
{{/each}}
</ul>
</nav>
</div>
</div>
footer__site-navigation-item.hbs
<li class="footer__site-navigation-list-item{{#if itemClasses}} {{itemClasses}}{{/if}}">
{{#if linkText }}
<a class="footer__site-navigation-list-link" href="#">{{{linkText}}}</a>
{{else}}
<span class="footer__site-navigation-list-copy">{{{copyrightText}}}</span>
{{/if}}
</li>
Data File
footer.hjson
{
"title": "Footer",
"variations": {
"default": {
"docs": {
"variationName": "Default"
},
"settings": {
"footerClasses": false
},
"content": {
"navigation": {
"headline": "Weiterführende Links",
"items": [
{
"itemClasses": "is-home",
"linkText": "Home",
"linkHref": "#"
},
{
"itemClasses": "is-map",
"addressTeaser": {
"content": {
"src": "./media/footer/footer-map.png",
"alt": "Lorem Ipsum",
"headline": "Ludwig-Maximilians-Universität München",
"linkText": "Route anzeigen",
"linkHref": "#",
"linkTarget": "_blank"
}
}
},
{
"itemClasses": "is-instagram",
"linkText": "Instagram",
"linkHref": "#",
"linkTarget": "_blank"
},
{
"itemClasses": "is-youtube",
"linkText": "YouTube",
"linkHref": "#",
"linkTarget": "_blank"
},
{
"itemClasses": "is-linkedin",
"linkText": "LinkedIn",
"linkHref": "#",
"linkTarget": "_blank"
},
{
"itemClasses": "is-bluesky",
"linkText": "Bluesky",
"linkHref": "#",
"linkTarget": "_blank"
},
{
"itemClasses": "is-mastodon",
"linkText": "Mastodon",
"linkHref": "#",
"linkTarget": "_blank"
}
]
},
"footerContent": {
"headline": "Ludwig-Maximilians-Universität München",
"street": "Geschwister-Scholl-Platz 1",
"plz": "80539",
"city": "München",
"modifierClasses": "is-telephone",
"termTel": "Telefon:",
"property":"telephone",
"definitionTel": "+49(0)89/2180-0",
"termFax": "Fax:",
"definitionFax": "+49(0)89/2180-2322",
"contentLink": "Zu unserem Raumfinder"
},
"siteNavigation": {
"headline": "Weiterführende Links",
"items": [
{
"linkText": "Organisationseinheiten"
},
{
"linkText": "Servicebereich"
},
{
"linkText": "Karriere"
},
{
"linkText": "Presse"
},
{
"linkText": "Impressum"
},
{
"linkText": "Sitemap"
},
{
"itemClasses": "is-copyright",
"copyrightText": "LMU München © 2018"
}
]
}
}
}
}
}
Styles
footer.scss
/* ===================================================
coreComponent: footer
=================================================== */
.c-footer {
position: relative;
display: block;
width: 100%;
height: 100%;
margin-top: 193px;
background: $color-dark url('../img/footer-bg.svg') -45% center no-repeat;
background-size: 150% 150%;
@include print() {
margin-top: 20px;
border-top: 1px solid $color-gray-border;
}
.footer__wrapper {
position: relative;
z-index: 2;
}
/*
NAVIGATION Top
----------------------- */
.footer__navigation {
margin-bottom: 55px;
}
.footer__navigation-headline {
@include hidden-text();
}
.footer__navigation-list {
position: relative;
z-index: 2;
align-items: flex-start;
overflow: hidden;
@include bp($bp-mobile-s) {
@include grid-pull-v(2);
}
@include bp($bp-mobile-p) {
@include grid-pull-v(1);
}
@include bp($bp-tablet-p) {
@include grid-pull-v(1);
}
@include print() {
display: none;
}
}
.footer__navigation-list-item {
position: relative;
@include bp($bp-mobile-s) {
@include grid-box(2);
border-right: none;
}
@include bp($bp-mobile-p) {
@include grid-box(1);
border-right: 1px solid $color-white;
&:last-child {
border-right: none;
}
}
/*
MODIFIERS
----------------------- */
&.is-home {
border: none;
.footer__navigation-list-link {
border-color: $color-green;
background-color: $color-green;
transition: border $animation-duration-std $animation-easing-std, background $animation-duration-std $animation-easing-std;
&:hover,
&.a11y-focus-key {
background-color: $color-white;
border-color: $color-green;
color: $color-green;
.footer__navigation-list-link-text {
@include sprites-icon-home-green();
@include hcm() {
color: $color-black;
height: auto;
width: auto;
font-size: 16px;
}
}
}
}
.footer__navigation-list-link-text {
@include hidden-text();
@include sprites-icon-home-white();
@include hcm() {
color: $color-black;
height: auto;
width: auto;
font-size: 16px;
}
@include bp($bp-mobile-s) {
transform: scale(.7);
}
@include bp($bp-mobile-p) {
transform: scale(.7);
}
@include bp($bp-desktop-m) {
transform: scale(1);
}
}
}
&.is-map {
position: relative;
border: none;
overflow: hidden;
@include bp($bp-mobile-s) {
@include grid-column-width(8);
height: calc(.56vw * 100);
}
@include bp($bp-mobile-p) {
@include grid-column-width(6);
@include grid-column-height(4);
}
@include bp($bp-tablet-p) {
@include grid-column-width(6);
height: calc(.19667vw * 100);
}
@include bp(1580px) {
@include grid-column-height(2);
}
@include print() {
display: none;
}
&::before {
@include pseudo();
background-color: $color-white;
width: 100%;
height: 100%;
display: block;
}
.footer__navigation-list-link {
position: relative;
}
}
&.is-facebook,
&.is-twitter,
&.is-instagram,
&.is-youtube,
&.is-linkedin,
&.is-researchgate,
&.is-academia,
&.is-orcid,
&.is-bluesky,
&.is-mastodon {
border-bottom: 1px solid $color-white;
@include bp($bp-mobile-p) {
border-bottom: none;
}
.footer__navigation-list-link {
border-color: $color-blue;
background-color: $color-blue;
transition: all $animation-duration-std $animation-easing-std;
&:hover,
&.a11y-focus-key {
background-color: $color-white;
border-color: $color-blue;
color: $color-blue;
}
}
}
&.is-bluesky {
.footer__navigation-list-link-text {
@include hidden-text();
@include sprites-icon-bluesky-white();
transform: scale(.7);
@include bp($bp-mobile-p) {
transform: scale(.7);
}
@include bp($bp-desktop-m) {
transform: scale(1);
}
@include hcm() {
color: $color-black;
height: auto;
width: auto;
font-size: 1.6rem;
}
}
.footer__navigation-list-link {
&:hover,
&.a11y-focus-key {
.footer__navigation-list-link-text {
@include sprites-icon-bluesky-blue();
@include hcm() {
color: $color-black;
height: auto;
width: auto;
font-size: 16px;
}
}
}
}
}
&.is-mastodon {
.footer__navigation-list-link-text {
@include hidden-text();
@include sprites-icon-mastodon-white();
transform: scale(.7);
@include bp($bp-mobile-p) {
transform: scale(.7);
}
@include bp($bp-desktop-m) {
transform: scale(1);
}
@include hcm() {
color: $color-black;
height: auto;
width: auto;
font-size: 1.6rem;
}
}
.footer__navigation-list-link {
&:hover,
&.a11y-focus-key {
.footer__navigation-list-link-text {
@include sprites-icon-mastodon-blue();
@include hcm() {
color: $color-black;
height: auto;
width: auto;
font-size: 16px;
}
}
}
}
}
&.is-facebook {
.footer__navigation-list-link-text {
@include hidden-text();
@include sprites-icon-facebook-white();
transform: scale(.7);
@include bp($bp-mobile-p) {
transform: scale(.7);
}
@include bp($bp-desktop-m) {
transform: scale(1);
}
@include hcm() {
color: $color-black;
height: auto;
width: auto;
font-size: 1.6rem;
}
}
.footer__navigation-list-link {
&:hover,
&.a11y-focus-key {
.footer__navigation-list-link-text {
@include sprites-icon-facebook-blue();
@include hcm() {
color: $color-black;
height: auto;
width: auto;
font-size: 16px;
}
}
}
}
}
&.is-twitter {
.footer__navigation-list-link-text {
@include hidden-text();
@include sprites-icon-twitter-white();
transform: scale(.7);
@include bp($bp-mobile-p) {
transform: scale(.7);
}
@include bp($bp-desktop-m) {
transform: scale(1);
}
@include hcm() {
color: $color-black;
height: auto;
width: auto;
font-size: 16px;
}
}
.footer__navigation-list-link {
&:hover,
&.a11y-focus-key {
.footer__navigation-list-link-text {
@include sprites-icon-twitter-blue();
@include hcm() {
color: $color-black;
height: auto;
width: auto;
font-size: 16px;
}
}
}
}
}
&.is-instagram {
.footer__navigation-list-link-text {
@include hidden-text();
@include sprites-icon-instagram-white();
transform: scale(.7);
@include bp($bp-mobile-p) {
transform: scale(.7);
}
@include bp($bp-desktop-m) {
transform: scale(1);
}
@include hcm() {
color: $color-black;
height: auto;
width: auto;
font-size: 16px;
}
}
.footer__navigation-list-link {
&:hover,
&.a11y-focus-key {
.footer__navigation-list-link-text {
@include sprites-icon-instagram-blue();
@include hcm() {
color: $color-black;
height: auto;
width: auto;
font-size: 16px;
}
}
}
}
}
&.is-youtube {
border-bottom: none;
.footer__navigation-list-link-text {
@include hidden-text();
@include sprites-icon-youtube-white();
transform: scale(.7);
@include bp($bp-mobile-p) {
transform: scale(.7);
}
@include bp($bp-desktop-m) {
transform: scale(1);
}
@include hcm() {
color: $color-black;
height: auto;
width: auto;
font-size: 16px;
}
}
.footer__navigation-list-link {
&:hover,
&.a11y-focus-key {
.footer__navigation-list-link-text {
@include sprites-icon-youtube-blue();
@include hcm() {
color: $color-black;
height: auto;
width: auto;
font-size: 16px;
}
}
}
}
}
&.is-linkedin {
border-bottom: none;
.footer__navigation-list-link-text {
@include hidden-text();
@include sprites-icon-linkedin-white();
transform: scale(.7);
@include bp($bp-mobile-p) {
transform: scale(.7);
}
@include bp($bp-desktop-m) {
transform: scale(1);
}
@include hcm() {
color: $color-black;
height: auto;
width: auto;
font-size: 16px;
}
}
.footer__navigation-list-link {
&:hover,
&.a11y-focus-key {
.footer__navigation-list-link-text {
@include sprites-icon-linkedin-blue();
@include hcm() {
color: $color-black;
height: auto;
width: auto;
font-size: 16px;
}
}
}
}
}
&.is-researchgate {
border-bottom: none;
.footer__navigation-list-link-text {
@include hidden-text();
@include sprites-icon-researchgate-white();
transform: scale(.7);
@include bp($bp-mobile-p) {
transform: scale(.7);
}
@include bp($bp-desktop-m) {
transform: scale(1);
}
@include hcm() {
color: $color-black;
height: auto;
width: auto;
font-size: 16px;
}
}
.footer__navigation-list-link {
&:hover,
&.a11y-focus-key {
.footer__navigation-list-link-text {
@include sprites-icon-researchgate-blue();
@include hcm() {
color: $color-black;
height: auto;
width: auto;
font-size: 16px;
}
}
}
}
}
&.is-academia {
border-bottom: none;
.footer__navigation-list-link-text {
@include hidden-text();
@include sprites-icon-academia-white();
transform: scale(.7);
@include bp($bp-mobile-p) {
transform: scale(.7);
}
@include bp($bp-desktop-m) {
transform: scale(1);
}
@include hcm() {
color: $color-black;
height: auto;
width: auto;
font-size: 16px;
}
}
.footer__navigation-list-link {
&:hover,
&.a11y-focus-key {
.footer__navigation-list-link-text {
@include sprites-icon-academia-blue();
@include hcm() {
color: $color-black;
height: auto;
width: auto;
font-size: 16px;
}
}
}
}
}
&.is-orcid {
border-bottom: none;
.footer__navigation-list-link-text {
@include hidden-text();
@include sprites-icon-orcid-white();
transform: scale(.7);
@include bp($bp-mobile-p) {
transform: scale(.7);
}
@include bp($bp-desktop-m) {
transform: scale(1);
}
@include hcm() {
color: $color-black;
height: auto;
width: auto;
font-size: 16px;
}
}
.footer__navigation-list-link {
&:hover,
&.a11y-focus-key {
.footer__navigation-list-link-text {
@include sprites-icon-orcid-blue();
@include hcm() {
color: $color-black;
height: auto;
width: auto;
font-size: 16px;
}
}
}
}
}
}
.footer__navigation-list-link-text {
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
display: block;
}
}
.footer__navigation-list-link {
position: absolute;
top: 0;
left: 0;
display: flex;
width: 100%;
height: 100%;
text-decoration: none;
border: 1px solid;
color: $color-white;
justify-content: center;
align-items: center;
cursor: pointer;
@include print() {
border: none;
}
&.a11y-focus-key { // NORMAL A11Y-STYLES NOT WORKING PROPERLY
outline-offset: -2px;
}
}
/*
Address-Teaser
----------------------- */
.footer__address-teaser {
position: relative;
display: flex;
justify-content: flex-start;
@include bp($bp-mobile-s) {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
&:hover {
.footer__address-teaser-link {
color: $color-dark;
&::before {
opacity: 0;
}
&::after {
opacity: 1;
}
}
.footer__address-teaser-image-pulse {
animation: pulse 2s infinite;
}
}
.footer__address-teaser-link {
display: block;
position: absolute;
z-index: 1;
left: 10px;
bottom: 10px;
right: 10px;
padding-left: 25px;
font-family: $font-bold;
font-weight: 700;
text-decoration: none;
color: $color-green;
transition: color $animation-duration-std $animation-easing-std;
font-size: 1.3rem;
line-height: (21/13);
letter-spacing: .22px;
@include bp($bp-desktop-m) {
left: 20px;
bottom: 20px;
right: 20px;
font-size: 1.6rem;
line-height: (24/16);
letter-spacing: .3px;
}
&.a11y-focus-key {
color: $color-dark;
&::before {
opacity: 0;
}
&::after {
opacity: 1;
}
}
&::before {
@include sprites-icon-externalarrow-green100();
@include pseudo();
left: 0;
top: 3px;
opacity: 1;
transition: opacity $animation-duration-std $animation-easing-std;
}
&::after {
@include sprites-icon-externalarrow-black();
@include pseudo();
left: 0;
top: 3px;
opacity: 0;
transition: opacity $animation-duration-std $animation-easing-std;
}
}
.footer__address-teaser-image-pulse {
@include centering(hv);
position: absolute;
display: block;
width: 30px;
height: 30px;
border-radius: 50%;
background: $color-green;
border: 6px solid $color-white;
cursor: pointer;
box-shadow: 0 0 0 rgba(0, 136, 58, .4);
animation: none;
z-index: 1;
}
@-webkit-keyframes pulse {
0% {
-webkit-box-shadow: 0 0 0 0 rgba(0, 136, 58, .4);
}
70% {
-webkit-box-shadow: 0 0 0 55px rgba(0, 136, 58, 0);
}
100% {
-webkit-box-shadow: 0 0 0 0 rgba(0, 136, 58, 0);
}
}
@keyframes pulse {
0% {
-moz-box-shadow: 0 0 0 0 rgba(0, 136, 58, .4);
box-shadow: 0 0 0 0 rgba(0, 136, 58, .4);
}
70% {
-moz-box-shadow: 0 0 0 10px rgba(0, 136, 58, 0);
box-shadow: 0 0 0 55px rgba(0, 136, 58, 0);
}
100% {
-moz-box-shadow: 0 0 0 0 rgba(0, 136, 58, 0);
box-shadow: 0 0 0 0 rgba(0, 136, 58, 0);
}
}
.footer__address-teaser-image-section {
position: relative;
overflow: hidden;
@include bp($bp-mobile-s) {
display: none;
}
@include bp($bp-mobile-p) {
display: none;
}
@include bp($bp-tablet-p) {
@include grid-column(6);
display: block;
}
}
.footer__address-teaser-image {
@include centering(hv);
width: 100%;
height: auto;
max-width: none;
min-height: 100%;
}
.footer__address-teaser-text-section {
position: relative;
display: flex;
background: $color-white;
padding: 0;
@include bp($bp-mobile-p) {
@include grid-column(12);
}
@include bp($bp-tablet-p) {
@include grid-column(6);
}
}
.footer__address-teaser-headline {
display: block;
color: $color-dark;
font-family: $font-bold;
font-weight: 700;
font-size: 1.5rem;
line-height: (21/15);
letter-spacing: .22px;
padding-left: 10px;
padding-top: 10px;
padding-right: 10px;
@include bp($bp-desktop-m) {
font-size: 2rem;
line-height: (24/20);
letter-spacing: .3px;
padding-left: 20px;
padding-top: 10px;
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { //IE10
max-width: 300px;
}
}
.footer__address-teaser-a11y-clickarea {
@include clickarea();
cursor: pointer;
}
}
/*
CONTENT
----------------------- */
.footer__content {
position: relative;
z-index: 2;
color: $color-white;
font-size: 1.5rem;
letter-spacing: .28px;
line-height: (24/15);
@include bp($bp-desktop-m) {
font-size: 1.6rem;
letter-spacing: .3px;
}
}
.footer__content-headline {
margin-bottom: 17px;
font-family: $font-bold;
font-weight: 700;
line-height: 1.6em; // refactor to unitless line-height
font-size: 1.8rem;
letter-spacing: .27px;
text-decoration: none;
color: $color-white;
@include bp($bp-tablet-p) {
margin-bottom: 27px;
}
@include bp($bp-desktop-m) {
font-size: 2rem;
letter-spacing: .3px;
}
}
.footer__content-link-wrapper {
display: block;
}
.footer__content-link {
display: inline-block;
position: relative;
z-index: 1;
font-family: $font-regular;
font-weight: 400;
text-decoration: none;
color: $color-green60;
padding-left: 25px;
transition: all $animation-duration-std $animation-easing-std;
font-size: 1.5rem;
letter-spacing: .28px;
line-height: (24/15);
@include bp($bp-desktop-m) {
font-size: 1.6rem;
letter-spacing: .3px;
}
@include print() {
display: none;
}
&::before {
@include sprites-icon-arrow-green60();
@include pseudo();
left: 0;
top: 3px;
opacity: 1;
transition: opacity $animation-duration-std $animation-easing-std;
}
&::after {
@include sprites-icon-arrow-white();
@include pseudo();
left: 0;
top: 3px;
opacity: 0;
transition: opacity $animation-duration-std $animation-easing-std;
}
&:hover {
color: $color-white;
&::before {
opacity: 0;
}
&::after {
opacity: 1;
}
}
&:focus,
&.a11y-focus-key {
@include a11y-focus-key-gray();
}
}
.footer__content-address {
display: inline-block;
width: auto;
margin-bottom: 27px;
vertical-align: top;
color: $color-gray-light;
font-size: 1.5rem;
letter-spacing: .28px;
line-height: (24/15);
@include bp($bp-mobile-p) {
padding-right: 100px;
}
@include bp($bp-desktop-m) {
padding-right: 100px;
font-size: 1.6rem;
letter-spacing: .3px;
}
@include print() {
display: block;
}
}
.footer__content-address-line {
display: block;
}
.footer__content-address-list-term {
display: inline-block;
vertical-align: top;
width: 100px;
font-family: $font-regular;
font-weight: 400;
}
.footer__content-address-list-definition {
display: inline-block;
font-family: $font-regular;
font-weight: 400;
}
.footer__content-address-list-definition-link {
color: $color-gray-light;
text-decoration: none;
&:focus,
&.a11y-focus-key {
@include a11y-focus-key-gray();
}
@include print() {
&[href]::after {
content: '';
}
}
}
/*
NAVIGATION Top
----------------------- */
.footer__site-navigation {
width: 100%;
margin-top: 50px;
margin-bottom: 40px;
@include bp($bp-tablet-p) {
margin-top: 80px;
}
}
.footer__site-navigation-headline {
@include hidden-text();
@include grid-column();
}
.footer__site-navigation-list-item {
display: block;
margin-bottom: 20px;
@include bp($bp-tablet-l) {
display: inline-block;
margin-bottom: 0;
}
@include print() {
display: none;
}
/*
MODIFIERS
----------------------- */
&.is-copyright {
margin-top: 60px;
@include bp($bp-tablet-p) {
float: right;
margin-top: 0;
}
@include print() {
display: block;
}
}
}
.footer__site-navigation-list-link {
position: relative;
display: block;
color: $color-gray-light;
text-decoration: none;
margin-right: 12px;
font-family: $font-regular;
font-weight: 400;
font-size: 1.5rem;
letter-spacing: .28px;
line-height: (24/15);
&::before {
@include pseudo();
height: 1px;
width: 100%;
background: $color-gray-light;
bottom: 0;
left: 0;
right: 0;
opacity: 0;
transition: opacity $animation-duration-std $animation-easing-std;
}
&:hover {
&::before {
opacity: 1;
}
}
&:focus,
&.a11y-focus-key {
@include a11y-focus-key-gray();
}
@include bp($bp-mobile-p) {
display: inline-block;
}
@include bp($bp-desktop-m) {
margin-right: 30px;
font-size: 1.6rem;
letter-spacing: .3px;
}
}
.footer__site-navigation-list-copy {
color: $color-gray-light;
font-family: $font-regular;
font-weight: 400;
font-size: 1.5rem;
letter-spacing: .28px;
line-height: (24/15);
@include bp($bp-desktop-m) {
font-size: 1.6rem;
letter-spacing: .3px;
}
}
}
HTML Output
Default
<footer id="footer" class="c-footer" data-js-item="footer">
<div class="grid__container">
<div class="grid__row">
<div class="footer__wrapper">
<div class="footer__content-wrapper">
<nav class="footer__navigation">
<h6 class="footer__navigation-headline">Weiterführende Links</h6>
<ul class="footer__navigation-list">
<li class="footer__navigation-list-item is-home">
<a class="footer__navigation-list-link" href="#"><span class="footer__navigation-list-link-text">Home</span></a>
</li>
<li class="footer__navigation-list-item is-map">
<div class="footer__address-teaser">
<div class="footer__address-teaser-text-section">
<h3 class="footer__address-teaser-headline">Ludwig-Maximilians-Universität München</h3>
<a href="#" target="_blank" title="Link öffnet in neuem Fenster" class="footer__address-teaser-link">Route anzeigen</a>
</div>
<div class="footer__address-teaser-image-section">
<span class="footer__address-teaser-image-pulse"></span>
<img class="footer__address-teaser-image" src="././media/footer/footer-map.png" alt="Lorem Ipsum" />
</div>
<a href="#" class="footer__address-teaser-a11y-clickarea" target="_blank" title="Link öffnet in neuem Fenster" aria-hidden="true" tabindex="-1"></a>
</div>
</li>
<li class="footer__navigation-list-item is-instagram">
<a class="footer__navigation-list-link" href="#" target="_blank" title="Link öffnet in neuem Fenster"><span class="footer__navigation-list-link-text">Instagram</span></a>
</li>
<li class="footer__navigation-list-item is-youtube">
<a class="footer__navigation-list-link" href="#" target="_blank" title="Link öffnet in neuem Fenster"><span class="footer__navigation-list-link-text">YouTube</span></a>
</li>
<li class="footer__navigation-list-item is-linkedin">
<a class="footer__navigation-list-link" href="#" target="_blank" title="Link öffnet in neuem Fenster"><span class="footer__navigation-list-link-text">LinkedIn</span></a>
</li>
<li class="footer__navigation-list-item is-bluesky">
<a class="footer__navigation-list-link" href="#" target="_blank" title="Link öffnet in neuem Fenster"><span class="footer__navigation-list-link-text">Bluesky</span></a>
</li>
<li class="footer__navigation-list-item is-mastodon">
<a class="footer__navigation-list-link" href="#" target="_blank" title="Link öffnet in neuem Fenster"><span class="footer__navigation-list-link-text">Mastodon</span></a>
</li>
</ul>
</nav>
</div>
</div>
<div class="footer__content">
<div class="footer__wrapper">
<div class="footer__content-wrapper" itemscope itemtype="https://schema.org/Organization">
<h2 class="footer__content-headline" itemprop="name">Ludwig-Maximilians-Universität München</h2>
<address class="footer__content-address" itemprop="address" itemscope itemtype="https://schema.org/PostalAddress">
<span class="footer__content-address-line" itemprop="streetAddress">Geschwister-Scholl-Platz 1</span>
<span itemprop="postalCode">80539</span> <span itemprop="addressLocality">München</span>
</address>
<div class="footer__content-address">
<dl class="footer__content-address-list">
<dt class="footer__content-address-list-term">Telefon:</dt>
<dd class="footer__content-address-list-definition"><a class="footer__content-address-list-definition-link is-telephone" href="tel:+498921800" property="telephone"><span class="footer__content-address-list-definition-text" itemprop="telephone">+49(0)89/2180-0</span></a></dd>
</dl>
<dl class="footer__content-address-list">
<dt class="footer__content-address-list-term">Fax:</dt>
<dd class="footer__content-address-list-definition"><a class="footer__content-address-list-definition-link is-telephone" href="tel:+498921802322" property="telephone"><span class="footer__content-address-list-definition-text" itemprop="faxNumber">+49(0)89/2180-2322</span></a></dd>
</dl>
</div>
<div class="footer__content-link-wrapper">
<a href="#" class="footer__content-link">Zu unserem Raumfinder</a>
</div>
</div>
</div>
</div>
<div class="footer__wrapper">
<div class="footer__content-wrapper">
<nav class="footer__site-navigation">
<h6 class="footer__site-navigation-headline">Weiterführende Links</h6>
<ul class="footer__site-navigation-list">
<li class="footer__site-navigation-list-item">
<a class="footer__site-navigation-list-link" href="#">Organisationseinheiten</a>
</li>
<li class="footer__site-navigation-list-item">
<a class="footer__site-navigation-list-link" href="#">Servicebereich</a>
</li>
<li class="footer__site-navigation-list-item">
<a class="footer__site-navigation-list-link" href="#">Karriere</a>
</li>
<li class="footer__site-navigation-list-item">
<a class="footer__site-navigation-list-link" href="#">Presse</a>
</li>
<li class="footer__site-navigation-list-item">
<a class="footer__site-navigation-list-link" href="#">Impressum</a>
</li>
<li class="footer__site-navigation-list-item">
<a class="footer__site-navigation-list-link" href="#">Sitemap</a>
</li>
<li class="footer__site-navigation-list-item is-copyright">
<span class="footer__site-navigation-list-copy">LMU München © 2018</span>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</footer>