University of Florida College of the Arts Pattern Library

Quote: Without Call To Action 

<div class="quote" data-cy="quote">
    <div class="quote__background-noise"></div>
    <div class="quote__gradient"></div>
    <div class="quote__image-wrapper">
        <div class="quote__image-lines">
            <svg xmlns="http://www.w3.org/2000/svg" width="180" height="180" viewBox="0 0 180 180" fill="none">
                <mask id="mask0_5085_113713" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="180" height="180">
                    <rect width="180" height="180" rx="90" fill="#E6E6E6" />
                </mask>
                <g mask="url(#mask0_5085_113713)">
                    <path d="M7.42236 -114V61" stroke="#F5592F" stroke-width="4" />
                    <path d="M7.42236 61V237" stroke="#F5592F" stroke-width="2" />
                    <path d="M16.4224 -88.5V86.5" stroke="#F5592F" stroke-width="4" />
                    <path d="M16.4224 86.5V262.5" stroke="#F5592F" stroke-width="2" />
                    <path d="M25.4224 -63V112" stroke="#F5592F" stroke-width="4" />
                    <path d="M25.4224 112V288" stroke="#F5592F" stroke-width="2" />
                    <path d="M34.4224 -37.5V137.5" stroke="#F5592F" stroke-width="4" />
                    <path d="M34.4224 137.5V313.5" stroke="#F5592F" stroke-width="2" />
                    <path d="M43.4224 -12V163" stroke="#F5592F" stroke-width="4" />
                    <path d="M43.4224 163V339" stroke="#F5592F" stroke-width="2" />
                    <path d="M52.4224 13.5V188.5" stroke="#F5592F" stroke-width="4" />
                    <path d="M88.4224 -37.5V93.75" stroke="#F5592F" stroke-width="4" />
                    <path d="M115.422 -114V17.25" stroke="#F5592F" stroke-width="4" />
                    <path d="M88.4224 93.75V225.75" stroke="#F5592F" stroke-width="2" />
                    <path d="M115.422 17.25V149.25" stroke="#F5592F" stroke-width="2" />
                    <path d="M79.4224 -12V119.25" stroke="#F5592F" stroke-width="4" />
                    <path d="M106.422 -88.5V42.75" stroke="#F5592F" stroke-width="4" />
                    <path d="M79.4224 119.25V251.25" stroke="#F5592F" stroke-width="2" />
                    <path d="M106.422 42.75V174.75" stroke="#F5592F" stroke-width="2" />
                    <path d="M70.4224 13.5V144.75" stroke="#F5592F" stroke-width="4" />
                    <path d="M97.4224 -63V68.25" stroke="#F5592F" stroke-width="4" />
                    <path d="M70.4224 144.75V276.75" stroke="#F5592F" stroke-width="2" />
                    <path d="M97.4224 68.25V200.25" stroke="#F5592F" stroke-width="2" />
                    <path d="M61.4224 39V214" stroke="#F5592F" stroke-width="4" />
                </g>
            </svg>
        </div>
        <picture class="quote__picture">
            <source srcset="https://placekitten.com/272/352?a" type="image/webp">
            <img class="quote__image" src="https://placekitten.com/272/352?a" data-cy="quote__image" alt='John Doe' style="object-position: 50% 50%" />
        </picture>
    </div>
    <div class="quote__content-container">
        <div class="quote__icon"> <svg xmlns="http://www.w3.org/2000/svg" width="32" height="25" viewBox="0 0 32 25" fill="none">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M32 12.5H26.24C26.24 8.5475 28.2701 6.4825 32 6.25V0C25.6 0 21.6602 2.7125 20.073 7.8275C19.4381 9.9975 19.2 12.6325 19.2 17.05V25H32V12.5ZM12.8 12.5H7.04C7.04 8.5475 9.07008 6.4825 12.8 6.25V0C6.4 0 2.46016 2.7125 0.87296 7.8275C0.23808 9.9975 0 12.6325 0 17.05V25H12.8V12.5Z" fill="#F5592F" />
            </svg>
        </div>
        <div class="quote__quote" data-cy="quote__quote">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod, lorem sed molestie ultricies, nisl odio consequat nunc, quis aliquam nunc nisl vitae velit. Sed euismod, lorem sed molestie ultricies, nisl odio consequat nunc, quis aliquam nunc nisl vitae velit.
        </div>
        <div class="quote__attribution" data-cy="quote__attribution">
            John Doe
        </div>
    </div>
