<div class="maintenance-copy">
    <div class="maintenance-copy__group">
        <p>We’re busy at work improving the Maui Jim website experience for our ‘ohana.</p>
        <p>Please check back to see the world in all its true color. Mahalo (Thank You) for your patience.</p>
    </div>
    <div class="maintenance-copy__group">
        <p>Please for your prescription orders to Maui jim Toll Free: (877) 289-4424.</p>
        <p>Just need to repair your Maui Jims? Download repair form below to start your repair while our site is unavailable.</p>
        <a href="#">
      <svg class="icon icon--download">
  <use xlink:href="/assets/icons/icons.svg#download"></use>
</svg>

      Repair Form
    </a>
    </div>
</div>
<div class="maintenance-copy">
  {{#each contentGroups}}
  <div class="maintenance-copy__group">
    {{#each header}}
    <h3 class="maintenance-copy__header">{{this}}</h3>
    {{/each}}
    {{#each content}}
    <p>{{this}}</p>
    {{/each}}
    {{#each links}}
    <a href="{{this.path}}">
      {{#if icon}}
      {{render (dynamicVariant 'icons' icon)}}
      {{/if}}
      {{label}}
    </a>
    {{/each}}
  </div>
  {{/each}}
</div>
{
  "contentGroups": [
    {
      "content": [
        "We’re busy at work improving the Maui Jim website experience for our ‘ohana.",
        "Please check back to see the world in all its true color. Mahalo (Thank You) for your patience."
      ]
    },
    {
      "content": [
        "Please for your prescription orders to Maui jim Toll Free: (877) 289-4424.",
        "Just need to repair your Maui Jims? Download repair form below to start your repair while our site is unavailable."
      ],
      "links": [
        {
          "label": "Repair Form",
          "path": "#",
          "icon": "download"
        }
      ]
    }
  ]
}
  • Content:
    .maintenance-copy {
      text-align: center;
    
      // Classes are not used on common tags due to likelihood of this HTML being
      // entered manually.
      p {
        margin: 30px 0;
        color: $color-dark;
        font-size: 1.4rem;
        line-height: 1.7rem;
      }
    
      a {
        display: block;
        color: $color-darkest;
        font-size: 1.4rem;
        font-weight: $maintenance-copy-link-font-weight;
        line-height: 3.0rem;
        text-align: center;
        text-decoration: none;
    
        .icon {
          display: block;
          margin: 0 auto;
          fill: $color-darkest;
        }
    
        &:hover {
          color: $color-primary;
    
          .icon {
            fill: $color-primary;
          }
        }
      }
    
      @include breakpoint($breakpoint-xl) {
        p {
          font-size: 1.9rem;
          line-height: 2.3rem;
        }
      }
    }
    
    .maintenance-copy__group {
      padding: 0 10px;
    
      @include breakpoint($breakpoint-md) {
        padding: 0 40px;
      }
    
      @include breakpoint($breakpoint-xl) {
        padding: 0;
      }
    
      &:not(:last-child) {
        position: relative;
        padding-bottom: 1px;
    
        &:after {
          position: absolute;
          right: 25%;
          bottom: 0;
          left: 25%;
          max-width: 280px;
          margin: 0 auto;
          border-bottom: 1px solid $color-light;
          content: '';
        }
      }
    }
    
    .maintenance-copy__header {
      color: $color-dark;
      font-weight: $font-weight-bold;
    }
    
  • URL: /components/raw/maintenance-copy/maintenance-copy.scss
  • Filesystem Path: src/components/02-components/maintenance/maintenance-copy/maintenance-copy.scss
  • Size: 1.3 KB

There are no notes for this item.