editing example texts now as I see it could look like.

res/main.less

@@ -206,6 +206,33 @@
   margin-top: 0.3em; 
 }
 
+.example-component {
+  .example-component-button {
+    padding-left: 0.3em;
+    padding-right: 0.3em;
+    cursor: pointer;
+
+    ._hoverable();
+  }
+
+  .example-component-headword {
+    color: @navy;
+  }
+
+  .example-component-collocate {
+    color: @teal;
+  }
+
+  .example-component-other {
+    color: @olive;
+  }
+
+  .example-component-none {
+    color: @gray;
+  }
+}
+
+
 // if modal on full screen, it gets too small
 @media (min-width: 60em) {
   .modal > article {