Copy environment

Testimonial 

<div class="section     section--mt-large     section--mb-large testimonial">
    <div class="section__inner ">
        <div class="section__content ">
            <div class="h-container">
                <div class="grid">
                    <div class="grid__col grid__col--md-8 grid__col--offset-md-1">
                        <blockquote class="blockquote  ">
                            <svg class="icon  blockquote__icon animation__target">
                                <use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#quote-24"></use>
                            </svg>
                            <div class="blockquote__content animation__target">
                                Sometimes I’ll start a sentence and I don’t even know where it’s going. I just hope I find it along the way.
                            </div>
                            <div class="blockquote__cite animation__target">
                                <figure class="image  blockquote__image">
                                    <img loading="lazy" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3C%2Fsvg%3E" data-srcset="//via.placeholder.com/100x100 100w, //via.placeholder.com/200x200 200w, //via.placeholder.com/400x400 400w" data-sizes="auto" alt="" class="image__img lazyload">

                                </figure>
                                <cite class="blockquote__cite-creds">
                                    <span class="blockquote__name">Name Lastname, Assistant To The Manager</span>
                                    <span class="blockquote__creds text-small">Telia</span>
                                </cite>
                            </div>
                        </blockquote>
                    </div>
                </div>
            </div>

        </div>

    </div>
</div>
 
{% set topSpacing %}
    {% apply spaceless %}
        {% if 'small' in data.topSpacing %}
            section--mt-small
        {% elseif 'medium' in data.topSpacing %}
            section--mt-medium
        {% else %}
            section--mt-large
        {% endif %}
    {% endapply %}
{% endset %}

{% set bottomSpacing %}
    {% apply spaceless %}
        {% if 'small' in data.bottomSpacing %}
            section--mb-small
        {% elseif 'medium' in data.bottomSpacing %}
            section--mb-medium
        {% else %}
            section--mb-large
        {% endif %}
    {% endapply %}
{% endset %}

{% set content %}
    <div class="h-container">
        <div class="grid">
            <div class="grid__col grid__col--md-8 grid__col--offset-md-1">
                {% if data.blockquote %}
                    {% set quoteModifier = ('large' in data.variant) ? 'blockquote--large' : '' %}
                    {% include '@blockquote' with { data: data.blockquote, class: '', modifier: quoteModifier } %}
                {% endif %}
            </div>
        </div>
    </div>
{% endset %}
{% include '@section' with { class: 'testimonial', modifier: topSpacing ~ ' ' ~ bottomSpacing, data: { content: content } } %}

{
  "language": "en-US",
  "data": {
    "blockquote": {
      "content": "Sometimes I’ll start a sentence and I don’t even know where it’s going. I just hope I find it along the way.",
      "author": {
        "image": true,
        "name": "Name Lastname",
        "position": "Assistant To The Manager",
        "company": "Telia"
      }
    }
  }
}
  • Handle: @testimonial--default
  • Filesystem Path: src/patterns/modules/testimonial/testimonial.twig
  • References (2): @blockquote, @section

Large 

<div class="section     section--mt-large     section--mb-large testimonial">
    <div class="section__inner ">
        <div class="section__content ">
            <div class="h-container">
                <div class="grid">
                    <div class="grid__col grid__col--md-8 grid__col--offset-md-1">
                        <blockquote class="blockquote blockquote--large ">
                            <svg class="icon  blockquote__icon animation__target">
                                <use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#quote-24"></use>
                            </svg>
                            <div class="blockquote__content animation__target">
                                Sometimes I’ll start a sentence and I don’t even know where it’s going. I just hope I find it along the way.
                            </div>
                            <div class="blockquote__cite animation__target">
                                <figure class="image  blockquote__image">
                                    <img loading="lazy" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3C%2Fsvg%3E" data-srcset="//via.placeholder.com/100x100 100w, //via.placeholder.com/200x200 200w, //via.placeholder.com/400x400 400w" data-sizes="auto" alt="" class="image__img lazyload">

                                </figure>
                                <cite class="blockquote__cite-creds">
                                    <span class="blockquote__name">Name Lastname, Assistant To The Manager</span>
                                    <span class="blockquote__creds text-small">Telia</span>
                                </cite>
                            </div>
                        </blockquote>
                    </div>
                </div>
            </div>

        </div>

    </div>
</div>
 
{% set topSpacing %}
    {% apply spaceless %}
        {% if 'small' in data.topSpacing %}
            section--mt-small
        {% elseif 'medium' in data.topSpacing %}
            section--mt-medium
        {% else %}
            section--mt-large
        {% endif %}
    {% endapply %}
{% endset %}

{% set bottomSpacing %}
    {% apply spaceless %}
        {% if 'small' in data.bottomSpacing %}
            section--mb-small
        {% elseif 'medium' in data.bottomSpacing %}
            section--mb-medium
        {% else %}
            section--mb-large
        {% endif %}
    {% endapply %}
{% endset %}

{% set content %}
    <div class="h-container">
        <div class="grid">
            <div class="grid__col grid__col--md-8 grid__col--offset-md-1">
                {% if data.blockquote %}
                    {% set quoteModifier = ('large' in data.variant) ? 'blockquote--large' : '' %}
                    {% include '@blockquote' with { data: data.blockquote, class: '', modifier: quoteModifier } %}
                {% endif %}
            </div>
        </div>
    </div>
{% endset %}
{% include '@section' with { class: 'testimonial', modifier: topSpacing ~ ' ' ~ bottomSpacing, data: { content: content } } %}

{
  "language": "en-US",
  "data": {
    "blockquote": {
      "content": "Sometimes I’ll start a sentence and I don’t even know where it’s going. I just hope I find it along the way.",
      "author": {
        "image": true,
        "name": "Name Lastname",
        "position": "Assistant To The Manager",
        "company": "Telia"
      }
    },
    "variant": "large"
  }
}
  • Handle: @testimonial--large
  • Filesystem Path: src/patterns/modules/testimonial/testimonial.twig
  • References (2): @blockquote, @section