diff --git a/src/cards/ha-weather-card.html b/src/cards/ha-weather-card.html
index 49c2dbbfc9..eabf8d7b9a 100644
--- a/src/cards/ha-weather-card.html
+++ b/src/cards/ha-weather-card.html
@@ -5,7 +5,7 @@
 <link rel='import' href='../../bower_components/google-apis/google-legacy-loader.html'>
 
 <link rel='import' href='../components/ha-card.html'>
-
+<link rel='import' href='../components/ha-attributes.html'>
 <dom-module id='ha-weather-card'>
   <template>
     <style>
@@ -21,11 +21,8 @@
     <google-legacy-loader on-api-load='googleApiLoaded'></google-legacy-loader>
     <ha-card header='[[computeTitle(stateObj)]]'>
       <div class='content'>
-        <template is='dom-repeat' items='[[computeDisplayAttributes(stateObj)]]' as="attribute">
-          <div>[[formatAttribute(attribute)]]: [[formatAttributeValue(stateObj, attribute)]]</div>
-        </template>
         <div id='chart_area'></div>
-        <div class='attribution' hidden$='[[!computeAttribution(stateObj)]]'>[[computeAttribution(stateObj)]]</div>
+        <ha-attributes state-obj='[[stateObj]]' extra-filters='forecast'></ha-attributes>
       </div>
     </ha-card>
   </template>
