--- title: Single Featured Content Card, With Content tags: Featured Content --- # Featured Content: Single Featured Content Card, With Content ###### **Control Code:** `FC.1FCC.001` <!-- ![](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/ByXVwIgS9.png) | | **Medium Breakpoint (Tablet)** | **Extra Small Breakpoint (Mobile)** | | -------- | -------- | | ![](https://hackmd.io/_uploads/ByiSPLxHc.png) | ![](https://hackmd.io/_uploads/BJyUvUgSc.png) | | **Key** | | ------- | | ![](https://hackmd.io/_uploads/S1-x39hQc.png) | ### 1. Asset - **Required:** Must be included - **Video:** Instead of an image you can place an embedded video here. It will fill the full available width that the image would have taken and then scale vertically to fit the video's aspect ratio. For more information on working with videos in the design system, see the [Videos](/YeudBQ6aQnSV-4NbJyvf-A) page of this documentation. - **Dimensions:** Size requirements for the asset depend on the layout size chosen for the component. See the [Component Size](#Component-Size) section of this documentation further below for more information. | Breakpoint | Full Width | 7 Columns | 5 Columns | |-------------|------------|-----------|-----------| | Extra Large | Width: 352px<br/>Height: 188px - 626px | Width: 480px<br/>Height: 270px - 853px | Width: 320px<br/>Height: 180px - 853px | | Large | Width: 288px<br/>Height: 162px - 512px | Width: 392px<br/>Height: 221px - 697px | Width: 264px<br/>Height: 149px - 697px | | Medium | Width: 240px<br/>Height: 135px - 427px | Width: 360px<br/>Height: 203px - 640px | Width: 232px<br/>Height: 131px - 640px | | Extra Small | Width: 400px<br/>Height: 225px - 711px | Width: 400px<br/>Height: 225px - 711px | Width: 400px<br/>Height: 225px - 711px | 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. ### 2. Caption - **Optional:** Can be excluded, component collapses to hide unused space - **Type Style:** Disclaimers and Notes - **Color:** NEUTRAL_100 (Solid Black), changeable within site color palette ### 3. Eyebrow Title - **Optional:** Can be excluded, component collapses to hide unused space - **Type Style:** Heading 3 - **Color:** PRIMARY_02 (Brand Secondary), changeable within site color palette - **SEO HTML Tag:** Default H6, changeable within H1 to H6 ### 4. Primary Title - **Optional:** Can be excluded, component collapses to hide unused space - **Type Style:** Title 2 - **Color:** NEUTRAL_80 (Off Black), changeable within site color palette - **SEO HTML Tag:** Default H2, changeable within H1 to H6 ### 5. Under-Title Decoration Line This line provides a break between the primary title text and other body text. It can be optionally removed, however if either the title or the body 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. Subtitle - **Optional:** Can be excluded, component collapses to hide unused space - **Type Style:** Heading 2 - **Color:** NEUTRAL_50 (Medium Gray), changeable within site color palette - **SEO HTML Tag:** Default H5, changeable within H1 to H6 ### 7. Body Text - **Optional:** Can be excluded, component collapses to hide unused space - **Type Style:** Paragraph 1 - **Color:** NEUTRAL_80 (Off Black), changeable within site color palette ### 8. 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. ### 9. Video Transcript Link When a video is embedded in this component, this link is available if you need to point the user to an external resource -- such as a transcript -- when it cannot be embedded in the video player itself. If you are not including a video in this component, this link should also not be included. - **Optional:** Can be excluded, component collapses to hide unused space - **Type Style:** Text Link 1 - **Color:** PRIMARY_01 (Brand Primary), changeable within site color palette For more information on working with videos in the design system, see the [Videos](/YeudBQ6aQnSV-4NbJyvf-A) page of this documentation. ### 10. 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. ## Additional Configurations ### Component Size This component can be configured to different sizes, allowing it to be placed on the page side-by-side with other components if needed. Some [Primary Configurations](#Primary-Configurations) above may have different options depending on the size chosen. Please see the [Grid and Layout Guidelines](/wyWz2X5ETqqn8VQo3KLHdQ) page of this documentation for more information on sizing and laying out components in the system. - **Component Size:** Default Full Width, can be 7 Columns or 5 Columns #### Extra Large Breakpoint (Desktop) | Full Width | 7 Columns | 5 Columns | | ---------- | --------- | --------- | | ![](https://hackmd.io/_uploads/ByO80HeHc.png) | ![](https://hackmd.io/_uploads/HJpLArgSq.png) | ![](https://hackmd.io/_uploads/SJZPRBgHq.png) | #### Medium Breakpoint (Tablet) | Full Width | 7 Columns | 5 Columns | | ---------- | --------- | --------- | | ![](https://hackmd.io/_uploads/Skur0rlHc.png) | ![](https://hackmd.io/_uploads/B16rRrxH9.png) | ![](https://hackmd.io/_uploads/BJ-UAHgBc.png) | #### Extra Small Breakpoint (Mobile) At the Extra Small Breakpoint, the 7 Columns and 5 Columns sizes become Full Width, stacking with any other component that was to their side. | Full Width | 7 Columns | 5 Columns | | ---------- | --------- | --------- | | ![](https://hackmd.io/_uploads/S1pE0Hlrq.png) | ![](https://hackmd.io/_uploads/S1pE0Hlrq.png) | ![](https://hackmd.io/_uploads/S1pE0Hlrq.png) | ### Full Width Content Placement When the component size is set to Full Width, the asset can be placed either to the left or the right of the other column of content. - **Content Placement:** Default asset left, can be right Below is an example of this configuration when the asset is set to left and right. | **Asset Left (Default)** | **Asset Right** | | --- | --- | | ![](https://hackmd.io/_uploads/ryCZASlr9.png) | ![](https://hackmd.io/_uploads/H1mzRrlr5.png) | #### Extra Small Breakpoint (Mobile) At the Extra Small Breakpoint the asset stacks with the other content. If the asset is set to be on the left then it will above the other content, and if the asset is set to be on the right it will be below the other content. | **Asset Left (Default)** | **Asset Right** | | --- | --- | | ![](https://hackmd.io/_uploads/S1-XRHeH9.png) | ![](https://hackmd.io/_uploads/HkSmABxBc.png) | ### Full Width Content Alignment When the component size is set to Full Width, all the content within the card can be vertically aligned to the top of the card or the center of the card. By default, content is top aligned. When content is center aligned, it will vertically center itself within the card. If the asset is taller than the other column of content, then the asset will appear centered against the other content. If the other content is taller than the asset, then the other content will appear centered against the asset. At the Extra Small Breakpoint, this setting has no effect as the asset stacks with the other content. - **Content Alignment:** Default top, can be center Below is an example of this configuration when set to top and center aligned. | **Top Aligned (Default)** | **Center Aligned, Asset is Taller** | **Center Aligned, Other Content is Taller** | | --- | --- | --- | | ![](https://hackmd.io/_uploads/r1h10rxHc.png) | ![](https://hackmd.io/_uploads/B1Bx0SgB9.png) | ![](https://hackmd.io/_uploads/Sy2lCrlrq.png) | ## Resources ### CMS Instructions :::info *TODO: Novartis to provide if available.* ::: CMS instructions detailing the steps for configuring this component within the CMS environment are [available here](https://novartis.com).