Hello Pirate, documentation ahoy.

This page will display how all the slices should be used and what they will look like when they are rendered on the page. Please use this as a reference when creating new pages using Prismic.

Each slice is displayed and a description of how to use the field appears below it.


Slice Types

There are two main types of slice:

HERO SLICES

These slices should typically be used at the very top of pages as header/hero content. Most of them provide a way of introducing the content on the page and take a title, description and background image. Some accept a CTA for linking to the goal of that page.

BASIC SLICES

These slices may be used in various places - they are listed here alphabetically. Use CMD+F /CTRL + F to find them easily. If the slice you're interested in using is not in this list, contact Issy or Ieuan as it may be deprecated


HERO SLICE

Full Screen Call To Action

The Full Screen Call To Action slice is the most common hero element used throughout the website, it requires a Title and background image, and accepts a footnote and CTA.

  • Call : The large title displayed on top of the hero image. Usually the page title.
  • Background image landscape : The background image. Must be at least 1920px wide. (1920 x 1080 recommended). Alt text should be provided for accessibility (just describe the image).
  • Optional: Footnote : The description under the title.
  • Button text : The text that will appear on the button. This button will bring up the booking module if a CTA Link field is not set (see below).
  • Optional: Darken Images by % : Adds a dark opacity overlay of the required intensity to the image.
  • Optional: CTA Link : When set, the button will link to this instead of bringing up the booking module.

Title

HERO SLICE

Full Width Tagline

The Full Width Tagline slice could be used as a hero component on less important pages (if okayed by the design team). A version of this is used on the document pages (impressum, t's and c's, privacy policy etc).

  • Title : The large title displayed on top of the image. Usually the page title.
  • Background image : The background image. Must be at least 1920px wide. Alt text should be provided for accessibility (just describe the image).
  • Optional: Darken Image % : Adds a dark opacity overlay of the required intensity to the image.
BASIC SLICE

Also Available

The Also Available slice is typically used to list other studio types that are available at a site. However, it's flexible image card layout could be used elsewhere too.

  • Title : The large title displayed above the image cards.

Repeatable section - individual image cards:

  • Image : The card image. Constrained to 500 x 500px. Alt text should be provided for accessibility (just describe the image).
  • Title : The heading for the individual card.
  • Description : The main text body of the card.
  • Link destination : The entire card acts as a link - set the destination here. Should be an internal Document link or an external Web link.

Title

Here you can add a description.

BASIC SLICE

Equipment

The Equipment slice is used to display the brand icons for equipment used in the room.

  • Title : The large title displayed at the top of the slice.
  • Description : Some text underneath the title.

Repeatable section - equipment logos:

  • Equipment logo : The logo image. Constrained to 100 x 100px. Alt text should be provided for accessibility (just describe the logo). Must be a black logo on a white background (NOT transparent).

Title

You should add a description here.

  • Facility
    Some additional details
  • Free cake
    It's yummy.
  • With no details provided
  • Another facility
    Some deets.
BASIC SLICE

Facilities

The Facilities slice is used to describe the facilities available in a room. It consists of a simple bullet list with unique styling.

  • Title : The large title displayed at the top of the slice.
  • Description : Some text underneath the title.

Repeatable section - facility list:

  • Facility : Describe the facility in a few words. This looks best when kept short and sweet.
  • Optional: Details : Add another line beneath the facility to describe it further.

Title

BASIC SLICE

Freshchat Call To Action

The Freshchat Call To Action slice is used to display a link to the Freshchat chat.

  • Call : A title/ call to action.
  • Button Text : The text on the call to action button.

Live-Proberaum in Berlin Tempelhof - 24/7 geöffnet

Title

This is the description field.

It is a rich text field so you can use bold and italic text.

  • You can also have bullet points
  • How nice!
Optional more info link
NEW

Optional announcement description. And the CTA...

BASIC SLICE

Image Rich Text

The Image Rich Text slice is one of the most used slices. It displays an image next to a rich text block and the side that contains the image can be flipped to create an alternating pattern where more than one of these slices are used next to each other.

  • Image : The image that will appear on one side of the slice. Must be at least 700px wide.
  • Desktop image position : Select from left or right.
  • Title : The title for the rich text content.
  • Description : The main body of rich text content. Be aware that this slice can look strange if too much or little text is used. Always preview to check.
  • Optional: More Information Link : Adds a CTA link. Must also fill out Link Text if this field is used.
  • Optional: Link text : Adds a CTA link. Must also use More Information Link if this field is used.
  • Optional: Announcement description : A small announcement will appear at the bottom of the rich text. Relates to the other two announcement fields.
  • Optional: Announcement CTA : Adds a bold CTA to the announcement. Must be used with Announcement Link.
  • Optional: Announcement Link : Adds a link to the announcement. Must be used with Announcement CTA.

Title

This is where the address goes. You can use multiple lines. To format it correctly.

Contact number here 0395 503 503

Directions
BASIC SLICE

Location

