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.
Background Options
Width Options
Additional Configurations
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>