--- title: Two Featured Content Cards tags: Featured Content --- # Featured Content: Two Featured Content Cards ###### **Control Code:** `FC.2FCC` <!-- ![](https://i.imgur.com/N7qrSfw.png) ![](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/rkkj7Herq.png) | | **Medium Breakpoint (Tablet)** | **Extra Small Breakpoint (Mobile)** | | -------- | -------- | | ![](https://hackmd.io/_uploads/ByH37rgrc.png) | ![](https://hackmd.io/_uploads/rJj3Qrxrq.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 two cards. While each individual piece of content inside a card is optional, at least one item must be set for each card. ### 2. Card Asset 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: 320px - Height: 180px - 853px - Large Breakpoint - Width: 264px - Height: 149px - 697px - Medium Breakpoint - Width: 232px - Height: 130px - 640px - Extra Small Breakpoint - Width: 232px - Height: 130px - 412px - **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. 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 Asset Caption - **Optional:** Can be excluded, component collapses to hide unused space - **Type Style:** Disclaimers and Notes - **Color:** NEUTRAL_50 (Medium Gray), changeable within site color palette ### 4. Card Eyebrow Title - **Optional:** Can be excluded, component collapses to hide unused space - **Type Style:** - Extra Large: Heading 3 - Large: Heading 4 - Medium: Heading 4 - Extra Small: Heading 3 - **Color:** PRIMARY_02 (Brand Secondary), changeable within site color palette - **SEO HTML Tag:** Default H6, changeable within H1 to H6 ### 5. Card Title - **Optional:** Can be excluded, component collapses to hide unused space - **Type Style:** - Extra Large: Heading 1 - Large: Heading 1 - Medium: Title 3 - Extra Small: Title 2 - **Color:** NEUTRAL_80 (Off Black), changeable within site color palette - **SEO HTML Tag:** Default H4, changeable within H1 to H6 ### 6. 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 ### 7. Card Subtitle - **Optional:** Can be excluded, component collapses to hide unused space - **Type Style:** Heading 3 - **Color:** NEUTRAL_50 (Medium Gray), changeable within site color palette - **SEO HTML Tag:** Default H6, changeable within H1 to H6 ### 8. Card Body Text - **Optional:** Can be excluded, component collapses to hide unused space - **Type Style:** - Extra Large: Paragraph 2 - Large: Paragraph 3 - Medium: Paragraph 2 - Extra Small: Paragraph 1 - **Color:** NEUTRAL_80 (Off Black), changeable within site color palette ### 9. 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. ### 10. Card 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_02 (Brand Secondary), 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. ## 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 top and center aligned. | **Top Aligned (Default)** | **Center Aligned** | | -------- | -------- | | ![](https://hackmd.io/_uploads/ByvpQSlrc.png) | ![](https://hackmd.io/_uploads/Sypp7Hlrq.png) | ## Resources ### CMS Instructions #### 2, 3 or 4 Featured Content Cards Configuration <!--Site administrators and content editors can create same-height **2,3 or 4 Featured content cards** leveraging the Drupal Admin interface. ![4-Featured Content Card](https://hackmd.io/_uploads/rJmCY2RV5.png)--> While creating or editing content, site administrators and content editors can add a **2,3 or 4-featured content card** asset content block as follows: **Step 1:** Navigate to the **Content** menu and either click **Add content** to create a new content or click the **Edit** button under Operations for the content you wish to edit (e.g., Home): ![Edit Home Flexible Template](https://hackmd.io/_uploads/HJmLy6GN9.png) **Step 2:** On the **Layout** tab, click **Add block** at the section you want to add a **2,3 or 4-featured content card** asset content block. You may need to add a section before adding a block. ![Add Block](https://hackmd.io/_uploads/HkUJ9hBNq.png) **Step 3:** From the right-hand side window panel, click **Create custom block**. ![Add Block - Create Custom Block](https://hackmd.io/_uploads/rkXTX17Eq.png) **Step 4:** Select **Featured Content Cards**. ![4-Featured Content Card - Add Block](https://hackmd.io/_uploads/r1j0g-Kw9.png) The following are mandatory and optional entries for the **2,3 or 4 Featured Content Card content block**. Mandatory entries include: - **Title** - The title of the block as shown to the user. - **Content Cards** - Entity reference. Set the number content cards inside the content block. - minimum of 2 - maximum of 4 ![Add New Content Card](https://hackmd.io/_uploads/SJAn33RV9.png) - **Content Alignment** – List. Set the alignment of the card to the card. - **Top (Default)** content is aligned to the top of the card. - **Center** content is centrally aligned to the card. Optional entries include: - **FUSE code** - see [FUSE code CMS instructions](/cU84_lreQY2OTQupfjeaTg#CMS-Instructions) for details. - **Vertical spacing** - see [dynamic vertical spacing CMS instructions](/azdwOTghR8uWkILRsGkvwA#CMS-Instructions) for details. - **Reusable** - checkbox. Would you like to be able to reuse this block? This option cannot be changed after saving. If this option is selected, then you will be able to select this block from the list (see **Step 1**). The following are mandatory and optional entries for **each Featured Content Card**. Mandatory entries include: - **Image** - asset. Video is out of scope for this component. Optional entries include: - **Image caption** - text with formatting with text limit 110. WYSIWIG. - **Small headline (Summary)** – text with formatting with text limit 45. WYSIWIG. Default H6. - **Title (Primary headline)** - text with formatting with text limit 60. WYSIWIG. Default H2. - **Under title decoration** – checkbox. Boolean. Default = True. - **Subtitle (Secondary headline)** - text with formatting with text limit 100. WYSIWIG. Default H5. - **Body** - text with formatting with text limit 200. WYSIWIG. Default = “ - **CTA button** - refer to the [CTA buttons instructions](https://hackmd.io/H3_6iYFmQ_-AbCD8m_APXQ#CMS-Instructions) for details about adding CTA buttons. Limit: One CTA button is allowed. **Step 5:** Configure the block as required. For example: Title = “Four Card Featured Content Card” Display title = box is checked. Content Alignment = "Top" Add four content cards: In the **Content cards** entity reference configure the first card. For example: Block description = "Another Card 1" Image = add a media item by clicking **Insert selected**. Image caption = “Individual results may vary." Top vertical spacing = "0 (0px)" Bottom vertical spacing = "0 (0px)" ![4-Featured Content Card - Configure](https://hackmd.io/_uploads/r1R2DbYwc.png) Click on **Create Content card**. ![4-Featured Content Card - Create Content Card](https://hackmd.io/_uploads/Sk_H5ZFDq.png) Configure the second, third, and fourth card as required. **Step 6:** Click on **Add block**. ![4-Featured Content Card - Add Block Button](https://hackmd.io/_uploads/ryDrt-Kvq.png) **Step 7:** View the newly created **Four Featured Content Card**. ![4-Featured Content Card - Updated](https://hackmd.io/_uploads/r1Vi2aRNq.png)