Styleguide

Campaign description 

<div class="m-campaign-desc">
    <h2 class="m-campaign-desc__title" id="main-content">
        <a href="" class="m-campaign-desc__link">Fair schmeckt besser!</a>
    </h2>
    <p class="m-campaign-desc__desc">Die Fair-Food Initiative verlangt, was für alle selbstverständlich ist: Lebensmittel aus einer naturnahen, umwelt- und tierfreundlichen Landwirtschaft mit fairen Arbeitsbedingungen fördern. Dabei soll es keine Rolle spielen, ob die Lebensmittel aus der Schweiz stammen oder importiert sind.</p>
    <div class="m-campaign-desc__more">
        <a href="#" class="a-link-button ">
            Mehr über die Fair-Food Initiative
        </a>
    </div>
</div>
 
<div class="m-campaign-desc">
	<h2 class="m-campaign-desc__title" id="main-content">
		<a href="{{url}}" class="m-campaign-desc__link">{{title}}</a>
	</h2>
	<p class="m-campaign-desc__desc">{{text}}</p>
	<div class="m-campaign-desc__more">
		{{> @a-link-button link-button}}
	</div>
</div>
  • Content: 
    .m-campaign-desc {
	background: $color-grey-1;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	@include fluid-props(padding-left padding-right, $fluid-min, $fluid-max, 29px, 60px);
	@include media($size-large) {
		padding-left: 60px; // don't oversize it for 2k screens
		padding-right: 60px;
	}
	padding-top: 13px;
	padding-bottom: 40px;

	@include media($_DESKTOP) {
		padding-right: calc(75px + 39 * (100vw - 375px) / 1305);
	}

	&__title {
		@include fluid-props(font-size, $fluid-min, $fluid-max, 32px, 48px);
		@include media($size-large) {
			font-size: 48px; // don't go over 48 for 2k screens
		}
	}

	&__link {
		@include clean-link;
		color: $color-primary;
		transition: color $transition-fast $transition-ease;

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

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

	&__desc {
		margin: 0 0 0.75em;
		font-size: 1.25rem;
	}
}
  • URL: /components/raw/m-campaign-desc/_m-campaign-desc.scss
  • Filesystem Path: styleguide/src/components/molecules/m-campaign-desc/_m-campaign-desc.scss
  • Size: 947 Bytes 
{
  "title": "Fair schmeckt besser!",
  "text": "Die Fair-Food Initiative verlangt, was für alle selbstverständlich ist: Lebensmittel aus einer naturnahen, umwelt- und tierfreundlichen Landwirtschaft mit fairen Arbeitsbedingungen fördern. Dabei soll es keine Rolle spielen, ob die Lebensmittel aus der Schweiz stammen oder importiert sind.",
  "link-button": {
    "url": "#",
    "label": "Mehr über die Fair-Food Initiative"
  }
}

No notes defined.