<div class="value-card bg-primary rounded">
    <div class="cta">
        <h4>Community</h4>
        <p>As good neighbours we get involved with local efforts to bring people together and create positive change whenever we can.</p>
        <a href="www.google.ca"><button class="small"></button></a>
    </div>
</div>
<div class="value-card bg-primary rounded">
  {{render '@cta-small' valueData merge=true}}
</div>
{
  "valueData": {
    "value": "Community",
    "valueCopy": "As good neighbours we get involved with local efforts to bring people together and create positive change whenever we can.",
    "valueButtonText": "Learn more",
    "valueButtonLink": "www.google.ca"
  }
}
  • Content:
    .value-card {
      @extend %flex-col;
      $size: 240px;
      height: $size;
      width: $size;
      padding: 0 15px;
    
      h4 {
        margin: 0;
      }
    
      p {
        font-size: 14px;
        font-weight: 300;
        line-height: 20px;
      }
    
      .cta {
        padding: 0;
      }
    
      @include respond-above(md) {
        $size: 310px;
        height: $size;
        width: $size;
        padding: 0 49px;
    
        p {
          line-height: 23px;
        }
      }
    
      @include respond-above(lg) {
        $size: 293px;
        height: $size;
        width: $size;
        padding: 0 25px;
    
        p {
          font-size: 16px;
          margin-bottom: 20px;
        }
      }
    }
    
    .french {
      .value-card {
        p {
          font-size: 10.5px;
          line-height: 17px;
        }
    
        @include respond-above(md) {
          padding: 0 29px;
          p {
            font-size: 14px;
          }
        }
    
        @include respond-above(lg) {
          p {
            font-size: 14px;
          }
        }
      }
    }
  • URL: /components/raw/value-card/_value-card.scss
  • Filesystem Path: structures/03-organisms/value-card/_value-card.scss
  • Size: 853 Bytes

There are no notes for this item.