How can I reuse a component which has different css aem 6?

Question

I am working on a page and it has some features that I want to build as one component. But they use different css classes. For eg.

<div class="class1 class2">
            <div class="class3">
                <div class="class4">
                    <div class="left">
                        <p class="title">Some content</p>
                        <p class="subtitle">Sub title</p>
                        <p>Paragraph</p>
                    </div>
                    <div class="right">
                        <p class="title">Title</p>
                        <p class="subtitle">sub title</p>
                        <p>Paragraph</p>
                    </div>
                    <div class="middle">
                        <a href="content.html" class="callToAction">See your content</a>
                    </div>
                </div>
            </div>
        </div>

The content is almost similar but the css classes are pretty much different. Can I create a component which uses this code and I can just change the css classes(class1, class2 etc) accordingly?

How can I achieve this?

Answer 1

一种可能性是为每个视图设置不同的脚本/ jsp，并提供一个选项对话框来选择其中一个脚本/视图。在OOTB List组件中遵循类似的方法。