Styleguide

Submenu: Featured 

<div class="a-submenu a-submenu--featured">
    <div class="a-submenu--featured__cat-title">
        <h2 class="a-cat-title">
            <span class="a-cat-title__link a-cat-title__link--no-link">Fair-Food-Initiative</span>
        </h2>
    </div>
    <div class="a-submenu--featured__image">
        <figure class="a-image a-image--cover">
            <a class="a-image__link" href="#" tabindex="-1">
                <img src="/img/wheat_ratio.jpg" alt="Symbolbild Fair-Food" title="This is a linked image" class="a-image__image a-image__image--fp a-image__image--fp-">
            </a>
            <figcaption>

            </figcaption>
        </figure>
    </div>
    <a class="a-submenu--featured__link" href="#">
        <h3 class="a-submenu--featured__link__title">Fair schmeckt besser!</h3>
    </a>
    <p class="a-submenu--featured__text">Umweltfreundlich und fair hergestellte Lebensmittel – dies wollen die Grünen mit der Fair-Food-Initiative erreichen.</p>
    <button type="button" class="a-button ">Kampagne anzeigen</button>
</div>
 
<div class="a-submenu {{ modifiers_classes }}">
	{{#if featured}}
		<div class="a-submenu--featured__cat-title">
			{{> @a-cat-title cat-title}}
		</div>
		<div class="a-submenu--featured__image">
			{{> @a-image link-image }}
		</div>
		<a class="a-submenu--featured__link" href="{{ this.url }}">
			<h3 class="a-submenu--featured__link__title">{{ title }}</h3>
		</a>
		{{#if text}}
			<p class="a-submenu--featured__text">{{ text }}</p>
		{{/if}}
		{{#if button}}
			{{> @a-button button}}
		{{/if}}
	{{else}}
		<a class="a-submenu__title" href="{{ url }}">{{ title }}</a>
		<ul class="a-submenu__list">
			{{#each items}}
				<li class="a-submenu__item">
					<a class="a-submenu__link" href="{{ this.url }}">{{ this.label }}</a>
				</li>
			{{/each}}
		</ul>
	{{/if}}
</div>
  • Content: 
    .a-submenu {
	width: 100%;
	max-width: 269px;

	@include media($_DESKTOP) {
		min-width: 177px;
	}

	&__title {
		@include clean-link;
		font-family: $font-title;
		display: block;
		line-height: 2em;
		color: $color-text;
		transition: color $transition-fast $transition-ease;

		&:hover, &--active {
			color: $color-secondary;
		}

		&:focus {
			&:before {
				content: '';
				width: 0;
				height: 0;
				border-left: 1px solid $color-secondary;
				margin-right: 0.5em;
				margin-left: calc(-1px - 0.5em);

				@include media($_DESKTOP) {
					border-left-color: $color-primary;

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

		@include media($_DESKTOP) {
			color: $color-primary;
			margin-bottom: 5px;
			padding-bottom: 12px;
			position: relative;
			line-height: 1.25em;
			transition: color $transition-fast $transition-ease;

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

			&:after {
				content: "";
				width: 0;
				height: 2px;
				background-color: $color-primary-dark;
				position: absolute;
				bottom: 0;
				left: 0;
				transition: width $transition-fast $transition-ease;
			}

			&:hover, &--active {
				color: $color-primary-dark;

				&:after {
					width: 69px;
				}
			}
		}
	}

	&__list {
		@include clean-ul;
		list-style-image: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7); // fix edge bug
	}

	&__item {
		@include clean-li;
		color: $color-text;
		margin: 1em 0 0 1.25em;

		@include media($_DESKTOP) {
			margin: 0;
		}
	}

	&__link {
		@include clean-link;
		color: $color-text;
		line-height: 1.75em;
		padding: 7px 0;
		display: block;
		position: relative;
		transition: color $transition-fast $transition-ease;

		&:hover, &--active {
			color: $color-secondary;

			@include media($_DESKTOP) {
				color: $color-text;
			}
		}

		&:focus {
			&:before {
				content: '';
				width: 0;
				height: 0;
				border-left: 1px solid $color-secondary;
				margin-right: 0.5em;
				margin-left: calc(-1px - 0.5em);

				@include media($_DESKTOP) {
					border-left-color: $color-primary;

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

		@include media($_DESKTOP) {
			&:after {
				content: "";
				width: 36px;
				height: 1px;
				background-color: $color-grey-2;
				position: absolute;
				bottom: 0;
				left: 0;
				transition: width $transition-fast $transition-ease;
			}

			&:hover, &--active {
				color: $color-text;

				&:after {
					width: 69px;
					background-color: $color-primary;

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

	&--featured {
		margin-top: 2em;

		@include media($_DESKTOP) {
			margin-top: initial;
		}

		&__image {
			margin-top: 28px;
			@include aspect-ratio-box(56.25%);
		}

		&__link {
			@include clean-link;

			&__image {
				width: 100%;
				margin-top: 28px;
				transition: transform $transition-fast $transition-ease;
			}

			&__title {
				@include heading-font;
				font-size: 1.25rem;
				line-height: 1.4em;
				margin-top: 16px;
				transition: color $transition-fast $transition-ease;

				@include hover {
					color: $color-primary-dark;
				}
			}
		}
	}

	&--featured__text {
		margin-top: 12px;
		margin-bottom: 28px;
	}
}
  • URL: /components/raw/a-submenu/_a-submenu.scss
  • Filesystem Path: styleguide/src/components/atoms/a-submenu/_a-submenu.scss
  • Size: 3.3 KB 
{
  "title": "Fair schmeckt besser!",
  "url": "#",
  "items": [
    {
      "label": "Fair-Food",
      "url": "#"
    },
    {
      "label": "Petition «Nein zur Lex Beznau»",
      "url": "#"
    },
    {
      "label": "Referendum gegen Versicherungsspione",
      "url": "#"
    },
    {
      "label": "Events",
      "url": "#"
    }
  ],
  "modifiers": [
    "featured"
  ],
  "featured": true,
  "link-image": {
    "link-url": "#",
    "image-src": "/img/wheat_ratio.jpg",
    "alt": "Symbolbild Fair-Food",
    "title": "This is a linked image"
  },
  "cat-title": {
    "label": "Fair-Food-Initiative"
  },
  "text": "Umweltfreundlich und fair hergestellte Lebensmittel – dies wollen die Grünen mit der Fair-Food-Initiative erreichen.",
  "button": {
    "label": "Kampagne anzeigen"
  }
}

No notes defined.