No way to meaningfully customize EntryCards (list/grid cards)
- Dominant language
- JavaScript
- Stars
- 19.4k
- Forks
- 3.1k
- Avg merge
- 1d 14h
- Merged PRs (30d)
- 9
Description
**Summary**
Given the flexibility of the collection system, it's highly incongruous to strictly limit the visible summary on list and grid cards to a single line of un-formatted text. At some point, this may warrant a customization system parallel to what's now available for previews, where modules are created for each collection type that define their list and grid cards—that would be a best-case scenario.
In the meantime, the same result can be achieved by simply allowing the configured collection summary (what in the EntryCard.js is assigned to the "title" constant) to include HTML tags. That, paired with currently-permitted CSS overriding, would give developers a lot of freedom in designing list and grid cards.
This can be achieved simply by rendering EntryCard titles using dangerouslySetInnerHTML. Then, cards could easily be configured on a collection-specific basis.
**Example**
In config.yml, consider a collection with the following summary:
summary: " {{fullName}}{{impact}}"
... with this CSS added to static/admin/cms.css:
h2[class*=ListCardTitle] img {
max-width: 100px;
float: left;
margin: 0 20px 20px 0;
}
h2[class*=ListCardTitle] .fullName {
font-size: 1.2em;
font-weight: bold;
}
h2[class*=ListCardTitle] .impact {
display: block;
font-size: 0.95em;
margin-top: 10px;
}
This would result in an EntryCard that looks like this:

I've prepared a branch in my fork with this change: https://github.com/MilesRomney/netlify-cms/commit/0c6a719304453e28b1995767f164e3ff9d6cd6f9
Contributor guide
Assessment
This issue has not been assessed yet.