journal-volume-search-result-grid-element.component.html

    <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]="this.dso.getThumbnail() | async">
                    </ds-grid-thumbnail>
                </div>
            </a>
            <div class="card-body">
                <ds-item-type-badge [object]="dso"></ds-item-type-badge>
                <ds-truncatable-part [id]="dso.id" [minLines]="3" type="h4">
                    <h4 class="card-title" [innerHTML]="dso.firstMetadataValue('dc.title')"></h4>
                </ds-truncatable-part>
                <p *ngIf="dso.hasMetadata('creativework.datePublished')" class="item-date card-text text-muted">
                    <ds-truncatable-part [id]="dso.id" [minLines]="1">
                        <span [innerHTML]="firstMetadataValue('creativework.datePublished')"></span>
                    </ds-truncatable-part>
                </p>
                <p *ngIf="dso.hasMetadata('dc.description')" class="item-description card-text">
                    <ds-truncatable-part [id]="dso.id" [minLines]="3">
                        <span [innerHTML]="firstMetadataValue('dc.description')"></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>