added categories

src/Umbraco.Web.UI.Client/src/less/components/umb-packages.less

@@ -159,3 +159,42 @@
 .umb-era-button.-blue:hover {
 	background-color: @blueDark;
 }
+
+
+
+/* CATEGORIES */
+
+.umb-packages-categories {
+    display: flex;
+    user-select: center;
+    flex-wrap: wrap;
+    margin-bottom: 30px;
+}
+
+.umb-packages-category {
+    display: flex;
+    align-items: center;
+    flex: 1 0 auto;
+    max-width: 25%;
+    background-color: @blue;
+    padding: 10px;
+    font-size: 12px;
+    border-radius: 3px;
+    color: @white;
+    font-weight: bold;
+    box-sizing: border-box;
+    flex: 1 0 auto;
+    margin: 5px;
+    justify-content: center;
+}
+
+.umb-packages-category:hover,
+.umb-packages-category:focus {
+    text-decoration: none;
+    color: @white;
+}
+
+.umb-packages-category-icon {
+    font-size: 20px;
+    margin-right: 5px;
+}

src/Umbraco.Web.UI.Client/src/views/packagesNew/edit.controller.js

@@ -8,6 +8,33 @@
         vm.page = {};
         vm.page.name = "Packages";
 
+        vm.categories = [
+            {
+                "icon": "icon-male-and-female",
+                "name": "Collaboration"
+            },
+            {
+                "icon": "icon-molecular-network",
+                "name": "Backoffice extensions"
+            },
+            {
+                "icon": "icon-brackets",
+                "name": "Developer tools"
+            },
+            {
+                "icon": "icon-wand",
+                "name": "Starter kits"
+            },
+            {
+                "icon": "icon-medal",
+                "name": "Umbraco Pro"
+            },
+            {
+                "icon": "icon-wrench",
+                "name": "Website utilities"
+            }
+        ];
+
         vm.packages = [
             {
                 "name": "Test App",

src/Umbraco.Web.UI.Client/src/views/packagesNew/edit.html

@@ -21,7 +21,10 @@
                 </div>
 
                 <div class="umb-packages-categories">
-
+                    <a href="" class="umb-packages-category" ng-repeat="category in vm.categories">
+                        <i class="umb-packages-category-icon" ng-class="category.icon"></i>
+                        <div>{{ category.name }}</div>
+                    </a>
                 </div>
 
                 <div class="umb-packages">