Info
Marketing Content → Components → Homepage Components → Hero

Hero is a default area at the top of the homepage, used to draw attention to the latest product, promotion, etc. It comes with 2 calls to action.

...

The hero allows for 2 color variants:

Brand	Standard Background	Standard Text	Reversed Background	Reversed Text
BK	Image Modified	Image Modified	Image Modified	Image Modified
PLK	Image Modified	Image Modified	Image Modified	Image Modified
TH	Image Modified	Image Modified	Image Modified	Image Modified

Best Practices

Tip

Keep text off of the images here
Image will proportionally fill as much of the space as possible
Transparent backgrounds are best
The hero image is displayed at ~500x500px, to look good in retina displays upload twice as much as that, so 1000x1000px as the size of Hero image.

Tip

Primary CTA
- This is the IDEAL action we want our users to take, and is directly related to the content above it
Secondary CTA
- This is intended as a fallback option, and should be directly related to the primary CTA
For example: if your hero advertises a new bundle, your primary CTA might be ‘Order Now’ and your secondary might be ‘View Full Menu’

Content Set-up

Image - Refer to image spec above
Alt Text: Image Description
Header - The title
Subheader - The description on the hero. This should be short and sweet - ideal case keep this to 1 or 2 lines, but should wrap to a maximum 3 lines on small screens
Primary CTA
1. CTA Text - This is the text inside of the action button. Max 3 words, and should be in Title Case
2. CTA url - the url that the user will be redirected to when they click on the card
  1. Internal routes - must start with / for example, /account
  2. External routes - should contain the full url
Secondary CTA
1. CTA Text - This is the text inside of the action button. Max 3 words, and should be in Title Case
2. CTA url - the url that the user will be redirected to when they click on the card
  1. Internal routes - must start with / for example, /account
  2. External routes - should contain the full url
Reversed toggle - refer to the color variations above

This should only be toggled if your hero is related to a campaign or initiative that has terms and conditions associated

Terms text variant: if you’d like your terms to pop up in a modal, paste the copy in this field
Terms button variant: if you’d like to redirect the user to a separate terms page, set the url here

Now that you have a marketing card group established, you can add it to the homepage.

Visit {sanity url}/desk/content;features;featureHomePage