diff --git a/src/app/entity-groups/research-entities/item-grid-elements/orgunit/orgunit-grid-element.component.html b/src/app/entity-groups/research-entities/item-grid-elements/orgunit/orgunit-grid-element.component.html
new file mode 100644
index 0000000000..afb7f8da09
--- /dev/null
+++ b/src/app/entity-groups/research-entities/item-grid-elements/orgunit/orgunit-grid-element.component.html
@@ -0,0 +1,33 @@
+<ds-truncatable [id]="dso.id">
+  <div class="card" [@focusShadow]="(isCollapsed() | async)?'blur':'focus'">
+    <a [routerLink]="['/items/' + dso.id]" class="card-img-top full-width">
+      <div>
+        <ds-grid-thumbnail [thumbnail]="dso.getThumbnail()" [defaultImage]="'assets/images/orgunit-placeholder.svg'">
+        </ds-grid-thumbnail>
+      </div>
+    </a>
+    <div class="card-body">
+      <ds-item-type-badge [object]="object"></ds-item-type-badge>
+      <ds-truncatable-part [fixedHeight]="true" [id]="dso.id" [minLines]="3" type="h4">
+        <h4 class="card-title" [innerHTML]="dso.firstMetadataValue('dc.title')"></h4>
+      </ds-truncatable-part>
+      <p class="item-date card-text text-muted">
+        <ds-truncatable-part [fixedHeight]="true" [id]="dso.id" [minLines]="1">
+          <span [innerHTML]="firstMetadataValue('orgunit.identifier.dateestablished')"></span>
+        </ds-truncatable-part>
+      </p>
+      <p *ngIf="dso.hasMetadata('orgunit.identifier.country')"
+         class="item-location card-text">
+        <ds-truncatable-part [fixedHeight]="true" [id]="dso.id" [minLines]="1">
+          <span *ngIf="dso.hasMetadata('orgunit.identifier.country')" class="item-date">{{dso.firstMetadataValue('orgunit.identifier.country')}}</span>
+          <span>, </span>
+          <span *ngIf="dso.hasMetadata('orgunit.identifier.city')" class="item-date">{{dso.firstMetadataValue('orgunit.identifier.city')}}</span>
+        </ds-truncatable-part>
+      </p>
+      <div class="text-center">
+        <a [routerLink]="['/items/' + dso.id]"
+           class="lead btn btn-primary viewButton">View</a>
+      </div>
+    </div>
+  </div>
+</ds-truncatable>
diff --git a/src/app/entity-groups/research-entities/item-grid-elements/orgunit/orgunit-grid-element.component.scss b/src/app/entity-groups/research-entities/item-grid-elements/orgunit/orgunit-grid-element.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/app/entity-groups/research-entities/item-grid-elements/orgunit/orgunit-grid-element.component.spec.ts b/src/app/entity-groups/research-entities/item-grid-elements/orgunit/orgunit-grid-element.component.spec.ts
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/app/entity-groups/research-entities/item-grid-elements/orgunit/orgunit-grid-element.component.ts b/src/app/entity-groups/research-entities/item-grid-elements/orgunit/orgunit-grid-element.component.ts
new file mode 100644
index 0000000000..f0c87eb975
--- /dev/null
+++ b/src/app/entity-groups/research-entities/item-grid-elements/orgunit/orgunit-grid-element.component.ts
@@ -0,0 +1,14 @@
+import { ItemViewMode, rendersItemType } from '../../../../shared/items/item-type-decorator';
+import { Component } from '@angular/core';
+import { focusShadow } from '../../../../shared/animations/focus';
+import { TypedItemSearchResultGridElementComponent } from '../../../../shared/object-grid/item-grid-element/item-types/typed-item-search-result-grid-element.component';
+
+@rendersItemType('OrgUnit', ItemViewMode.Card)
+@Component({
+  selector: 'ds-orgunit-grid-element',
+  styleUrls: ['./orgunit-grid-element.component.scss'],
+  templateUrl: './orgunit-grid-element.component.html',
+  animations: [focusShadow]
+})
+export class OrgunitGridElementComponent extends TypedItemSearchResultGridElementComponent {
+}
diff --git a/src/app/entity-groups/research-entities/item-grid-elements/person/person-grid-element.component.html b/src/app/entity-groups/research-entities/item-grid-elements/person/person-grid-element.component.html
new file mode 100644
index 0000000000..05f1eefda1
--- /dev/null
+++ b/src/app/entity-groups/research-entities/item-grid-elements/person/person-grid-element.component.html
@@ -0,0 +1,30 @@
+<ds-truncatable [id]="dso.id">
+  <div class="card" [@focusShadow]="(isCollapsed() | async)?'blur':'focus'">
+    <a [routerLink]="['/items/' + dso.id]" class="card-img-top full-width">
+      <div>
+        <ds-grid-thumbnail [thumbnail]="dso.getThumbnail()" [defaultImage]="'assets/images/person-placeholder.svg'">
+        </ds-grid-thumbnail>
+      </div>
+    </a>
+    <div class="card-body">
+      <ds-item-type-badge [object]="object"></ds-item-type-badge>
+      <ds-truncatable-part [fixedHeight]="true" [id]="dso.id" [minLines]="3" type="h4">
+        <h4 class="card-title" [innerHTML]="dso.firstMetadataValue('dc.title')"></h4>
+      </ds-truncatable-part>
+      <p class="item-email card-text text-muted">
+        <ds-truncatable-part [fixedHeight]="true" [id]="dso.id" [minLines]="1">
+          <span *ngIf="dso.hasMetadata('person.identifier.email')">{{dso.firstMetadataValue('person.identifier.email')}}</span>
+        </ds-truncatable-part>
+      </p>
+      <p class="item-jobtitle card-text">
+        <ds-truncatable-part [fixedHeight]="true" [id]="dso.id" [minLines]="3">
+          <span [innerHTML]="firstMetadataValue('person.identifier.jobtitle')"></span>
+        </ds-truncatable-part>
+      </p>
+      <div class="text-center">
+        <a [routerLink]="['/items/' + dso.id]"
+           class="lead btn btn-primary viewButton">View</a>
+      </div>
+    </div>
+  </div>
+</ds-truncatable>
diff --git a/src/app/entity-groups/research-entities/item-grid-elements/person/person-grid-element.component.scss b/src/app/entity-groups/research-entities/item-grid-elements/person/person-grid-element.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/app/entity-groups/research-entities/item-grid-elements/person/person-grid-element.component.spec.ts b/src/app/entity-groups/research-entities/item-grid-elements/person/person-grid-element.component.spec.ts
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/app/entity-groups/research-entities/item-grid-elements/person/person-grid-element.component.ts b/src/app/entity-groups/research-entities/item-grid-elements/person/person-grid-element.component.ts
new file mode 100644
index 0000000000..3ec17c9ce5
--- /dev/null
+++ b/src/app/entity-groups/research-entities/item-grid-elements/person/person-grid-element.component.ts
@@ -0,0 +1,14 @@
+import { ItemViewMode, rendersItemType } from '../../../../shared/items/item-type-decorator';
+import { Component } from '@angular/core';
+import { TypedItemSearchResultGridElementComponent } from '../../../../shared/object-grid/item-grid-element/item-types/typed-item-search-result-grid-element.component';
+import { focusShadow } from '../../../../shared/animations/focus';
+
+@rendersItemType('Person', ItemViewMode.Card)
+@Component({
+  selector: 'ds-person-grid-element',
+  styleUrls: ['./person-grid-element.component.scss'],
+  templateUrl: './person-grid-element.component.html',
+  animations: [focusShadow]
+})
+export class PersonGridElementComponent extends TypedItemSearchResultGridElementComponent {
+}
diff --git a/src/app/entity-groups/research-entities/item-grid-elements/project/project-grid-element.component.html b/src/app/entity-groups/research-entities/item-grid-elements/project/project-grid-element.component.html
new file mode 100644
index 0000000000..f01f0334d3
--- /dev/null
+++ b/src/app/entity-groups/research-entities/item-grid-elements/project/project-grid-element.component.html
@@ -0,0 +1,25 @@
+<ds-truncatable [id]="dso.id">
+  <div class="card" [@focusShadow]="(isCollapsed() | async)?'blur':'focus'">
+    <a [routerLink]="['/items/' + dso.id]" class="card-img-top full-width">
+      <div>
+        <ds-grid-thumbnail [thumbnail]="dso.getThumbnail()" [defaultImage]="'assets/images/project-placeholder.svg'">
+        </ds-grid-thumbnail>
+      </div>
+    </a>
+    <div class="card-body">
+      <ds-item-type-badge [object]="object"></ds-item-type-badge>
+      <ds-truncatable-part [fixedHeight]="true" [id]="dso.id" [minLines]="3" type="h4">
+        <h4 class="card-title" [innerHTML]="dso.firstMetadataValue('dc.title')"></h4>
+      </ds-truncatable-part>
+      <p class="item-funder card-text text-muted">
+        <ds-truncatable-part [fixedHeight]="true" [id]="dso.id" [minLines]="1">
+          <span [innerHTML]="firstMetadataValue('project.identifier.funder')"></span>
+        </ds-truncatable-part>
+      </p>
+      <div class="text-center">
+        <a [routerLink]="['/items/' + dso.id]"
+           class="lead btn btn-primary viewButton">View</a>
+      </div>
+    </div>
+  </div>
+</ds-truncatable>
diff --git a/src/app/entity-groups/research-entities/item-grid-elements/project/project-grid-element.component.scss b/src/app/entity-groups/research-entities/item-grid-elements/project/project-grid-element.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/app/entity-groups/research-entities/item-grid-elements/project/project-grid-element.component.spec.ts b/src/app/entity-groups/research-entities/item-grid-elements/project/project-grid-element.component.spec.ts
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/app/entity-groups/research-entities/item-grid-elements/project/project-grid-element.component.ts b/src/app/entity-groups/research-entities/item-grid-elements/project/project-grid-element.component.ts
new file mode 100644
index 0000000000..be246f0fbe
--- /dev/null
+++ b/src/app/entity-groups/research-entities/item-grid-elements/project/project-grid-element.component.ts
@@ -0,0 +1,14 @@
+import { ItemViewMode, rendersItemType } from '../../../../shared/items/item-type-decorator';
+import { Component } from '@angular/core';
+import { focusShadow } from '../../../../shared/animations/focus';
+import { TypedItemSearchResultGridElementComponent } from '../../../../shared/object-grid/item-grid-element/item-types/typed-item-search-result-grid-element.component';
+
+@rendersItemType('Project', ItemViewMode.Card)
+@Component({
+  selector: 'ds-project-grid-element',
+  styleUrls: ['./project-grid-element.component.scss'],
+  templateUrl: './project-grid-element.component.html',
+  animations: [focusShadow]
+})
+export class ProjectGridElementComponent extends TypedItemSearchResultGridElementComponent {
+}
diff --git a/src/app/entity-groups/research-entities/research-entities.module.ts b/src/app/entity-groups/research-entities/research-entities.module.ts
index ba28f174df..099fa2a6a3 100644
--- a/src/app/entity-groups/research-entities/research-entities.module.ts
+++ b/src/app/entity-groups/research-entities/research-entities.module.ts
@@ -11,6 +11,9 @@ import { PersonMetadataListElementComponent } from './item-list-elements/person/
 import { PersonListElementComponent } from './item-list-elements/person/person-list-element.component';
 import { ProjectListElementComponent } from './item-list-elements/project/project-list-element.component';
 import { TooltipModule } from 'ngx-bootstrap';
