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
33
34
35
36
{
  "title": "Peter Wiegand",
  "image": {
    "sizes": {
      "(max-width: 543px)": "//placehold.dev.area17.com/image/511x341?, //placehold.dev.area17.com/image/1022x682? 2x",
      "(min-width: 544px) and (max-width: 767px)": "//placehold.dev.area17.com/image/735x490?, //placehold.dev.area17.com/image/1470x980? 2x",
      "(min-width: 768px) and (max-width: 1023px)": "//placehold.dev.area17.com/image/480x320?, //placehold.dev.area17.com/image/960x640? 2x",
      "(min-width: 1024px) and (max-width: 1279px)": "//placehold.dev.area17.com/image/606x404?, //placehold.dev.area17.com/image/1212x808? 2x",
      "(min-width: 1280px) and (max-width: 1459px)": "//placehold.dev.area17.com/image/682x454?, //placehold.dev.area17.com/image/1364x908? 2x",
      "(min-width: 1460px) and (max-width: 1919px)": "//placehold.dev.area17.com/image/900x600?, //placehold.dev.area17.com/image/1800x1200? 2x",
      "(min-width: 1920px)": "//placehold.dev.area17.com/image/888x592?, //placehold.dev.area17.com/image/1776x1184? 2x"
    },
    "ratio": "3:2",
    "width": 375,
    "height": 250,
    "alt": "Placeholder image (3:2)"
  },
  "meta": [
    {
      "title": "Director of Digital Strategy",
      "content": "External Relations and Development"
    },
    {
      "title": "Contact",
      "content": [
        "Office: 211 Uris",
        "Phone: 212-854-6100",
        "E-mail: <a href=\"mailto:jra2188@gsb.columbia.edu\">jra2188@gsb.columbia.edu</a>",
        "Fax: 212-854-6100"
      ]
    }
  ],
  "content": [
    "<p>Juan Ramón Alaix is the former Chief Executive Officer of Zoetis. During his seven-year tenure as CEO, Zoetis became the global leader in animal health, with $5.8 billion in revenue in 2018, a market capitalization of nearly $60 billion, and several groundbreaking new medicines ranked among the top products in the animal health industry. Mr. Alaix remains a member of the Zoetis Board of Directors and serves as an advisor to the company.</p>"
  ]
}

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
<article class="o-profile {{ image ? 'o-profile--image' }}">

	<div class="o-profile__header">
		<h1 class="o-profile__name">{{ title }}</h1>

		{% if image %}
			<div class="o-profile__image">
				{% include 'components/atoms/image/image' with image only %}
			</div>
		{% endif %}

	</div>

	<div class="o-profile__main">

		{% if meta %}
			<div class="o-profile__meta">
				{% include 'components/molecules/detail-meta/detail-meta' with { items: meta } only %}
			</div>
		{% endif %}

		{% if content %}
			<div class="o-profile__content">
				<div class="m-rich-text">
					{{ content|join("\n") }}
				</div>
			</div>
		{% endif %}
	</div>

</article>

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
  $o-profile__left: (
  xsmall: 6,
  small: 6,
  medium: 4,
  large: 6,
  xlarge: 6,
  xxlarge: 6,
  xxxlarge: 6,
);

$o-profile__right: (
  xsmall: 6,
  small: 6,
  medium: 4,
  large: 6,
  xlarge: 6,
  xxlarge: 6,
  xxxlarge: 6,
);

.o-profile {

  &__header {
    @include columns-container;
  }

  &__main {
    @include columns-container;
  }

  &__name {
    @include column($o-profile__left);
    @include f-heading-9;
    padding-top: 16px;
  }

  &__image {
    @include column($o-profile__right);
    @include spacing(
      (
        xsmall: 64px,
        "medium+": 20px,
      )
    );
  }

  &__meta {
    @include column($o-profile__left);
    @include spacing(
      (
        xsmall: 48px,
        "medium+": 20px,
      )
    );
  }

  &__content {
    @include column($o-profile__right);
  }

  &__meta {
    padding-top: 48px;
  }

  &__meta {
    .m-detail-meta__item:first-child {
      border-top-width: 0;
      padding-top: 0;
    }
  }

  &__content:not(:first-child) {
    padding-top: 48px;
  }
}