Do you have a "Hero" slice/tab? Seeking best practices…

Hey, Prismic community! We let our software marketing site slice library get out of control and are now working to drastically reduce the number of slices we use, through a variety of tactics (including slice variations).

One of the ideas proposed is to do away with our "hero" slices—the argument being that any number of slices could be used as a hero and those slices could also be used elsewhere on a page. This makes sense in terms of layout and visual design, but something about it feels off in terms of content creator UX and under-the-hood site mechanics (SEO, page analytics, etc.).

Here's my perspective: one potential advantage of explicitly defined hero slices (or a "Hero" tab within the document) is that it makes it obvious to content creators which slices are approved for use at the top of the page. I imagine that a dedicated hero slice/object also allows us to bake in SEO and analytics into the code. For example, ensuring that only one heading gets the <H1> tag, ensuring that we can programmatically understand page interactions ("XX% of CTA clicks come from the hero"), and probably some other benefits I haven't thought of yet.

Most of the demos I've seen of other Prismic workspaces have an explicitly defined hero slice or tab. This seems like a common practice and I'd love to learn from the wisdom of the Prismic team and wider community before making a decision with my team.

If you're reading this, any thoughts to share?

1 Like

Hey Dan,

One thing I would say straight out of the box is that you can achieve what you've described here using Variations like you're already doing.

By having a top-of-page variation you will be able to ensure that your Hero Slice will use a H1 with the necessary styling even though it shares exactly the same model. The rest of your variations can use H2's in this case.

Then for any other type of Slice that you imagine might need an H1 you can do the same.

Does this help?


1 Like

Thanks, Phil! That's an interesting idea—having a hero or "top-of-page" variation for multiple slices. I'm curious: is that how the Prismic marketing content modeled? I'm really curious to hear best practices (and strong opinions) for modeling hero content.

In addition to best practices and strong opinions, the "why" behind a particular practice would be helpful:

  • "We implemented the hero as its own document tab because…"
  • "We implemented the hero as a variation available within multiple slices because…"
  • "We implemented the hero as a standalone slice (with layout variations) because…"

Hey Dan!

Here's my two cents on the topic:

It depends so much on the design. How many possible hero's should there be, or should every slice be able to be used as a hero. Just as you say.

  • If I would have a design where the hero was pretty much the same with small variations here and there, I would definitely keep it as one slice with variations, especially if it should be able to be used further down on the page.
  • If I where in a position where I need to limit the content writers to ALWAYS start with this hero in every page, and I don’t want them to be able to add it anywhere else in the content, I would go with a tab instead of a slice.
  • A third option for a lot of different heros which should only be used on top of the page, there’s the ability to create a new tab with hero slices only. But that would be overkill in most cases I believe.

Generally speaking, I think it’s good practice in most cases to be able to have any slice as a hero. But I think that a “as hero” variation on each slice would be very overkill. I’d rather have a rich text for the title limited to h1 or h2 and try to enforce a strong policy among content writers to use the h1 if the slice is on top. Stuff like metadata and such global settings for a page would in my case always live in a separate tab, not in the hero slice/tab.

Hard to say really, there’s no right and wrong. Very design dependant IMO. :slight_smile:


Thanks for sharing perspective, Sam! My bias is to give our content team only the essential controls they need and bake SEO and analytics best practices into the code rather than relying on a growing content team to know things like "only the primary heading gets <H1> styling" and "label the hero CTA with the following event tracking properties so that we know how the hero is performing across our site."

Assuming a setup where not every slice should be used as a hero, there's something appealing about explicitly labeling a slice (or slices) as a hero so that it's obvious which can be used at the top vs. which can't, but maybe I'm other-thinking it. :upside_down_face:

No problem at all, this stuff is interesting! :smile:
Well in that case, if you need specific tracking setup on the hero buttons, and a lot of other hero specific setup and at the same time want some of your slices to be able to be used as hero. Then I think your solution sounds great!

1 Like

Thanks again, Samuel! I appreciate your perspective as we think about refactoring our slice library. I really enjoy hearing the Prismic perspective on advisable vs. unadvisable approaches. I suspect that more of your customers would appreciate "best practice" content—whether it be delivered via meetup, blog, help article, etc. More wisdom in more places, please! But thank you as well for sharing your wisdom here :slight_smile: