<div class="share-feed u-block u-page-width-max-gutters">
    <h2 class="share-feed__title">#AlohaFriday</h2>
    <p class="share-feed__description">Share your view on Instagram, Facebook or Twitter</p>
    <button class="button button--primary share-feed__call-to-action">Submit Your Photo</button>

    <div class="share-feed__widget">
        <!-- Replace everything inside .share-feed__widget during implementation. Styles are inline so they aren't included in the build. -->
        <div style="position: relative; min-height: 200px; background-color: #e2e2e2; text-align: center;">
            <span style="position: absolute; top: 50%; transform: translateY(-50%); right: 0; left: 0; color: #999999; font-size: 2.7rem; font-weight: bold; letter-spacing: 3px; line-height: 3.2rem; text-transform: uppercase;">Third Party Widget</span>
        </div>
    </div>
    <button class="button button--outlined share-feed__load-more">Load More</button>

</div>
<div class="share-feed u-block u-page-width-max-gutters">
  {{#if title}}
  <h2 class="share-feed__title">{{title}}</h2>
  {{/if}}
  {{#if description}}
  <p class="share-feed__description">{{description}}</p>
  {{/if}}
  {{#if callToAction}}
  {{render '@buttons--primary' callToAction}}
  {{/if}}
  {{#if placeholder}}
  <div class="share-feed__widget">
    <!-- Replace everything inside .share-feed__widget during implementation. Styles are inline so they aren't included in the build. -->
    <div style="position: relative; min-height: 200px; background-color: #e2e2e2; text-align: center;">
      <span style="position: absolute; top: 50%; transform: translateY(-50%); right: 0; left: 0; color: #999999; font-size: 2.7rem; font-weight: bold; letter-spacing: 3px; line-height: 3.2rem; text-transform: uppercase;">{{placeholder}}</span>
    </div>
  </div>
  {{/if}}
  {{#if loadMore}}
  {{render '@buttons--outlined' loadMore}}
  {{/if}}
</div>
{
  "title": "#AlohaFriday",
  "description": "Share your view on Instagram, Facebook or Twitter",
  "placeholder": "Third Party Widget",
  "callToAction": {
    "modifier": "primary",
    "buttonValue": "Submit Your Photo",
    "classes": [
      "share-feed__call-to-action"
    ]
  },
  "loadMore": {
    "modifier": "outlined",
    "buttonValue": "Load More",
    "classes": [
      "share-feed__load-more"
    ]
  }
}
  • Content:
    .share-feed {
      color: $color-darkest;
      text-align: center;
    
      @include breakpoint($breakpoint-sm-only) {
        border-bottom: 1px solid $color-light;
      }
    }
    
    .share-feed__title {
      margin: 20px 0 10px;
      font-size: 1.6rem;
      font-weight: $font-weight-bold;
      letter-spacing: 1px;
      line-height: 1.9rem;
      text-transform: uppercase;
    
      @include breakpoint($breakpoint-xl) {
        font-size: 2.4rem;
        line-height: 2.8rem;
      }
    }
    
    .share-feed__description {
      margin: 10px 0;
      font-size: 1.4rem;
      line-height: 2.0rem;
    }
    
    .share-feed__call-to-action,
    .share-feed__load-more {
      margin: 20px auto;
    }
    
    .share-feed__call-to-action {
      margin-bottom: 40px;
    
      @include breakpoint($breakpoint-md) {
        margin-top: 5px;
      }
    }
    
    .share-feed__load-more {
      @include breakpoint($breakpoint-md) {
        margin-top: 40px;
        margin-bottom: 0;
      }
    }
    
  • URL: /components/raw/share-feed/share-feed.scss
  • Filesystem Path: src/components/02-components/share-feed/share-feed.scss
  • Size: 834 Bytes

There are no notes for this item.