diff --git a/dev/demo/vc.html b/dev/demo/vc.html
index 139bb1b..e6cdbe0 100644
--- a/dev/demo/vc.html
+++ b/dev/demo/vc.html
@@ -41,5 +41,7 @@
     <p><a onclick="KorAP.showQuery()" style="cursor:pointer">show Query!</a></p>
     <div id="query" class="info"></div>
 
+    <div id="fragment"></div>
+
   </body>
 </html>
diff --git a/dev/demo/vcdemo.js b/dev/demo/vcdemo.js
index 87a2c74..0c66dd3 100644
--- a/dev/demo/vcdemo.js
+++ b/dev/demo/vcdemo.js
@@ -97,7 +97,7 @@
 ];
 
 
-require(['vc','lib/domReady', 'lib/highlight/highlight.pack'], function (vcClass, domReady) {
+require(['vc','vc/fragment','lib/domReady', 'lib/highlight/highlight.pack'], function (vcClass, fragmentClass, domReady) {
 
   var loc = KorAP.Locale;
   
@@ -153,7 +153,18 @@
     //get the corpus statistic (demo function)
     KorAP.API.getCorpStat = function(collQu, cb){
     	return cb(statistic);
-  }; 
-});
+    };
+
+
+    var f = fragmentClass.create();
+    f.add("author", "Peter");
+    f.add("title", "Sonstiges");
+    f.add("subTitle", "Anderes");
+    
+    document.getElementById('fragment').appendChild(
+      f.element()
+    );
+    
+  });
 });
 
diff --git a/dev/js/src/match/querycreator.js b/dev/js/src/match/querycreator.js
index 78a422b..d7c5edf 100644
--- a/dev/js/src/match/querycreator.js
+++ b/dev/js/src/match/querycreator.js
@@ -83,7 +83,7 @@
 
       // Initialize element
       this._element = document.createElement('p');
-      this._element.className = 'queryfragment';
+      this._element.classList.add('query','fragment');
 
       // Prepend info text
       this._element.addE('span').addT(loc.NEW_QUERY + ':');
diff --git a/dev/scss/base.scss b/dev/scss/base.scss
index 902b27c..7b32e76 100644
--- a/dev/scss/base.scss
+++ b/dev/scss/base.scss
@@ -1,6 +1,7 @@
 @charset "utf-8";
 @import "util";
 @import "base/flextable";
+@import "base/fragment";
 
 /**
  * Basic global CSS rules for Kalamar
diff --git a/dev/scss/base/fragment.scss b/dev/scss/base/fragment.scss
new file mode 100644
index 0000000..5c59a43
--- /dev/null
+++ b/dev/scss/base/fragment.scss
@@ -0,0 +1,44 @@
+@charset "utf-8";
+@import "../util";
+
+.vc.fragment, p.query.fragment {
+  position:relative;
+  @include choose-item;
+  
+  border : {
+    width: $border-size;
+    style: solid;
+    radius: $standard-border-radius;
+  }
+  padding: 2pt 4pt !important;
+  margin: {
+    // left: $border-size;
+    left: $left-distance;
+    top: .5em;
+    bottom: .5em;
+    right: $right-match-distance;
+  }
+  &:hover {
+    cursor:pointer;
+    @include choose-hover;
+  }
+
+  // This is the description
+  > span:first-of-type {
+    font-weight: bold;
+    padding-right: 4pt;
+  }
+
+  // Query fragment
+  > span:nth-of-type(2) {
+    padding-right: 1.2em;
+  }
+  
+  &::after {
+	  font-family: 'FontAwesome';
+	  content: $fa-to-query;
+    position: absolute;
+    right: 4pt;
+    top: $border-size;
+  }
+}
diff --git a/dev/scss/header/vc.scss b/dev/scss/header/vc.scss
index 799a6ef..bb098f3 100644
--- a/dev/scss/header/vc.scss
+++ b/dev/scss/header/vc.scss
@@ -9,23 +9,9 @@
  * Virtual Collection Builder
  */
 
