Styleguide

In short 

<div class="m-in-short">
    <h2 class="m-in-short__title">In Kürze</h2>
    <ul class="m-in-short__list">
        <li class="m-in-short__item">Der Bund will die olympischen Spiele mit einer Steuermilliarde subventionieren.</li>
        <li class="m-in-short__item">Vergangene Olympiaden haben gezeigt: Meist kommt es viel teurer als geplant und das Gastland muss nachbezahlen.</li>
        <li class="m-in-short__item">Schon drei mal hat die schweizer Bevölkerung die olympischen Spiele abgelehnt. Nun will der Bundesrat nicht darüber abstimmen lassen.</li>
    </ul>
    <form class="m-in-short__grid">
        <div class="m-in-short__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 a-input--invers is-required" type="text" pattern="(\w{0,3}(?&lt;&#x3D;\w)-)?\d{4,6}" name="plz" value="" required>
            </div>
        </div>
        <div class="m-in-short__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 a-input--invers is-required" type="email" name="email" value="" required>
            </div>
        </div>
        <div class="m-in-short__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-in-short__button"> <button type="button" class="a-button a-button--secondary">Mitmachen</button>
        </div>
    </form>
</div>
 
<div class="m-in-short">
	<h2 class="m-in-short__title">{{title}}</h2>
	{{# if bullet_points}}
		<ul class="m-in-short__list">
			{{#each bullet_points}}
				<li class="m-in-short__item">{{.}}</li>
			{{/each}}
		</ul>
	{{/if}}
	<form class="m-in-short__grid">
		<div class="m-in-short__postal-code">{{> @a-input call_to_action.input-postal-code}}</div>
		<div class="m-in-short__email">{{> @a-input call_to_action.input-email}}</div>
		<div class="m-in-short__consent">{{> @a-checkoption call_to_action.checkbox}}</div>
		<div class="m-in-short__button">{{> @a-button call_to_action.button}}</div>
	</form>
</div>
  • Content: 
    .m-in-short {
	&__title {
		@extend h3;
	}

	.m-in-short__title {
		// we need two levels of binding to overwrite the @extend from above
		color: $color-text;
		margin-top: 0;
	}

	&__item {
		hyphens: auto;
	}
}
  • URL: /components/raw/m-in-short/_m-in-short.scss
  • Filesystem Path: styleguide/src/components/molecules/m-in-short/_m-in-short.scss
  • Size: 213 Bytes 
{
  "title": "In Kürze",
  "bullet_points": [
    "Der Bund will die olympischen Spiele mit einer Steuermilliarde subventionieren.",
    "Vergangene Olympiaden haben gezeigt: Meist kommt es viel teurer als geplant und das Gastland muss nachbezahlen.",
    "Schon drei mal hat die schweizer Bevölkerung die olympischen Spiele abgelehnt. Nun will der Bundesrat nicht darüber abstimmen lassen."
  ],
  "call_to_action": {
    "input-postal-code": {
      "label": "PLZ",
      "id": "plz",
      "type": "text",
      "pattern": "(\\w{0,3}(?<=\\w)-)?\\d{4,6}",
      "required": "required",
      "name": "plz",
      "text": true,
      "modifiers": [
        "invers"
      ]
    },
    "input-email": {
      "label": "E-Mail",
      "id": "email",
      "type": "email",
      "required": "required",
      "name": "email",
      "text": true,
      "modifiers": [
        "invers"
      ]
    },
    "checkbox": {
      "label": "Ich akzeptiere die Datenschutzbestimmungen.",
      "id": "datenschutz",
      "name": "datenschutz",
      "required": true,
      "modifiers": [
        "legal"
      ]
    },
    "button": {
      "label": "Mitmachen",
      "modifiers": [
        "secondary"
      ]
    }
  }
}

No notes defined.