1
2
3
4
5
6
7
8
9
10
11
12
{
  "title": "Sign Up for Ideas Newsletter",
  "body": "Stay up to date on the latest groudbreaking ideas in business. You will be able to opt-out of these emails at any time.",
  "form": {
    "name": "email",
    "action": "",
    "type": "email",
    "label": "Your email",
    "submit": "Subscribe"
  },
  "mode": "small"
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
{# @TODO - it would be nice to extract this to a helper function for re-use (would need re-implmenting per lang) #}
{% set modifiers = [] %}

{% if mode is iterable %}
	{% for mode, bps in mode %}
		{% for bp in bps %}
			{% set modifiers = modifiers|merge(["m-promotion-form@" ~ bp ~ "--" ~ mode]) %}
		{% endfor %}
	{% endfor %}
{% else %}
	{% set modifiers = modifiers|merge(["m-promotion-form--" ~ mode]) %}
{% endif %}

<section class="m-promotion-form {{ modifiers|join(" ") }}">
	<div class="m-promotion-form__inner">
		<div class="m-promotion-form__content">
			<header class="m-promotion-form__header">
				<h3 class="m-promotion-form__title">{{title}}</h3>
			</header>

			<div class="m-promotion-form__main">
				<p class="m-promotion-form__intro">{{ body }}</p>

				<div class="m-promotion-form__action">
					{% include 'components/molecules/single-field-form/single-field-form' with form %}
				</div>
			</div>
		</div>
	</div>
</section>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
@include bp-style(m-promotion-form, ("xlarge+", "large-")) {
  /*
  *   Shared Styles
  */
  &__main {
    @include f-body-1;
  }

  /*
  *   Small
  */
  &--small {
    border-top-width: 1px;
    @include spacing(
      (
        "xsmall": 12px
      )
    );
  }

  &--small .m-promotion-form__main {
    padding-top: 20px;
  }

  &--small .m-promotion-form__title {
    @include f-ui-1;
  }

  &--small .m-promotion-form__action {
    padding-top: 24px;
  }

  /*
  *   Large
  */
  &--large {
    @include theme-contrast;
    background-color: var(--color--background);
    @include background-fill;
    @include spacing($outer-spacing-01, "margin-top");
  }

  &--large .m-promotion-form__inner {
    display: flex;
    &:before {
      content: "";
      display: block;
      @include spacing(
        (
          xsmall: 100%,
          "medium+": 278px
        )
      );
    }
  }

  @each $name, $point in $breakpoints {
    @include breakpoint("#{$name}") {
      &--large .m-promotion-form__inner {
        margin-left: map-get($outer-gutters, $name) * -1;
        margin-right: map-get($outer-gutters, $name) * -1;
      }

      &--large .m-promotion-form__content {
        padding-left: map-get($outer-gutters, $name);
        padding-right: map-get($outer-gutters, $name);
      }
    }
  }

  &--large .m-promotion-form__content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    @include spacing(
      (
        "xsmall": 16px,
        "medium+": 20px,
        "xlarge+": 32px
      )
    );

    @include spacing(
      (
        "xsmall": 32px,
        "medium+": 48px
      ),
      "padding-bottom"
    );

    @include breakpoint("medium+") {
      @include columns-container;
    }
  }

  &--large .m-promotion-form__main,
  &--large .m-promotion-form__header {
    @include column(
      (
        medium: 4,
        large: 6,
        xlarge: 6,
        xxlarge: 6,
        xxxlarge: 6
      )
    );
  }

  &--large .m-promotion-form__title {
    @include f-heading-8;
    @include width-multi(
      (
        xlarge: 5,
        xxlarge: 5,
        xxxlarge: 5
      )
    );
  }

  &--large .m-promotion-form__main {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
    @include spacing(
      (
        "xsmall": 16px,
        "medium+": 0px
      )
    );
  }
}