Often, simply by tweaking a few of the field values for a component, we can achieve significantly different looks. For example:

  1. The general-purpose PageLayout component can be made to look like a homepage, an about page, a contact page, or a careers page - all via filling it with content.
  2. As we've seen earlier in this guide, the HeroSection component can have various visual arrangements: with or without an image, with an embedded form, and so on.

The component itself, however, does not hold a list of predefined presets setting the appropriate field values for each of these looks. Neither does the model definition, which should hold only concise schema metadata (though it can define a single default value per field).

Rather, there's a dedicated folder in your project to define and continually improve the presets for all relevant models. Each of our base themes comes with its own set of presets which is appropriate for the topic of that theme. You can then extend or modify them at will.

When a content editor adds a new page or any component for which presets are defined, they get a list of available presets - which can have even a thumbnail for each:

Presets when adding sections

To learn more, see Content Presets and How Themes Work.

Next up, the final chapter in this guide: Registering Components