<a href="/wiki/display/CPDesign/Featured+Card">Featured Card</a>
- Created by Bernath, Anna, last modified on Aug 03, 2023
Table of Contents
Overview
Featured cards are special types of cards that are used to display new or highlighted content that is of interest to the user. These cards serve the function of providing high-level news or information about a new capability in the product or highlights useful content within the product. The intention of these cards is to show the highlighted and featured information and motivate users to explore those. That’s why they can also be used as banner substitutes. These cards can be used to show new features, functionalities, services, information and are applicable for use in product and web environments.
The featured card is only a concept not a fully developed component, therefore the visual design specifications are not as concrete and detailed.
Look and Feel
The abstract visual elements and the colorful backgrounds of the cards are using the BTP Reference Colors and are automatically theme-able. The illustrations used in the featured card should not be theme-able so unlike the Illustrations that change colors in every theme, the illustrations used here should always maintain the same colors in all themes. Use hex values in the .svg file as opposed to color variables. Make sure the cards have a border radius in HC themes for better visibility.
<p><div> <div>Morning Horizon</div> <div>Evening Horizon</div> <div>Horizon HCB</div> <div>Horizon HCW</div> </div> <div> <div> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/btp/patterns/homepage/featured-card/media1_1ab5f82f6d6de777bb673dbd5047cdd321fbebb27.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_1ab5f82f6d6de777bb673dbd5047cdd321fbebb27.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_1ab5f82f6d6de777bb673dbd5047cdd321fbebb27.png?width=2000&format=png&optimize=medium" media="(min-width: 600px)"> <img loading="lazy" alt="" src="<a href="https://www.sap.com/design-system/btp/patterns/homepage/featured-card/media%5C_1ab5f82f6d6de777bb673dbd5047cdd321fbebb27.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/btp/patterns/homepage/featured-card/media_1ab5f82f6d6de777bb673dbd5047cdd321fbebb27.png?width=750&format=png&optimize=medium</a>" width="1149" height="1680"> </picture> </div> <div> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/btp/patterns/homepage/featured-card/media1_124b6394f9b45a019255173945475ee0df4ff17df.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_124b6394f9b45a019255173945475ee0df4ff17df.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_124b6394f9b45a019255173945475ee0df4ff17df.png?width=2000&format=png&optimize=medium" media="(min-width: 600px)"> <img loading="lazy" alt="" src="<a href="https://www.sap.com/design-system/btp/patterns/homepage/featured-card/media%5C_124b6394f9b45a019255173945475ee0df4ff17df.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/btp/patterns/homepage/featured-card/media_124b6394f9b45a019255173945475ee0df4ff17df.png?width=750&format=png&optimize=medium</a>" width="1149" height="1680"> </picture> </div> <div> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/btp/patterns/homepage/featured-card/media1_1705291770f363ef0e0b4ee03a452c8f9c2094707.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_1705291770f363ef0e0b4ee03a452c8f9c2094707.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_1705291770f363ef0e0b4ee03a452c8f9c2094707.png?width=2000&format=png&optimize=medium" media="(min-width: 600px)"> <img loading="lazy" alt="" src="<a href="https://www.sap.com/design-system/btp/patterns/homepage/featured-card/media%5C_1705291770f363ef0e0b4ee03a452c8f9c2094707.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/btp/patterns/homepage/featured-card/media_1705291770f363ef0e0b4ee03a452c8f9c2094707.png?width=750&format=png&optimize=medium</a>" width="1149" height="1680"> </picture> </div> <div> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/btp/patterns/homepage/featured-card/media1_1193bbb5862942bd88d2ae328044c97d6727938a9.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_1193bbb5862942bd88d2ae328044c97d6727938a9.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_1193bbb5862942bd88d2ae328044c97d6727938a9.png?width=2000&format=png&optimize=medium" media="(min-width: 600px)"> <img loading="lazy" alt="" src="<a href="https://www.sap.com/design-system/btp/patterns/homepage/featured-card/media%5C_1193bbb5862942bd88d2ae328044c97d6727938a9.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/btp/patterns/homepage/featured-card/media_1193bbb5862942bd88d2ae328044c97d6727938a9.png?width=750&format=png&optimize=medium</a>" width="1149" height="1680"> </picture> </div> </div></p>
Anatomy Image Variant
<div> <div></div> <div>Element</div> <div>Description</div> </div> <div> <div><strong>A</strong></div> <div><strong>Card</strong></div> <div>This is the main container of the Featured Card content. See <a href="https%3A%2F%2Fwww.sap.com%2Fwiki%2Fpages%2Fviewpage.action%3FpageId%3D2697897431">Card (Horizon) - Card Anatomy (Web Card System)</a> for full specifications.</div> </div> <div> <div><strong>B</strong></div> <div><strong>Image</strong></div> <div>An image or video thumbnail that can be positioned anywhere on the card.</div> </div> <div> <div><strong>C</strong></div> <div><strong>Badge (Optional)</strong></div> <div>This is the <a href="https%3A%2F%2Fwww.sap.com%2Fwiki%2Fdisplay%2FCPDesign%2FInfo%2BLabel">Info Label</a> component and it is optional for the card.</div> </div> <div> <div><strong>D</strong></div> <div><strong>Title</strong></div> <div>Title of the card that should use the appropriate text style and color.</div> </div> <div> <div><strong>E</strong></div> <div><strong>Body Text</strong></div> <div>Body text of the card that should use the appropriate text style and color.</div> </div> <div> <div><strong>F</strong></div> <div><strong>Actions</strong></div> <div>Could be up to two buttons (one primary button and one secondary button). See <a href="https%3A%2F%2Fwww.sap.com%2Fwiki%2Fdisplay%2FCPDesign%2FButtons%3Fsrc%3Dcontextnavpagetreemode">Buttons</a> for full specifications.</div> </div> <div> <div><strong>G</strong></div> <div><strong><p class="custom custom2" style="text-align: left;">Video Play Button (Optional)</p></strong></div> <div>Only for videos.</div> </div> <div> <div><strong>H</strong></div> <div><strong>Close Button (Optional)</strong></div> <div>Only for cards that should be dismissible.</div> </div>
Anatomy Illustration Variant
<div> <div></div> <div>Element</div> <div>Description</div> </div> <div> <div><strong>A</strong></div> <div><strong>Card</strong></div> <div>This is the main container of the Featured Card content. See <a href="https%3A%2F%2Fwww.sap.com%2Fwiki%2Fpages%2Fviewpage.action%3FpageId%3D2697897431">Card (Horizon) - Card Anatomy (Web Card System)</a> for full specifications.</div> </div> <div> <div><strong>B</strong></div> <div><strong>Abstract background shapes</strong></div> <div>Abstract geometric shapes in the background of the illustration. Should be a separate image layer from the illustration.</div> </div> <div> <div><strong>C</strong></div> <div><strong>Illustration</strong></div> <div>Taking foreground elements of the <a href="https%3A%2F%2Fwww.sap.com%2Fwiki%2Fdisplay%2FCPDesign%2FIllustrations">Illustrations</a>. Colouring should not change for different themes.</div> </div> <div> <div><strong>D</strong></div> <div><strong>Badge (Optional)</strong></div> <div>This is the <a href="https%3A%2F%2Fwww.sap.com%2Fwiki%2Fdisplay%2FCPDesign%2FInfo%2BLabel">Info Label</a> component and it is optional for the card.</div> </div> <div> <div><strong>E</strong></div> <div><strong>Title</strong></div> <div>Title of the card that should use the appropriate text style and color.</div> </div> <div> <div><strong>F</strong></div> <div><strong>Body Text</strong></div> <div>Body text of the card that should use the appropriate text style and color.</div> </div> <div> <div><strong>G</strong></div> <div><strong>Actions</strong></div> <div>Could be up to two buttons (one primary button and one secondary button). See <a href="https%3A%2F%2Fwww.sap.com%2Fwiki%2Fdisplay%2FCPDesign%2FButtons%3Fsrc%3Dcontextnavpagetreemode">Buttons</a> for full specifications.</div> </div> <div> <div><strong>H</strong></div> <div><strong>Close Button (Optional)</strong></div> <div>Only for cards that should be dismissible.</div> </div>
Specification
Margins and paddings can be defined on a case-by-case basis as this is only a concept, not a component. The values indicated here are just a recommendation.
When using --sapContent_ContrastTextColor for the text make sure that it has sufficient contrast in all themes, this can especially cause issues in the Horizon HCW theme.
<div> <div></div> <div>Element</div> <div>Morning Horizon</div> <div>Evening Horizon</div> <div>Horizon HCB</div> <div>Horizon HCW</div> </div> <div> <div><strong>A</strong></div> <div><strong>Title</strong></div> <div> <p>Uses H1, H2, H3 or H4 from <a href="https%3A%2F%2Fwww.sap.com%2Fwiki%2Fdisplay%2FCPDesign%2FTypography">Typography</a></p> <p>color: --sapTile_TitleTextColor; or</p> <p>color: --sapContent_ContrastTextColor;</p> </div> </div> <div> <div><strong>B</strong></div> <div><strong>Body Text</strong></div> <div> <p>font-size: --sapFontSmallSize; 0.75rem; or</p> <p>font-size: --sapFontSize; 0.875rem; or</p> <p>font-size: --sapFontLargeSize; 1rem;</p> <p>color: --sapTextColor; or</p> <p>color: --sapContent_ContrastTextColor;</p> </div> </div> <div> <div><strong>C</strong></div> <div><strong>Actions</strong></div> <div> <p>See <a href="https%3A%2F%2Fwww.sap.com%2Fwiki%2Fdisplay%2FCPDesign%2FButtons%3Fsrc%3Dcontextnavpagetreemode">Buttons</a> for full specifications.</p> <p><strong>First Button</strong><br>Use primary button style.</p> <p><strong>Second Button</strong><br>Use secondary button style.</p> <p>margin: 1rem;</p> </div> </div> <div> <div><strong>D</strong></div> <div><strong>Content area</strong></div> <div>The content is vertically centred in a container.</div> </div> <div> <div><strong>E</strong></div> <div><strong><span style="color: rgb(0,0,0);">Video Play Button</span></strong></div> <div> <p>size: 6.25rem;</p> <p>Horizontally and vertically centred over the image.</p> </div> </div> <div> <div><strong>F</strong></div> <div><strong><span style="color: rgb(0,0,0);">Close Button</span></strong></div> <div>size: 2.5rem;<br>margin-top: 1.5rem;margin-right: 1.5rem;</div> </div> <div> <div><strong>G</strong></div> <div><strong>Padding</strong></div> <div>2rem</div> </div> <div> <div><strong>H</strong></div> <div><strong><span style="color: rgb(0,0,0);">Spacing 1</span></strong></div> <div>0.75rem</div> </div> <div> <div><strong>I</strong></div> <div><strong><span style="color: rgb(0,0,0);">Spacing 2</span></strong></div> <div>1.5rem</div> </div>
Featured Card Button
Anatomy
<div> <div></div> <div>Element</div> <div>Description</div> </div> <div> <div><strong>A</strong></div> <div><strong>Close Button Body</strong></div> <div>width: 2.5rem;<br>height: 2.5rem;<br>border-radius: 2.5rem;<br>border: none;</div> </div> <div> <div><strong>B</strong></div> <div><strong>Close Button Icon</strong></div> <div>width: 1.5rem;<br>height: 1.5rem;Vertically and horizontally centred.</div> </div> <div> <div><strong>C</strong></div> <div><strong>Play Button Body</strong></div> <div>width: 6.25rem;<br>height: 6.25rem;<br>border-radius: 6.25rem;<br>border: none;</div> </div> <div> <div><strong>D</strong></div> <div><strong>Play Button Icon</strong></div> <div> <p>icon: sap-icon://SAP-icons-TNT/status-terminated;<br>width: 2.625rem;<br>height: 2.625rem;<br>transform: rotate(-90deg);</p> <p>Vertically and horizontally centred.</p> </div> </div>
Component Variables
--sapBackground_FeaturedCardButton_Normal
<div> <div><strong><p>Morning and Evening Horizon</p></strong></div> <div>background: fade(@sapBlockLayer_Background, 40);</div> </div> <div> <div><strong>HC</strong></div> <div>background: var(--sapButton_Lite_Background);</div> </div>
--sapBackground_FeaturedCardButton_Hover
<div> <div><strong><p>Morning and Evening Horizon</p></strong></div> <div>background: fade(@sapBlockLayer_Background, 50);</div> </div> <div> <div><strong>HC</strong></div> <div>background: var(--sapButton_Lite_Hover_Background);</div> </div>
--sapBackground_FeaturedCardButton_Active
<div> <div><strong><p>Morning and Evening Horizon</p></strong></div> <div>background: fade(@sapBlockLayer_Background, 60);</div> </div> <div> <div><strong>HC</strong></div> <div>background: var(--sapActiveColor);</div> </div>
Specification
<p><div> <div>State</div> <div>Horizon</div> <div>Horizon HC</div> <div>Preview</div> </div> <div> <div><strong>Normal</strong></div> <div>background: var(--sapBackground_FeaturedCardButton_Normal);<br>color: var(--sapContent_ContrastIconColor);</div> <div>See <a href="https%3A%2F%2Fwww.sap.com%2Fwiki%2Fdisplay%2FCPDesign%2FNested%2BButton">Nested Button</a> for full specifications.</div> <div> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/btp/patterns/homepage/featured-card/media1_13bf7e2b6cacd5671a1ce847cbde4bcdc4fb8e288.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_13bf7e2b6cacd5671a1ce847cbde4bcdc4fb8e288.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_13bf7e2b6cacd5671a1ce847cbde4bcdc4fb8e288.png?width=2000&format=png&optimize=medium" media="(min-width: 600px)"> <img loading="lazy" alt="" src="<a href="https://www.sap.com/design-system/btp/patterns/homepage/featured-card/media%5C_13bf7e2b6cacd5671a1ce847cbde4bcdc4fb8e288.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/btp/patterns/homepage/featured-card/media_13bf7e2b6cacd5671a1ce847cbde4bcdc4fb8e288.png?width=750&format=png&optimize=medium</a>" width="267" height="347"> </picture> </div> </div> <div> <div><strong>Hover</strong></div> <div>background: var(--sapBackground_FeaturedCardButton_Hover);</div> </div> <div> <div><strong>Active</strong></div> <div>var(--sapBackground_FeaturedCardButton_Active);</div> </div> <div> <div><strong>Focused</strong></div> <div>border: solid 0.0625rem var(--sapContent_ContrastFocusColor);outline: var(--sapContent_FocusStyle) var(--sapContent_FocusWidth) var(--sapContent_FocusColor);</div> </div> <div> <div><strong>Disabled</strong></div> <div>opacity: var(--sapContent_DisabledOpacity);</div> </div></p>
