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.

Card component

Template & Dialog files

Card styles

Component SCSS file


Card storybook

Usage guide defined by Tempo

AEM core teaser

Official Adobe documentation


Background Options

White

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dapibus tristique tortor. Cras at interdum nunc.


Gray

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dapibus tristique tortor. Cras at interdum nunc.


Light blue

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dapibus tristique tortor. Cras at interdum nunc.



Width Options

Default width

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dapibus tristique tortor. Cras at interdum nunc.


Responsive width

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dapibus tristique tortor. Cras at interdum nunc.



Additional Configurations

Include border

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dapibus tristique tortor. Cras at interdum nunc.


No border

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dapibus tristique tortor. Cras at interdum nunc.


Policy

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>