<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">Check your email johndoe@email.com for further instructions.</div>
        <p class="feature-item__body">Lorem ipsum</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">
      {{render (dynamicVariant 'icons' iconVariant)}}
    </span>
  </div>
  <div class="feature-item__copy">
    <div class="feature-item__title">{{title}}</div>
    {{#if body}}
    <p class="feature-item__body">{{body}}</p>
    {{/if}}
    {{#if link}}
    <p class="feature-item__body">
      <a class="feature-item__link" href="{{link.href}}">{{link.text}}</a>
    </p>
    {{/if}}
  </div>
</div>
{
  "iconVariant": "truck",
  "title": "Check your email johndoe@email.com for further instructions.",
  "body": "Lorem ipsum",
  "link": {
    "href": "#",
    "text": "Learn more"
  },
  "modifier": "check-email"
}
  • Content:
    .feature-item {
      display: grid;
      width: 375px;
      margin: 20px;
      letter-spacing: 0;
      text-align: left;
      grid-template-columns: 50px 325px;
      grid-gap: 10px;
    }
    
    .feature-item__icon {
      display: block;
      width: 3.5rem;
      height: 3.5rem;
      margin: 0 auto;
      border: 1px solid $color-dark;
      border-radius: 50%;
    
      .icon {
        padding-top: .6rem;
        padding-left: .6rem;
    
        &--shield {
          padding-left: .8rem;
        }
    
        &--star {
          padding-top: .45rem;
          padding-left: .55rem;
        }
    
        &--truck {
          padding-top: .8rem;
          padding-left: .4rem;
        }
    
        &--chat {
          padding-top: .7rem;
        }
    
        &--gear {
          width: 2.5rem;
          height: 2.5rem;
          padding-top: .5rem;
          padding-left: .5rem;
        }
      }
    }
    
    .feature-item__link {
      color: $color-primary;
      font-size: 1.5rem;
      text-decoration: none;
    }
    
    .feature-item__body {
      margin-top: .9rem;
      margin-bottom: .5rem;
      color: $color-darkest;
      font-size: 1.5rem;
      letter-spacing: normal;
      line-height: 2.3rem;
    }
    
    .feature-item__title {
      margin-bottom: .6rem;
      padding-top: .3rem;
      color: $color-darkest;
      font-size: 1.9rem;
      font-weight: 500;
      text-transform: uppercase;
    }
    
  • URL: /components/raw/feature-item/feature-item.scss
  • Filesystem Path: src/components/01-elements/text-blocks/feature-item/feature-item.scss
  • Size: 1.2 KB
  • Handle: @feature-item
  • Preview:
  • Filesystem Path: src/components/01-elements/text-blocks/feature-item/feature-item.html

There are no notes for this item.