City of Ghent Style Guide

Subscribe

<form class="form subscribe">
  {% include '@label' with {
  "label": label,
  "for": id,
  } %}
  {% include '@input' with {
    'id': id,
    'type': 'email',
    'name': id,
    'required': true
  } %}
  {% include '@input-submit' with {
  'value': text,
  } %}
</form>
<form class="form subscribe">
    <label for="subscribe">Email address
    </label>

    <input type="email" id="subscribe" name="subscribe" class="email" required="true" />
    <input type="submit" value="Subscribe" class="" />
</form>
{
  "label": "Email address",
  "text": "Subscribe",
  "id": "subscribe",
  "name": "subscribe"
}
  • Content:
    .subscribe {
      display: flex;
      position: relative;
      flex-wrap: wrap;
      align-items: center;
    
      label {
        width: 100%;
        max-width: 100%;
      }
    
      input {
        margin-bottom: .5rem;
      }
    
      input[type="email"] {
        flex: 1 1 $bp-mobile;
        margin-right: .4rem;
      }
    
      input[type="submit"] {
        @include button-large;
      }
    }
    
  • URL: /components/raw/subscribe/_subscribe.scss
  • Filesystem Path: components/31-molecules/subscribe/_subscribe.scss
  • Size: 327 Bytes