--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/clientjs/packages/dashboard-components/src/ui/DefinitionsCards.jsx	Fri Sep 14 17:57:34 2018 +0200
@@ -0,0 +1,38 @@
+
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { FormattedMessage } from 'react-intl';
+
+import DefinitionBlock from './DefinitionBlock';
+
+const DefinitionsCards = ({ annotations, metacategories, children }) => {
+  const defBlocks = annotations.map(
+    annotation => <DefinitionBlock key={`annotation-${annotation.id}`} annotation={annotation} metacategories={metacategories} />,
+  );
+
+  let noDefinitionContent = <FormattedMessage id="ui.definitionCards.noDefinition" defaultMessage="No definition yet" />;
+
+  if (React.Children.count(children) > 0) {
+    noDefinitionContent = children;
+  }
+
+  return (
+    <div className="card-columns">
+      { annotations.length === 0 ? noDefinitionContent : defBlocks }
+    </div>
+  );
+};
+
+DefinitionsCards.propTypes = {
+  annotations: PropTypes.arrayOf(PropTypes.object),
+  metacategories: PropTypes.arrayOf(PropTypes.object).isRequired,
+  children: PropTypes.node,
+};
+
+DefinitionsCards.defaultProps = {
+  annotations: [],
+  children: null,
+};
+
+export default DefinitionsCards;