diff --git a/dist/iiif-metadata-component.css b/dist/iiif-metadata-component.css
index db305d4..02229f9 100644
--- a/dist/iiif-metadata-component.css
+++ b/dist/iiif-metadata-component.css
@@ -5,24 +5,27 @@ body {
 .iiif-metadata-component .noData {
   padding: 0 10px 20px 10px;
 }
-.iiif-metadata-component .items {
+.iiif-metadata-component .groups .group .header {
+  font-weight: bold;
+}
+.iiif-metadata-component .groups .group .items {
   padding: 0 10px 20px 10px;
 }
-.iiif-metadata-component .items .header {
+.iiif-metadata-component .groups .group .items .header {
   color: #14a4c3;
   border-bottom: 1px solid #14a4c3;
   margin: 15px 10px 0 0;
 }
-.iiif-metadata-component .items .item {
+.iiif-metadata-component .groups .group .items .item {
   padding: 0;
   margin: 0 0 20px 0;
 }
-.iiif-metadata-component .items .item .label {
+.iiif-metadata-component .groups .group .items .item .label {
   color: #9a9a9a;
   border-bottom: 1px solid #343434;
   margin: 15px 10px 0 0;
 }
-.iiif-metadata-component .items .item .label .copyText {
+.iiif-metadata-component .groups .group .items .item .label .copyText {
   position: relative;
   float: right;
   display: none;
@@ -31,7 +34,7 @@ body {
   cursor: pointer;
   background-image: url('../img/copy.png');
 }
-.iiif-metadata-component .items .item .label .copiedText {
+.iiif-metadata-component .groups .group .items .item .label .copiedText {
   display: none;
   position: absolute;
   top: 18px;
@@ -45,24 +48,24 @@ body {
   border-radius: 2px;
   color: #000;
 }
-.iiif-metadata-component .items .item .value {
+.iiif-metadata-component .groups .group .items .item .value {
   color: #000;
   margin: 5px 10px 0 0;
   overflow: hidden;
   word-wrap: break-word;
   line-height: 1.6em;
 }
-.iiif-metadata-component .items .item .value a.toggle {
+.iiif-metadata-component .groups .group .items .item .value a.toggle {
   color: #14a4c3;
   font-weight: normal;
 }
-.iiif-metadata-component .items .item .value a.toggle:hover {
+.iiif-metadata-component .groups .group .items .item .value a.toggle:hover {
   color: #22c5e8;
 }
-.iiif-metadata-component .items .item .value a.toggle.more,
-.iiif-metadata-component .items .item .value a.toggle.less {
+.iiif-metadata-component .groups .group .items .item .value a.toggle.more,
+.iiif-metadata-component .groups .group .items .item .value a.toggle.less {
   font-variant: small-caps;
 }
-.iiif-metadata-component .items .item .value img {
+.iiif-metadata-component .groups .group .items .item .value img {
   max-width: 100px;
 }
diff --git a/examples/css/iiif-metadata-component.css b/examples/css/iiif-metadata-component.css
index db305d4..02229f9 100644
--- a/examples/css/iiif-metadata-component.css
+++ b/examples/css/iiif-metadata-component.css
@@ -5,24 +5,27 @@ body {
 .iiif-metadata-component .noData {
   padding: 0 10px 20px 10px;
 }
-.iiif-metadata-component .items {
+.iiif-metadata-component .groups .group .header {
+  font-weight: bold;
+}
+.iiif-metadata-component .groups .group .items {
   padding: 0 10px 20px 10px;
 }
-.iiif-metadata-component .items .header {
+.iiif-metadata-component .groups .group .items .header {
   color: #14a4c3;
   border-bottom: 1px solid #14a4c3;
   margin: 15px 10px 0 0;
 }
-.iiif-metadata-component .items .item {
+.iiif-metadata-component .groups .group .items .item {
   padding: 0;
   margin: 0 0 20px 0;
 }
-.iiif-metadata-component .items .item .label {
+.iiif-metadata-component .groups .group .items .item .label {
   color: #9a9a9a;
   border-bottom: 1px solid #343434;
   margin: 15px 10px 0 0;
 }
-.iiif-metadata-component .items .item .label .copyText {
+.iiif-metadata-component .groups .group .items .item .label .copyText {
   position: relative;
   float: right;
   display: none;
@@ -31,7 +34,7 @@ body {
   cursor: pointer;
   background-image: url('../img/copy.png');
 }
-.iiif-metadata-component .items .item .label .copiedText {
+.iiif-metadata-component .groups .group .items .item .label .copiedText {
   display: none;
   position: absolute;
   top: 18px;
@@ -45,24 +48,24 @@ body {
   border-radius: 2px;
   color: #000;
 }
-.iiif-metadata-component .items .item .value {
+.iiif-metadata-component .groups .group .items .item .value {
   color: #000;
   margin: 5px 10px 0 0;
   overflow: hidden;
   word-wrap: break-word;
   line-height: 1.6em;
 }
-.iiif-metadata-component .items .item .value a.toggle {
+.iiif-metadata-component .groups .group .items .item .value a.toggle {
   color: #14a4c3;
   font-weight: normal;
 }
-.iiif-metadata-component .items .item .value a.toggle:hover {
+.iiif-metadata-component .groups .group .items .item .value a.toggle:hover {
   color: #22c5e8;
 }
-.iiif-metadata-component .items .item .value a.toggle.more,
-.iiif-metadata-component .items .item .value a.toggle.less {
+.iiif-metadata-component .groups .group .items .item .value a.toggle.more,
+.iiif-metadata-component .groups .group .items .item .value a.toggle.less {
   font-variant: small-caps;
 }
-.iiif-metadata-component .items .item .value img {
+.iiif-metadata-component .groups .group .items .item .value img {
   max-width: 100px;
 }
diff --git a/src/css/iiif-metadata-component.less b/src/css/iiif-metadata-component.less
index 1233d6f..31838f2 100644
--- a/src/css/iiif-metadata-component.less
+++ b/src/css/iiif-metadata-component.less
@@ -4,73 +4,83 @@
         padding: 0 @padding-medium-horizontal (@padding-medium-vertical * 2) @padding-medium-horizontal;
     }
 
-    .items{
-        padding: 0 @padding-medium-horizontal (@padding-medium-vertical * 2) @padding-medium-horizontal;
-
-        .header {
-            color: @brand-secondary;
-            border-bottom: 1px solid @brand-secondary;
-            margin: @margin-large-vertical @margin-medium-horizontal 0 0;
-        }
+    .groups {
 
-        .item {
-            padding: 0;
-            margin: 0 0 @margin-xlarge-vertical 0;
+        .group {
 
-            .label{
-                color: @gray-light;
-                border-bottom: 1px solid @gray-dark;
-                margin: @margin-large-vertical @margin-medium-horizontal 0 0;
-                
-                .copyText {
-                    position: relative;
-                    float: right;
-                    display: none;
-                    width: 15px;
-                    height: 15px;
-                    cursor: pointer;
-                    background-image: url('@{img-path}copy.png');
-                }
-                .copiedText {
-                    display: none;
-                    position: absolute;
-                    top: 18px;
-                    right: -10px;
-                    white-space: nowrap;
-                    padding: 4px;
-                    text-transform: none;
-                    background-color: @gray-dark;
-                    z-index: 1;
-                    border: 1px solid @gray-light;
-                    border-radius: 2px;
-                    color: @text-color;
-                }
-                
+            .header {
+                font-weight: bold;
             }
 
-            .value{
-                color: @text-color;
-                margin: @margin-small-vertical @margin-medium-horizontal 0 0;
-                overflow: hidden;
-                word-wrap: break-word;
-                line-height: 1.6em;
+            .items{
+                padding: 0 @padding-medium-horizontal (@padding-medium-vertical * 2) @padding-medium-horizontal;
+
+                .header {
+                    color: @brand-secondary;
+                    border-bottom: 1px solid @brand-secondary;
+                    margin: @margin-large-vertical @margin-medium-horizontal 0 0;   
+                }
 
-                a.toggle{
-                    color: @link-secondary-color;
-                    font-weight: normal;
+                .item {
+                    padding: 0;
+                    margin: 0 0 @margin-xlarge-vertical 0;
 
-                    &:hover{
-                        color: @link-secondary-hover-color;
+                    .label{
+                        color: @gray-light;
+                        border-bottom: 1px solid @gray-dark;
+                        margin: @margin-large-vertical @margin-medium-horizontal 0 0;
+                        
+                        .copyText {
+                            position: relative;
+                            float: right;
+                            display: none;
+                            width: 15px;
+                            height: 15px;
+                            cursor: pointer;
+                            background-image: url('@{img-path}copy.png');
+                        }
+                        .copiedText {
+                            display: none;
+                            position: absolute;
+                            top: 18px;
+                            right: -10px;
+                            white-space: nowrap;
+                            padding: 4px;
+                            text-transform: none;
+                            background-color: @gray-dark;
+                            z-index: 1;
+                            border: 1px solid @gray-light;
+                            border-radius: 2px;
+                            color: @text-color;
+                        }
+                        
                     }
-                }
 
-                a.toggle.more,
-                a.toggle.less {
-                    font-variant: small-caps;
-                }
+                    .value{
+                        color: @text-color;
+                        margin: @margin-small-vertical @margin-medium-horizontal 0 0;
+                        overflow: hidden;
+                        word-wrap: break-word;
+                        line-height: 1.6em;
+
+                        a.toggle{
+                            color: @link-secondary-color;
+                            font-weight: normal;
 
-                img {
-                    max-width: 100px;
+                            &:hover{
+                                color: @link-secondary-hover-color;
+                            }
+                        }
+
+                        a.toggle.more,
+                        a.toggle.less {
+                            font-variant: small-caps;
+                        }
+
+                        img {
+                            max-width: 100px;
+                        }
+                    }
                 }
             }
         }