<form class="confirmation-account-create">
    <h4 class="confirmation-account-create__title">Create now your account</h4>
    <p class="confirmation-account-create__description">Here the copy to inform the user he can create an account with the previous typed information. By clicking the button below we will sent at your email: <strong>johndoe@email.com</strong> a link to activate your account.</p>
    <div class="confirmation-account-create__form-items">
        <div class="form-item form-item--password form-item--confirmation-account-create-password form-item--required">
            <label for="confirmation-account-create-password" class="label label--password label--required">Password</label>
            <input type="password" id="confirmation-account-create-password" name="password" class="input input--password" autocomplete="current-password">
        </div>

        <div class="form-item form-item--password form-item--confirmation-account-create-password-verify form-item--required">
            <label for="confirmation-account-create-password-verify" class="label label--password label--required">Verify Password</label>
            <input type="password" id="confirmation-account-create-password-verify" name="password-verify" class="input input--password" autocomplete="current-password">
        </div>

    </div>
    <div class="confirmation-account-create__actions">
        <button class="button button--primary">Create Account</button>

    </div>
</form>
<form class="confirmation-account-create">
  <h4 class="confirmation-account-create__title">{{title}}</h4>
  <p class="confirmation-account-create__description">{{{description}}}</p>
  {{#if formItems}}
  <div class="confirmation-account-create__form-items">
    {{#each formItems}}
    {{render (dynamicComponent component) this merge=true}}
    {{/each}}
  </div>
  {{/if}}
  {{#if actions}}
  <div class="confirmation-account-create__actions">
    {{#each actions}}
    {{render (dynamicVariant 'buttons' type) this merge=true}}
    {{/each}}
  </div>
  {{/if}}
</form>
{
  "title": "Create now your account",
  "description": "Here the copy to inform the user he can create an account with the previous typed information. By clicking the button below we will sent at your email: <strong>johndoe@email.com</strong> a link to activate your account.",
  "formItems": [
    {
      "component": "input--password",
      "type": "password",
      "id": "confirmation-account-create-password",
      "name": "password",
      "label": "Password"
    },
    {
      "component": "input--password",
      "type": "password",
      "id": "confirmation-account-create-password-verify",
      "name": "password-verify",
      "label": "Verify Password"
    }
  ],
  "actions": [
    {
      "type": "primary",
      "buttonValue": "Create Account"
    }
  ]
}
  • Content:
    .confirmation-account-create {
      padding: 10px;
      border: 1px solid $color-light;
    
      @include breakpoint($breakpoint-md) {
        padding: 30px;
    
        .form-item {
          @include span(6);
        }
      }
    
      @include breakpoint($breakpoint-xl) {
        padding-right: 60px;
        padding-left: 60px;
    
        .form-item {
          @include span(3);
        }
      }
    
      @media print {
        display: none;
      }
    }
    
    .confirmation-account-create__title {
      margin: 5px 0;
      color: $color-darkest;
      font-size: 1.6rem;
      letter-spacing: 1px;
      line-height: 2.0rem;
      text-transform: uppercase;
    
      @include breakpoint($breakpoint-xl) {
        font-size: 2.4rem;
        line-height: 2.8rem;
      }
    }
    
    .confirmation-account-create__description {
      color: $color-dark;
      font-size: 1.4rem;
      line-height: 1.7rem;
    
      @include breakpoint($breakpoint-xl) {
        font-size: 1.9rem;
        line-height: 2.3rem;
      }
    }
    
    .confirmation-account-create__form-items {
      @include clearfix;
    
      @include breakpoint($breakpoint-md) {
        margin-right: -1 * $gutter-width-half;
        margin-left: -1 * $gutter-width-half;
      }
    }
    
    .confirmation-account-create__actions {
      margin: 5px 0 10px;
    }
    
  • URL: /components/raw/confirmation-account-create/confirmation-account-create.scss
  • Filesystem Path: src/components/01-elements/forms/confirmation-account-create/confirmation-account-create.scss
  • Size: 1.1 KB
  • Handle: @confirmation-account-create
  • Preview:
  • Filesystem Path: src/components/01-elements/forms/confirmation-account-create/confirmation-account-create.html

There are no notes for this item.