Components/Card/Media Card
fd-card · 3 examples from SAP's documentation · Back to the gallery
About
The Media Block is optional and can be hidden if is not desired to be shown. The Media Block feature enables cards to spotlight special content for the user. Adding an image or colored background in combination with bold text, the Media Block can also work as stand-alone banner.
Media on Cards
The Media Block is flexible in height but fixed in width to the card size. The media can only contain an image / graphic OR solid color plus text. The Image can fill the media container or can come with a padding of 1rem (results in 16px) top, left and right. Corner radius 0.5rem (results in 8px). For this option add the modifier class .fd-card__media--with-padding to .fd-card__media base class.
Title on Media
A title on Media Block is possible if using a solid colored background an NO image! To ensure legibility and ACC standards in the Media Block / Banner, always make sure a sufficient contrast ratio is achieved. Solid background colors can be bright Shell Category Colors or the lighter Legend Background Colors. - For Shell Category Colors add the .fd-card__media--bg-shell-* modifier to the .fd-card__media base class, where * can be a number from 1 to 16. For example: fd-card__media--bg-shell-5 - For Legend Background Colors add the .fd-card__media--bg-legend-* modifier to the .fd-card__media base class, where * can be a number from 1 to 20. For example: fd-card__media--bg-legend-7
Title on Media, Shell Category background colors
Title on Media, Legend background colors
Media as Banner
To highlight certain content in a crisp and highly visual way, the Media Block offers the flexibility to be designed as a stand-alone banner. Use the .fd-card--banner modifier class to achieve this type of Card. When the Card is used as a banner, the solid background can be applied on the whole media container or on the content container, in cases where it's used together with an image or as an overlay. To achieve a banner with a solid background with no image use the .fd-card__media--bg-shell-* or .fd-card__media--bg-legend-* modifer with the .fd-card__media base class. If you want to apply background on the content container when it's used with an image, use the .fd-card__media-content-container--bg-shell-* or .fd-card__media-content-container--bg-legend-* modifer with the .fd-card__media-content-container base class. The content container can be displayed as an overlay in case of using an image / a graphic behind. Use the modifier class .fd-card__media-content-container--overlay with the .fd-card__media-content-container base class.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat quo delectus deleniti excepturi tempora impedit nobis nulla sint qui quae consequuntur reprehenderit, accusamus amet nihil esse quia doloribus praesentium quidem?
Media as Banner with content overlay
Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat quo delectus deleniti excepturi tempora impedit nobis nulla sint qui quae consequuntur reprehenderit, accusamus amet nihil esse quia doloribus praesentium quidem?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat quo delectus deleniti excepturi tempora impedit nobis nulla sint qui quae consequuntur reprehenderit, accusamus amet nihil esse quia doloribus praesentium quidem?