+import { PersonGridElementComponent } from './item-grid-elements/person/person-grid-element.component';
+import { OrgunitGridElementComponent } from './item-grid-elements/orgunit/orgunit-grid-element.component';
+import { ProjectGridElementComponent } from './item-grid-elements/project/project-grid-element.component';
 
 const ENTRY_COMPONENTS = [
   OrgunitComponent,
@@ -20,7 +23,10 @@ const ENTRY_COMPONENTS = [
   OrgUnitMetadataListElementComponent,
   PersonListElementComponent,
   PersonMetadataListElementComponent,
-  ProjectListElementComponent
+  ProjectListElementComponent,
+  PersonGridElementComponent,
+  OrgunitGridElementComponent,
+  ProjectGridElementComponent
 ];
 
 @NgModule({
diff --git a/src/app/shared/items/item-type-decorator.ts b/src/app/shared/items/item-type-decorator.ts
index 2420e71908..3a040ae5bf 100644
--- a/src/app/shared/items/item-type-decorator.ts
+++ b/src/app/shared/items/item-type-decorator.ts
@@ -3,6 +3,7 @@ import { MetadataRepresentationType } from '../../core/shared/metadata-represent
 
 export enum ItemViewMode {
   Element = 'element',
+  Card = 'card',
   Full = 'full',
   Metadata = 'metadata'
 }
diff --git a/src/app/shared/object-grid/grid-thumbnail/grid-thumbnail.component.html b/src/app/shared/object-grid/grid-thumbnail/grid-thumbnail.component.html
index c0c3c1f65f..5b09d09a55 100644
--- a/src/app/shared/object-grid/grid-thumbnail/grid-thumbnail.component.html
+++ b/src/app/shared/object-grid/grid-thumbnail/grid-thumbnail.component.html
@@ -1,4 +1,3 @@
 <div class="thumbnail">
-  <img *ngIf="thumbnail && thumbnail.content" [src]="thumbnail.content" (error)="errorHandler($event)"/>
-  <img *ngIf="!(thumbnail && thumbnail.content)" [src]="holderSource | dsSafeUrl"/>
+  <img [src]="src | dsSafeUrl" (error)="errorHandler($event)"/>
 </div>
diff --git a/src/app/shared/object-grid/grid-thumbnail/grid-thumbnail.component.ts b/src/app/shared/object-grid/grid-thumbnail/grid-thumbnail.component.ts
index 8ca93470da..6ae0c2d37e 100644
--- a/src/app/shared/object-grid/grid-thumbnail/grid-thumbnail.component.ts
+++ b/src/app/shared/object-grid/grid-thumbnail/grid-thumbnail.component.ts
@@ -1,5 +1,6 @@
-import { Component, Input } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
 import { Bitstream } from '../../../core/shared/bitstream.model';
+import { hasValue } from '../../empty.util';
 
 /**
  * This component renders a given Bitstream as a thumbnail.
@@ -12,7 +13,7 @@ import { Bitstream } from '../../../core/shared/bitstream.model';
   styleUrls: ['./grid-thumbnail.component.scss'],
   templateUrl: './grid-thumbnail.component.html'
 })
-export class GridThumbnailComponent {
+export class GridThumbnailComponent implements OnInit {
 
   @Input() thumbnail: Bitstream;
 
@@ -21,10 +22,19 @@ export class GridThumbnailComponent {
   /**
    * The default 'holder.js' image
    */
-  holderSource = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjYwIiBoZWlnaHQ9IjE4MCIgdmlld0JveD0iMCAwIDI2MCAxODAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzEwMCV4MTgwL3RleHQ6Tm8gVGh1bWJuYWlsCkNyZWF0ZWQgd2l0aCBIb2xkZXIuanMgMi42LjAuCkxlYXJuIG1vcmUgYXQgaHR0cDovL2hvbGRlcmpzLmNvbQooYykgMjAxMi0yMDE1IEl2YW4gTWFsb3BpbnNreSAtIGh0dHA6Ly9pbXNreS5jbwotLT48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwhW0NEQVRBWyNob2xkZXJfMTVmNzJmMmFlMGIgdGV4dCB7IGZpbGw6I0FBQUFBQTtmb250LXdlaWdodDpib2xkO2ZvbnQtZmFtaWx5OkFyaWFsLCBIZWx2ZXRpY2EsIE9wZW4gU2Fucywgc2Fucy1zZXJpZiwgbW9ub3NwYWNlO2ZvbnQtc2l6ZToxM3B0IH0gXV0+PC9zdHlsZT48L2RlZnM+PGcgaWQ9ImhvbGRlcl8xNWY3MmYyYWUwYiI+PHJlY3Qgd2lkdGg9IjI2MCIgaGVpZ2h0PSIxODAiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSI3Mi4yNDIxODc1IiB5PSI5NiI+Tm8gVGh1bWJuYWlsPC90ZXh0PjwvZz48L2c+PC9zdmc+';
+  @Input() defaultImage? = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjYwIiBoZWlnaHQ9IjE4MCIgdmlld0JveD0iMCAwIDI2MCAxODAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzEwMCV4MTgwL3RleHQ6Tm8gVGh1bWJuYWlsCkNyZWF0ZWQgd2l0aCBIb2xkZXIuanMgMi42LjAuCkxlYXJuIG1vcmUgYXQgaHR0cDovL2hvbGRlcmpzLmNvbQooYykgMjAxMi0yMDE1IEl2YW4gTWFsb3BpbnNreSAtIGh0dHA6Ly9pbXNreS5jbwotLT48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwhW0NEQVRBWyNob2xkZXJfMTVmNzJmMmFlMGIgdGV4dCB7IGZpbGw6I0FBQUFBQTtmb250LXdlaWdodDpib2xkO2ZvbnQtZmFtaWx5OkFyaWFsLCBIZWx2ZXRpY2EsIE9wZW4gU2Fucywgc2Fucy1zZXJpZiwgbW9ub3NwYWNlO2ZvbnQtc2l6ZToxM3B0IH0gXV0+PC9zdHlsZT48L2RlZnM+PGcgaWQ9ImhvbGRlcl8xNWY3MmYyYWUwYiI+PHJlY3Qgd2lkdGg9IjI2MCIgaGVpZ2h0PSIxODAiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSI3Mi4yNDIxODc1IiB5PSI5NiI+Tm8gVGh1bWJuYWlsPC90ZXh0PjwvZz48L2c+PC9zdmc+';
 
+  src: string;
   errorHandler(event) {
-    event.currentTarget.src = this.holderSource;
+    event.currentTarget.src = this.defaultImage;
+  }
+
+  ngOnInit(): void {
+    if (hasValue(this.thumbnail) && this.thumbnail.content) {
+      this.src = this.thumbnail.content;
+    } else {
+      this.src = this.defaultImage
+    }
   }
 
 }
diff --git a/src/app/shared/object-grid/item-grid-element/item-types/publication/publication-grid-element.component.html b/src/app/shared/object-grid/item-grid-element/item-types/publication/publication-grid-element.component.html
new file mode 100644
index 0000000000..b0509eb5df
--- /dev/null
+++ b/src/app/shared/object-grid/item-grid-element/item-types/publication/publication-grid-element.component.html
@@ -0,0 +1,34 @@
+<ds-truncatable [id]="dso.id">
+  <div class="card" [@focusShadow]="(isCollapsed() | async)?'blur':'focus'">
+    <a [routerLink]="['/items/' + dso.id]" class="card-img-top full-width">
+      <div>
+        <ds-grid-thumbnail [thumbnail]="dso.getThumbnail()">
+        </ds-grid-thumbnail>
+      </div>
+    </a>
+    <div class="card-body">
+      <ds-item-type-badge [object]="object"></ds-item-type-badge>
+      <ds-truncatable-part [fixedHeight]="true" [id]="dso.id" [minLines]="3" type="h4">
+        <h4 class="card-title" [innerHTML]="dso.firstMetadataValue('dc.title')"></h4>
+      </ds-truncatable-part>
+      <p *ngIf="dso.hasMetadata(['dc.contributor.author', 'dc.creator', 'dc.contributor.*'])"
+         class="item-authors card-text text-muted">
+        <ds-truncatable-part [fixedHeight]="true" [id]="dso.id" [minLines]="1">
+          <span *ngIf="dso.hasMetadata('dc.date.issued')" class="item-date">{{dso.firstMetadataValue('dc.date.issued')}}</span>
+          <span *ngFor="let author of dso.allMetadataValues(['dc.contributor.author', 'dc.creator', 'dc.contributor.*']);">,
+                        <span [innerHTML]="author"></span>
+                    </span>
+        </ds-truncatable-part>
+      </p>
+      <p class="item-abstract card-text">
+        <ds-truncatable-part [fixedHeight]="true" [id]="dso.id" [minLines]="3">
+          <span [innerHTML]="firstMetadataValue('dc.description.abstract')"></span>
+        </ds-truncatable-part>
+      </p>
+      <div class="text-center">
+        <a [routerLink]="['/items/' + dso.id]"
+           class="lead btn btn-primary viewButton">View</a>
+      </div>
+    </div>
+  </div>
+</ds-truncatable>
diff --git a/src/app/shared/object-grid/item-grid-element/item-types/publication/publication-grid-element.component.scss b/src/app/shared/object-grid/item-grid-element/item-types/publication/publication-grid-element.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/app/shared/object-grid/item-grid-element/item-types/publication/publication-grid-element.component.spec.ts b/src/app/shared/object-grid/item-grid-element/item-types/publication/publication-grid-element.component.spec.ts
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/app/shared/object-grid/item-grid-element/item-types/publication/publication-grid-element.component.ts b/src/app/shared/object-grid/item-grid-element/item-types/publication/publication-grid-element.component.ts
new file mode 100644
index 0000000000..18dcccd1d2
--- /dev/null
+++ b/src/app/shared/object-grid/item-grid-element/item-types/publication/publication-grid-element.component.ts
@@ -0,0 +1,15 @@
+import { TypedItemSearchResultGridElementComponent } from '../typed-item-search-result-grid-element.component';
+import { DEFAULT_ITEM_TYPE, ItemViewMode, rendersItemType } from '../../../../items/item-type-decorator';
+import { Component } from '@angular/core';
+import { focusShadow } from '../../../../animations/focus';
+
+@rendersItemType('Publication', ItemViewMode.Card)
+@rendersItemType(DEFAULT_ITEM_TYPE, ItemViewMode.Card)
+@Component({
+  selector: 'ds-publication-grid-element',
+  styleUrls: ['./publication-grid-element.component.scss'],
+  templateUrl: './publication-grid-element.component.html',
+  animations: [focusShadow]
+})
+export class PublicationGridElementComponent extends TypedItemSearchResultGridElementComponent {
+}
diff --git a/src/app/shared/object-grid/item-grid-element/item-types/typed-item-search-result-grid-element.component.spec.ts b/src/app/shared/object-grid/item-grid-element/item-types/typed-item-search-result-grid-element.component.spec.ts
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/app/shared/object-grid/item-grid-element/item-types/typed-item-search-result-grid-element.component.ts b/src/app/shared/object-grid/item-grid-element/item-types/typed-item-search-result-grid-element.component.ts
new file mode 100644
index 0000000000..f4f470c052
--- /dev/null
+++ b/src/app/shared/object-grid/item-grid-element/item-types/typed-item-search-result-grid-element.component.ts
@@ -0,0 +1,37 @@
+import { ItemSearchResult } from '../../../object-collection/shared/item-search-result.model';
+import { Item } from '../../../../core/shared/item.model';
+import { SearchResultGridElementComponent } from '../../search-result-grid-element/search-result-grid-element.component';
+import { TruncatableService } from '../../../truncatable/truncatable.service';
+import { Component, Inject } from '@angular/core';
+import { ITEM } from '../../../items/switcher/item-type-switcher.component';
+import { hasValue } from '../../../empty.util';
+import { MetadataMap } from '../../../../core/shared/metadata.models';
+
+/**
+ * A generic component for displaying item grid elements
+ */
+@Component({
+  selector: 'ds-item-search-result-grid-element',
+  template: ''
+})
+export class TypedItemSearchResultGridElementComponent extends SearchResultGridElementComponent<ItemSearchResult, Item> {
+  item: Item;
+
+  constructor(
+    protected truncatableService: TruncatableService,
+    @Inject(ITEM) public obj: Item | ItemSearchResult,
+  ) {
+    super(undefined, truncatableService);
+    if (hasValue((obj as any).indexableObject)) {
+      this.object = obj as ItemSearchResult;
+      this.dso = this.object.indexableObject;
+    } else {
+      this.object = {
+        indexableObject: obj as Item,
+        hitHighlights: new MetadataMap()
+      };
+      this.dso = obj as Item;
+    }
+    this.item = this.dso;
+  }
+}
diff --git a/src/app/shared/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.html b/src/app/shared/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.html
index c7e2f524f3..d433c7acf2 100644
--- a/src/app/shared/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.html
+++ b/src/app/shared/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.html
@@ -1,33 +1 @@
-<ds-truncatable [id]="dso.id">
-    <div class="card" [@focusShadow]="(isCollapsed() | async)?'blur':'focus'">
-        <a [routerLink]="['/items/' + dso.id]" class="card-img-top full-width">
-            <div>
-                <ds-grid-thumbnail [thumbnail]="dso.getThumbnail()">
-                </ds-grid-thumbnail>
-            </div>
-        </a>
-        <div class="card-body">
-            <ds-truncatable-part [fixedHeight]="true" [id]="dso.id" [minLines]="3" type="h4">
-                <h4 class="card-title" [innerHTML]="dso.firstMetadataValue('dc.title')"></h4>
-            </ds-truncatable-part>
-            <p *ngIf="dso.hasMetadata(['dc.contributor.author', 'dc.creator', 'dc.contributor.*'])"
-               class="item-authors card-text text-muted">
-                <ds-truncatable-part [fixedHeight]="true" [id]="dso.id" [minLines]="1">
-                    <span *ngIf="dso.hasMetadata('dc.date.issued')" class="item-date">{{dso.firstMetadataValue('dc.date.issued')}}</span>
-                    <span *ngFor="let author of dso.allMetadataValues(['dc.contributor.author', 'dc.creator', 'dc.contributor.*']);">,
-                        <span [innerHTML]="author"></span>
-                    </span>
-                </ds-truncatable-part>
-            </p>
-            <p class="item-abstract card-text">
-                <ds-truncatable-part [fixedHeight]="true" [id]="dso.id" [minLines]="3">
-                    <span [innerHTML]="firstMetadataValue('dc.description.abstract')"></span>
-                </ds-truncatable-part>
-            </p>
-            <div class="text-center">
-                <a [routerLink]="['/items/' + dso.id]"
-                   class="lead btn btn-primary viewButton">View</a>
-            </div>
-        </div>
-    </div>
-</ds-truncatable>
+<ds-item-type-switcher [object]="object" [viewMode]="viewMode"></ds-item-type-switcher>
diff --git a/src/app/shared/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.ts b/src/app/shared/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.ts
index 30c36b3af9..7bbe41fe60 100644
--- a/src/app/shared/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.ts
+++ b/src/app/shared/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.ts
@@ -6,6 +6,7 @@ import { Item } from '../../../../core/shared/item.model';
 import { ItemSearchResult } from '../../../object-collection/shared/item-search-result.model';
 import { SetViewMode } from '../../../view-mode';
 import { focusShadow } from '../../../../shared/animations/focus';
+import { ItemViewMode } from '../../../items/item-type-decorator';
 
 @Component({
   selector: 'ds-item-search-result-grid-element',
@@ -15,4 +16,6 @@ import { focusShadow } from '../../../../shared/animations/focus';
 })
 
 @renderElementsFor(ItemSearchResult, SetViewMode.Grid)
-export class ItemSearchResultGridElementComponent extends SearchResultGridElementComponent<ItemSearchResult, Item> {}
+export class ItemSearchResultGridElementComponent extends SearchResultGridElementComponent<ItemSearchResult, Item> {
+  viewMode = ItemViewMode.Card;
+}
diff --git a/src/app/shared/object-grid/search-result-grid-element/search-result-grid-element.component.ts b/src/app/shared/object-grid/search-result-grid-element/search-result-grid-element.component.ts
index 0961dc96ee..5f31d52ae7 100644
--- a/src/app/shared/object-grid/search-result-grid-element/search-result-grid-element.component.ts
+++ b/src/app/shared/object-grid/search-result-grid-element/search-result-grid-element.component.ts
@@ -7,6 +7,7 @@ import { ListableObject } from '../../object-collection/shared/listable-object.m
 import { TruncatableService } from '../../truncatable/truncatable.service';
 import { Observable } from 'rxjs';
 import { Metadata } from '../../../core/shared/metadata.utils';
+import { hasValue } from '../../empty.util';
 
 @Component({
   selector: 'ds-search-result-grid-element',
@@ -16,9 +17,11 @@ import { Metadata } from '../../../core/shared/metadata.utils';
 export class SearchResultGridElementComponent<T extends SearchResult<K>, K extends DSpaceObject> extends AbstractListableElementComponent<T> {
   dso: K;
 
-  public constructor(@Inject('objectElementProvider') public listableObject: ListableObject, private truncatableService: TruncatableService) {
+  public constructor(@Inject('objectElementProvider') public listableObject: ListableObject, protected truncatableService: TruncatableService) {
     super(listableObject);
-    this.dso = this.object.indexableObject;
+    if (hasValue(this.object)) {
+      this.dso = this.object.indexableObject;
+    }
   }
 
   /**
diff --git a/src/app/shared/object-list/item-list-element/item-types/typed-item-search-result-list-element.component.ts b/src/app/shared/object-list/item-list-element/item-types/typed-item-search-result-list-element.component.ts
index 7df3ab5681..dd1b5a7e5f 100644
--- a/src/app/shared/object-list/item-list-element/item-types/typed-item-search-result-list-element.component.ts
+++ b/src/app/shared/object-list/item-list-element/item-types/typed-item-search-result-list-element.component.ts
@@ -11,7 +11,7 @@ import { MetadataMap } from '../../../../core/shared/metadata.models';
  * A generic component for displaying item list elements
  */
 @Component({
-  selector: 'ds-item-search-result',
+  selector: 'ds-item-search-result-list-element',
   template: ''
 })
 export class TypedItemSearchResultListElementComponent extends SearchResultListElementComponent<ItemSearchResult, Item> {
diff --git a/src/app/shared/object-list/item-type-badge/item-type-badge.component.html b/src/app/shared/object-list/item-type-badge/item-type-badge.component.html
new file mode 100644
index 0000000000..35d7663801
--- /dev/null
+++ b/src/app/shared/object-list/item-type-badge/item-type-badge.component.html
@@ -0,0 +1,3 @@
+<div *ngIf="object && object.indexableObject && object.indexableObject.firstMetadataValue('relationship.type') as type">
+  <span class="badge badge-light">{{ type.toLowerCase() + '.listelement.badge' | translate }}</span>
+</div>
diff --git a/src/app/shared/object-list/item-type-badge/item-type-badge.component.ts b/src/app/shared/object-list/item-type-badge/item-type-badge.component.ts
new file mode 100644
index 0000000000..53e36a535d
--- /dev/null
+++ b/src/app/shared/object-list/item-type-badge/item-type-badge.component.ts
@@ -0,0 +1,10 @@
+import { Component, Input } from '@angular/core';
+import { ListableObject } from '../../object-collection/shared/listable-object.model';
+
+@Component({
+  selector: 'ds-item-type-badge',
+  templateUrl: './item-type-badge.component.html'
+})
+export class ItemTypeBadgeComponent {
+  @Input() object: ListableObject;
+}
diff --git a/src/app/shared/object-list/search-result-list-element/item-search-result/item-search-result-list-element.component.html b/src/app/shared/object-list/search-result-list-element/item-search-result/item-search-result-list-element.component.html
index a2617a956f..051a27bde7 100644
--- a/src/app/shared/object-list/search-result-list-element/item-search-result/item-search-result-list-element.component.html
+++ b/src/app/shared/object-list/search-result-list-element/item-search-result/item-search-result-list-element.component.html
@@ -1,4 +1,2 @@
-<div *ngIf="object && object.indexableObject && object.indexableObject.firstMetadataValue('relationship.type') as type">
-  <span class="badge badge-light">{{ type.toLowerCase() + '.listelement.badge' | translate }}</span>
-</div>
+<ds-item-type-badge [object]="object"></ds-item-type-badge>
 <ds-item-type-switcher [object]="object" [viewMode]="viewMode"></ds-item-type-switcher>
diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts
index 816139c8b9..66afb1e41b 100644
--- a/src/app/shared/shared.module.ts
+++ b/src/app/shared/shared.module.ts
@@ -138,6 +138,9 @@ import { RoleDirective } from './roles/role.directive';
 import { UserMenuComponent } from './auth-nav-menu/user-menu/user-menu.component';
 import { ClaimedTaskActionsReturnToPoolComponent } from './mydspace-actions/claimed-task/return-to-pool/claimed-task-actions-return-to-pool.component';
 import { ItemDetailPreviewFieldComponent } from './object-detail/my-dspace-result-detail-element/item-detail-preview/item-detail-preview-field/item-detail-preview-field.component';
+import { TypedItemSearchResultGridElementComponent } from './object-grid/item-grid-element/item-types/typed-item-search-result-grid-element.component';
+import { PublicationGridElementComponent } from './object-grid/item-grid-element/item-types/publication/publication-grid-element.component';
+import { ItemTypeBadgeComponent } from './object-list/item-type-badge/item-type-badge.component';
 
 const MODULES = [
   // Do NOT include UniversalModule, HttpModule, or JsonpModule here
@@ -256,8 +259,10 @@ const COMPONENTS = [
   CollectionSearchResultListElementComponent,
   ItemSearchResultListElementComponent,
   TypedItemSearchResultListElementComponent,
+  TypedItemSearchResultGridElementComponent,
   ItemTypeSwitcherComponent,
-  BrowseByComponent
+  BrowseByComponent,
+  ItemTypeBadgeComponent
 ];
 
 const ENTRY_COMPONENTS = [
@@ -275,6 +280,7 @@ const ENTRY_COMPONENTS = [
   CommunityGridElementComponent,
   SearchResultGridElementComponent,
   PublicationListElementComponent,
+  PublicationGridElementComponent,
   BrowseEntryListElementComponent,
   MyDSpaceResultDetailElementComponent,
   SearchResultGridElementComponent,