380
800
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<div class="m-featured-quote">
    <blockquote class="m-featured-quote__quote">
        <p>“If you are new to a management position or on the verge of becoming a manager I would highly recommend the program. You will get a broad overview of current research, methods and best practices to improve and reflect on your current management style.”</p>
    </blockquote>

    <div class="m-featured-quote__author">
        <div class="m-small-profile">
            <div class="m-small-profile__inner">
                <div class="m-small-profile__image">

                    <div class="a-image a-image--1:1">
                        <picture>
                            <source srcset="//placehold.dev.area17.com/image/72x72?, //placehold.dev.area17.com/image/144x144? 2x" media="(max-width: 543px)">
                            <source srcset="//placehold.dev.area17.com/image/109x109?, //placehold.dev.area17.com/image/218x218? 2x" media="(min-width: 544px) and (max-width: 767px)">
                            <source srcset="//placehold.dev.area17.com/image/108x108?, //placehold.dev.area17.com/image/216x216? 2x" media="(min-width: 768px) and (max-width: 1023px)">
                            <source srcset="//placehold.dev.area17.com/image/84x84?, //placehold.dev.area17.com/image/168x168? 2x" media="(min-width: 1024px) and (max-width: 1279px)">
                            <source srcset="//placehold.dev.area17.com/image/94x94?, //placehold.dev.area17.com/image/188x188? 2x" media="(min-width: 1280px) and (max-width: 1459px)">
                            <source srcset="//placehold.dev.area17.com/image/130x130?, //placehold.dev.area17.com/image/260x260? 2x" media="(min-width: 1460px) and (max-width: 1919px)">
                            <source srcset="//placehold.dev.area17.com/image/128x128?, //placehold.dev.area17.com/image/256x256? 2x" media="(min-width: 1920px)">
                            <img loading="lazy" src="//placehold.dev.area17.com/image/72x72?, //placehold.dev.area17.com/image/144x144? 2x" width="375" height="375" alt="Placeholder image (1:1)" class="a-image__img" onload="this.classList.add('is-loaded')">
                        </picture>
                    </div>
                </div>

                <div class="m-small-profile__main">
                    <h3 class="m-small-profile__title">Mark Reuss</h3>
                    <span class="m-small-profile__intro">EVP, General Motors, U.S.</span>
                </div>
            </div>
        </div>
    </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
{
  "quote": "“If you are new to a management position or on the verge of becoming a manager I would highly recommend the program. You will get a broad overview of current research, methods and best practices to improve and reflect on your current management style.”",
  "author": {
    "image": {
      "sizes": {
        "(max-width: 543px)": "//placehold.dev.area17.com/image/72x72?, //placehold.dev.area17.com/image/144x144? 2x",
        "(min-width: 544px) and (max-width: 767px)": "//placehold.dev.area17.com/image/109x109?, //placehold.dev.area17.com/image/218x218? 2x",
        "(min-width: 768px) and (max-width: 1023px)": "//placehold.dev.area17.com/image/108x108?, //placehold.dev.area17.com/image/216x216? 2x",
        "(min-width: 1024px) and (max-width: 1279px)": "//placehold.dev.area17.com/image/84x84?, //placehold.dev.area17.com/image/168x168? 2x",
        "(min-width: 1280px) and (max-width: 1459px)": "//placehold.dev.area17.com/image/94x94?, //placehold.dev.area17.com/image/188x188? 2x",
        "(min-width: 1460px) and (max-width: 1919px)": "//placehold.dev.area17.com/image/130x130?, //placehold.dev.area17.com/image/260x260? 2x",
        "(min-width: 1920px)": "//placehold.dev.area17.com/image/128x128?, //placehold.dev.area17.com/image/256x256? 2x"
      },
      "ratio": "1:1",
      "width": 375,
      "height": 375,
      "alt": "Placeholder image (1:1)"
    },
    "title": "Mark Reuss",
    "intro": "EVP, General Motors, U.S."
  }
}
1
2
3
4
5
6
7
8
9
10
11
<div class="m-featured-quote">
	<blockquote class="m-featured-quote__quote">
		<p>{{ quote }}</p>
	</blockquote>

	{% if author %}
		<div class="m-featured-quote__author">
			{% include 'components/molecules/small-profile/small-profile' with author only %}
		</div>
	{% endif %}
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.m-featured-quote {
  &__quote {
    @include f-heading-5;
    @include width-multi(
      (
        medium: 6,
        large: 8,
        xlarge: 8,
        xxlarge: 8,
        xxxlarge: 8
      )
    );
  }

  &__author {
    @include spacing($inner-spacing-03);
  }
}