<div class="registration-welcome">
    <span class="registration-welcome__headline registration-welcome__headline--account">Aloha! John Doe</span>
    <p class="registration-welcome__description registration-welcome__description--account">Thank You for registering. Welcome to our &#x27;Ohana!</p>
</div>
<div class="registration-welcome">
  {{#if headline}}
  <span class="registration-welcome__headline{{#if modifier}} registration-welcome__headline--{{modifier}}{{/if}}">{{headline}}</span>
  {{/if}}
  {{#if description}}
  <p class="registration-welcome__description{{#if modifier}} registration-welcome__description--{{modifier}}{{/if}}">{{description}}</p>
  {{/if}}
</div>
{
  "headline": "Aloha! John Doe",
  "description": "Thank You for registering. Welcome to our 'Ohana!",
  "modifier": "account",
  "label": "Account Registration"
}
  • Content:
    .registration-welcome {
      text-align: center;
    }
    
    .registration-welcome__headline {
      display: block;
      margin-bottom: 10px;
      color: $color-dark;
      font-size: 2.4rem;
      line-height: 2.8rem;
    
      @include breakpoint($breakpoint-md) {
        font-size: 2.8rem;
        line-height: 3.4rem;
      }
    
      @include breakpoint($breakpoint-xl) {
        font-size: 4.7rem;
        line-height: 5.6rem;
      }
    }
    
    .registration-welcome__headline--account {
      margin-bottom: 5px;
      font-size: 3.0rem;
      font-weight: bold;
      line-height: 3.6rem;
    
      @include breakpoint($breakpoint-md) {
        font-size: 3.8rem;
        line-height: 4.6rem;
        text-transform: uppercase;
      }
    
      @include breakpoint($breakpoint-xl) {
        margin-bottom: 15px;
        font-size: 5.7rem;
        line-height: 6.8rem;
      }
    }
    
    .registration-welcome__description {
      margin: 0;
      color: $color-darkest;
      font-size: 2.0rem;
      line-height: 2.4rem;
    
      @include breakpoint($breakpoint-md) {
        font-size: 1.6rem;
        line-height: 1.9rem;
      }
    
      @include breakpoint($breakpoint-xl) {
        font-size: 2.7rem;
        line-height: 3.2rem;
      }
    }
    
    .registration-welcome__description--account {
      font-size: 2.0rem;
      line-height: 2.4rem;
    
      @include breakpoint($breakpoint-md) {
        font-size: 2.7rem;
        line-height: 3.2rem;
      }
    }
    
  • URL: /components/raw/registration-welcome/registration-welcome.scss
  • Filesystem Path: src/components/01-elements/text-blocks/registration-welcome/registration-welcome.scss
  • Size: 1.2 KB

There are no notes for this item.