<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.