Hero

Owned by Fernandes, Francisco
Last updated: Apr 03, 2024 by Lopes da Costa, Valentina
3 min read

Marketing Content → Components → Homepage Components → Hero

What is the Hero pattern?

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:

  1. Standard Variant

  2. Reversed Variant

Brand

Standard Background

Standard Text

Reversed Background

Reversed Text

Brand

Standard Background

Standard Text

Reversed Background

Reversed Text

BK

 

 

PLK

 

 

 

TH

 

 

 

Best Practices

Image

  • 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.

Content Set-up

Required Content

  1. Image - Refer to image spec above

  2. Alt Text: Image Description

  3. Header - The title

  4. 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

  5. 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

  6. 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

  7. Reversed toggle - refer to the color variations above

 

Terms

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

  1. Terms text variant: if you’d like your terms to pop up in a modal, paste the copy in this field

  2. Terms button variant: if you’d like to redirect the user to a separate terms page, set the url here

 

Enable Visibility

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

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

  1. Add a ‘referenced hero’ to the list

  2. Link the hero you have created

  3. Publish changes