600 West

Quote: Stacked 

<div class="quote _stacked" style="">
    <div class="quote-avatar ">
        <img src="//media.sproutsocial.com/uploads/logos/customers/customer-logo-techsmith.svgz" alt="">
    </div>

    <div class="quote-block">
        <blockquote class="_stacked">
            Sprout makes it easy for our entire team to respond to customers on social—and to know we’ve gotten back to each and every one.
        </blockquote>

        <cite>
            <span class="quote-speaker">Daniel Foster</span>
            <span class="quote-title">Social Media Strategist</span>
        </cite>
    </div>
</div>
 
<div class="quote {{modifier}}" style="{{style}}">
    {{#if image}}
    <div class="quote-avatar {{imageModifier}}">
        <img src="{{image}}" alt="{{imageAlt}}" >
    </div>
    {{/if}}

    <div class="quote-block">
        <blockquote class="{{modifier}}">
            {{{text}}}
        </blockquote>

        <cite>
            <span class="quote-speaker">{{speaker}}</span>
            <span class="quote-title">{{{title}}}</span>
        </cite>
    </div>
</div>
 
{
  "image": "//media.sproutsocial.com/uploads/logos/customers/customer-logo-techsmith.svgz",
  "altText": "Techsmith",
  "text": "Sprout makes it easy for our entire team to respond to customers on social—and to know we’ve gotten back to each and every one.",
  "speaker": "Daniel Foster",
  "title": "Social Media Strategist",
  "style": null,
  "modifier": "_stacked"
}
  • Content: 
    .quote {
    @include grid-row(720px);
    > * {
        text-align: left;
    }
    &-avatar {
        width: 220px;
        height: 70px;
        max-width: 220px;
        padding: 0;
        margin: 1.5rem auto 0;
        overflow: hidden;
        flex: 1 0 auto;
        background-size: contain; // Make sure the logo is contained
        &._placeholder {
            background: get-color(neutral, 200);
        }
        &._circle {
            width: 140px;
            height: 140px;
            max-width: 140px;
            margin-top: 0;
            flex-basis: 140px;
            background-size: cover; // Make sure the logo is contained
            border-radius: 50%;
        }
        .no-flexbox & {
            float: left;
        }
    }
    &-block {
        max-width: calc(100% - 140px); // IE10 bullshit
        padding: 0;
        .no-flexbox & {
            float: left;
        }
    }
    cite {
        display: block;
        margin-top: 1.5rem;
    }
    cite > * {
        @include font-size-small;
        display: block;
        font-style: normal;
    }
    &-speaker {
        @include spaced-out;
    }
    &._stacked {
        display: block;
        & + & {
            margin-top: 3rem;
        }
        .quote-avatar {
            height: auto;
            margin: 0 0 1.5rem;
        }
        .quote-block {
            max-width: 100%;
        }
    }
}
@media #{$mobile-media} {
    .quote {
        > * {
            text-align: center;
        }
        &-block {
            max-width: 100%;
            margin-top: 1.5rem;
        }
    }
}
@media #{$desktop-media} {
    .quote {
        &-block {
            padding-left: 30px;
        }
    }
    &._stacked {
        .quote-block {
            padding-left: 0;
        }
        blockquote,
        blockquote._small {
            @include font-size-base;
        }
    }
}
  • URL: /components/raw/quote/Quote.scss
  • Filesystem Path: components/molecules/Quote/Quote.scss
  • Size: 1.9 KB

There are no notes for this item.