<div class="maintenance-copy">
    <div class="maintenance-copy__group">
        <h3 class="maintenance-copy__header">AWWW SNAP!</h3>
        <p>Looks like you’ve gone too deep on your quest to #ExploreMore! But don’t sweat it, we’re hard at work in our digital workshop crafting an even better experience to help you elevate your eyewear and see life differently.</p>
        <p>Need help now? Reach out to our amazing Customer Care team at 888-454-9325, Monday - Friday between 6:00 am and 8:00 pm M8T. Or just head to @zealoptics on Facebook, Instagram or Twitter.</p>
    </div>
    <div class="maintenance-copy__group">
        <p>While you’re at it, drop a line at info@zealoptics.com and We’ll have you seeing life through our lenses in no time!</p>
        <p>We all like options!</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": [
    {
      "header": [
        "AWWW SNAP!"
      ],
      "content": [
        "Looks like you’ve gone too deep on your quest to #ExploreMore! But don’t sweat it, we’re hard at work in our digital workshop crafting an even better experience to help you elevate your eyewear and see life differently.",
        "Need help now? Reach out to our amazing Customer Care team at 888-454-9325, Monday - Friday between 6:00 am and 8:00 pm M8T. Or just head to @zealoptics on Facebook, Instagram or Twitter."
      ]
    },
    {
      "content": [
        "While you’re at it, drop a line at info@zealoptics.com and We’ll have you seeing life through our lenses in no time!",
        "We all like options!"
      ],
      "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.