Standardise our collection cards

[koderjoker]

What is the context for this discussion?

Issue to summarise the discussion on slack over here and add on some points. The following is to act as a checklist for the searchResultCard--collection card's design and development.

Child issue of #38

Elaborate on the discussion topic.

Tasks needed to be tackled:

Decide on standard height and width for all cards

To decide on dimensions to hold common for searchResultCard--collection, searchResultCard--media and searchResultCard--account cards.

Currently, all cards are 180 px wide.

Fix the number of lines to be allotted to the title

Variation in title lengths causes a discrepancy in card heights.

Use placeholders for collections without images

The absence of images in collection cards causes a discrepancy in card heights.

Make cards more screen reader friendly

For cards with an image, screen readers read out the image's src, followed by the card's title.

Use a more accessible colour palette

Card text on background: Contrast ratio

Card text on hover background (upper section): Contrast ratio

Card text on hover background (lower section): Contrast ratio

Stakeholders
@pezvi @iisa @bfalling