<div class="technology-link">
    <img class="technology-link__image" src="/assets/images/technology-link-lens.jpg" alt="The Lens">
    <span class="technology-link__title">The Lens</span>
    <a class="button button--primary technology-link__call-to-action" href="#">Learn More</a>
</div>
<div class="technology-link">
  <img class="technology-link__image" src="{{image}}" alt="{{title}}">
  <span class="technology-link__title">{{title}}</span>
  <a class="button button--primary technology-link__call-to-action" href="{{callToAction.path}}">{{callToAction.value}}</a>
</div>
{
  "image": "/assets/images/technology-link-lens.jpg",
  "title": "The Lens",
  "callToAction": {
    "path": "#",
    "value": "Learn More"
  }
}
  • Content:
    .technology-link {
      text-align: center;
    
      @include breakpoint($breakpoint-sm-only) {
        padding-bottom: 20px;
        background-color: $color-lighter;
      }
    }
    
    .technology-link__image {
      margin: 0 auto;
    
      @include breakpoint($breakpoint-sm-only) {
        width: 100%;
      }
    }
    
    .technology-link__title {
      display: block;
      margin: 25px 0 30px;
      color: $color-darkest;
      font-size: 2.0rem;
      line-height: 2.4rem;
    
      @include breakpoint($breakpoint-xl) {
        font-size: 2.4rem;
        line-height: 2.8rem;
      }
    }
    
  • URL: /components/raw/technology-link/technology-link.scss
  • Filesystem Path: src/components/02-components/technology/technology-link/technology-link.scss
  • Size: 503 Bytes

There are no notes for this item.