Styleguide

Campaign cta 

<div class="m-campaign-cta">
    <h3 class="m-campaign-cta__title">Ich will zum Erfolg beitragen!</h3>
    <p class="m-campaign-cta__text">Hiermit abonniere ich den Newsletter, der mich laufend über alle Aktivitäten und Mitmachmöglichkeiten informiert.</p>
    <form class="m-campaign-cta__grid">
        <div class="m-campaign-cta__postal-code">
            <div class="a-input">
                <label for="plz" class="a-input__label a-input__label--required">
                    PLZ
                </label>
                <input id="plz" class="a-input__field  is-required" type="text" pattern="(\w{0,3}(?&lt;&#x3D;\w)-)?\d{4,6}" name="plz" value="" required>
            </div>
        </div>
        <div class="m-campaign-cta__email">
            <div class="a-input">
                <label for="email" class="a-input__label a-input__label--required">
                    E-Mail
                </label>
                <input id="email" class="a-input__field  is-required" type="email" name="email" value="" required>
            </div>
        </div>
        <div class="m-campaign-cta__consent">
            <div class="a-checkoption">
                <input type="hidden" name="datenschutz" value="0">
                <input id="datenschutz" class="a-checkoption__field" type="checkbox" name="datenschutz" required>
                <label for="datenschutz" class="a-checkoption__label a-checkoption--legal">
                    Ich akzeptiere die Datenschutzbestimmungen.
                </label>
            </div>
        </div>
        <div class="m-campaign-cta__button"> <button type="button" class="a-button a-button--secondary">Mitmachen</button>
        </div>
    </form>
</div>
 
<div class="m-campaign-cta">
	<h3 class="m-campaign-cta__title">{{title}}</h3>
	<p class="m-campaign-cta__text">{{text}}</p>
	<form class="m-campaign-cta__grid">
		<div class="m-campaign-cta__postal-code">{{> @a-input input-postal-code}}</div>
		<div class="m-campaign-cta__email">{{> @a-input input-email}}</div>
		<div class="m-campaign-cta__consent">{{> @a-checkoption checkbox}}</div>
		<div class="m-campaign-cta__button">{{> @a-button button}}</div>
	</form>
</div>
  • Content: 
    .m-campaign-cta {
	background: $color-grey-2;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-between;
	@include fluid-props(padding, $fluid-min, $fluid-max, 29px, 60px);
	@include media($size-large) {
		padding: 60px; // don't oversize it for 2k screens
	}

	&__title {
		margin: 0;
		line-height: 1.3em;
		color: $color-text;
		font-size: 1rem;

		@include media($_DESKTOP) {
			color: $color-secondary;
			transition: color $transition-fast $transition-ease;

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

	&__text {
		margin: 1em 0 0;
	}

	&__link {
		margin-top: 1em;
	}
}
  • URL: /components/raw/m-campaign-cta/_m-campaign-cta.scss
  • Filesystem Path: styleguide/src/components/molecules/m-campaign-cta/_m-campaign-cta.scss
  • Size: 665 Bytes 
{
  "title": "Ich will zum Erfolg beitragen!",
  "text": "Hiermit abonniere ich den Newsletter, der mich laufend über alle Aktivitäten und Mitmachmöglichkeiten informiert.",
  "input-postal-code": {
    "label": "PLZ",
    "id": "plz",
    "type": "text",
    "pattern": "(\\w{0,3}(?<=\\w)-)?\\d{4,6}",
    "required": "required",
    "name": "plz",
    "text": true
  },
  "input-email": {
    "label": "E-Mail",
    "id": "email",
    "type": "email",
    "required": "required",
    "name": "email",
    "text": true
  },
  "checkbox": {
    "label": "Ich akzeptiere die Datenschutzbestimmungen.",
    "id": "datenschutz",
    "name": "datenschutz",
    "required": true,
    "modifiers": [
      "legal"
    ]
  },
  "button": {
    "label": "Mitmachen",
    "modifiers": [
      "secondary"
    ]
  }
}

No notes defined.