</div>
 
<div class="quote" data-cy="quote">
    <div class="quote__background-noise"></div>
    <div class="quote__gradient"></div>
    {%  if fields.image.url != '' %}
        <div class="quote__image-wrapper">
            <div class="quote__image-lines">
                {% include 'bits/quote-image-lines/quote-image-lines.twig' %}
            </div>
            <picture class="quote__picture">
                <source srcset="{{ fields.image.url | resize(848) | towebp }}" type="image/webp">
                <img class="quote__image"
                     src="{{ fields.image.url }}"
                     data-cy="quote__image"
                     alt='{{ fields.image_alt_text ?: fields.attribution }}'
                     style="object-position: {{fields.image.focalPoint.x}}% {{fields.image.focalPoint.y}}%"
                />
            </picture>
        </div>
    {% endif %}
    <div class="quote__content-container">
        <div class="quote__icon"> {% include 'bits/icons/quote.twig' %}</div>
        <div class="quote__quote"
            data-cy="quote__quote">
            {{ fields.quoteText }}
        </div>
        <div class="quote__attribution"
            data-cy="quote__attribution">
            {{ fields.attribution }}
        </div>
        {% if fields.showCTALink %}
        <div class="quote__button"
            data-cy="quote__button"
            {{ fields.showCTALink ? 'data-show-cta="true"' : 'data-show-cta="false"'}}>
            {% include 'bits/standard-button/standard-button.twig' with {
                button: {
                    text: fields.linkText,
                    type: 'tertiary',
                    url: fields.linkReference,
                },
                background: 'light'
            } %}
        </div>
        {% endif %}
    </div>
</div>
 
{
  "fields": {
    "type": "quote-block",
    "quoteText": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod, lorem sed molestie ultricies, nisl odio consequat nunc, quis aliquam nunc nisl vitae velit. Sed euismod, lorem sed molestie ultricies, nisl odio consequat nunc, quis aliquam nunc nisl vitae velit.",
    "attribution": "John Doe",
    "image": {
      "url": "https://placekitten.com/272/352?a",
      "alt": "A kitten",
      "focalPoint": {
        "x": 50,
        "y": 50
      }
    },
    "showCTALink": false,
    "linkText": "Read more",
    "linkUrl": "https://google.com/"
  }
}
  • Content: 
    breakpoint = 700px

.quote
    --iconFillColor orange
    --noiseImage url('../images/noiseOverlay2.png')

    @extends $componentWithMargin
    border-radius 8px
    box-shadow 0px 8px 16px 0px rgba(0, 0, 0, 0.20)
    display flex
    padding quoteComponentPadding = 48px
    position relative

    +below(breakpoint)
        flex-direction column

    &__gradient
        background linear-gradient(to left, rgba(alachua, 0.25) 0%, rgba(alachua, 0) 66%)
        bottom 0
        left 0
        position absolute
        right 0
        top 0

        +below(breakpoint)
            background linear-gradient(to bottom, rgba(alachua, 0.25) 0%, rgba(alachua, 0) 66%)

    &__background-noise
        background var(--noiseImage)
        bottom 0
        left 0
        right 0
        position absolute
        top 0
        z-index 2

    &__image-wrapper
        margin-right 48px
        max-height 180px
        max-width 180px
        position relative
        z-index 3

        +below(breakpoint)
            margin-bottom 48px

    &__image-lines
        bottom 0
        left -12px
        position absolute
        right 0
        top 0

    &__image
        display none
        margin-bottom 24px

        +above(quoteCardBreakpoint)
            aspect-ratio 1/1
            border-radius 50%
            display flex
            flex 0 1 50%
            position relative
            margin-right 12px
            min-width 180px
            object-fit cover

        +above(largeDeviceBreakpoint)
            margin-right 24px

    &__icon
        margin-bottom 16px
        position absolute
        top -12px
        width iconWidth = 24px

        & svg path
            fill var(--iconFillColor)

    &__quote
        @extends $headline3
        color blue500
        margin-bottom 16px

    &__attribution
        @extends $label
        color grey500
        margin-bottom 24px

    &__content-container
        display flex
        flex-direction column
        z-index 3

    &__cta-container
        @extends $linkHeadline6
  • URL: /components/raw/quote-block/quote-block.styl
  • Filesystem Path: patterns/blocks/quote-block/quote-block.styl
  • Size: 2 KB

No notes defined.