NCIOCPL · olitharp-nci · Dec 10, 2025
diff --git a/...site/modules/custom/cgov_yaml_content/content/16100_biography-stephen-chanock.content.yml b/...site/modules/custom/cgov_yaml_content/content/16100_biography-stephen-chanock.content.yml
@@ -14,7 +14,7 @@
         args:
           - 'image'
           - type: 'module'
-            filename: '2059-160x140.jpg'
+            filename: 'biographies-chanock.png'
       alt: 'Stephen J. Chanock, M.D.'
 - entity: "node"
   type: "cgov_biography"

diff --git a/...files/custom/cgov_site/modules/custom/cgov_yaml_content/images/2059-160x140.jpg b/...files/custom/cgov_site/modules/custom/cgov_yaml_content/images/2059-160x140.jpg
diff --git a/...ustom/cgov_site/modules/custom/cgov_yaml_content/images/biographies-chanock.png b/...ustom/cgov_site/modules/custom/cgov_yaml_content/images/biographies-chanock.png
diff --git a/...ustom/cgov_site/modules/custom/cgov_yaml_content/images/dr_chanock_headshot.png b/...ustom/cgov_site/modules/custom/cgov_yaml_content/images/dr_chanock_headshot.png
diff --git a/docroot/profiles/custom/cgov_site/themes/custom/cgov/src/styles/_profile-panel.scss b/docroot/profiles/custom/cgov_site/themes/custom/cgov/src/styles/_profile-panel.scss
diff --git a/..._site/themes/custom/ncids_trans/front-end/src/entrypoints/biography/biography-legacy.scss b/..._site/themes/custom/ncids_trans/front-end/src/entrypoints/biography/biography-legacy.scss
@@ -9,7 +9,6 @@
 @import '../../legacy/styles/variables';
 @import '../../legacy/styles/breakpoint-mixins';
 @import '~Styles/sprites/svg-sprite';
-@import '~Core/styles/profile-panel';
 
 // Override wrapper styles for embedded images
 // (Specifically the figure and caption/credit/enlarge styles
@@ -18,3 +17,25 @@
 @import '../../legacy/transition-hacks/inner-page-embed-feature-card-hack';
 @import '../../legacy/transition-hacks/inner-page-embed-entity-hack';
 @import '../../legacy/transition-hacks/inner-page-embed-infographic-hack';
+
+// Styles for press contact that was located in profile-panel
+.press-contact {
+	background: $white;
+	border: 1px solid $yetAnotherGrey;
+	box-shadow: 0 0 9px 1px rgba(0, 0, 0, 0.15);
+	margin: 1.3em 0 1.5em 0;
+	padding: 15px;
+
+	h2 {
+		color: $dgrey00;
+		font-size: 23px;
+		margin-top: 0;
+	}
+
+	p {
+		&:last-child {
+			margin-bottom: 0;
+		}
+	}
+}
+
diff --git a/...om/cgov_site/themes/custom/ncids_trans/front-end/src/entrypoints/biography/biography.scss b/...om/cgov_site/themes/custom/ncids_trans/front-end/src/entrypoints/biography/biography.scss
@@ -6,6 +6,7 @@
 @forward '../../lib/components/cgdp-article-footer/';
 @forward '../../lib/components/cgdp-related-resources';
 @forward '../../lib/components/cgdp-document-dates';
+@forward '../../lib/components/cgdp-profile-box';
 @forward '../../lib/components/wysiwyg/common/cgdp-embed-image';
 @forward '../../lib/components/wysiwyg/common/cgdp-embed-infographic';
 @forward '../../lib/components/wysiwyg/common/cgdp-embed-video';

diff --git a/...emes/custom/ncids_trans/front-end/src/entrypoints/cancer-center/cancer-center-legacy.scss b/...emes/custom/ncids_trans/front-end/src/entrypoints/cancer-center/cancer-center-legacy.scss
@@ -9,7 +9,6 @@
 @import '../../legacy/styles/variables';
 @import '../../legacy/styles/breakpoint-mixins';
 @import '~Styles/sprites/svg-sprite';
-@import '~Core/styles/profile-panel';
 
 // Override wrapper styles for embedded images
 // (Specifically the figure and caption/credit/enlarge styles

diff --git a/...site/themes/custom/ncids_trans/front-end/src/entrypoints/cancer-center/cancer-center.scss b/...site/themes/custom/ncids_trans/front-end/src/entrypoints/cancer-center/cancer-center.scss
@@ -6,6 +6,7 @@
 @forward '../../lib/components/cgdp-article-footer/';
 @forward '../../lib/components/cgdp-related-resources';
 @forward '../../lib/components/cgdp-document-dates';
+@forward '../../lib/components/cgdp-profile-box';
 @forward '../../lib/components/wysiwyg/common/cgdp-embed-image';
 @forward '../../lib/components/wysiwyg/common/cgdp-embed-infographic';
 @forward '../../lib/components/wysiwyg/common/cgdp-embed-video';

