[Modification Request] Add support to display pillars as cards

[seangolob]

Hi PB team!

I have noticed several pages in production where there have been custom styles applied to make pillars look like cards.

• https://github.com/features/actions
• https://github.com/features/codespaces
• https://github.com/features/code-search
• https://github.com/features/security
• https://github.com/education
• https://github.com/education/partners
• https://github.com/education/students
• https://github.com/education/teachers
• https://github.com/education/schools

Currently, custom styles are applied to the Pillar wherever they are implemented to make them look like cards. Should this be a feature that is supported by Primer Brand so we can get consistency for these use cases?

Thank you for your fantastic work! 🙇

[danielguillan]

Hey Sean!

Thanks for bringing this up and for sharing all those references. Adding a background to pillars is definitely becoming a common pattern.

Historically, we aimed to create a visual distinction between Cards and Pillars by only adding a background to Cards. This approach clarifies that Cards are interactive elements, while Pillars are pirmarily static content. One key distinction is that Cards always link to another location, making the entire element clickable. In contrast, Pillars may have optional links, with only the link being clickable. A common feature of all the Pillar examples you've shared is that none include a link, which seems enough to reinforces this distinction.

Therefore, we might consider allowing a background for Pillars, but perhaps only when there is no link? @rezrah @jesussandreas, I would love to hear your thoughts on this.

[rezrah]

we might consider allowing a background for Pillars, but perhaps only when there is no link?

That seems like a reasonable compromise. However, adding support for a background could make it even harder to distinguish Pillars from Cards, and would create confusion about their intended purposes.

When I look at this 👇, my instinct is that it's a Card and I try to hover + click on it because it looks so similar to the cards further down the page.

If we do this, can it be done in a way that clearly differentiates the Pillars and Cards to avoid confusion and help users know which one to use in different use-cases? Alternatively, maybe we just consolidate the patterns if there is no real difference anymore from a Site Design perspective cc. @jesussandreas @simmonsjenna

[simmonsjenna]

@rezrah bringing this over to the issue from Slack:

I checked with @jesussandreas , and he agrees we can consolidate them.

If we consolidate them, then pillars as they currently exist will become:
- Standard Pillars with no background ➡️ Cards with no background and no link (static; no hover effects)
- Pillars with a background ➡️ Cards with a background and no link (static; no hover effects)

Does that sound right? Or is there another use case I am missing?

This was discussed in Primer Brand OH this week. Consolidating the two would take too much work, and pillars are still functionally different enough to keep as a separate component. @jesussandreas will follow up with updated designs for pillars that use backgrounds so they are more visually differentiated from cards so they are not mistaken for card links.