Columns/Grids with slices

[teddy (Teddy Stanowski)]

Hey everyone, is it possible to create grids or columns with the slices? for example, i have a component that would have an image on the right, and some text and a link on the left

===============================
{ img} | Column Title
| { block of text}
| {link}
|

[Levi (Levi Gable)]

Hi @teddy,

What I would recommend is creating a Slice specifically for this type of page element. In fact, this exact case is covered in one of our Content Modeling guides which you can check out here:

How to create a content model for a typical landing page

Take a look and let us know if you have any other questions about this.

[wonderbly_dev (Wonderbly Engineering)]

Hey @teddy,

I have actually built a sort of “grid system” in our repo. I built it using four slices; a row start and end and a column start and end.

Here is the code for the slices:

"row_start" : {
  "type" : "Slice",
  "fieldset" : "Row Start",
  "description" : "Start a row for multi-column layout",
  "icon" : "arrow_downward",
  "display" : "list",
  "non-repeat" : {
    "width" : {
      "type" : "Select",
      "config" : {
        "options" : [ "full", "guttered" ],
        "default_value" : "full",
        "label" : "Container width"
      }
    },
    "alignment" : {
      "type" : "Select",
      "config" : {
        "options" : [ "left to right", "right to left" ],
        "default_value" : "left to right",
        "label" : "Alignment"
      }
    },
    "gutter" : {
      "type" : "Select",
      "config" : {
        "options" : [ "10px", "20px", "30px", "40px", "50px" ],
        "default_value" : "10px",
        "label" : "Column gutter"
      }
    }
  },
  "repeat" : { }
},
"row_end" : {
  "type" : "Slice",
  "fieldset" : "Row End",
  "description" : "End row of multi-column layout",
  "icon" : "arrow_upward",
  "display" : "list",
  "non-repeat" : { },
  "repeat" : { }
},
"column_start" : {
  "type" : "Slice",
  "fieldset" : "Column Start",
  "description" : "Start a column for multi-column layout",
  "icon" : "arrow_forward",
  "display" : "list",
  "non-repeat" : {
    "width" : {
      "type" : "Select",
      "config" : {
        "options" : [ "auto", "50%", "30%" ],
        "default_value" : "auto",
        "label" : "Column width"
      }
    }
  },
  "repeat" : { }
},
"column_end" : {
  "type" : "Slice",
  "fieldset" : "Column End",
  "description" : "End column of multi-column layout",
  "icon" : "arrow_back",
  "display" : "list",
  "non-repeat" : { },
  "repeat" : { }
}

We use this slice in Prismic like so:

row_start
  column_start
    slice_1
    slice_2
  column_end
  column_start
    slice_3
  column_end
row_end  

We then format the data that gets returned from Prismic to return as such:

body: [{
  type: 'group',
  primary: {
    alignment: '...',
    width: '...',
    gutter: '...',
  },
  items: [
    {
      type: 'column',
      primary: {
        width: '...',
      },
      items: [...]
    },
    {
      type: 'column',
      primary: {
        width: '...',
      },
      items: [...]
    }
  ]
}]

In our codebase we have made rules such as a row_start must be followed by a column_start and you must use a column_end before using a row_end.

However we are thinking about moving away from this idea of a grid system using slices in favour of specific layout; something like what you see in the images below:

Hope this helps, feel free to reply to this if you have any questions and I will try to get back to you

Edwin