diff --git a/...emes/custom/ncids_trans/front-end/src/lib/components/cgdp-profile-box/cgdp-profile-box.ts b/...emes/custom/ncids_trans/front-end/src/lib/components/cgdp-profile-box/cgdp-profile-box.ts
@@ -0,0 +1,4 @@
+const initialize = () => {
+	//
+};
+export default initialize;
diff --git a/...v_site/themes/custom/ncids_trans/front-end/src/lib/components/cgdp-profile-box/index.scss b/...v_site/themes/custom/ncids_trans/front-end/src/lib/components/cgdp-profile-box/index.scss
@@ -0,0 +1,37 @@
+@forward 'usa-icon';
+@use 'uswds-core' as *;
+
+.cgdp-profile-box {
+	@include u-shadow(2);
+	@include u-radius('md');
+	@include u-padding(3);
+
+	// TODO we should just expect good images, right?
+	img {
+		max-width: 100%;
+		height: auto;
+	}
+
+	.cgdp-profile-box__heading {
+		@include typeset-h1;
+		margin: 0 0 units(2);
+	}
+
+	.cgdp-profile-box__title {
+		font-size: size("body", "sm");
+	}
+
+	.cgdp-profile-box__titles,
+	.cgdp-profile-box__org {
+		@include unstyled-list;
+		@include u-margin-y(2);
+	}
+
+	.cgdp-profile-box__address,
+	.cgdp-profile-box__phone,
+	.cgdp-profile-box__publications,
+	.cgdp-profile-box__social-media,
+	.cgdp-profile-box__website {
+		@include u-margin-y(2);
+	}
+}
diff --git a/...gov_site/themes/custom/ncids_trans/front-end/src/lib/components/cgdp-profile-box/index.ts b/...gov_site/themes/custom/ncids_trans/front-end/src/lib/components/cgdp-profile-box/index.ts
@@ -0,0 +1,3 @@
+// Passthrough for cleaner imports.
+import initialize from './cgdp-profile-box';
+export default initialize;
diff --git a/..._site/themes/custom/ncids_trans/templates/content/biography/field--field-campus.html.twig b/..._site/themes/custom/ncids_trans/templates/content/biography/field--field-campus.html.twig
@@ -1,3 +1,3 @@
 {% for item in items %}
-    {{ item.content }}
-{% endfor %}
+  {{ item.content }}
+{% endfor %}
diff --git a/...hemes/custom/ncids_trans/templates/content/biography/field--field-email-address.html.twig b/...hemes/custom/ncids_trans/templates/content/biography/field--field-email-address.html.twig
@@ -1,7 +1,5 @@
 {% for item in items %}
-    <div class="profile-contact-email">
-        <a href="mailto:{{- item.content -}}">
-            {{ item.content }}
-        </a>
-    </div>
+  <a href="mailto:{{- item.content -}}">
+    {{ item.content }}
+  </a>
 {% endfor %}
diff --git a/...mes/custom/ncids_trans/templates/content/biography/field--field-linkedin-handle.html.twig b/...mes/custom/ncids_trans/templates/content/biography/field--field-linkedin-handle.html.twig
@@ -1,6 +1,6 @@
 {% for item in items %}
-    <a href="http://www.linkedin.com/in/{{- item.content -}}" class="profile-social-link linkedin no-exit-notification">
-        <i class="icon" aria-hidden="true"></i>
-        <span class="show-for-sr">Connect with me on LinkedIn</span>
-    </a>
-{% endfor %}
+  <a href="http://www.linkedin.com/in/{{- item.content -}}" class="cgdp-profile-box__linkedin no-exit-notification">
+    <i class="icon" aria-hidden="true"></i>
+    <span class="show-for-sr">Connect with me on LinkedIn</span>
+  </a>
+{% endfor %}
diff --git a/...mes/custom/ncids_trans/templates/content/biography/field--field-office-location.html.twig b/...mes/custom/ncids_trans/templates/content/biography/field--field-office-location.html.twig
@@ -1,3 +1,3 @@
 {% for item in items %}
-    {{ item.content }}
+  {{ item.content }}
 {% endfor %}
diff --git a/...themes/custom/ncids_trans/templates/content/biography/field--field-phone-number.html.twig b/...themes/custom/ncids_trans/templates/content/biography/field--field-phone-number.html.twig
@@ -1,3 +1,3 @@
 {% for item in items %}
-  <div class="profile-contact-phone">{{ item.content }}</div>
-{% endfor %}
+  {{ item.content }}
+{% endfor %}
diff --git a/...om/ncids_trans/templates/content/biography/field--field-scientific-publications.html.twig b/...om/ncids_trans/templates/content/biography/field--field-scientific-publications.html.twig
@@ -1,7 +1,3 @@
 {% for item in items %}
-    <a href="{{- item.content -}}" class="profile-social-link publications no-exit-notification">
-        <i class="icon publications" aria-hidden="true"></i>
-        <span class="show-for-sr">View my </span>
-        <span>Scientific Publications</span>
-    </a>
-{% endfor %}
+  <a href="{{- item.content -}}" class="cgdp-profile-box__publications no-exit-notification">Scientific Publications</a>
+{% endfor %}
diff --git a/...v_site/themes/custom/ncids_trans/templates/content/biography/field--field-title.html.twig b/...v_site/themes/custom/ncids_trans/templates/content/biography/field--field-title.html.twig
@@ -1,5 +1,5 @@
-<div class="profile-titles">
+<ul class="cgdp-profile-box__titles">
   {% for item in items %}
-    <div class="profile-title">{{ item.content }}</div>
+    <li class="cgdp-profile-box__title">{{ item.content }}</li>
   {% endfor %}
-</div>
+</ul>
diff --git a/...emes/custom/ncids_trans/templates/content/biography/field--field-twitter-handle.html.twig b/...emes/custom/ncids_trans/templates/content/biography/field--field-twitter-handle.html.twig
@@ -1,6 +1,6 @@
 {% for item in items %}
-    <a href="http://www.twitter.com/{{- item.content -}}" class="profile-social-link twitter no-exit-notification">
-        <i class="icon" aria-hidden="true"></i>
-        <span class="show-for-sr">Follow me on X</span>
-    </a>
-{% endfor %}
+  <a href="http://www.twitter.com/{{- item.content -}}" class="cgdp-profile-box__twitter no-exit-notification">
+    <i class="icon" aria-hidden="true"></i>
+    <span class="show-for-sr">Follow me on X</span>
+  </a>
+{% endfor %}