diff -r 000000000000 -r 5f4fcbc80b37 clientjs/packages/dashboard-components/src/ui/AnnotationQuote.jsx
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/clientjs/packages/dashboard-components/src/ui/AnnotationQuote.jsx	Fri Sep 14 17:57:34 2018 +0200
@@ -0,0 +1,34 @@
+
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { getAnnotationStyle } from '../utils';
+
+const AnnotationQuote = ({ annotation, metacategories }) => {
+  let selector = false;
+
+  if (annotation.target[0].selector) {
+    selector = annotation.target[0].selector.find(s => s.type === 'TextQuoteSelector');
+  }
+
+  if (selector) {
+    return (
+      <div className="exact">
+        <p>
+          { selector.prefix }
+          <span style={getAnnotationStyle(annotation, metacategories)}>{ selector.exact }</span>
+          { selector.suffix }
+        </p>
+      </div>
+    );
+  }
+  return null;
+};
+
+
+AnnotationQuote.propTypes = {
+  annotation: PropTypes.object.isRequired,
+  metacategories: PropTypes.arrayOf(PropTypes.object).isRequired,
+};
+
+export default AnnotationQuote;