Banner Component

[Vishal_S01]

A developer needs to create a banner component. This component shows an image across
the full width of the page. A title is shown on top of the image. This text can be
aligned to the left, middle, or right. The core components feature a teaser component
that matches almost all requirements, but not all.
What is the most maintainable way for the developer to implement these requirements?

A. Inherit from the teaser core component.
B. Use and configure the teaser core component.
C. Overlay the teaser core component.
D. Create a new custom component from scratch.

Which one is the correct answer?

[milind_bachani · Accepted solution]

hi @Vishal_S01 ,

I would overlay[Option C] it since most of the functionalities can be reused, you can have additional fields to align text in desired direction over it and overlaying would help you get all the working functionalities and power to override the same.

Thanks. 

[DEBAL_DAS]

Here Banner component will be considered as  proxy component. It means sling:resourceSuperType  of your Banner component will point to teaser core component and then add your own flavor as per requirement.

Based on this I would say Overlay[C].

[arunpatidar]

I think this can be done using Core Teaser with pure CSS without extending the core component.

You can try adding a class using style system and write CSS to move image at background and overlay the text.

The text alignment can also be handle using style system CSS.

https://experienceleague.adobe.com/docs/experience-manager-65/authoring/siteandpage/style-system.htm...

[milind_bachani · Accepted solution]

hi @Vishal_S01 ,

I would overlay[Option C] it since most of the functionalities can be reused, you can have additional fields to align text in desired direction over it and overlaying would help you get all the working functionalities and power to override the same.

Thanks. 

[mlmg · Accepted solution]

We have a super similar ask at my company, and we are following the same approach outlined by the Adobe Community advisors in this thread -- option C. We are using the Core Teaser as the baseline and are enhancing it with our visual flavors as per our brand guidelines. It is working well for us thus far!!