[FEATURE] Provide css for feature lists

assets/css/app.scss

@@ -27,6 +27,7 @@
 @import 'modules/expander';
 @import 'modules/header';
 @import 'modules/listbox';
+@import 'modules/icongroup';
 @import 'modules/btn';
 @import 'modules/list';
 @import 'modules/message';

assets/css/modules/_icongroup.scss

@@ -0,0 +1,152 @@
+//
+// Icon Group
+//
+
+//
+// Variables
+//
+$icongroup-margin: ($grid-gutter-width / 2) !default;
+$icongroup-icon-size: 40px !default;
+$icongroup-item-width: 50% !default;
+
+//
+// Component
+//
+.icongroup {
+    display: flex;
+    flex-wrap: wrap;
+    margin: -$icongroup-margin !important;
+}
+
+// Alignment
+.icongroup-align-left {
+    justify-content: flex-start;
+}
+.icongroup-align-center {
+    justify-content: center;
+}
+.icongroup-align-right {
+    justify-content: flex-end;
+}
+
+// Icon Position
+.icongroup-iconposition-left-top {
+    .icongroup-item {
+        align-items: flex-start;
+    }
+}
+.icongroup-iconposition-left-center {
+    .icongroup-item {
+        align-items: center;
+    }
+}
+.icongroup-iconposition-right-top {
+    .icongroup-item {
+        align-items: flex-start;
+    }
+    .icongroup-item-icon {
+        margin-left: $icongroup-margin;
+        margin-right: 0;
+        order: 1;
+    }
+}
+.icongroup-iconposition-right-center {
+    .icongroup-item {
+        align-items: center;
+    }
+    .icongroup-item-icon {
+        margin-left: $icongroup-margin;
+        margin-right: 0;
+        order: 1;
+    }
+}
+.icongroup-iconposition-above,
+.icongroup-iconposition-below {
+    .icongroup-item {
+        flex-wrap: wrap;
+    }
+    .icongroup-item-text {
+        margin-top: $icongroup-margin;
+        width: 100%;
+    }
+    .icongroup-item-icon {
+        margin-left: auto;
+        margin-right: auto;
+    }
+}
+.icongroup-iconposition-below {
+    .icongroup-item-text {
+        margin-bottom: $icongroup-margin;
+    }
+    .icongroup-item-icon {
+        order: 1;
+    }
+}
+
+// Items
+.icongroup-item {
+    display: flex;
+    flex-wrap: nowrap;
+    align-items: center;
+    margin: $icongroup-margin;
+    width: 100%;
+}
+.icongroup-item-icon {
+    color: theme-color("primary");
+    flex-shrink: 0;
+    width: $icongroup-icon-size;
+    margin-right: $icongroup-margin;
+    span {
+        font-size: $icongroup-icon-size;
+        line-height: 1em;
+    }
+    svg {
+        display: block;
+        width: 100%;
+        height: auto;
+    }
+}
+.icongroup-item-text {
+    flex-grow: 1;
+    > *:last-child {
+        margin-bottom: 0;
+    }
+}
+.icongroup-item-text-header {
+    font-size: 1.25em;
+    margin-bottom: .15em;
+}
+.icongroup-item-text-subheader {
+    font-size: 1em;
+}
+
+// Columns
+.icongroup-columns-auto {
+    .icongroup-item {
+        width: auto;
+    }
+}
+.icongroup-columns-2 {
+    .icongroup-item {
+        @include media-breakpoint-up('sm') {
+            width: calc(100% / 2 - #{$icongroup-margin} * 2);
+        }
+    }
+}
+.icongroup-columns-3 {
+    .icongroup-item {
+        @include media-breakpoint-up('md') {
+            width: calc(100% / 3 - #{$icongroup-margin} * 2);
+        }
+    }
+}
+.icongroup-columns-4 {
+    .icongroup-item {
+        @include media-breakpoint-up('sm') {
+            width: calc(100% / 2 - #{$icongroup-margin} * 2);
+        }
+        @include media-breakpoint-up('xl') {
+            width: calc(100% / 4 - #{$icongroup-margin} * 2);
+        }
+    }
+}

src/Resources/public/entrypoints.json

@@ -2,7 +2,7 @@
   "entrypoints": {
     "app": {
       "css": [
-        "/bundles/template/app.cc93242b.css"
+        "/bundles/template/app.6f886676.css"
       ],
       "js": [
         "/bundles/template/app.0729a369.js"

src/Resources/public/manifest.json

@@ -1,5 +1,5 @@
 {
-  "bundles/template/app.css": "/bundles/template/app.cc93242b.css",
+  "bundles/template/app.css": "/bundles/template/app.6f886676.css",
   "bundles/template/app.js": "/bundles/template/app.0729a369.js",
   "bundles/template/webfont.css": "/bundles/template/webfont.adda838f.css",
   "bundles/template/fonts/fa-brands-400.woff2": "/bundles/template/fonts/fa-brands-400.31015e86.woff2",