diff --git a/scm-ui/ui-components/src/CardColumn.stories.tsx b/scm-ui/ui-components/src/CardColumn.stories.tsx
index 276e357bbe..d2a59e0d4b 100644
--- a/scm-ui/ui-components/src/CardColumn.stories.tsx
+++ b/scm-ui/ui-components/src/CardColumn.stories.tsx
@@ -27,6 +27,8 @@ import { storiesOf } from "@storybook/react";
 import CardColumn from "./CardColumn";
 import Icon from "./Icon";
 import styled from "styled-components";
+import { DateFromNow } from ".";
+import repository from "./__resources__/repository";
 
 const Wrapper = styled.div`
   margin: 2rem;
@@ -40,6 +42,7 @@ const avatar = <Icon name="icons fa-2x fa-fw" />;
 const title = <strong>title</strong>;
 const footerLeft = <small>left footer</small>;
 const footerRight = <small>right footer</small>;
+const baseDate = "2020-03-26T12:13:42+02:00";
 
 storiesOf("CardColumn", module)
   .addDecorator(story => <MemoryRouter initialEntries={["/"]}>{story()}</MemoryRouter>)
@@ -60,4 +63,10 @@ storiesOf("CardColumn", module)
       footerLeft={footerLeft}
       footerRight={footerRight}
     />
-  ));
+  ))
+  .add("with hoverable date", () => (
+    <CardColumn title={title} footerLeft={footerLeft} footerRight={
+      <small className="level-item">
+      <DateFromNow baseDate={baseDate} date={repository.creationDate}/>
+    </small>} />
+    ));
diff --git a/scm-ui/ui-components/src/CardColumn.tsx b/scm-ui/ui-components/src/CardColumn.tsx
index c85e15371a..70d3da1946 100644
--- a/scm-ui/ui-components/src/CardColumn.tsx
+++ b/scm-ui/ui-components/src/CardColumn.tsx
@@ -74,6 +74,7 @@ const RightMarginDiv = styled.div`
 
 const InheritFlexShrinkDiv = styled.div`
   flex-shrink: inherit;
+  pointer-events: all;
 `;
 
 const CardColumn: FC<Props> = ({
diff --git a/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap b/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
index 1c61844bf6..26b6c0c320 100644
--- a/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
+++ b/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
@@ -498,7 +498,7 @@ exports[`Storyshots CardColumn default 1`] = `
           </small>
         </div>
         <div
-          className="CardColumn__InheritFlexShrinkDiv-sc-1w6lsih-7 jkwBTE level-right is-block is-mobile is-marginless shorten-text"
+          className="CardColumn__InheritFlexShrinkDiv-sc-1w6lsih-7 MkNLN level-right is-block is-mobile is-marginless shorten-text"
         >
           <small>
             right footer
@@ -546,7 +546,7 @@ exports[`Storyshots CardColumn minimal 1`] = `
           </small>
         </div>
         <div
-          className="CardColumn__InheritFlexShrinkDiv-sc-1w6lsih-7 jkwBTE level-right is-block is-mobile is-marginless shorten-text"
+          className="CardColumn__InheritFlexShrinkDiv-sc-1w6lsih-7 MkNLN level-right is-block is-mobile is-marginless shorten-text"
         >
           <small>
             right footer
@@ -558,6 +558,61 @@ exports[`Storyshots CardColumn minimal 1`] = `
 </div>
 `;
 
+exports[`Storyshots CardColumn with hoverable date 1`] = `
+<div
+  className="CardColumnstories__Wrapper-sc-1ztucl-0 IFDjP"
+>
+  <article
+    className="CardColumn__NoEventWrapper-sc-1w6lsih-0 kZKqpc media"
+  >
+    <div
+      className="CardColumn__FlexFullHeight-sc-1w6lsih-2 cAdfGj media-content text-box is-flex"
+    >
+      <div
+        className="is-flex"
+      >
+        <div
+          className="CardColumn__ContentLeft-sc-1w6lsih-4 dumWkw content"
+        >
+          <p
+            className="shorten-text is-marginless"
+          >
+            <strong>
+              title
+            </strong>
+          </p>
+        </div>
+      </div>
+      <div
+        className="CardColumn__FooterWrapper-sc-1w6lsih-3 jlTqlS level is-flex"
+      >
+        <div
+          className="CardColumn__RightMarginDiv-sc-1w6lsih-6 dbLPPh level-left is-hidden-mobile"
+        >
+          <small>
+            left footer
+          </small>
+        </div>
+        <div
+          className="CardColumn__InheritFlexShrinkDiv-sc-1w6lsih-7 MkNLN level-right is-block is-mobile is-marginless shorten-text"
+        >
+          <small
+            className="level-item"
+          >
+            <time
+              className="DateFromNow__DateElement-sc-16hnz72-0 ehlCzi"
+              title="2020-03-23 09:26:01"
+            >
+              3 days ago
+            </time>
+          </small>
+        </div>
+      </div>
+    </div>
+  </article>
+</div>
+`;
+
 exports[`Storyshots CardColumnSmall default 1`] = `
 <div
   className="CardColumnSmallstories__Wrapper-ofr817-0 fwZASP"
@@ -34694,7 +34749,7 @@ exports[`Storyshots RepositoryEntry Avatar EP 1`] = `
           </a>
         </div>
         <div
-          className="CardColumn__InheritFlexShrinkDiv-sc-1w6lsih-7 jkwBTE level-right is-block is-mobile is-marginless shorten-text"
+          className="CardColumn__InheritFlexShrinkDiv-sc-1w6lsih-7 MkNLN level-right is-block is-mobile is-marginless shorten-text"
         >
           <small
             className="level-item"
@@ -34808,7 +34863,7 @@ exports[`Storyshots RepositoryEntry Before Title EP 1`] = `
           </a>
         </div>
         <div
-          className="CardColumn__InheritFlexShrinkDiv-sc-1w6lsih-7 jkwBTE level-right is-block is-mobile is-marginless shorten-text"
+          className="CardColumn__InheritFlexShrinkDiv-sc-1w6lsih-7 MkNLN level-right is-block is-mobile is-marginless shorten-text"
         >
           <small
             className="level-item"
@@ -34919,7 +34974,7 @@ exports[`Storyshots RepositoryEntry Default 1`] = `
           </a>
         </div>
         <div
-          className="CardColumn__InheritFlexShrinkDiv-sc-1w6lsih-7 jkwBTE level-right is-block is-mobile is-marginless shorten-text"
+          className="CardColumn__InheritFlexShrinkDiv-sc-1w6lsih-7 MkNLN level-right is-block is-mobile is-marginless shorten-text"
         >
           <small
             className="level-item"
@@ -35037,7 +35092,7 @@ exports[`Storyshots RepositoryEntry Quick Link EP 1`] = `
           </a>
         </div>
         <div
-          className="CardColumn__InheritFlexShrinkDiv-sc-1w6lsih-7 jkwBTE level-right is-block is-mobile is-marginless shorten-text"
+          className="CardColumn__InheritFlexShrinkDiv-sc-1w6lsih-7 MkNLN level-right is-block is-mobile is-marginless shorten-text"
         >
           <small
             className="level-item"