Banner Component | Community
Skip to main content
V
Vishal_S01
Level 3
April 20, 2022
Solved

Banner Component

  • April 20, 2022
  • 4 replies
  • 3049 views

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?

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by milind_bachani

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. 

4 replies

DEBAL_DAS
DEBAL_DAS
New Member
April 20, 2022

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

Debal Das, Senior AEM Consultant
    arunpatidar
    Community Advisor
    arunpatidarCommunity Advisor
    Community Advisor
    April 20, 2022

    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.html?lang=en#as-a-content-author

     

    Arun Patidar
      milind_bachani
      Adobe Employee
      milind_bachaniAdobe EmployeeAccepted solution
      Adobe Employee
      April 20, 2022

      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
        mlmg
        Level 2
        April 20, 2022

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

          Terms & ConditionsAccessibility statement

          Loading footer...