Skip to main content
Components are reusable blocks—groups of related fields defined once and then embedded in multiple Models. Think of them as mini‑schemas for common content patterns like banners, sliders, or testimonial cards. By using Components, you ensure consistency, simplify maintenance, and speed up page assembly.

​
Why Use Components?

  • Reusability: Define a set of fields once and reuse it across many Models (e.g., “Author Bio,” “FAQ Item”).
  • Consistency: All instances of a component share the same schema and validations, so you never end up with “close but different” field sets.
  • Modularity: Break complex pages into manageable building blocks that editors can add, reorder, and configure independently.

​
When to Use Components

  • Banners & Slideshows: Define a “Banner” component with title, image, and link fields to power hero carousels.
  • Feature Blocks: Create a “Feature Card” component with icon, headline, and description fields.
  • Repeated Layouts: Any section that appears multiple times or across pages (e.g., FAQs, testimonials).

​
How to Create & Use Components

​
1. Navigating to the Components Area

  1. In the left‑hand sidebar, click Content Model to expand its submenu.
  2. Select Components to view the list of all existing components on the navigation panel from your workspace.

​
2. Creating a New Component

  1. Click + followed by Add Component from the Components list on the navigation panel.
  2. In the dialog, fill out:
    • Compnent Name: e.g., Banner or Hero Slide
    • Internal Name: Auto‑generated snake_case identifier (editable)
    • Description: (Optional) Brief summary of its purpose
    • Parent Folder: Organize into a folder
  3. Click Save to create the component and open its editor.

​
3. Defining Component Fields

Once your component is created, you’ll land on its Fields tab:
  1. Click + Add Field.
  2. Choose a field type (Text, Rich Text, Media, Boolean, Relation, etc.).
  3. Configure the fields as per Adding Fields to Your Model.
  4. Click Save Field and repeat for each attribute.

​
4. Embedding a Component in a Model

To make a component available in a content type:
  1. Go to Content Model → Models and open your target Model.
  2. On the Fields tab, click + Add Field → Component.
  3. Select the target component.
  4. Choose Repeatable (allows multiple instances) or Single (one instance).
  5. Click Save.

​
5. Populating Component Entries

Once a component is embedded in a Model:
  1. Navigate to Content Library, and open an entry of that Model.
  2. Locate the component field (e.g., Banner).
  3. Click Add new to insert an instance—fill out the component’s fields (Title, Link, Image).
  4. For repeatable components, click Add new multiple times to add several instances (e.g., carousel slides).
  5. Save or publish your entry.
As an example, build a Hero Carousel component:
  1. Define the Component with fields:
    • Slide Title (Text)
    • Slide Subtitle (Text)
    • Button Text (Text)
    • Button Link (Text)
    • Slide Image (Media)
  2. Embed it as a repeatable component in your Landing Page Model.
  3. Create Slides in Content Library by adding 3–5 instances under the carousel field.
Your front‑end can then iterate over the hero_carousel array to render a dynamic slideshow.

​
7. Editing & Deleting Components

  • Edit: Navigate to the target component, click the pencil icon at the top right of the screen to update fields or settings.
  • Delete: Click the trash‑can icon to remove a component definition.
Deleting a component removes it from all Models and entries that use it.

​
Best Practices

  1. Keep Components Focused: Design each component for a single purpose.
  2. Limit Nesting: Avoid deeply nested components to maintain clarity.
  3. Name Clearly: Use descriptive names and identifiers so both editors and developers know each block’s role.
  4. Communicate Changes: Modifying a component schema affects every page using it—coordinate updates with your team.
With Components in place, you can assemble rich, modular page sections quickly and maintain them easily.