Prismic Slices

Aug 21, 2020 4 min read

Share Prismic Slices article on different platforms.



This article demonstrates the different types of Prismic Slices used in this blog.

Prismic Slices

Prismic Slices

Meta Information Slice

Use this slice to show a meta info of any URL. You can obtain all the below information using

Prismic UI - Input

Meta Information Slice

Meta Information Slice


Gatsby Prismic Blog Starter | Home

A blog starter template developed using Gatsby and Prismic.
Gatsby Prismic Blog Starter

Code Slice

Use this slice to show any code block in the article.

npm install -g gatsby-cli
# create a new Gatsby site using this starter
gatsby new <name>

Show code blocks like in an ordered or unordered list with more margin left by setting the type property in code slice as list. For all other types, code blocks have normal margin left.

# Go to project directory
cd <name>
# start the application
npm run start

Embed Slice

Use this slice to embed any platform content like YouTube, Vimeo, GitHub Gist, CodeSandbox, CodePen, etc.

Prismic | Data Modelling — Create your Custom Types and Slices | YouTube

Content Slice - Rich Text

Rich WYSIWYG editor content which is consumed in the UI as the HTML.


Heading 2

Heading 3

Heading 4

Heading 5
Heading 6


Bold Text

Italic Text

Link -

  1. Ordered list Item
  • Unordered list item

Note: enclose any inline code using codespan label in Rich Text slice to apply styling of inline code like this.

Content Slice - Quote

Use this slice to have any blockquote content in the article just like this one!

Alert Slice

Alert Type - Info

Alert Type - Success

Alert Type - Warning

Alert Type - Danger

Image Slice - Banner

Use this slice to show a single image with caption.

Gist of Prismic Slices used in this Blog

Gist of Prismic Slices used in this Blog

Image Slice - Gallery

Use this slice to have many images grouped together to be shown in a gallery view.

The perfect vacation

View Gallery

That's it for the visual demo of the slices in action! These are the slices used in this blog starter and a number of new slices can be created based on the content in Prismic.

For more info regarding setting up the Prismic data, check here.

This article was last updated on Aug 22, 2020


ShareShare this article on different platforms.

Sai Nikhil - Photo

Sai Nikhil

A passionate developer who brings creative ideas from areas, including networking and data storage, security, UI/UX design, and progressive web applications.

Related Articles

GitHub Gist & CodeSandbox

Embed GitHub Gist & CodeSandbox

This article demonstrates how to embed Github Gist and CodeSandbox using Em... Read Full Article


Aug 22, 2020| 2 min read

Weather React Application UI

Build a Weather Application Using React

This weather application provides current and 24 hour 7-day weather forecas... Read Full Article

Aug 11, 2020| 10 min read