What Is a Slice?

On this page, you'll learn what Slices are and how you can use them to enrich the content modeling process.


Prismic Slices are sections of your website. Prismic documents contain a dynamic "Slice Zone" that allows content creators to add, edit, and rearrange Slices to compose dynamic layouts for any page design, such as blog posts, landing pages, case studies, and tutorials.

Slices are dynamic website sections

A Slice has three parts:

  • A Slice Model, which is a JSON data model saved in Prismic.
  • Slice Content, which is the content for an instance of a Slice.
  • A Slice Template, which is a component in your project codebase.

Your Slice Model defines the shape of the Slice content. Content creators can create an instance of a Slice and fill it with Slice Content. Then your developer can create a Slice Template in the code, which will render the Slice Content.

These three parts — Model, Content, and Template — form a marriage between the CMS and your website, allowing editors to create and rearrange Slices (website sections) freely without breaking the web app.

Your Slices are managed inside Slice Zones.

What is the Slice Zone?

When building your content models, you'll find that the concept of the Slice Zone pops up a lot. It is where Slices live. You can find it in four places:

In the Custom Type editor

When building your Custom Types, the Slice Zone is where you create, edit, and manage all of the Slice models.

Screenshot of a handful of Slices in the Custom Type builder

In the document editor

When editing a document, the Slice Zone gives authors the freedom to add and rearrange Slices.

Screenshot of a handful of Slices in the document editor

In the API response

In the API response, a documents' Slice Zone can be found in the body property.

Note: Other names for the Slice Zone property

Most documents have one Slice Zone, stored in the body property. However, you can change the name of this property in your Custom Type. And, if you add additional Slice Zones to a Custom Type, they will be named body1, body2, etc.

For example, for a Custom Type with the API ID of page you can access the Slice Zone in the data.body array of objects which lists all the Slices in the document. Here's a full example of this:

Copy
{
  "id":"XxnD3REAACYAk_CJ",
  "uid":"unique_value",
  "type":"page",
  "href":"https://your-repo-name.cdn.prismic.io/api/v1/documen8document.id%2C+%22XxnD3REAACYAk_CJ%22%29+%5D%5D",
  "tags":["…"],
  "first_publication_date":"2020-07-23T17:07:43+0000",
  "last_publication_date":"2021-04-21T18:31:50+0000",
  "slugs":["…"],
  "linked_documents":["…"],
  "lang":"en",
  "alternate_languages":["…"],
  "data":{
    "body":[
      {
        "slice_type":"image_gallery",
        "slice_label":null,
        "items":["…"],
        "primary":["…"]
      }
    ]
  }
}

In your project code

When handling the Slices from the API response of your repository, a SliceZone is a component that renders Slices using a conditional (such as a switch in JavaScript) inside of a loop (such as a forEach in JavaScript).

The syntax of these loop cycles varies between technologies, and there are Slice Zone packages available for some technologies. Learn how to create a Slice Zone with your favorite technology.

Slices configuration

The first step is to enable the Slice Zone in your newly created Custom Type. Click the switch button, and the Add a slice button will appear.

Screenshot of an empty Slice Zone in the Custom Type builder

The visual builder

To create a Slice, click on Add a slice. You'll be prompted with a new configuration window. You'll see the options to set the Slice name and description.

Next, select an icon to represent the Slice visually. Then, pick either List or Grid to define how items should appear in the repeatable section. Finally, in Slice labels, you can add optional labels that editors can select to classify Slices.

Screenshot of the Slices editor.

JSON model

The Slice Zone is the object with all the Slices in a Custom Type. The following table displays the JSON configuration options for the Slice Zone available in the JSON editor.

body

object

Object to setup the Slice Zone

body.type

sting (required)

Value must be Slices

body.config

object

Configuration object for the Slice Zone

body.config.labels

object

The label options for each Slice

body.config.labels.[sliceID]

array

Key that matches a Slice's API ID

body.config.labels.[sliceID].name

string

Defines the tag that will be displayed in the API response object for this Slice

body.config.labels.[sliceID].display

string

Defines the display name for the tag in the document editor

body.config.choices

object

An object containing nested objects for each Slice

The following table displays the JSON configuration options available in the JSON editor for each Slice inside the Slice Zone. All Slices are located inside body.config.choices.

[sliceID]

string

Key that matches a Slice's API ID

[sliceID].type

string (required)

The value must be Slice

[sliceID].fieldset

string

The display name for the Slice in the document editor

[sliceID].description

string

The display description for the Slice in the document editor

[sliceID].icon

string

The icon of the Slice displayed in the document editor

[sliceID].non-repeat

object

The fields added to the Non-repeatable zone of a Slice

[sliceID].repeat

object

The fields added to the Repeatable zone of a Slice

API response example

Here is an API response example of a Slice Zone with three Slices: author, quote and content, each one with Key Text fields:

Copy
// API response example of a Slice Zone

{
  // ...
  "body":[
    {
      "slice_type":"author",
      "slice_label":null,
      "items":[
        {
          "author_name":"Victoria Doe"
        }
      ],
      "primary":{"…"}
    },
    {
      "slice_type":"quote",
      "slice_label":null,
      "items":["…"],
      "primary":{
        "quote_text":"consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
      }
    },
    {
      "slice_type":"content",
      "slice_label":null,
      "items":["…"],
      "primary":{
        "content_text":"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem."
      }
    }
  ]
}

Was this article helpful?
Not really
Yes, Thanks

Can't find what you're looking for? Get in touch with us on our Community Forum.