Prismic Slices

Aug 21, 2020 4 min read

Web Development

Software Tool

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

Prismic Slices

Meta Information Slice

Use this slice to show a meta info of any URL. You can obtain all the below information using https://www.heymeta.com/

Prismic UI - Input

Meta Information Slice

Output

Gatsby Prismic Blog Starter | Home

A blog starter template developed using Gatsby and Prismic.

https://gatsby-prismic-blog-starter.vercel.app

Code Slice

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

SHELL
npm install -g gatsby-cli
# create a new Gatsby site using this starter
gatsby new <name> https://github.com/iamsainikhil/gatsby-prismic-blog-starter

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.

SHELL
# 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.

Heading1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

paragraph

Bold Text

Italic Text

Link - https://gatsby-prismic-blog-starter.vercel.app

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

Image Slice - Gallery

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

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

Demo

Sai Nikhil

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