The Location slice is used to display contact details and a map location for a studio.

  • Title : The title for the slice - usually something like 'Finding Us'.
  • Address : The address of the studio. This is Rich Text so you can put in line breaks to format the address correctly.
  • Contact number : The contact number for the studio.
  • Coordinates : The coordinates of the studio. You can also find it on google maps and copy the google maps url into this field - the coords will be automatically calculated.
  • Directions link : Use a web link here to link to the google map directions (from a user's location).

BASIC SLICE

Location Contact

The Location Contact slice is used on the contact page to display contact information for different countries.

Repeatable section - country list:

  • Country icon : Upload an image of the country outline.
  • Country abbreviation : Must be UK, USA or DE.
  • Email : The email address for this country.
  • Phone number : The phone number for this country.

Pirate is excellent.5
"Pirate is excellent."
BASIC SLICE

Reviews

The Reviews slice is used to display a number of testimonials in a carousel.

  • Optional: Review target : This is not currently displayed but may be used as a title above the slice in future designs.

Repeatable section - reviews:

  • Review text : The testimonial itself. You do not need to put speech marks around this text.
  • Review stars : The number of stars (maximum of 5).
  • Source : The name of the reviewer. This is a rich text block. The reviewer name should be on the first line in 'Heading 6' format. To specify a company or further details about the reviewer use a new line underneath with 'Normal text' format.

This is the content section. I have used two columns and text align is set to center. I have used some filler text to demonstrate how the columns work.

Doggo ipsum woofer. Heckin smol borking doggo with a long snoot for pats pupper fluffer borkf, borkdrive woofer. H*ck the neighborhood pupper smol he made many woofs noodle horse, many pats tungg long water shoob. Super chub long woofer vvv very jealous pupper, pupperino wow very biscit. Doing me a frighten the neighborhood pupper borking doggo you are doing me the shock doggo shoober, borkdrive long doggo doggorino many pats. stop it fren. Long woofer tungg puggorino doing me a frighten porgo, long woofer snoot heckin, shoober puggo wow such tempt. He made many woofs smol borking doggo with a long snoot for pats very taste wow very hand that feed shibe ur givin me a spook I am bekom fat porgo, what a nice floof pupperino super chub borkdrive. Shoober wow very biscit floofs wow very biscit, extremely cuuuuuute. Big ol borkdrive dat tungg tho aqua doggo, dat tungg tho.

Long woofer extremely cuuuuuute wow such tempt shoober big ol pupper thicc, maximum borkdrive you are doing me the shock wow very biscit much ruin diet. Corgo long water shoob borking doggo long bois noodle horse super chub, ur givin me a spook waggy wags shoober ur givin me a spook. Bork shoob smol borking doggo with a long snoot for pats stop it fren shooberino, shoober heckin tungg. You are doing me the shock much ruin diet ur givin me a spook big ol doggo heckin good boys, you are doin me a concern big ol pupper many pats. Shooberino aqua doggo wow very biscit smol doing me a frighten shoober, heckin angery woofer you are doing me a frighten extremely cuuuuuute smol borking doggo with a long snoot for pats. Lotsa pats you are doing me a frighten wow very biscit super chub much ruin diet, the neighborhood pupper borkf woofer. Big ol very taste wow most angery pupper I have ever seen long water shoob much ruin diet, fluffer lotsa pats long water shoob. Shooberino what a nice floof doggo tungg, doing me a frighten.

Optional CTA link
BASIC SLICE

Rich Text Block

The Rich Text Block slice is the most flexible text slice. It is a rich text slice with lots of formatting options. You may need to use the Spacer slice above/below this slice to get the spacing correct.

  • Columns : You can specify the number of columns that your text will display in. Multiple columns works best if you have a long body of text.
  • Text align : Choose to align all of the text either centred or to the left.
  • Content : This is the rich text field where you can enter your text content.
  • Optional: CTA text : Adds a CTA link below the rich text field. Must be used with the CTA link field below.
  • Optional: CTA link : Select a web or document link. Must be used with the CTA text field above.

Title

This is where the rich text content can be added. It is similar to the Image Rich Text slice except without an image.

  • Here are some bullet points.
  • Lovely jubbly.
BASIC SLICE

Rich Text With Title

The Rich Text With Title slice provides a rich text section with a large title above.

  • Title : The title above the rich text section.
  • Content : The rich text section.

BASIC SLICE

Social Media

The Social Media slice auto fills with all the social icons and links.

  • Title : The title above the social media icons.

Title

Here is a description describing the video.

BASIC SLICE

Video Large Rich Text

The Video Large Rich Text slice displays a large full-width video with some text underneath.

  • Section title : The title above the video.
  • Description : This description will appear underneath the video.
  • Video url : Copy/paste a youtube video url into this field as a web link.
  • More info link : Select a web or document link to appear as a button below the description.
  • Link text : This is the text for the link button.

Here is some rich text.

  • This component allows the use of rich text, so you can do things like a bullet point list
  • 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.
Link text
BASIC SLICE

Video Rich Text

The Video Rich Text slice is very similar to the Image Rich Text slice. It displays a video next to a rich text block and the side that contains the video can be flipped to create an alternating pattern where more than one of these slices are used next to each other.

  • Desktop image position : Select from left or right.
  • Title : The title for the rich text content.
  • Description : The main body of rich text content. Be aware that this slice can look strange if too much or little text is used. Always preview to check.
  • Video url : Copy/paste a youtube video url into this field as a web link.
  • Optional: More Information Link : Adds a CTA link. Must also fill out Link Text if this field is used.
  • Optional: Link text : Adds a CTA link. Must also use More Information Link if this field is used.

Frequently Asked Questions

Question title


Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Question title 2


Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Question title 3


Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Question title 4


Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Question title 5


Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Question title 6


Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Question title 7


Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Question title 8


Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

BASIC SLICE

Frequently Asked Questions

The Frequently Asked Questions slice can be used to display a number of FAQ cards that can be opened to reveal the answer content.

  • FAQ Title : The title for the block, this will be displayed above the FAQ cards
  • Repeatable zone: A repeatable section for adding as many FAQ cards as required, these accept a Question Title and a Question Answer

Shopify buy Button

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.