diff --git a/README.md b/README.md
index 56ca8f6..7c4d6c6 100755
--- a/README.md
+++ b/README.md
@@ -81,6 +81,9 @@ The 'visited' state of the grid item image. This setting is optional and does no
 ##### alt (string):
 The alternative text for the item image. Assign [alt text](https://github.com/adaptlearning/adapt_framework/wiki/Providing-good-alt-text) to images that convey course content only. By default, the item is labelled by the `title` (if set), otherwise a generic 'Item 1, 2, 3 etc' label is applied, followed by the alternative text (if set).
 
+##### \_classes (string):
+CSS class name(s) to be applied to the grid item.
+
 #### \_itemGraphic (object):
 The itemGraphic object defines the image displayed in the popup that is shown when the item is selected by the learner. You only need to include this object if you want to display a different image in the popup. It contains the following settings:
 
diff --git a/example.json b/example.json
index ea471ee..33b694d 100755
--- a/example.json
+++ b/example.json
@@ -28,7 +28,8 @@
                 "srcHover": "",
                 "srcVisited": "",
                 "alt": "",
-                "title": "Grid Title 1"
+                "title": "Grid Title 1",
+                "_classes": ""
             },
             "_itemGraphic": {
                 "src": "course/en/images/example.jpg",
@@ -46,7 +47,8 @@
                 "srcHover": "",
                 "srcVisited": "",
                 "alt": "",
-                "title": "Grid Title 2"
+                "title": "Grid Title 2",
+                "_classes": ""
             },
             "_itemGraphic": {
                 "src": "course/en/images/example.jpg",
@@ -64,7 +66,8 @@
                 "srcHover": "",
                 "srcVisited": "",
                 "alt": "",
-                "title": "Grid Title 3"
+                "title": "Grid Title 3",
+                "_classes": ""
             },
             "_itemGraphic": {
                 "src": "course/en/images/example.jpg",
diff --git a/templates/hotgrid.jsx b/templates/hotgrid.jsx
index c9091e1..5523a7b 100644
--- a/templates/hotgrid.jsx
+++ b/templates/hotgrid.jsx
@@ -55,7 +55,10 @@ export default function Hotgrid(props) {
           {_items.map(({ _index, _graphic, _isVisited, _isActive }) =>
 
             <div
-              className="hotgrid__item"
+              className={classes([
+                'hotgrid__item',
+                _graphic._classes
+              ])}
               role="listitem"
               key={_index}
               style={(_columns && hasColumnLayout) ?