diff --git a/src/ui/Card/PublicationCard.stories.jsx b/src/ui/Card/PublicationCard.stories.jsx
index bd762f540d..7408da9ce6 100644
--- a/src/ui/Card/PublicationCard.stories.jsx
+++ b/src/ui/Card/PublicationCard.stories.jsx
@@ -28,10 +28,21 @@ export default {
 const Template = (args) => (
   <Container>
     <Card className="publication tertiary">
-      <Image src={args.image} wrapped ui={false} alt="card image" />
+      <Image
+        as="a"
+        href={args.href}
+        src={args.image}
+        wrapped
+        ui={false}
+        alt="card image"
+      />
       <Card.Content>
-        <Card.Meta>{args.tag}</Card.Meta>
-        <Card.Description>{args.description}</Card.Description>
+        <Card.Meta>
+          <a href={args.href}>{args.tag}</a>
+        </Card.Meta>
+        <Card.Description>
+          <a href={args.href}>{args.description}</a>
+        </Card.Description>
       </Card.Content>
     </Card>
   </Container>
@@ -43,4 +54,5 @@ PublicationCard.args = {
   description:
     'Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis. Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis. Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis. Eget tellus blandit aenean mattis. Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis.',
   image: imageUrl,
+  href: '/#',
 };
diff --git a/src/ui/Card/RelatedContent/RelatedContent.jsx b/src/ui/Card/RelatedContent/RelatedContent.jsx
index c564d72dee..aeb6fda7f3 100644
--- a/src/ui/Card/RelatedContent/RelatedContent.jsx
+++ b/src/ui/Card/RelatedContent/RelatedContent.jsx
@@ -32,11 +32,22 @@ RelatedContent.Grid = ({ children, ...rest }) => {
               mobile={12}
             >
               {row.map((item, index) => (
-                <Card className="publication" key={index}>
-                  <Image src={item.image} wrapped ui={false} alt="card image" />
+                <Card className="publication tertiary" key={index}>
+                  <Image
+                    as="a"
+                    href={item.href}
+                    src={item.image}
+                    wrapped
+                    ui={false}
+                    alt="card image"
+                  />
                   <Card.Content>
-                    <Card.Meta>{item.tag}</Card.Meta>
-                    <Card.Description>{item.description}</Card.Description>
+                    <Card.Meta>
+                      <a href={item.href}>{item.tag}</a>
+                    </Card.Meta>
+                    <Card.Description>
+                      <a href={item.href}>{item.description}</a>
+                    </Card.Description>
                   </Card.Content>
                 </Card>
               ))}
@@ -50,11 +61,22 @@ RelatedContent.Grid = ({ children, ...rest }) => {
               tablet={12}
               mobile={12}
             >
-              <Card className="publication">
-                <Image src={item.image} wrapped ui={false} alt="card image" />
+              <Card className="publication tertiary">
+                <Image
+                  as="a"
+                  href={item.href}
+                  src={item.image}
+                  wrapped
+                  ui={false}
+                  alt="card image"
+                />
                 <Card.Content>
-                  <Card.Meta>{item.tag}</Card.Meta>
-                  <Card.Description>{item.description}</Card.Description>
+                  <Card.Meta>
+                    <a href={item.href}>{item.tag}</a>
+                  </Card.Meta>
+                  <Card.Description>
+                    <a href={item.href}>{item.description}</a>
+                  </Card.Description>
                 </Card.Content>
               </Card>
             </Grid.Column>
diff --git a/src/ui/Card/RelatedContent/RelatedContent.stories.jsx b/src/ui/Card/RelatedContent/RelatedContent.stories.jsx
index b62b245ca5..4682c9e753 100644
--- a/src/ui/Card/RelatedContent/RelatedContent.stories.jsx
+++ b/src/ui/Card/RelatedContent/RelatedContent.stories.jsx
@@ -31,29 +31,34 @@ DefaultEven.args = {
       description:
         'Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis.',
       image: imageUrl,
+      href: '/#',
     },
     {
       tag: '#Publication',
       description: 'Leo fermentum sollicitudin suspendisse iaculis feugiat.',
       image: imageUrl,
+      href: '/#',
     },
     {
       tag: '#Publication',
       description:
         'Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis. Leo fermentum sollicitudin suspendisse iaculis feugiat. ',
       image: imageUrl,
+      href: '/#',
     },
     {
       tag: '#Publication',
       description:
         'Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis. Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis. Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis. Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis. Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis. ',
       image: imageUrl,
+      href: '/#',
     },
     {
       tag: '#Publication',
       description:
         'Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis.',
       image: imageUrl,
+      href: '/#',
     },
   ],
   buttonText: 'See All',
@@ -104,17 +109,20 @@ DefaultOdd.args = {
       description:
         'Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis.',
       image: imageUrl,
+      href: '/#',
     },
     {
       tag: '#Publication',
       description: 'Leo fermentum sollicitudin suspendisse iaculis feugiat.',
       image: imageUrl,
+      href: '/#',
     },
     {
       tag: '#Publication',
       description:
         'Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis. Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis. Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis. Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis. Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis. ',
       image: imageUrl,
+      href: '/#',
     },
   ],
   buttonText: 'See All',
@@ -190,6 +198,7 @@ function TabWithRelatedContent({ panes }) {
         menu={{
           secondary: true,
           pointing: true,
+          tabIndex: 0,
         }}
       />
     </Container>
@@ -209,6 +218,7 @@ RelatedContentInTab.args = {
           description:
             'Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis.',
           image: imageUrl,
+          href: '/#',
         },
       ],
       buttonText: 'See All',
@@ -222,12 +232,14 @@ RelatedContentInTab.args = {
           description:
             'Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis.',
           image: imageUrl,
+          href: '/#',
         },
         {
           tag: '#Publication',
           description:
             'Leo fermentum sollicitudin suspendisse iaculis feugiat.',
           image: imageUrl,
+          href: '/#',
         },
       ],
       buttonText: 'See All',
@@ -241,18 +253,21 @@ RelatedContentInTab.args = {
           description:
             'Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis.',
           image: imageUrl,
+          href: '/#',
         },
         {
           tag: '#Publication',
           description:
             'Leo fermentum sollicitudin suspendisse iaculis feugiat.',
           image: imageUrl,
+          href: '/#',
         },
         {
           tag: '#Publication',
           description:
             'Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis. Leo fermentum sollicitudin suspendisse iaculis feugiat. ',
           image: imageUrl,
+          href: '/#',
         },
       ],
       buttonText: 'See All',
@@ -266,30 +281,35 @@ RelatedContentInTab.args = {
           description:
             'Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis.',
           image: imageUrl,
+          href: '/#',
         },
         {
           tag: '#Publication',
           description:
             'Leo fermentum sollicitudin suspendisse iaculis feugiat.',
           image: imageUrl,
+          href: '/#',
         },
         {
           tag: '#Publication',
           description:
             'Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis. Leo fermentum sollicitudin suspendisse iaculis feugiat. ',
           image: imageUrl,
+          href: '/#',
         },
         {
           tag: '#Publication',
           description:
             'Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis. Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis. Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis. Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis. Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis. ',
           image: imageUrl,
+          href: '/#',
         },
         {
           tag: '#Publication',
           description:
             'Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis.',
           image: imageUrl,
+          href: '/#',
         },
       ],
       buttonText: 'See All',