Template Picker should always show template descriptions

[boonebgorges]

Currently, they only show on hover:

@bree-z @jennaspevack Could you please make a suggestion about how and where the description should be shown instead?

[bree-z]

We discussed this today and Jenna and we'd like to make the following changes:

1. Add description below the template site title.
2. Match the font style of other instructions on the page (e.g. "These settings will affect how others view your associated site.")
3. Add padding around the text (category, title, and description), to match padding between the box contents and gray box border.
4. Remove text description on hover. Keep gray hover but make it more transparent so the image is more visible. (Sorry, I don't have specific details here.)

I've also tried to make a rough mockup; see below.

@profstein Will this work for you?

Thanks!

[bree-z]

Sorry, in point 4 above Jenna's suggestion is 40% gray for the hover.

[boonebgorges]

What happens when a description is really long? I assume we keep the grid, but allow the one row to get very tall? Do we truncate?

[bree-z]

For now we can allow the row to expand in height. The problem with truncating is that there's nowhere else for users to see the full description. (I think??)

We also talked about adding character limits to the title and description as a future enhancement.

[boonebgorges]

Thanks, Bree.

A first pass is in place for testing. Here's a screenshot and a gif to show you the hover and selection behavior:

[bree-z]

This looks good, thanks!