Alternating section colors with slices?

Developing with Prismic
1

I'm building a site that has a somewhat unusual design between sections. How I could possibly do something like this with slices. My main concern is that I don't want to 'lock' certain slices to a specific background color.

For example: the last section in the screenshot shows a photo gallery on a tan-ish background color. What if the content editor wanted it above the section above it? If I locked the color to the slice, the header would be tan and the photo gallery would be tan.

Maybe I'm just not Prismic-savvy enough to know all of my options so this might be a dumb question.

Is it normal to make slice variations just have different colors? That way the user could just choose either white or tan.

Any thoughts?

Screenshot 2023-11-16 at 9.20.54 AM
Screenshot 2023-11-16 at 9.20.54 AM816×1622 23.7 KB

2

Hello @traek.wells, and welcome to Prismic forums. I'm nobody special here, just another Prisimic enthusiast.

One of the properties that's available to you in your slice is 'index.' You can use this value to help you style your slices.

const Hero = ({ slice, index }: HeroProps): JSX.Element => {
  return (
    <>
        // your jsx here
    </>
  )
}

Use the index value (perhaps even vs odd) to conditionally apply classes. That's my initial first guess as to how to achieve what you're looking for.

Would you be using Tailwind by chance?

Thoughts?

1 Like
3

Hey Traek,

I created a small lesson about applying style variations as part of a bigger set of Prismic lessons. You can check it out here:

4

@nf_mastroianni That's an interesting solution. I'll try that out and see how it goes. Thanks!

1 Like
5

Awesome, I'll watch it and see if I can apply some concepts to my project. Thanks!

1 Like