<div class="secondary-contact secondary-contact--left">
    <h3 class="secondary-contact__title">Contact Us</h3>
    <div class="secondary-contact__columns">
        <div class="secondary-contact__column">
            <p>Maui Jim Corporate Gifts<br>One Aloha Lane<br>Peoria, IL 61615<br>corporategifts@mauijim.com<br><br>1.800.614.6790<br>Monday – Friday<br>8:30am – 5:00pm CST</p>
        </div>
        <div class="secondary-contact__column">
            <p>Learn more about our event fittings or how our corporate pricing flexible program can work for you.</p>
            <p><a class="button button--outlined" href="#">Request more information</a></p>
        </div>
    </div>
</div>
<div class="secondary-contact{{#if alignment}} secondary-contact--{{alignment}}{{/if}}">
  {{#if title}}
  <h3 class="secondary-contact__title">{{title}}</h3>
  {{/if}}
  <div class="secondary-contact__columns">
    {{#each columns}}
    <div class="secondary-contact__column">
      {{#each items}}
      <p>{{{this}}}</p>
      {{/each}}
    </div>
    {{/each}}
  </div>
</div>
{
  "title": "Contact Us",
  "alignment": "left",
  "columns": [
    {
      "items": [
        "Maui Jim Corporate Gifts<br>One Aloha Lane<br>Peoria, IL 61615<br>corporategifts@mauijim.com<br>—<br>1.800.614.6790<br>Monday – Friday<br>8:30am – 5:00pm CST"
      ]
    },
    {
      "items": [
        "Learn more about our event fittings or how our corporate pricing flexible program can work for you.",
        "<a class=\"button button--outlined\" href=\"#\">Request more information</a>"
      ]
    }
  ]
}
  • Content:
    .secondary-contact {
      text-align: center;
    
      p:not([class]) {
        margin: 10px 0;
        color: $color-dark;
        font-size: 1.4rem;
        line-height: 1.7rem;
    
        .button {
          margin-top: 10px;
        }
      }
    
      @include breakpoint($breakpoint-xl) {
        p:not([class]) {
          margin: 30px 0;
          font-size: 1.9rem;
          line-height: 2.5rem;
        }
      }
    }
    
    .secondary-contact__columns {
      @include breakpoint($breakpoint-md) {
        display: table;
        width: 100%;
        table-layout: fixed;
    
        .secondary-contact--left & {
          text-align: left;
        }
      }
    }
    
    .secondary-contact__column {
      @include breakpoint($breakpoint-md) {
        display: table-cell;
      }
    }
    
    .secondary-contact__title {
      margin: 20px 0;
      font-size: 1.6rem;
      font-weight: $font-weight-bold;
      letter-spacing: 1px;
      line-height: 1.9rem;
      text-transform: uppercase;
    
      @include breakpoint($breakpoint-xl) {
        font-size: 2.4rem;
        line-height: 2.8rem;
      }
    }
    
  • URL: /components/raw/secondary-contact/secondary-contact.scss
  • Filesystem Path: src/components/01-elements/text-blocks/secondary-contact/secondary-contact.scss
  • Size: 928 Bytes

There are no notes for this item.