## Introduction

### Goal

Create a page-specific component with embedded content.

### Prerequisites

Before starting:

• Follow at least the [Hello World Component](🔗) tutorial and the [Promotion Document Type](🔗) and [Promotions Query Component](🔗) tutorials.

• Create a [Development Environment](🔗) with [Content Modeling](🔗) and a local copy of the [Reference SPA](🔗) configured.

• [Obtain an authorization token](🔗) for the Site Management API if you haven't already done so.

• Have the [Site Management API](🔗), [Base Components](🔗) and [SPA SDK](🔗) and [React SDK](🔗) reference documentation handy.

To perform the Site Management API request in this tutorial it is recommended to use the [Postman Collection](🔗) for the Site Management API. However, you can use any other method or tool you like such as the [_Site development_ app](🔗) or curl or httpies.

## Create the Image, Title, and Text Field Group Type

Navigate to the _Content_ app and from the dropdown in the top left, choose _Content types_.

Browse to the "Bloomreach (brxsaas)" namespace folder and from its context menu, choose _New field group type_.

In the _New field group type_ dialog, enter "ImageTitleAndText" in the _Name_ field, choose the _1 Column_ layout, and click _OK_.

In the [content type editor](🔗), add the following three fields to the field group type:

Click _Done_ to save the field group type.

## Define the ImageTitleAndText Component using the Site Management API

Use the [component endpoint](🔗) to create a new "imagetitleandtext" component in the "brx-reference-spa" component group.

Use the following request body:

Note the following in the configuration above:

• The "brx-reference-spa/imagetitleandtext" component extends the ["base/component" component](🔗).

• "contentType" is set to "brxsaas:ImageTitleAndText", the technical name for the field group type you defined. Content of this type will be embedded in the component instance and share its lifecycle with the component instance and the page it is on.

• Two dropdown type parameters, "textalignment" and "titlesize", are defined to enable Site Editors some control over how the content is styled.

## Implement the ImageTitleAndText React Component

Create a folder `components/ImageTitleAndText`. The `ImageTitleAndText` component will live inside this folder.

Let's define some styles before implementing the component.

Create `components/ImageTitleAndText/ImageTitleAndText.module.scss` with the following contents:

Next, create the actual `ImageTitleAndText` component in `components/ImageTitleAndText/ImageTitleAndText.tsx`:

Note the following about the component implementation:

• The content embedded in the component instance is retrieved using the `getContainerItemContent` method.

• The component does not render a manage content button; for page-specific components with embedded content, a content editor is automatically loaded in the component editor in the right sidebar in the Experience manager.

Export the ImageTitleAndText component in `components/ImageTitleAndText/index.ts`:

Finally, add the required wiring to make the `ImageTitleAndText` component available in the application.

In `components/index.tsx`, add:

In `components/App.tsx`, add `ImageTitleAndText` to the list of components imported from `'./components'` as well as to the mapping in the `App` class.

You are now ready to test the `ImageTitleAndText` component.

## Add the ImageTitleAndText Component to the Homepage

Open you channel in the _Experience manager_ app and make sure your development project is selected.

Add the homepage to the project if you haven't done so already.

Open the left sidebar and click on the _Components_ tab. The list of available components should include "Image, Title, and Text" in the _Page-specific components_ section:

Click on "Image, Title, and Text" and add it to the container on the homepage.

Once added, click inside the component to open the right sidebar where the editing fields for the `ImageTitleAndText` field group type you defined should load on the _Content_ tab.

Select an image and enter a title and some text. Click on Save to update the page preview.

Click on the _Properties_ tab in the right sidebar to edit the style properties you defined for the component.

If everything works as expected, you completed this tutorial!