--- title: Four Featured Content Cards tags: Featured Content --- # Featured Content: Four Featured Content Cards ###### **Control Code:** `FC.4FCC` <!-- ![](https://via.placeholder.com/1600x900/D3D3D3/000000/?text=Splash%20Placeholder%20Image) --> ## About This Component The featured content card is the primary content container within the card-based design system. It is available in a variety of configurations, including asset-only (image and video) and asset with a variety of supporting text options. The featured content cards can be used full-width or tiled in two, three, and four card lockups. <!-- ### Usage Guidelines :::info *TODO: Novartis to write.* ::: General guidelines for using this component. Include any information the user will need to know but that may not fit into the below annotated breakdown of the individual requirements for the component. ### Related Components :::info *TODO: Novartis to write.* ::: A list of other components that are related. Consider what other components may be useful based on the structure or format of information and if there are any specific limitations that can be overcome by using a different component. - **[Component Name](/url-of-component):** Why it is related, or why we would recommend it instead of this one. - **[Component Name](/url-of-component):** Why it is related, or why we would recommend it instead of this one. ### Accessibility :::info *TODO: Novartis to write.* ::: Specific accessibility considerations and recommendations for this component. --> ## Primary Configurations | **Extra Large Breakpoint (Desktop)** | | -------- | | ![](https://hackmd.io/_uploads/Sku7sHlSq.png) | | **Medium Breakpoint (Tablet)** | **Extra Small Breakpoint (Mobile)** | | -------- | -------- | | ![](https://hackmd.io/_uploads/r1a7sSgH5.png) | ![](https://hackmd.io/_uploads/rJENiHlrq.png) | | **Key** | | ------- | | ![](https://hackmd.io/_uploads/S1-x39hQc.png) | ### 1. FUSE Code - **Optional:** Can be excluded, component collapses to hide unused space The FUSE code for this component follows the standard requirements outlined in the [FUSE Code](/cU84_lreQY2OTQupfjeaTg) page of this documentation. Please refer to that page for full details on its configurations and options. ## Card Configurations Each configuration here is repeated for each of the four cards. While each individual piece of content inside a card is optional, at least one item must be set for each card. ### 2. Card Image While the height for the images in each card can be custom for your content, we recommend using the same height for all the images in the cards for a clean and uniform appearance. - **Optional:** Can be excluded, component collapses to hide unused space - **Dimensions:** - Extra Large Breakpoint - Width: 180px - Height: 100px - 320px - Large Breakpoint - Width: 138px - Height: 78px - 245px - Medium Breakpoint - Width: 128px - Height: 72px - 228px - Extra Small Breakpoint - Width: 232px - Height: 130px - 412px The image for this component otherwise follows the standard requirements outlined in the [Images](/9XfBsCB3QPyxX5-9wfosjQ) page of this documentation. Please refer to that page for full details on its configurations and options. ### 3. Card Eyebrow Title - **Optional:** Can be excluded, component collapses to hide unused space - **Type Style:** Heading 4 - **Color:** PRIMARY_02 (Brand Secondary), changeable within site color palette - **SEO HTML Tag:** Default H6, changeable within H1 to H6 ### 4. Card Title - **Optional:** Can be excluded, component collapses to hide unused space - **Type Style:** - Extra Large: Heading 2 - Large: Heading 3 - Medium: Heading 3 - Extra Small: Title 2 - **Color:** NEUTRAL_80 (Off Black), changeable within site color palette - **SEO HTML Tag:** Default H6, changeable within H1 to H6 ### 5. Card Title Under-Title Decoration Line This line provides a break between the primary title text and other text. It can be optionally removed, however if either the title or the text below is not included then the line should also not be included. - **Optional:** Can be excluded, component collapses to hide unused space - **Color:** PRIMARY_01 (Brand Primary), changeable within site color palette ### 6. Card Body Text - **Optional:** Can be excluded, component collapses to hide unused space - **Type Style:** - Extra Large: Paragraph 2 - Large: Paragraph 3 - Medium: Paragraph 3 - Extra Small: Paragraph 1 - **Color:** NEUTRAL_80 (Off Black), changeable within site color palette ### 7. Card CTA Button - **Optional:** Can be excluded, component collapses to hide unused space The CTA Buttons for this component follows the standard requirements outlined in the [CTA Button](/H3_6iYFmQ_-AbCD8m_APXQ) page of this documentation. Please refer to that page for full details on its configurations and options. ## Additional Configurations ### Content Alignment Content within the cards share the same vertical alignment between each card. The images, if present, will always be at the top of the card, and the CTA buttons, if present, will always be at the bottom of the card. The rest of the text content in the card is by default aligned to the top of the card, but this can be changed so the content is vertically aligned to the center of the card for all of the cards. - **Content Alignment:** Default top, can be center Below is an example of this configuration when set to center aligned. | **Top Aligned (Default)** | **Center Aligned** | | -------- | -------- | | ![](https://hackmd.io/_uploads/SkNHjSeS9.png) | ![](https://hackmd.io/_uploads/r1hrsHeH9.png) | ## Resources ### CMS Instructions Please see [Two Featured Content Cards instructions](https://hackmd.io/ekRLHoXHSqmiq5p6vqbUMg#CMS-Instructions).