What is a Component?

A component is a standalone entity that is meaningful in its own right. While components (or bloks) can be nested in each other, semantically they remain equal. Each component is a small piece of your data structure which can be filled with content or nested by your content editor. One component can consist of as many field types as required.

There are two approaches you can follow when creating new components. Most of the time, a mix of both is what your customers will demand. The first approach is to produce more static components, while the second approach entails more flexible, dynamic components.

Stay Big

This first approach should be used if you want your content creators to follow strict guidelines, or if you have some bigger components which can be reused and filled with content without thinking about the layout. For example, a large, full-screen hero image with some text in the centre of it.

To create that hero image, we would create the following components:

  • hero (with an image field for uploading and a text field for the centered text)

What are the benefits of this approach? Your content creator doesn’t need to think about, “how can I create a section with a background image and a vertical and centered headline”, because there’s already a pre-built component for it. You can see this approach in action in our quick start.

Be Small

Let’s say we want to create a simple layout with one grid, two columns and some text in each column. This component should be used if you know that your content creators have an eye for design and spacings. Why? Because they will be able to create a completely different website to the one your front-end designer initially made.

We would create following components:

  • grid (with a components field for nesting)
  • column (with a components field for nesting)
  • headline (with a text field for the actual text)

What are the benefits of this approach? If developers decide that a two column layout isn’t best, they can simply add a third column to the grid and (if your code covers that) your column would use 1/3 instead of 1/2 of the grid width. You can see this approach in action also with our quick start.

Your component overview

Own components overview in storyblok