Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

Version 1 Next »

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

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

Text Expectations

  • 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

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

  • No labels