<form class="confirmation-account-create confirmation-account-create--submitted">
    <h4 class="confirmation-account-create__title">Thank you for creating your account.</h4>
    <div class="confirmation-account-create__actions">
        <button class="button button--primary">View your account</button>

    </div>
</form>
<form class="confirmation-account-create{{#each modifiers}} confirmation-account-create--{{this}}{{/each}}">
  <h4 class="confirmation-account-create__title">{{title}}</h4>
  {{# if description}}
  <p class="confirmation-account-create__description">{{{description}}}</p>
  {{/if}}
  {{#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": "Thank you for creating your account.",
  "formItems": null,
  "actions": [
    {
      "type": "primary",
      "buttonValue": "View your account"
    }
  ],
  "modifiers": [
    "submitted"
  ]
}
  • Content:
    .confirmation-account-create {
      @include clearfix;
    
      max-width: 600px;
      margin-right: auto;
      margin-left: auto;
      padding: 10px;
      border: 1px solid $color-light;
    
      @include breakpoint($breakpoint-md) {
        padding: 30px;
      }
    
      @media print {
        display: none;
      }
    }
    
    .confirmation-account-create__title {
      margin: 5px 0;
      color: $color-darkest;
      font-size: 1.6rem;
      letter-spacing: 0;
      line-height: 2.0rem;
      text-align: center;
    
      @include breakpoint($breakpoint-xl) {
        font-size: 2.4rem;
        line-height: 2.8rem;
      }
    
      .confirmation-account-create--request & {
        font-weight: $font-weight-bold;
      }
    }
    
    .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 {
      .label {
        letter-spacing: 0;
      }
    
      @include breakpoint($breakpoint-smd) {
        .form-item {
          @include span(6);
        }
      }
    
      @include breakpoint($breakpoint-lg) {
        @include span(8);
        margin-right: -1 * $gutter-width-half;
      }
    }
    
    .confirmation-account-create__actions {
      .confirmation-account-create--request & {
        margin: 5px 0 10px;
    
        @include breakpoint($breakpoint-smd) {
          @include span(12);
        }
    
        @include breakpoint($breakpoint-lg) {
          @include span(4);
    
          margin-top: 40px;
        }
    
        .button {
          width: 100%;
    
          @include breakpoint($breakpoint-xl) {
            // Override default padding at XL breakpoint.
            padding: 0;
          }
        }
      }
    
      .confirmation-account-create--submitted & {
        margin: 15px 0 10px;
    
        .button {
          width: 100%;
    
          @include breakpoint($breakpoint-smd) {
            display: block;
            max-width: 280px;
            margin-right: auto;
            margin-left: auto;
          }
        }
      }
    }
    
  • 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.8 KB

There are no notes for this item.