# Creating a Hero Section Components
**URL:** https://forum.builder.io/t/creating-a-hero-section-components/4513
**Category:** Technical Questions
**Created:** [November 22, 2023, 11:25am UTC](https://forum.builder.io/t/creating-a-hero-section-components/4513 "2023-11-22T11:25:30Z")
**Posts on this page:** 4
**Page:** 1
### Author:  [@xbrandonpowell](https://forum.builder.io/u/xbrandonpowell)
#### Post date: [November 22, 2023, 11:25am UTC](https://forum.builder.io/t/creating-a-hero-section-components/4513/1 "2023-11-22T11:25:30Z")
The question I have created a Hero Components by using their prop template with the path name when there are no props being shown in the builder:
- Can they add into the same BuilderComponets?
```auto
Builder.register("insertMenu", {
name: "Our Hero Components",
items: [
{
name: "Hero",
component: {
template: HeroComponent,
props: [
{
name: "image",
type: "file",
label: "Hero Image",
},
{
name: "title",
type: "text",
label: "Hero Title",
},
{
name: "description",
type: "text",
label: "Hero Description",
},
],
},
},
{
name: "Double Columns",
component: {
template: DoubleColumnsComponent,
props: [
{
name: "image1",
type: "file",
label: "Image 1",
},
{
name: "text1",
type: "text",
label: "Text 1",
},
{
name: "image2",
type: "file",
label: "Image 2",
},
{
name: "text2",
type: "text",
label: "Text 2",
},
],
},
},
{
name: "Triple Columns",
component: {
template: TripleColumnsComponent,
props: [
{
name: "image1",
type: "file",
label: "Image 1",
},
{
name: "text1",
type: "text",
label: "Text 1",
},
{
name: "image2",
type: "file",
label: "Image 2",
},
{
name: "text2",
type: "text",
label: "Text 2",
},
{
name: "image3",
type: "file",
label: "Image 3",
},
{
name: "text3",
type: "text",
label: "Text 3",
},
],
},
},
{
name: "Dynamic Columns",
component: {
template: DynamicColumnsComponent,
props: [
{
name: "columns",
type: "list",
label: "Columns",
itemProps: [
{
name: "image",
type: "file",
label: "Image",
},
{
name: "text",
type: "text",
label: "Text",
},
],
},
],
},
},
],
});
```
---
### Author:  [@manish-sharma](https://forum.builder.io/u/manish-sharma)
#### Post date: [November 23, 2023, 4:12pm UTC](https://forum.builder.io/t/creating-a-hero-section-components/4513/2 "2023-11-23T16:12:36Z")
Hello @xbrandonpowell,
To register custom components using the insert menu, you can refer to our GitHub repository. The relevant code can be found at the following link: [GitHub Code](https://github.com/BuilderIO/builder/blob/e03f80261cdb3cc5d59c2967716ef56c4a14069c/examples/react-design-system/src/builder-settings.js#L30)
This code snippet provides an example of how to configure the insertion of custom components within your [Builder.io](http://Builder.io) setup.
---
### Author:  [@xbrandonpowell](https://forum.builder.io/u/xbrandonpowell)
#### Post date: [November 24, 2023, 2:12am UTC](https://forum.builder.io/t/creating-a-hero-section-components/4513/3 "2023-11-24T02:12:56Z")
```auto
Builder.register("insertMenu", {
name: "HeroComponents",
items: [
{ name: "Hero" },
{ name: "Double Columns" },
{ name: "Triple Columns" },
{ name: "Dynamic Columns" },
],
});
```
I observe that we need to begin in this manner. However, if we wish to incorporate our props, do we need to include them using our builder in this manner?
```auto
Builder.register("insertMenu", {
name: "HeroComponents",
items: [
{
name: "Hero",
type: "list",
label: "Columns",
defaultValue: true,
itemProps: [
{
name: "Banner",
type: "string",
label: "Text",
},
],
},
{ name: "Double Columns",
props: [
{
name: "string",
type: "string",
label: "Text",
},
]
},
{ name: "Triple Columns" },
{ name: "Dynamic Columns" },
],
});
```
Just check to see if did this correctly has to follow the process but test how see if see this might work if get what I need heros to be on the website.
---
### Author:  [@manish-sharma](https://forum.builder.io/u/manish-sharma)
#### Post date: [November 24, 2023, 10:23am UTC](https://forum.builder.io/t/creating-a-hero-section-components/4513/4 "2023-11-24T10:23:15Z")
Hello @xbrandonpowell,
That seems correct. This should work as expected.