What is a Component?

A component is a standalone entity that is meaningful on its own. While components/bloks can be nested in each other, semantically they remain equal. They are the small pieces 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 needed.

There are two approaches you can follow while creating new components - most of the time a mix of both is what your customers will need - some more static/drop-in and some more flexible components.

Stay Big

This first approach should be used if your content creators should follow strict guidelines or you have some bigger components which can be reused and filled with content without thinking about the layout. For example, we can think about a big fullscreen image with some text in the center of it, let’s name it a hero for simplicity.

We would create following components:

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

What are the benefits? 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” - there is a simple 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, 2 columns and some text in each column. This 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 then your designer made at the beginning.

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? If they decide that a 2 column layout isn’t that good they can simply add a 3rd 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

Documentation