<div id="" class="Postcard Postcard--shadow" style="">
    <div class="Postcard-image">
        <div class="Media _square">
            <img src="https://d672eyudr6aq1.cloudfront.net/img/getbambu.com/bambu-white-paper-thumbnail-cover.jpg?mtime&#x3D;20161118223324">
        </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://d672eyudr6aq1.cloudfront.net/img/getbambu.com/bambu-white-paper-thumbnail-cover.jpg?mtime=20161118223324",
  "imagesize": "_square",
  "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": "Postcard--shadow"
}
  • 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.