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: 
    @use "sass:math";
@use "../../../scss/variables" as v;
@use "../../../scss/mixins" as m;

.m-campaign-desc {
	background: v.$color-grey-1;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	@include m.fluid-props(padding-left padding-right, v.$fluid-min, v.$fluid-max, 29px, 60px);
	@include m.media(v.$size-large) {
		padding-left: 60px; // don't oversize it for 2k screens
		padding-right: 60px;
	}
	& {
		padding-top: 13px;
		padding-bottom: 40px;
	}

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

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

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

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

		@include m.hover {
			color: v.$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: 1.1 KB 
{
  "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.