primer / brand

React components and Primitives for GitHub marketing websites
https://primer.style/brand
MIT License
74 stars 33 forks source link

[Modification Request] CTA Banner to support a background image #756

Closed jjwinskill closed 3 weeks ago

jjwinskill commented 2 months ago

Summary

As part of the Newsroom project, we've added a one-off style override for our CTA Banner to support a background image (example at https://github.com/newsroom - scroll close to bottom to see it).

Screenshot ![Image](https://github.com/user-attachments/assets/bf02f71e-e819-4c4e-82a3-1e5efcbfdc22)

We've had additional requests to use this pattern on other templates, so we'd like to standardize using a background image in the CTA Banner so it can be added as a field in our CMS.

Implementation Details

There is a possible conflict here with the useBackground property, as that could be confusing while also using a background image.

Urgency

This is being asked for as a standard for other templates, but we do have a workaround for now (though each use case accrues some minor tech debt).

joshfarrant commented 2 months ago

Thanks for this @jjwinskill.

There's a somewhat related discussion ongoing in https://github.com/primer/brand/issues/752 too, so we can potentially tackle both of these issues together.

nsolerieu commented 2 months ago

I caught up with @simurai that is building the new feature pages where he has been using image backgrounds for the CTA Banners

We'd love to have a background component background prop with primary, subtle, image - on both CTAbanner and breakoutBanner

Here is an example of image based CTA banner on the discussion feature page:

Image