Styleguide

Footer meta 

<div class="a-footer-meta">
    <div class="a-footer-meta__wrapper">
        <div class="a-footer-meta__copy">© 2018 Grüne Schweiz</div>
        <nav class="a-footer-meta__menu">
            <ul class="a-footer-meta__list" role="menu" aria-label="Footer Meta Navigation">
                <li class="a-footer-meta__item">
                    <a href="#" class="a-footer-meta__link">Datenschutz</a>
                </li>
                <li class="a-footer-meta__item">
                    <a href="#" class="a-footer-meta__link">Impressum</a>
                </li>
            </ul>
        </nav>
    </div>
</div>
 
<div class="a-footer-meta">
	<div class="a-footer-meta__wrapper">
		<div class="a-footer-meta__copy">{{copy}}</div>
		<nav class="a-footer-meta__menu">
			<ul class="a-footer-meta__list" role="menu" aria-label="{{ aria-label-meta-navigation }}">
				{{#each items}}
					<li class="a-footer-meta__item">
						<a href="{{this.link}}" class="a-footer-meta__link">{{this.label}}</a>
					</li>
				{{/each}}
			</ul>
		</nav>
	</div>
</div>
  • Content: 
    .a-footer-meta {
	background: $color-primary;
	width: 100%;
	font-size: 0.875rem;

	@include high-contrast {
		background: $color-primary-dark;
	}

	&__wrapper {
		max-width: $grid-max-width-max;
		width: 100%;
		margin-left: auto;
		margin-right: auto;
		@include fluid-grid-item-props(padding-left padding-right);
		padding-top: 1.625em;
		padding-bottom: 1.625em;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;

		@include media($_DESKTOP) {
			padding-top: 1.875em;
			padding-bottom: 1.875em;
		}
	}

	&__copy {
		color: $color-white;
		line-height: 1.75em;
		margin-right: 4em;
	}

	&__list {
		margin: 0;
	}

	&__item {
		display: inline-block;
		margin-right: 0.8em;

		&:first-of-type {
			padding-left: 0;
		}

		&:last-of-type {
			margin-right: 0;
		}

		&:first-of-type:before {
			content: none;
		}

		&:before {
			color: $color-white;
		}
	}

	&__link {
		@include clean-link;
		color: $color-white;

		@include hover {
			text-decoration: underline;
		}
	}
}
  • URL: /components/raw/a-footer-meta/_a-footer-meta.scss
  • Filesystem Path: styleguide/src/components/atoms/a-footer-meta/_a-footer-meta.scss
  • Size: 1 KB 
{
  "copy": "© 2018 Grüne Schweiz",
  "aria-label-meta-navigation": "Footer Meta Navigation",
  "items": [
    {
      "label": "Datenschutz",
      "link": "#"
    },
    {
      "label": "Impressum",
      "link": "#"
    }
  ]
}

No notes defined.