<div class="features-showcase">
    <div class="basic-text">
        <h3 class="basic-text__title">Seeing is Believing</h3>
    </div>

    <p class="paragraph">Every detail is crisper, brighter, and clearer through the view from our lenses.</p>

    <div class="features-showcase__items">
        <div class="feature-item">
            <div class="feature-item__image">
                <span class="feature-item__icon">
      <svg class="icon icon--shield">
  <use xlink:href="/assets/icons/icons.svg#shield"></use>
</svg>

    </span>
            </div>
            <div class="feature-item__copy">
                <div class="feature-item__title">A Warranty Like No Other</div>
                <p class="feature-item__body">We’re passionate about making the best sunglasses in the world.</p>
                <p class="feature-item__body">
                    <a class="feature-item__link" href="#">Learn more</a>
                </p>
            </div>
        </div>

        <div class="feature-item">
            <div class="feature-item__image">
                <span class="feature-item__icon">
      <svg class="icon icon--chat">
  <use xlink:href="/assets/icons/icons.svg#chat"></use>
</svg>

    </span>
            </div>
            <div class="feature-item__copy">
                <div class="feature-item__title">Unparallelled Customer Service</div>
                <p class="feature-item__body">We promise that you will always be greeted with a friendly voice and a dedicated representative.</p>
                <p class="feature-item__body">
                    <a class="feature-item__link" href="#">Learn more</a>
                </p>
            </div>
        </div>

        <div class="feature-item">
            <div class="feature-item__image">
                <span class="feature-item__icon">
      <svg class="icon icon--tree">
  <use xlink:href="/assets/icons/icons.svg#tree"></use>
</svg>

    </span>
            </div>
            <div class="feature-item__copy">
                <div class="feature-item__title">Authentic Hawaiian Roots</div>
                <p class="feature-item__body">Born in Hawaii. After 30 years, we’re still independently owned.</p>
                <p class="feature-item__body">
                    <a class="feature-item__link" href="#">Learn more</a>
                </p>
            </div>
        </div>

        <div class="feature-item">
            <div class="feature-item__image">
                <span class="feature-item__icon">
      <svg class="icon icon--gear">
  <use xlink:href="/assets/icons/icons.svg#gear"></use>
</svg>

    </span>
            </div>
            <div class="feature-item__copy">
                <div class="feature-item__title">Patented Technology</div>
                <p class="feature-item__body">PolarizedPlus2 lens technology. Designed to enhance your view in every condition.</p>
                <p class="feature-item__body">
                    <a class="feature-item__link" href="#">Learn more</a>
                </p>
            </div>
        </div>

        <div class="feature-item">
            <div class="feature-item__image">
                <span class="feature-item__icon">
      <svg class="icon icon--star">
  <use xlink:href="/assets/icons/icons.svg#star"></use>
</svg>

    </span>
            </div>
            <div class="feature-item__copy">
                <div class="feature-item__title">The Maui Jim Difference</div>
                <p class="feature-item__body">Not all sunglasses are created equal. Learn how our sunglasses protect your vision.</p>
                <p class="feature-item__body">
                    <a class="feature-item__link" href="#">Learn more</a>
                </p>
            </div>
        </div>

        <div class="feature-item">
            <div class="feature-item__image">
                <span class="feature-item__icon">
      <svg class="icon icon--truck">
  <use xlink:href="/assets/icons/icons.svg#truck"></use>
</svg>

    </span>
            </div>
            <div class="feature-item__copy">
                <div class="feature-item__title">Free Shipping and Free Returns</div>
                <p class="feature-item__body">
                    <a class="feature-item__link" href="#">Learn more</a>
                </p>
            </div>
        </div>

    </div>
</div>
<div class="features-showcase">
  {{#each showcaseComponents}}
    {{render (dynamicVariant component variant) context merge=true}}
  {{/each}}
  <div class="features-showcase__items">
    {{#each featureItemsComponents}}
    {{render (dynamicVariant component variant) context merge=true}}
    {{/each}}
  </div>
</div>
{
  "showcaseComponents": [
    {
      "component": "basic-text",
      "variant": "default",
      "context": {
        "title": "Seeing is Believing",
        "columns": null
      }
    },
    {
      "component": "paragraph",
      "variant": "default",
      "context": {
        "classes": true,
        "value": "Every detail is crisper, brighter, and clearer through the view from our lenses."
      }
    }
  ],
  "featureItemsComponents": [
    {
      "component": "feature-item",
      "variant": "default",
      "context": {
        "iconVariant": "shield",
        "title": "A Warranty Like No Other",
        "body": "We’re passionate about making the best sunglasses in the world.",
        "link": {
          "href": "#",
          "text": "Learn more"
        }
      }
    },
    {
      "component": "feature-item",
      "variant": "default",
      "context": {
        "iconVariant": "chat",
        "title": "Unparallelled Customer Service",
        "body": "We promise that you will always be greeted with a friendly voice and a dedicated representative.",
        "link": {
          "href": "#",
          "text": "Learn more"
        }
      }
    },
    {
      "component": "feature-item",
      "variant": "default",
      "context": {
        "iconVariant": "tree",
        "title": "Authentic Hawaiian Roots",
        "body": "Born in Hawaii. After 30 years, we’re still independently owned.",
        "link": {
          "href": "#",
          "text": "Learn more"
        }
      }
    },
    {
      "component": "feature-item",
      "variant": "default",
      "context": {
        "iconVariant": "gear",
        "title": "Patented Technology",
        "body": "PolarizedPlus2 lens technology. Designed to enhance your view in every condition.",
        "link": {
          "href": "#",
          "text": "Learn more"
        }
      }
    },
    {
      "component": "feature-item",
      "variant": "default",
      "context": {
        "iconVariant": "star",
        "title": "The Maui Jim Difference",
        "body": "Not all sunglasses are created equal. Learn how our sunglasses protect your vision.",
        "link": {
          "href": "#",
          "text": "Learn more"
        }
      }
    },
    {
      "component": "feature-item",
      "variant": "default",
      "context": {
        "iconVariant": "truck",
        "title": "Free Shipping and Free Returns",
        "body": null,
        "link": {
          "href": "#",
          "text": "Learn more"
        }
      }
    }
  ]
}
  • Content:
    .features-showcase {
      padding-bottom: 7.5rem;
      background: url('../images/#{$features-background-filename}') center top;
      background-color: $color-black;
      -webkit-font-smoothing: antialiased;
    
      .features-showcase__items {
        display: flex;
        flex-flow: row wrap;
        justify-content: space-evenly;
        margin-top: 4.7rem;
      }
    
      .basic-text__title {
        @include font-bold;
        margin-bottom: 0;
        font-size: 3.7rem;
        letter-spacing: $base-letter-spacing;
        line-height: normal;
        text-transform: uppercase;
    
        @include breakpoint($breakpoint-md) {
          padding-top: 10rem;
        }
      }
    
      .paragraph {
        padding: 0;
        color: $color-black;
        font-size: 1.9rem;
        letter-spacing: .2px;
        text-align: center;
      }
    }
    
  • URL: /components/raw/features-showcase/features-showcase.scss
  • Filesystem Path: src/components/02-components/features-showcase/features-showcase.scss
  • Size: 740 Bytes
  • Handle: @features-showcase
  • Preview:
  • Filesystem Path: src/components/02-components/features-showcase/features-showcase.html

There are no notes for this item.