600 West

Postcard: Split 16 X 9 

<div id="" class="Postcard _split" style="">
    <div class="Postcard-image">
        <div class="Media _16x9">
            <img src="https://media.sproutsocial.com/uploads/2017/05/Twitter-Marketing.png">
        </div>
    </div>

    <div class="Postcard-body">
        <span class="spacedout u-text-size-200 u-color-black u-text-spacedout" style="">White Paper</span>

        <h2 class="Postcard-heading u-space-margin-bottom-500 " style="margin-top:0;">
            <a href="https://getbambu.com/data-reports/engagement-to-advocacy/">Essential Data to Launch Your Employee Engagement &amp; Advocacy Strategy</a>
        </h2>

        <p id="" class="u-text-size-300" style="margin-top:0;">
            This report exposes the role that formal employee advocacy programs are having boosting the business performance of large organizations.
        </p>

        <p id="" class="" style="margin-top: 0">

            <a href="https://getbambu.com/data-reports/engagement-to-advocacy/" class="button primary ">
        Download Now
    </a>

        </p>

    </div>
</div>
 
<div id="{{id}}" class="Postcard {{modifier}}" style="{{style}}">
    {{#if imageurl}}
        {{#if href}}
            <a class="Postcard-image"  href="{{href}}">
                <div class="Media {{imagesize}}">
                    <img src="{{imageurl}}">
                </div>
            </a>
        {{else}}
            <div class="Postcard-image">
                <div class="Media {{imagesize}}">
                    <img src="{{imageurl}}">
                </div>
            </div>
        {{/if}}
    {{/if}}

    <div class="Postcard-body">
        {{> @children}}
    </div>
</div>
 
{
  "style": null,
  "href": null,
  "imageurl": "https://media.sproutsocial.com/uploads/2017/05/Twitter-Marketing.png",
  "imagesize": "_16x9",
  "children": [
    {
      "component": "spacedout",
      "context": {
        "modifier": "u-text-size-200 u-color-black u-text-spacedout",
        "text": "White Paper"
      }
    },
    {
      "component": "heading",
      "context": {
        "level": 2,
        "modifier": "Postcard-heading u-space-margin-bottom-500",
        "style": "margin-top:0;",
        "text": "<a href=\"https://getbambu.com/data-reports/engagement-to-advocacy/\">Essential Data to Launch Your Employee Engagement &amp; Advocacy Strategy</a>"
      }
    },
    {
      "component": "p",
      "context": {
        "modifier": "u-text-size-300",
        "style": "margin-top:0;",
        "text": "This report exposes the role that formal employee advocacy programs are having boosting the business performance of large organizations."
      }
    },
    {
      "component": "p",
      "context": {
        "style": "margin-top: 0",
        "children": [
          {
            "component": "button",
            "context": {
              "modifier": "primary",
              "href": "https://getbambu.com/data-reports/engagement-to-advocacy/",
              "text": "Download Now"
            }
          }
        ]
      }
    }
  ],
  "modifier": "_split"
}
  • Content: 
    .Postcard {
    border: 1px solid get-color(neutral, 300);
    a {
        display: block;
    }
    &-body {
        padding: 1rem;
        background: get-color(neutral, 0);
    }
    &-body a {
        display: inline-block;
    }
    &-body h2,
    &-body &-heading {
        @include font-weight-semibold;
        @include font-size-subhead;
    }
    &-body h2 a,
    &-body &-heading a,
    &-body h4 a,
    &-body &-subheading a {
        color: theme-color(text, dark);
    }
    &-body h2 a:hover,
    &-body &-heading a:hover,
    &-body &-subheading a:hover {
        color: theme-color(link);
        text-decoration: none;
    }
    &-body h3,
    &-body &-subheading {
        @include font-size-fine;
    }
}
.Postcard._small {
    .Postcard-body h2,
    .Postcard-body .Postcard-heading {
        @include font-size-large;
    }
}
.Postcard._mini {
    border: none;
    .Postcard-body {
        padding: 0 0 1rem;
        h2,
        .Postcard-heading {
            @include font-size-large;
            padding-top: 0;
            font-family: $font-family-base;
        }
        a {
            @include font-weight-semibold;
        }
    }
}
.Postcard._large {
    .Postcard-body h2,
    .Postcard-body .Postcard-heading {
        @include font-size-head-small;
    }
    .Postcard-body p {
        @include font-size-large;
    }
}
.Postcard._featured {
    border-top: none;
    border-right: none;
    border-left: none;
    .Postcard-body h2,
    .Postcard-body .Postcard-heading {
        @include font-size-head;
    }
}
.Postcard--shadow {
    @include Elevation("Card-pressed", $shadowColor: get-color(neutral, 800), $lighting: "front");
    border: none;
}
@media screen and (min-width: $grid-shift-breakpoint) {
    .Postcard._small .Postcard-body {
        padding: 1rem;
    }
    .Postcard._featured .Postcard-body {
        padding: 4rem 1rem;
    }
    .Postcard._split {
        display: flex;
        align-items: stretch;
        .Postcard-body {
            flex: 1 1 auto;
        }
        .Postcard-image {
            display: flex;
            flex: 1 0 50%;
            > * {
                flex: 0 0 100%;
            }
        }
        &._centerItems {
            align-items: center;
        }
    }
    .Postcard._split._thirds {
        .Postcard-image {
            flex-basis: 33.33333333%;
        }
    }
    .Postcard._split._quarters {
        .Postcard-image {
            flex-basis: 25%;
        }
    }
}
  • URL: /components/raw/postcard/Postcard.scss
  • Filesystem Path: components/molecules/Postcard/Postcard.scss
  • Size: 2.5 KB

There are no notes for this item.