diff --git a/.github/ISSUE_TEMPLATE/config.yml b/.github/ISSUE_TEMPLATE/config.yml
new file mode 100644
index 0000000..3ba13e0
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/config.yml
@@ -0,0 +1 @@
+blank_issues_enabled: false
diff --git a/.github/ISSUE_TEMPLATE/issue_template.md b/.github/ISSUE_TEMPLATE/issue_template.md
new file mode 100644
index 0000000..4a68cc3
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/issue_template.md
@@ -0,0 +1,23 @@
+---
+name: Issue template
+about: Create an issue to help us improve
+---
+
+### Subject of the issue/enhancement/features
+Describe your issue here.
+
+### Your environment
+* version (AT/Framework)
+* which browser and its version
+* device(s) + operating system(s)
+
+### Steps to reproduce
+Tell us how to reproduce this issue.
+
+### Expected behaviour
+Tell us what should happen
+
+### Actual behaviour
+Tell us what happens instead
+
+### Screenshots (if you can)
diff --git a/README.md b/README.md
index 7c4d6c6..8344b28 100755
--- a/README.md
+++ b/README.md
@@ -107,4 +107,4 @@ Hotgrid automatically switches to 2 columns in mobile mode for the best user exp
 **Author / maintainer:** CGKineo<br>
 **Accessibility support:** WAI AA<br> 
 **RTL support:** Yes<br>
-**Cross-platform coverage:** Chrome, Chrome for Android, Firefox (ESR + latest version), Edge, IE11, Safari 14 for macOS/iOS/iPadOS, Opera<br> 
+**Cross-platform coverage:** Chrome, Chrome for Android, Firefox (ESR + latest version), Edge, Safari for macOS/iOS/iPadOS, Opera<br>
diff --git a/bower.json b/bower.json
index 4f7bdc8..302b4d5 100755
--- a/bower.json
+++ b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "adapt-hotgrid",
-  "version": "4.6.5",
+  "version": "4.7.0",
   "framework": ">=5.33.10",
   "homepage": "https://github.com/cgkineo/adapt-hotgrid",
   "issues": "https://github.com/cgkineo/adapt-hotgrid/issues/",
diff --git a/example.json b/example.json
index 33b694d..3fb8402 100755
--- a/example.json
+++ b/example.json
@@ -7,7 +7,7 @@
     "_layout": "full",
     "title": "Hotgrid",
     "displayTitle": "Hotgrid",
-    "body": "Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.",
+    "body": "<b>Hotgrid</b> is a presentation component which displays a set of images in a grid layout. When a learner selects an image, a pop-up is displayed that consists of text with an image.",
     "instruction": "Select the images to find out more.",
     "_comment": "setCompletionOn = inview | allItems",
     "_setCompletionOn": "allItems",
