Expand my Community achievements bar.

Don’t miss the AEM Skill Exchange in SF on Nov 14—hear from industry leaders, learn best practices, and enhance your AEM strategy with practical tips.
SOLVED

Banner Component

Avatar

Level 3

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?

2 Accepted Solutions

Avatar

Correct answer by
Employee Advisor

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. 

View solution in original post

Avatar

Correct answer by
Level 2

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!!

View solution in original post

4 Replies

Avatar

Employee Advisor

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].

Avatar

Community Advisor

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...

 



Arun Patidar

Avatar

Correct answer by
Employee Advisor

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. 

Avatar

Correct answer by
Level 2

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!!