@@ -35,8 +32,6 @@
 (function () {
   'use strict';
 
-  var FILTER_KEYS = ['attribution', 'forecast', 'friendly_name'];
-
   Polymer({
     is: 'ha-weather-card',
 
@@ -55,22 +50,6 @@
       return stateObj.attributes.friendly_name;
     },
 
-    computeDisplayAttributes: function (stateObj) {
-      return window.hassUtil.computeDisplayAttributes(stateObj, FILTER_KEYS);
-    },
-
-    formatAttribute: function (attribute) {
-      return window.hassUtil.formatAttribute(attribute);
-    },
-
-    formatAttributeValue: function (stateObj, attribute) {
-      return window.hassUtil.formatAttributeValue(stateObj, attribute);
-    },
-
-    computeAttribution: function (stateObj) {
-      return window.hassUtil.computeAttribution(stateObj);
-    },
-
     getDataArray: function () {
       var dataArray = [];
       var data = this.stateObj.attributes.forecast;
diff --git a/src/components/ha-attributes.html b/src/components/ha-attributes.html
new file mode 100644
index 0000000000..9c5f5b7eb3
--- /dev/null
+++ b/src/components/ha-attributes.html
@@ -0,0 +1,87 @@
+<link rel="import" href="../../bower_components/polymer/polymer.html">
+
+<link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
+<link rel="import" href="../util/hass-util.html">
+
+<dom-module id="ha-attributes">
+  <template>
+    <style is="custom-style" include="iron-flex iron-flex-alignment"></style>
+    <style>
+      .data-entry .value {
+        max-width: 200px;
+      }
+      .attribution {
+        color: var(--secondary-text-color);
+        text-align: right;
+      }
+    </style>
+
+    <div class='layout vertical'>
+      <template is='dom-repeat' items="[[computeDisplayAttributes(stateObj, filtersArray)]]" as="attribute">
+        <div class='data-entry layout justified horizontal'>
+          <div class='key'>[[formatAttribute(attribute)]]</div>
+          <div class='value'>[[formatAttributeValue(stateObj, attribute)]]</div>
+        </div>
+      </template>
+      <div class='attribution' hidden$='[[!computeAttribution(stateObj)]]'>[[computeAttribution(stateObj)]]</div>
+    </div>
+  </template>
+</dom-module>
+
+<script>
+(function () {
+  'use strict';
+
+  var FILTER_KEYS = [
+    'entity_picture', 'friendly_name', 'icon', 'unit_of_measurement',
+    'emulated_hue', 'emulated_hue_name', 'haaska_hidden', 'haaska_name',
+    'homebridge_hidden', 'homebridge_name', 'supported_features', 'attribution',
+  ];
+  Polymer({
+    is: 'ha-attributes',
+    properties: {
+      stateObj: {
+        type: Object,
+      },
+      extraFilters: {
+        type: String,
+        value: '',
+      },
+      filtersArray: {
+        type: Array,
+        computed: 'computeFiltersArray(extraFilters)',
+      },
+    },
+
+    computeFiltersArray: function (extraFilters) {
+      return FILTER_KEYS + (extraFilters ? extraFilters.split(',') : []);
+    },
+
+    computeDisplayAttributes: function (stateObj, filtersArray) {
+      if (!stateObj) {
+        return [];
+      }
+      return Object.keys(stateObj.attributes).filter(
+        function (key) {
+          return filtersArray.indexOf(key) === -1;
+        });
+    },
+
+    formatAttribute: function (attribute) {
+      return attribute.replace(/_/g, ' ');
+    },
+
+    formatAttributeValue: function (stateObj, attribute) {
+      var value = stateObj.attributes[attribute];
+      if (Array.isArray(value)) {
+        return value.join(', ');
+      }
+      return (value instanceof Object) ? JSON.stringify(value, null, 2) : value;
+    },
+
+    computeAttribution: function (stateObj) {
+      return stateObj.attributes.attribution;
+    },
+  });
+}());
+</script>
diff --git a/src/more-infos/more-info-default.html b/src/more-infos/more-info-default.html
index 19a6772d56..65eaee7285 100644
--- a/src/more-infos/more-info-default.html
+++ b/src/more-infos/more-info-default.html
@@ -1,67 +1,21 @@
 <link rel="import" href="../../bower_components/polymer/polymer.html">
 
-<link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
+<link rel="import" href="../components/ha-attributes.html">
 
 <dom-module id="more-info-default">
   <template>
-    <style is="custom-style" include="iron-flex iron-flex-alignment"></style>
-    <style>
-      .data-entry .value {
-        max-width: 200px;
-      }
-
-      .attribution {
-        color: var(--secondary-text-color);
-        text-align: right;
-      }
-    </style>
-
-    <div class='layout vertical'>
-      <template is='dom-repeat' items="[[computeDisplayAttributes(stateObj)]]" as="attribute">
-        <div class='data-entry layout justified horizontal'>
-          <div class='key'>[[formatAttribute(attribute)]]</div>
-          <div class='value'>[[formatAttributeValue(stateObj, attribute)]]</div>
-        </div>
-      </template>
-      <div class='attribution' hidden$='[[!computeAttribution(stateObj)]]'>[[computeAttribution(stateObj)]]</div>
-    </div>
+    <ha-attributes state-obj="[[stateObj]]"></ha-attributes>
   </template>
 </dom-module>
 
 <script>
-(function () {
-  'use strict';
+Polymer({
+  is: 'more-info-default',
 
-  var FILTER_KEYS = [
-    'entity_picture', 'friendly_name', 'icon', 'unit_of_measurement',
-    'emulated_hue', 'emulated_hue_name', 'haaska_hidden', 'haaska_name',
-    'homebridge_hidden', 'homebridge_name', 'attribution',
-  ];
-
-  Polymer({
-    is: 'more-info-default',
-
-    properties: {
-      stateObj: {
-        type: Object,
-      },
+  properties: {
+    stateObj: {
+      type: Object,
     },
-
-    computeDisplayAttributes: function (stateObj) {
-      return window.hassUtil.computeDisplayAttributes(stateObj, FILTER_KEYS);
-    },
-
-    formatAttribute: function (attribute) {
-      return window.hassUtil.formatAttribute(attribute);
-    },
-
-    formatAttributeValue: function (stateObj, attribute) {
-      return window.hassUtil.formatAttributeValue(stateObj, attribute);
-    },
-
-    computeAttribution: function (stateObj) {
-      return window.hassUtil.computeAttribution(stateObj);
-    },
-  });
-}());
+  },
+});
 </script>
diff --git a/src/more-infos/more-info-light.html b/src/more-infos/more-info-light.html
index 769bced6d3..d0f78e2661 100644
--- a/src/more-infos/more-info-light.html
+++ b/src/more-infos/more-info-light.html
@@ -7,6 +7,7 @@
 
 <link rel='import' href='../components/ha-labeled-slider.html'>
 <link rel='import' href='../components/ha-color-picker.html'>
+<link rel='import' href='../components/ha-attributes.html'>
 
 <dom-module id='more-info-light'>
   <template>
@@ -80,6 +81,8 @@
 
       <ha-color-picker on-colorselected='colorPicked' height='200' width='250'>
       </ha-color-picker>
+
+      <ha-attributes state-obj="[[stateObj]]" extra-filters="brightness,color_temp,white_value,effect_list,effect,rgb_color,xy_color"></ha-attributes>
     </div>
   </template>
 </dom-module>
diff --git a/src/more-infos/more-info-lock.html b/src/more-infos/more-info-lock.html
index 07c096abb6..0606f5ba55 100644
--- a/src/more-infos/more-info-lock.html
+++ b/src/more-infos/more-info-lock.html
@@ -2,6 +2,7 @@
 
 <link rel='import' href='../../bower_components/paper-button/paper-button.html'>
 <link rel='import' href='../../bower_components/paper-input/paper-input.html'>
+<link rel='import' href='../components/ha-attributes.html'>
 
 <dom-module id='more-info-lock'>
   <template>
@@ -16,6 +17,7 @@
       <paper-button on-tap='handleUnlockTap' hidden$='[[!isLocked]]'>Unlock</paper-button>
       <paper-button on-tap='handleLockTap' hidden$=[[isLocked]]>Lock</paper-button>
     </div>
+    <ha-attributes state-obj='[[stateObj]]' extra-filters='code_format'></ha-attributes>
   </template>
 </dom-module>
 
diff --git a/src/util/hass-util.html b/src/util/hass-util.html
index 73b7f21244..5d69ca2756 100644
--- a/src/util/hass-util.html
+++ b/src/util/hass-util.html
@@ -341,27 +341,4 @@ window.hassUtil.stateIcon = function (state) {
   return window.hassUtil.domainIcon(state.domain, state.state);
 };
 
-window.hassUtil.computeDisplayAttributes = function (stateObj, filterKeys) {
-  if (!stateObj) {
-    return [];
-  }
-
-  return Object.keys(stateObj.attributes).filter(
-    function (key) { return filterKeys.indexOf(key) === -1; });
-};
-
-window.hassUtil.formatAttribute = function (attribute) {
-  return attribute.replace(/_/g, ' ');
-};
-
-window.hassUtil.formatAttributeValue = function (stateObj, attribute) {
-  var value = stateObj.attributes[attribute];
-
-  return Array.isArray(value) ? value.join(', ') : value;
-};
-
-window.hassUtil.computeAttribution = function (stateObj) {
-  return stateObj.attributes.attribution;
-};
-
 </script>