-.vc .builder {
-  position: initial;
-
-  // Unfortunately that does not work:
-  // overflow-x: auto;
+.vc {
   margin-top: 4pt;
 
-  .docGroup, .doc {
-    // color: $nearly-white;
-    // color: $dark-green;
-    color: $dark-grey;
-    // text-shadow: $light-shadow;
-  }
-  
-  /**
-   * Rules for all docGroups
-   */
   .docGroup {
     position: relative;
 
@@ -41,13 +27,6 @@
       width: 0 $bracket-size; // .6em .5em
     }
 
-	
-    // Whiten on hover 
-    &:hover {
-      // background-color: rgba(255,255,255,.06);
-      background-color: rgba(255,255,255,.3);
-    }
-
     &[data-operation] {
       > .doc:first-child::before,
       > .docGroup:first-child::before {
@@ -60,8 +39,6 @@
         text-align: right;
         width: $left-padding;
         margin-left: -1 * ($left-padding + .5em); // -28pt
-        // color: $dark-green;
-        color: $dark-orange;
         line-height: 1.5em;
         border-top: $border-size solid transparent;
       }
@@ -72,7 +49,6 @@
 
     // Or operation
     &[data-operation=or] {
-      border-color: $dark-orange;
       > .doc::before,
       > .docGroup::before {
         // This will be overruled by JS!
@@ -110,11 +86,12 @@
     }
   }
 
-
+  
   /**
    * All document rules
    */
   .doc {
+    line-height: 170%;
     padding-left: $left-padding;
     > span + span,
     > span + div + span,
@@ -191,14 +168,6 @@
     }
   }
 
-  .doc > span:not(.fixed) {
-    cursor: pointer;
-    &:hover {
-      // color: $dark-green;
-      color: $dark-orange;
-    }
-  }
-
   /**
    * All operators
    */
@@ -215,12 +184,6 @@
     margin-left: 0;
   }
 
-  .doc, .docGroup {
-    &:hover > .operators {
-      opacity: 1;
-    }
-  }
-
   .menu {
     display: inline-block;
   }
@@ -232,14 +195,12 @@
     padding-right: 4pt;
     style: normal;
     weight: normal;
-  }
+  }  
 
   div.value {
     position: absolute;
     display: inline-block;
     z-index: 8000;
-    @include choose-item;
-    box-shadow: $choose-box-shadow;
     padding: 4pt;
     margin-top: -6pt;
     border: {
@@ -281,6 +242,64 @@
   }
 }
 
+.vc:not(.fragment) {
+  .docGroup, .doc {
+    // color: $nearly-white;
+    // color: $dark-green;
+    color: $dark-grey;
+    // text-shadow: $light-shadow;
+  }
+  
+  /**
+   * Rules for all docGroups
+   */
+  // Whiten on hover 
+  .docGroup:hover {
+    // background-color: rgba(255,255,255,.06);
+    background-color: rgba(255,255,255,.3);
+  }
+
+  .doc > span.key.fixed {
+    color: $light-green;
+  }  
+
+  .doc > span:not(.fixed) {
+    cursor: pointer;
+    &:hover {
+      // color: $dark-green;
+      color: $dark-orange;
+    }
+  }
+
+  .rewritten .rewrite {
+    color: $dark-orange;
+  }
+
+  .doc, .docGroup {
+    &:hover > .operators {
+      opacity: 1;
+    }
+  }
+
+  .docGroup {
+    &[data-operation] {
+      > .doc::before,
+      > .docGroup::before {
+        // color: $dark-green;
+        color: $dark-orange;
+      }
+    }
+    &[data-operation=or] {
+      border-color: $dark-orange;
+    }
+  }
+
+  div.value {
+    @include choose-item;
+    box-shadow: $choose-box-shadow;
+  }
+}
+
 
 /**
  * The z-index cascade for groups.
@@ -322,6 +341,12 @@
   }
 }
 
+.vc.fragment {
+  .doc {
+    margin-right: 2em;
+  }
+}
+
 #collection {
   line-height: 1em;
   border-radius: $standard-border-radius;
diff --git a/dev/scss/main/matchinfo.scss b/dev/scss/main/matchinfo.scss
index 1f56fb0..2116512 100644
--- a/dev/scss/main/matchinfo.scss
+++ b/dev/scss/main/matchinfo.scss
@@ -29,48 +29,8 @@
   height: auto;
   font-size: 10pt;
   text-align: left;
-  p.queryfragment {
-    position:relative;
-    @include choose-item;
-    border : {
-      width: $border-size;
-      style: solid;
-      radius: $standard-border-radius;
-    }
-    padding: 2pt 4pt !important;
-    margin: {
-      // left: $border-size;
-      left: $left-distance;
-      top: .5em;
-      bottom: .5em;
-      right: $right-match-distance;
-    }
-    &:hover {
-      cursor:pointer;
-      @include choose-hover;
-    }
-
-    // This is the description
-    > span:first-of-type {
-      font-weight: bold;
-      padding-right: 4pt;
-    }
-
-    // Query fragment
-    > span:nth-of-type(2) {
-      padding-right: 1.2em;
-    }
-
-    &::after {
-	    font-family: 'FontAwesome';
-	    content: $fa-to-query;
-      position: absolute;
-      right: 4pt;
-      top: $border-size;
-    }
-  }
 }
- 
+
 div.matchtable > div {
   z-index: 20;
   margin-left: $left-distance - ($border-size / 2);
diff --git a/dev/scss/util.scss b/dev/scss/util.scss
index 077ba10..bb82ca0 100644
--- a/dev/scss/util.scss
+++ b/dev/scss/util.scss
@@ -96,6 +96,10 @@
 $result-border-size: 1px;
 $total-results: $light-green;
 
+$left-width: 176px;
+$border-size: 2px;
+$left-distance: $left-width + ($border-size * 2);
+
 /**
  * Path information - relative to css!
  */