<div class="centered-text centered-text--patterned">
    <h2 class="centered-text__headline">Ellume Polarized</h2>
    <p class="centered-text__headline-caption">More color. Less pollution.</p>
    <div class="centered-text__subheadline">
        <p>See the world’s natural colors with greater clarity and contrast with Ellume Polarized, the Zeal Optics plant-based lens.</p>
    </div>
    <img class="centered-text__image centered-text__image--lower" src="/assets/images/zeal-centered-text-tech-1.png" alt="Ellume Polarized">
    <a class="button button--primary centered-text__action" href="#">Shop Ellume Polarized</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": null,
  "headline": "Ellume Polarized",
  "subheadline": [
    "See the world’s natural colors with greater clarity and contrast with Ellume Polarized, the Zeal Optics plant-based lens."
  ],
  "action": {
    "modifier": "primary",
    "value": "Shop Ellume Polarized",
    "path": "#"
  },
  "modifier": "patterned",
  "headlineCaption": "More color. Less pollution.",
  "lowerImage": {
    "src": "/assets/images/zeal-centered-text-tech-1.png",
    "alt": "Ellume Polarized"
  }
}
  • 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.