@@ -39,7 +39,7 @@
         },
         {
             "title": "Item Title 2",
-            "body": "This is display text 2 with a left aligned image.",
+            "body": "This is display text 2 with a left aligned image. Excepteur ex incididunt occaecat irure elit ex ullamco veniam do amet laboris cupidatat. Dolore eiusmod ut commodo deserunt velit. Cupidatat velit officia amet et et qui fugiat non. Duis nulla voluptate laborum dolore.",
             "_imageAlignment": "left",
             "_classes": "",
             "_graphic": {
@@ -58,7 +58,7 @@
         },
         {
             "title": "Item Title 3",
-            "body": "This is display text 3.",
+            "body": "This is display text 3. Occaecat elit id consequat magna minim proident proident amet adipisicing adipisicing pariatur. Culpa Lorem cupidatat ipsum exercitation do adipisicing exercitation commodo aliquip Lorem mollit. Occaecat nostrud sunt enim eiusmod ut eiusmod aliqua irure id.",
             "_imageAlignment": "right",
             "_classes": "",
             "_graphic": {
diff --git a/less/hotgrid.less b/less/hotgrid.less
index 3e377c8..7b54436 100755
--- a/less/hotgrid.less
+++ b/less/hotgrid.less
@@ -80,6 +80,11 @@
 // --------------------------------------------------
 // THEME
 // --------------------------------------------------
+// fallback variables if Vanilla button styles aren't supported
+@item-color-style: none;
+@item-ui-color-style: none;
+@item-color-focus: @item-color-hover;
+
 .hotgrid {
   &__item-btn {
     position: relative;
@@ -109,23 +114,98 @@
 
   // Hotgrid item theme
   // --------------------------------------------------
-  &__item-btn &__item-title,
-  &__item-btn &__item-icon {
-    background-color: @item-color;
-    color: @item-color-inverted;
+  // apply legacy styles if Vanilla button styles aren't supported
+  & when (@item-color-style = none) {
+    &__item-btn &__item-title,
+    &__item-btn &__item-icon {
+      background-color: @item-color;
+      color: @item-color-inverted;
+    }
+  
+    .no-touch &__item-btn:hover &__item-title,
+    .no-touch &__item-btn:not(.is-disabled):not(.is-locked):hover &__item-icon {
+      background-color: @item-color-hover;
+      color: @item-color-inverted-hover;
+      .transition(background-color @duration ease-in, color @duration ease-in;);
+    }
+  
+    &__item-btn.is-visited &__item-title,
+    &__item-btn.is-visited &__item-icon {
+      background-color: @visited;
+      color: @visited-inverted;
+    }
+  }
+
+  & when (@item-color-style = filled) {
+    &__item-btn &__item-title {
+      .item-color;
+    }
+  
+    .no-touch &__item-btn:hover &__item-title {
+      .item-color-hover;
+    }
+
+    html:not(.a11y-disable-focusoutline) &__item-btn:focus-visible &__item-title {
+      .item-color-focus;
+    }
+
+    &__item-btn.is-visited &__item-title {
+      .item-color-visited;
+    }
+  }
+
+  & when (@item-ui-color-style = filled) {
+    &__item-btn &__item-icon {
+      .item-ui-color;
+    }
+  
+    .no-touch &__item-btn:not(.is-disabled):not(.is-locked):hover &__item-icon {
+      .item-ui-color-hover;
+    }
+
+    html:not(.a11y-disable-focusoutline) &__item-btn:focus-visible &__item-icon {
+      .item-ui-color-focus;
+    }
+
+    &__item-btn.is-visited &__item-icon {
+      .item-ui-color-visited;
+    }
   }
 
-  .no-touch &__item-btn:hover &__item-title,
-  .no-touch &__item-btn:not(.is-disabled):not(.is-locked):hover &__item-icon {
-    background-color: @item-color-hover;
-    color: @item-color-inverted-hover;
-    .transition(background-color @duration ease-in, color @duration ease-in;);
+  & when (@item-color-style = outline) {
+    &__item-btn &__item-title {
+      .item-color-outline;
+    }
+  
+    .no-touch &__item-btn:hover &__item-title {
+      .item-color-outline-hover;
+    }
+
+    html:not(.a11y-disable-focusoutline) &__item-btn:focus-visible &__item-title {
+      .item-color-outline-focus;
+    }
+
+    &__item-btn.is-visited &__item-title {
+      .item-color-outline-visited;
+    }
   }
 
-  &__item-btn.is-visited &__item-title,
-  &__item-btn.is-visited &__item-icon {
-    background-color: @visited;
-    color: @visited-inverted;
+  & when (@item-ui-color-style = outline) {
+    &__item-btn &__item-icon {
+      .item-ui-color-outline;
+    }
+  
+    .no-touch &__item-btn:not(.is-disabled):not(.is-locked):hover &__item-icon {
+      .item-ui-color-outline-hover;
+    }
+
+    html:not(.a11y-disable-focusoutline) &__item-btn:focus-visible &__item-icon {
+      .item-ui-color-outline-focus;
+    }
+
+    &__item-btn.is-visited &__item-icon {
+      .item-ui-color-outline-visited;
+    }
   }
 
   // Hotgrid CSS border states
@@ -139,6 +219,10 @@
     .transition(border-color @duration ease-in);
   }
 
+  html:not(.a11y-disable-focusoutline) &__item-btn.has-css-states:focus-visible &__item-image {
+    border-color: @item-color-focus;
+  }
+
   &__item-btn.is-visited.has-css-states &__item-image {
     border-color: @visited;
   }
diff --git a/package.json b/package.json
index 4f7bdc8..302b4d5 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "adapt-hotgrid",
-  "version": "4.6.5",
+  "version": "4.7.0",
   "framework": ">=5.33.10",
   "homepage": "https://github.com/cgkineo/adapt-hotgrid",
   "issues": "https://github.com/cgkineo/adapt-hotgrid/issues/",