diff --git a/assets/properties-panel.css b/assets/properties-panel.css
index b3de4df0..b61cf8d9 100644
--- a/assets/properties-panel.css
+++ b/assets/properties-panel.css
@@ -185,6 +185,11 @@
   margin-top: -6px;
 }
 
+.bio-properties-panel-header-actions {
+  margin-left: auto;
+  margin-top: auto;
+}
+
 /**
  * Scroll container
  */
diff --git a/src/components/Header.js b/src/components/Header.js
index af70cf6d..fa4d1f05 100644
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -1,5 +1,12 @@
+import { ExternalLinkIcon } from './icons';
+
 /**
- * @typedef { { getElementLabel: Function, getTypeLabel: Function, getElementIcon: Function } } HeaderProvider
+ * @typedef { {
+ *  getElementLabel: (element: djs.model.base) => string,
+ *  getTypeLabel: (element: djs.model.base) => string,
+ *  getElementIcon: (element: djs.model.base) => import('preact').Component,
+ *  getDocumentationRef: (element: djs.model.base) => string
+ * } } HeaderProvider
  */
 
 /**
@@ -15,13 +22,16 @@ export default function Header(props) {
   } = props;
 
   const {
+    getElementIcon,
+    getDocumentationRef,
     getElementLabel,
     getTypeLabel,
-    getElementIcon
   } = headerProvider;
 
   const label = getElementLabel(element);
   const type = getTypeLabel(element);
+  const documentationRef = getDocumentationRef && getDocumentationRef(element);
+
   const ElementIcon = getElementIcon(element);
 
   return (<div class="bio-properties-panel-header">
@@ -30,10 +40,18 @@ export default function Header(props) {
     </div>
     <div class="bio-properties-panel-header-labels">
       <div title={ type } class="bio-properties-panel-header-type">{ type }</div>
-      { getElementLabel(element) ?
+      { label ?
         <div title={ label } class="bio-properties-panel-header-label">{ label }</div> :
         null
       }
     </div>
+    <div class="bio-properties-panel-header-actions">
+      { documentationRef ?
+        <a rel="noopener" class="bio-properties-panel-header-link" href={ documentationRef } target="_blank">
+          <ExternalLinkIcon />
+        </a> :
+        null
+      }
+    </div>
   </div>);
 }
\ No newline at end of file
diff --git a/src/components/icons/ExternalLink.svg b/src/components/icons/ExternalLink.svg
new file mode 100644
index 00000000..33f8608e
--- /dev/null
+++ b/src/components/icons/ExternalLink.svg
@@ -0,0 +1 @@
+<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M12.637 12.637v-4.72h1.362v4.721c0 .36-.137.676-.411.95-.275.275-.591.412-.95.412H3.362c-.38 0-.703-.132-.967-.396A1.315 1.315 0 0 1 2 12.638V3.362c0-.38.132-.703.396-.967S2.982 2 3.363 2h4.553v1.363H3.363v9.274h9.274ZM14 2H9.28l-.001 1.362h2.408L5.065 9.984l.95.95 6.622-6.622v2.409H14V2Z" fill="#818798"/></svg>
\ No newline at end of file
diff --git a/src/components/icons/index.js b/src/components/icons/index.js
index 17a6cd9e..349c6721 100644
--- a/src/components/icons/index.js
+++ b/src/components/icons/index.js
@@ -1,5 +1,6 @@
 export { default as ArrowIcon } from './Arrow.svg';
 export { default as CreateIcon } from './Create.svg';
 export { default as DeleteIcon } from './Delete.svg';
+export { default as ExternalLinkIcon } from './ExternalLink.svg';
 export { default as FeelRequiredIcon } from './FeelRequired.svg';
 export { default as FeelOptionalIcon } from './FeelOptional.svg';
\ No newline at end of file
diff --git a/test/spec/components/Header.spec.js b/test/spec/components/Header.spec.js
index 77e2d8a0..26d55932 100644
--- a/test/spec/components/Header.spec.js
+++ b/test/spec/components/Header.spec.js
@@ -142,6 +142,44 @@ describe('<Header>', function() {
     expect(iconNode).to.exist;
   });
 
+  it('should NOT render documentation ref', function() {
+
+    // given
+    const provider = {
+      getElementLabel: () => 'name',
+      getTypeLabel: () => 'type',
+      getElementIcon: () => 'icon'
+    };
+
+    // when
+    const result = render(<Header headerProvider={ provider } />, { container });
+
+    const documentationNode = domQuery('.bio-properties-panel-header-link', result.container);
+
+    // then
+    expect(documentationNode).to.not.exist;
+  });
+
+
+  it('should render documentation ref', function() {
+
+    // given
+    const provider = {
+      getElementLabel: () => 'name',
+      getTypeLabel: () => 'type',
+      getElementIcon: () => 'icon',
+      getDocumentationRef: () => 'https://example.com'
+    };
+
+    // when
+    const result = render(<Header headerProvider={ provider } />, { container });
+
+    const documentationNode = domQuery('.bio-properties-panel-header-link', result.container);
+
+    // then
+    expect(documentationNode).to.exist;
+  });
+
 
   describe('a11y', function() {