# Component

Learn how to organize your content into components.

Components are building blocks that you can combine in different ways to create different pages or sections.

For example, a **Hero section** component might contain a headline, an image, and a call-to-action button, which might be a separate component.

![Component](/assets/explanation/component/overview.png)

You can mix and match components to define different content shapes — just like Lego pieces that can be combined in countless ways to create unique structures.

## Types

There are two types of components you can choose from, depending on your needs:

- **Regular component**\
  Simple elements with a fixed structure and a fixed set of attributes.
- **Union component**\
  Elements with variations, combining multiple regular components into one.

> **Question: When should I use one over the other?**
>
> Suppose you want to display a banner in the middle of your blog posts.
>
> If you need a simple, static banner, that is the same across all posts, a regular component is the way to go:
>
> ![Regular component](/assets/explanation/component/regular-component.png)
>
> However, if you need more flexibility to accommodate different types of content, a union component is a better option:
>
> ![Union component](/assets/explanation/component/union-component.png)
>
> In the example above, we combined three regular components — a text banner, an image banner, and a form banner — into a single union component. This way, you can choose the variation that works best for a particular post or experience.

## Schema

Once you have determined the type of component you need, the next step is to define its structure, or *schema*.

For regular components, it is a matter of defining the attributes that make up its structure. For union components, this means selecting the components you want to combine.

You can define a schema using the visual interface or uploading a [schema file](/reference/content/schema/introduction). The interface allows you to easily configure attributes in a few clicks, while the JSON file is perfect for those who prefer to work with code.

## Attributes

Attributes are like placeholders in a template. They allow you to easily enter different types of information while maintaining a consistent structure across content.

> **Question: What attribute types are available?**
>
> There are five primary attribute types to choose from:
>
> - **Text**\
>   Textual values like titles, descriptions, and paragraphs.
> - **Boolean**\
>   True or false values — ideal for yes/no or on/off options.
> - **Number**\
>   Numeric values such as prices, quantities, and percentages.
> - **List**\
>   Collections of items such as lists of tags, images, or products. The items can be of any attribute type, including nested lists or structures.
> - **Structure**\
>   A group of related attributes, such as a product description with a title, description, price, and image.
>
> Besides the primary attribute types listed above, there are also specialized types for specific purposes:
>
> - **Component**\
>   A reference to another component.
> - **Enumeration**\
>   A predefined list of options or choices.
> - **URL**\
>   A URL to a web page or resource.
> - **File**\
>   A URL to an uploaded file, such as an image, video, or document.
> - **Color**\
>   A hexadecimal color representation.
>
> For more details on each attribute type, see the [Schema reference](/reference/content/schema/introduction).

Attributes can also include validation rules and user interface customization options. For example, you can specify if they are required or optional, set a maximum length for a text, or a minimum value for a number. You can even control the order in which they appear in the content editor for a more intuitive editing experience.

## Versioning

As your application evolves, you may need to change your components. For example, you may want to add an attribute or change an existing one.

To avoid this problem, we have built a versioning system that allows you to seamlessly update your components without breaking your application.

This is a high-level overview of how it works:

1. You modify the component schema to make the desired changes.

2. We create a new version with the updated schema and keep the old version untouched.

3. While you adjust the content of affected slots or experiences, we continue to serve the old version to your application.

To assist you with the last step, we indicate the exact slots that require your review whenever you make a breaking change:

![Slot impact alert](/assets/explanation/component/slot-impact-alert.png)

To learn more about how to update your slots, see [Slot versioning](/explanation/slot#versioning).

## Constraints

We enforce some limits on content schemas to ensure that components remain performant and manageable as your content model evolves.

A visual indicator in the component editor shows you how close your component is to reaching these limits:

![Complexity indicator](/assets/explanation/component/complexity-indicator.png)

For more information about the limits that apply to components, see the [constraints](/reference/content/schema/introduction#constraints) section in the [Schema reference](/reference/content/schema/introduction).

## Explore

- [Best practices](/immersion/guides/designing-components/best-practices): Learn the best practices for designing components.
- [Schema reference](/reference/content/schema/introduction): Learn more about how to define content schemas declaratively.