diff --git a/src/components/hy-person-card/hy-person-card.scss b/src/components/hy-person-card/hy-person-card.scss
index 53e21129282973e85d51c6c3af094acffda2aab1..fabd0b77dde9c3b1082df1a10a9e1021d401e66a 100644
--- a/src/components/hy-person-card/hy-person-card.scss
+++ b/src/components/hy-person-card/hy-person-card.scss
@@ -4,6 +4,11 @@
 
 .hy-person-card-container {
   font-family: var(--main-font-family);
+  margin-bottom: 28px;
+
+  @include breakpoint($wide) {
+    margin-bottom: 32px;
+  }
 
   &__category-title {
     @include font-size(12px, 14px);
@@ -19,17 +24,16 @@
       @include font-size(14px, 18px); //>1920 desktop
     }
   }
+
+  &__link {
+    text-decoration: none;
+  }
 }
 
 .hy-person-card {
   display: flex;
+  flex-direction: row;
   font-family: var(--main-font-family);
-  margin-bottom: 28px;
-  text-decoration: none;
-
-  @include breakpoint($wide) {
-    margin-bottom: 32px;
-  }
 
   &__image-container {
     margin-right: 12px;
diff --git a/src/components/hy-person-card/hy-person-card.tsx b/src/components/hy-person-card/hy-person-card.tsx
index 051fcfee538e7c9b23b9915e1314ea034561a17f..06c191ef82c4e175f4467e09ed27a7979c8edde6 100644
--- a/src/components/hy-person-card/hy-person-card.tsx
+++ b/src/components/hy-person-card/hy-person-card.tsx
@@ -37,55 +37,58 @@ export class HyPersonCard {
   }
 
   render() {
+    const classLinkAttributes = ['hy-person-card-container__link', this.variant].join(' ');
     const classAttributes = ['hy-person-card', this.variant].join(' ');
     const target = this.isExternal ? '_blank' : '_self';
 
     return (
       <article class="hy-person-card-container">
-        {this.variant == PersonCardVariants.default && (
-          <div class="hy-person-card-container__category-title">{this.categoryTitle}</div>
-        )}
-        <a class={classAttributes} href={this.url} target={target} aria-label={this.scLabel}>
-          <div class="hy-person-card__image-container">
-            {this.imageUrl ? (
-              <div class="hy-person-card__image-container__image">
-                <img aria-hidden="true" src={this.imageUrl} alt={this.imageAlt} />
-              </div>
-            ) : (
-              <div class="hy-person-card__image-container__no-image">
-                <div class="hy-person-card__image-container__no-image__initials">{this._initials}</div>
-              </div>
-            )}
-          </div>
-          <div class="hy-person-card__info-container">
-            <div class="hy-person-card__info-container__full-name">{this._fullName}</div>
-            {this.positionTitle && (
-              <div class="hy-person-card__info-container__position-title">{this.positionTitle}</div>
-            )}
-            {this.department && this.variant == PersonCardVariants.default && (
-              <div class="hy-person-card__info-container__department">{this.department}</div>
-            )}
-            {this.field && this.variant == PersonCardVariants.default && (
-              <div class="hy-person-card__info-container__field">{this.field}</div>
-            )}
-            {this.email &&
-              this.variant == PersonCardVariants.default && [
-                <div class="hy-person-card__info-container__email-container">
-                  <span class="hy-person-card__info-container__email__icon">
-                    <hy-icon icon={'hy-icon-email'} size={16} />
-                  </span>
-                  <span class="hy-person-card__info-container__email">{this.email}</span>
-                </div>,
-              ]}
-            {this.phone &&
-              this.variant == PersonCardVariants.default && [
-                <div class="hy-person-card__info-container__phone-container">
-                  <span class="hy-person-card__info-container__phone__icon">
-                    <hy-icon icon={'hy-icon-phone'} size={14} />
-                  </span>
-                  <span class="hy-person-card__info-container__phone">{this.phone}</span>
-                </div>,
-              ]}
+        <a class={classLinkAttributes} href={this.url} target={target} aria-label={this.scLabel}>
+          {this.categoryTitle && this.variant == PersonCardVariants.default && (
+            <div class="hy-person-card-container__category-title">{this.categoryTitle}</div>
+          )}
+          <div class={classAttributes}>
+            <div class="hy-person-card__image-container">
+              {this.imageUrl ? (
+                <div class="hy-person-card__image-container__image">
+                  <img aria-hidden="true" src={this.imageUrl} alt={this.imageAlt} />
+                </div>
+              ) : (
+                <div class="hy-person-card__image-container__no-image">
+                  <div class="hy-person-card__image-container__no-image__initials">{this._initials}</div>
+                </div>
+              )}
+            </div>
+            <div class="hy-person-card__info-container">
+              <div class="hy-person-card__info-container__full-name">{this._fullName}</div>
+              {this.positionTitle && (
+                <div class="hy-person-card__info-container__position-title">{this.positionTitle}</div>
+              )}
+              {this.department && this.variant == PersonCardVariants.default && (
+                <div class="hy-person-card__info-container__department">{this.department}</div>
+              )}
+              {this.field && this.variant == PersonCardVariants.default && (
+                <div class="hy-person-card__info-container__field">{this.field}</div>
+              )}
+              {this.email &&
+                this.variant == PersonCardVariants.default && [
+                  <div class="hy-person-card__info-container__email-container">
+                    <span class="hy-person-card__info-container__email__icon">
+                      <hy-icon icon={'hy-icon-email'} size={16} />
+                    </span>
+                    <span class="hy-person-card__info-container__email">{this.email}</span>
+                  </div>,
+                ]}
+              {this.phone &&
+                this.variant == PersonCardVariants.default && [
+                  <div class="hy-person-card__info-container__phone-container">
+                    <span class="hy-person-card__info-container__phone__icon">
+                      <hy-icon icon={'hy-icon-phone'} size={14} />
+                    </span>
+                    <span class="hy-person-card__info-container__phone">{this.phone}</span>
+                  </div>,
+                ]}
+            </div>
           </div>
         </a>
       </article>
diff --git a/src/index.html b/src/index.html
index f03904a71b73da047b2326bcc6ef3a9160e513b8..44e1764eb292bb0ba47239284f9bc6d6a5ba7fc4 100644
--- a/src/index.html
+++ b/src/index.html
@@ -248,7 +248,6 @@
         >
         </hy-person-card>
         <hy-person-card
-          category-title="People"
           first-name="Paula"
           last-name="Elomaa"
           url="https://www.helsinki.fi/sv/people/people-finder/person-by-id/9038938"