loaded materials form solr with jsonapi, and display them

web/themes/custom/materiotheme/assets/scripts/main.js

@@ -3,6 +3,9 @@ import Vue from 'vue'
 import store from 'vuejs/store'
 import router from 'vuejs/route'
 
+// import autofocus from 'vue-autofocus-directive';
+// Vue.directive('autofocus', autofocus);
+
 import VUserBlock from 'vuejs/components/Block/UserBlock'
 import VMainContent from 'vuejs/components/Content/MainContent'
 import VSearchBlock from 'vuejs/components/Block/SearchBlock'

web/themes/custom/materiotheme/assets/styles/main.scss

@@ -210,3 +210,53 @@ article.node--type-frontpage{
     }
   }
 }
+
+
+ //   ___             _
+ //  / __|__ _ _ _ __| |___
+ // | (__/ _` | '_/ _` (_-<
+ //  \___\__,_|_| \__,_/__/
+
+.cards-list{
+  &>ul{
+    margin:0; padding:0;
+    &>li{
+      list-style: none;
+      margin:0 1em 1em 0; padding:0;
+      display: inline-block;
+      vertical-align: top;
+    }
+  }
+}
+
+.card{
+  position: relative;
+  width:200px; height:295px;
+  header{
+    position: absolute;
+    bottom:0;
+    z-index:10;
+    color: #fff;
+    background-color: rgba(0,0,0,0.5);
+    width:100%;
+    h1, h4{ margin:0; padding:0; }
+    h1{
+      font-size: 1.5em;
+    }
+    h4{
+      font-size: 1em;
+      font-weight: normal;
+    }
+
+  }
+  section.images{
+    position: relative;
+    img:first-of-type{
+      z-index:5
+    }
+    img:not(:first-of-type){
+      position: absolute;
+      top:0; left:0;
+    }
+  }
+}