<div class="centered-text">
    <img class="centered-text__image" src="/assets/images/zeal-centered-text.png" alt="Use Less">
    <h2 class="centered-text__headline">Use Less</h2>
    <div class="centered-text__subheadline">
        <p>We use plant-based materials in all our sunglass frames and lenses to help you see the world around you more clearly while protecting the views that inspire us for generations to come. We believe it’s our responsibility to take the charge and
            create the change.</p>
    </div>
    <a class="button button--outlined centered-text__action" href="#">Our Technology</a>
</div>
<div class="centered-text{{#if modifier}} centered-text--{{modifier}}{{/if}}">
  {{#if image}}
  <img class="centered-text__image" src="{{image.src}}" alt="{{image.alt}}">
  {{/if}}
  {{#if headline}}
  <h2 class="centered-text__headline">{{headline}}</h2>
  {{/if}}
  {{#if headlineCaption}}
  <p class="centered-text__headline-caption">{{headlineCaption}}</p>
  {{/if}}
  {{#if subheadline}}
  <div class="centered-text__subheadline">
    {{#each subheadline}}
    <p>{{{this}}}</p>
    {{/each}}
  </div>
  {{/if}}
  {{#if lowerImage}}
  <img class="centered-text__image centered-text__image--lower" src="{{lowerImage.src}}" alt="{{lowerImage.alt}}">
  {{/if}}
  {{#if action}}
  <a class="button button--{{action.modifier}} centered-text__action" href="{{action.path}}">{{action.value}}</a>
  {{/if}}
</div>
{
  "image": {
    "src": "/assets/images/zeal-centered-text.png",
    "alt": "Use Less"
  },
  "headline": "Use Less",
  "subheadline": [
    "We use plant-based materials in all our sunglass frames and lenses to help you see the world around you more clearly while protecting the views that inspire us for generations to come. We believe it’s our responsibility to take the charge and create the change."
  ],
  "action": {
    "modifier": "outlined",
    "value": "Our Technology",
    "path": "#"
  }
}
  • Content:
    .centered-text {
      margin: 0 $gutter-width-half;
      padding: 45px 0;
      text-align: center;
    
      @include breakpoint($breakpoint-md) {
        padding: 50px 0;
      }
    
      @include breakpoint($breakpoint-xl) {
        padding: 70px 0;
      }
    }
    
    .centered-text--patterned {
      padding-right: $gutter-width-half;
      padding-left: $gutter-width-half;
      background: url('../images/zeal-pattern-light.png') center center;
    }
    
    .centered-text__image {
      margin: 0 auto;
    }
    
    .centered-text__image--lower {
      margin-top: 30px;
      margin-bottom: 30px;
    
      @include breakpoint($breakpoint-md) {
        margin-top: 50px;
        margin-bottom: 50px;
      }
    }
    
    .centered-text__headline {
      margin: 25px 0 15px;
      color: $color-darkest;
      font-size: 2.0rem;
      font-weight: $font-weight-bold;
      letter-spacing: 1px;
      line-height: 2.4rem;
      text-transform: uppercase;
    
      &:first-child {
        margin-top: 0;
      }
    
      @include breakpoint($breakpoint-md) {
        margin: 20px 0;
        color: $color-dark;
        font-size: 2.4rem;
        line-height: 2.8rem;
      }
    
      @include breakpoint($breakpoint-xl) {
        margin-top: 40px;
        font-size: 2.7rem;
        letter-spacing: 3px;
        line-height: 4.0rem;
      }
    }
    
    .centered-text__headline-caption {
      margin-top: -20px;
      color: $color-dark;
      font-size: 1.4rem;
      line-height: 2.0rem;
    }
    
    .centered-text__subheadline {
      margin: 0 auto;
      color: $color-darkest;
    
      p {
        font-size: 1.4rem;
        line-height: 2.0rem;
    
        &:last-child {
          margin-bottom: 0;
        }
    
        .centered-text--patterned & {
          margin-top: 30px;
          font-size: 1.4rem;
          letter-spacing: 1px;
          line-height: 2.0rem;
        }
      }
    
      a {
        color: $color-primary;
        text-decoration: none;
    
        &:hover {
          color: $color-primary-hover;
        }
      }
    
      @include breakpoint($breakpoint-md) {
        max-width: 565px;
    
        p {
          font-size: 1.4rem;
          letter-spacing: 0;
          line-height: 1.7rem;
        }
      }
    
      @include breakpoint($breakpoint-xl) {
        max-width: 800px;
    
        .centered-text--patterned & {
          max-width: 940px;
        }
    
        p {
          font-size: 1.9rem;
          line-height: 2.3rem;
        }
      }
    }
    
    .centered-text__action {
      margin-top: 20px;
    }
    
  • URL: /components/raw/centered-text/centered-text.scss
  • Filesystem Path: src/components/01-elements/text-blocks/centered-text/centered-text.scss
  • Size: 2.1 KB

There are no notes for this item.