# Model tab content type

**URL:** <https://community.prismic.io/t/model-tab-content-type/6388>\
**Category:** Prismic for Content Creators\
**Created:** [July 25, 2021, 3:15pm UTC](https://community.prismic.io/t/model-tab-content-type/6388 "2021-07-25T15:15:16Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![rinkusamanta12](https://avatars.discourse-cdn.com/v4/letter/r/22d042/32.png) [@rinkusamanta12](https://community.prismic.io/u/rinkusamanta12)\
**Post date:** [July 25, 2021, 3:15pm UTC](https://community.prismic.io/t/model-tab-content-type/6388/1 "2021-07-25T15:15:16Z")

</div>

I have three tab with title, detail, how-to and resources. Each tab has some content in certain format.  
Detail section tab design

 ![image](https://europe1.discourse-cdn.com/flex013/uploads/prismic/original/2X/5/538721c2dd82a890b26d273ebccbed77e3d1fa75.png)

How to Tab

 ![image](https://europe1.discourse-cdn.com/flex013/uploads/prismic/original/2X/1/106a28d1eaecb7d890430f6be704c340eefa3ea5.png)

Resource

 ![image](https://europe1.discourse-cdn.com/flex013/uploads/prismic/original/2X/8/88692d6eafb42156c256bcc9827a57d86401f0b6.png)

How do I create this content-type and achive the grid layout.

---

<div class="post-metadata">

**Author:** ![Pau](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/pau/32/5422_2.png) [@Pau](https://community.prismic.io/u/Pau)\
**Post date:** [July 26, 2021, 7:59pm UTC](https://community.prismic.io/t/model-tab-content-type/6388/2 "2021-07-26T19:59:00Z")

</div>

hey @rinkusamanta12 thanks for reaching out

There are many ways of resolving the [content modeling](https://prismic.io/docs/core-concepts/content-modeling) of your Custom Types. I imagine that this is a section inside your site.

I'm thinking you could use a Slice for the entire section. In the non-repeatable zone, it can have an Image field for the icon and a Key Text field for the name of each section. Then in the repeatable zone a Title field and a Rich Text field so you can add as many elements inside each section as you need.

> **[What Is a Slice?](https://prismic.io/docs/core-concepts/slices)**
>
> Learn what Slices are and how you can use them to enrich the content modeling process.

---

<div class="post-metadata">

**Author:** ![Phil](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/phil/32/14_2.png) [@Phil](https://community.prismic.io/u/Phil)\
**Post date:** [July 27, 2021, 9:30am UTC](https://community.prismic.io/t/model-tab-content-type/6388/4 "2021-07-27T09:30:54Z")

</div>

Yeah, this is a tricky one because if you put this all in the same Slice then you can't specify the different 2 and 3 columns for the text section.

My initial thought is like @Pau said to have a Slice, but I would put everything in the repeatable zone, but add a drop-down to specify the amount of columns needed for your rich text field so:

```auto
[icon]
[label]
[columns dropdown]
[text field]

```

The only problem with this structure is you can't dictate what text will start your column as you'll be using the CSS column count property:  
[https://www.w3schools.com/cssref/css3\_pr\_column-count.asp](https://www.w3schools.com/cssref/css3_pr_column-count.asp)

---

<div class="post-metadata">

**Author:** ![Pau](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/pau/32/5422_2.png) [@Pau](https://community.prismic.io/u/Pau)\
**Post date:** [August 3, 2021, 6:07pm UTC](https://community.prismic.io/t/model-tab-content-type/6388/5 "2021-08-03T18:07:11Z")

</div>

This thread has been closed due to inactivity. [Flag to reopen](https://community.prismic.io/t/re-open-a-thread/2175).

---

<div class="post-metadata">

**Author:** ![system](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/system/32/1746_2.png) [@system](https://community.prismic.io/u/system)\
**Post date:** [December 9, 2021, 12:20pm UTC](https://community.prismic.io/t/model-tab-content-type/6388/6 "2021-12-09T12:20:01Z")

</div>


