I was recently scrolling on Apple's website and I saw the structure of this page Mac Neo and it was quite interesting. I was asking myself how to achieve this with slice and prismic but couldn't wrap my head around it. Cause the spacing changes, and when I inspected the page I saw wrapping sections stuffed with what I would naturally modeled as slices. It then looked like giant slices, but since Prismic doesn't allow nesting slices, how can this modeled inside prismic ?
Is it adding a spacing field to slices with values like "none", "small", "medium", "large"? And if yes, how do they make them all fit inside one section and still be able to control the spacing between the divs inside that section ? and between the sections ?
In this image all of that fits into one section. Considering that making giant slice set us for complex/unusable content management, how to do this properly ?
There isn’t really one “correct” way to model a page like this in Prismic. It depends on how much flexibility you want to give editors versus how much structure you want to keep in the code.
For something like this, I’d usually avoid trying to reproduce the DOM structure exactly in Prismic. Instead, break the page into reusable Slices based on the content/editor experience, then handle things like section wrappers, spacing, and layout in your frontend. A spacing option like none / small / medium / large can work well when editors genuinely need that control.
Since this gets very implementation-specific, I’d recommend creating a small test repository and experimenting with a few Slice models first. Our Slice Machine tutorials are also a good place to get familiar with how Slices, variations, and components fit together before tackling a more complex layout like this.
Thanks for your answer, I actually understand better how slices work and how to identify them with variations with articles from you guys. I wanted to understand how more advanced layouts are modeled in Prismic as I go deeper into using slices. So I know it would be somehow opiniated but could you expand more on how you would tackle this especially on grouping slices into one tag?
My workaround would be adding a boolean to slices, something like group which would either group continuous slices together under the same section or start a new section (handling that on the frontend). Each slice would then have a spacing field with fixed set of values like small | medium | none | large for visual hierarchy.
I understand it's one solution among others but I wanted to get a review on that.
Honestly, you can use slices however works best for you, name and organize them around what they represent on the page (a header, a footer, a nav menu, a button, whatever role it plays), as long as it makes sense in terms of your site's structure. There's no required taxonomy to follow here; it doesn't need to mirror the DOM, it needs to match how your team thinks about the page's sections.
And yes, a boolean field that lets an editor choose something like left or right (or your group idea, to say "this continues the previous section" vs. "start a new one") is a perfectly normal approach. Prismic just stores that value, it doesn't interpret it. Turning that boolean (or your spacing options) into actual layout and positioning is something you handle on the front end, in your slice component, by reading the field and applying the right styling or structure based on it.
So your instinct is right: model the decisions editors need to make as plain fields (group boundary, spacing, alignment), and keep the actual layout logic in your templates.
