Card

The Card Component is a custom component created in AEM based off of the Tempo Design System Card component and uses an extension of the AEM Core Teaser Component. Applying Tempo classes to the Teaser component templates and adding several style options via the AEM Style System, we were able to leverage the configuration options found in Tempo to work seemlessly with the Dialog options of this component.

The policy created to achieve the Card style options shown in the examples are found below. Use these and the reference link to the Banner component SCSS file to leverage Tempo directly, or guide you on the process of building your own.

<card jcr:primaryType="nt:unstructured">
    <policy_1618421407175
        cq:styleDefaultClasses="cmp-teaser__card-default-width"
        jcr:primaryType="nt:unstructured"
        jcr:title="TDS - Card"
        sling:resourceType="wcm/core/components/policy/policy"
        titleLinkHidden="true"
        titleType="h2">
        <jcr:content jcr:primaryType="nt:unstructured"/>
        <cq:styleGroups jcr:primaryType="nt:unstructured">
            <item0
                cq:styleGroupLabel="Background"
                jcr:primaryType="nt:unstructured">
                <cq:styles jcr:primaryType="nt:unstructured">
                    <item0
                        cq:styleId="1618421451910"
                        cq:styleLabel="Primary"
                        jcr:primaryType="nt:unstructured"/>
                    <item1
                        cq:styleClasses="cmp-teaser__card-bg-secondary"
                        cq:styleId="1618421456430"
                        cq:styleLabel="Secondary"
                        jcr:primaryType="nt:unstructured"/>
                    <item2
                        cq:styleClasses="cmp-teaser__card-bg-high-impact"
                        cq:styleId="1618421457138"
                        cq:styleLabel="High Impact"
                        jcr:primaryType="nt:unstructured"/>
                </cq:styles>
            </item0>
            <item1
                cq:styleGroupLabel="Width"
                jcr:primaryType="nt:unstructured">
                <cq:styles jcr:primaryType="nt:unstructured">
                    <item0
                        cq:styleClasses="cmp-teaser__card-default-width"
                        cq:styleId="1618421474671"
                        cq:styleLabel="Default"
                        jcr:primaryType="nt:unstructured"/>
                    <item1
                        cq:styleClasses="cmp-teaser__card-responsive-width"
                        cq:styleId="1618421477855"
                        cq:styleLabel="Responsive"
                        jcr:primaryType="nt:unstructured"/>
                </cq:styles>
            </item1>
            <item2
                cq:styleGroupLabel="Additional Options"
                jcr:primaryType="nt:unstructured">
                <cq:styles jcr:primaryType="nt:unstructured">
                    <item0
                        cq:styleClasses="cmp-teaser__card-border"
                        cq:styleId="1618421492559"
                        cq:styleLabel="Include Border"
                        jcr:primaryType="nt:unstructured"/>
                </cq:styles>
            </item2>
        </cq:styleGroups>
    </policy_1618421407175>
</card>