Updating testimonial card pattern with persona component usage

.changeset/soft-masks-tap.md

@@ -0,0 +1,5 @@
+---
+'@microsoft/atlas-site': patch
+---
+
+Updating testimonial card pattern with persona component usage.

site/src/patterns/card.md

@@ -102,24 +102,18 @@ These cards use standard `.card` subcomponents, border atomics to create a left
 
 ## Testimonial card
 
-The testimonial card provides a place for a user's opinion to be showcased. Notable modifications from Icon Card include using `border-radius-rounded` on the image, as well as slightly different font and text sizes. There are also several flexbox based atomics applied to ensure links justify at the ends of cards when placed in a grid.
+The testimonial card provides a place for a user's opinion to be showcased and includes the use of the [`.persona`](../components/persona.md) component. There are also several flexbox based atomics applied to ensure links justify at the ends of cards when placed in a grid.
 
 ```html
 <article class="card">
 	<div class="card-content font-size-lg display-flex flex-direction-column">
-		<div class="media">
-			<div class="media-left">
-				<div class="image image-64x64">
-					<img
-						class="border-radius-rounded"
-						alt="Write alt text here or if image is presentational only add aria-hidden attribute"
-						src="~/src/scaffold/media/twitter-example.jpeg"
-					/>
-				</div>
-			</div>
-			<div class="media-content">
-				<p class="font-size-xl font-weight-semibold margin-bottom-xxs">Full Name</p>
-				<p>Role</p>
+		<div class="persona persona-lg">
+			<figure class="persona-avatar">
+				<img src="~/src/scaffold/media/avatar.png" alt="Avatar for Jane Doe" />
+			</figure>
+			<div class="persona-details">
+				<p class="persona-name">Jane Doe</p>
+				<p>Software Engineer</p>
 			</div>
 		</div>
 		<p class="margin-block-xs color-text-subtle">