---
title: Single Featured Content Card, Asset Only
tags: Featured Content
---

# Featured Content: Single Featured Content Card, Asset Only
###### **Control Code:** `FC.1FCC.002`
<!--
-->
## 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)** |
| -------- |
|  |

| **Medium Breakpoint (Tablet)** | **Extra Small Breakpoint (Mobile)** |
| -------- | -------- |
|  |  |

| **Key** |
| ------- |
|  |

### 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: 744px<br/>Height: 419px - 992px | Width: 480px<br/>Height: 270px - 853px | Width: 320px<br/>Height: 180px - 853px |
| Large | Width: 608px<br/>Height: 342px - 811px | Width: 392px<br/>Height: 221px - 697px | Width: 264px<br/>Height: 149px - 697px |
| Medium | Width: 552px<br/>Height: 311px - 736px | 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. 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.

### 4. 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 |
| ---------- | --------- | --------- |
|  |  |  |

#### Medium Breakpoint (Tablet)

| Full Width | 7 Columns | 5 Columns |
| ---------- | --------- | --------- |
|  |  |  |

#### 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 |
| ---------- | --------- | --------- |
|  |  |  |

## Resources

### CMS Instructions

#### Single Featured Content Card Configuration

While creating or editing content, site administrators and content editors can add a **Single 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):


**Step 2:** On the **Layout** tab, click **Add block** at the section you want to add a Full List single column content block. You may need to add a section before adding a block.


**Step 3:** From the right-hand side window panel, click **Create custom block**.


**Step 4:** Select **Single Featured Content Card**.


Mandatory New Single Featured Content Card configuration entries include:
- **Title** – The title of the block as shown to the user.
- **Display title** – Boolean checkbox. Default = Checked.
- **Component Size** - Drop-down. Select field to set the module size. Options include:
- Full Widths (Default)
- Seven Columns
- Five Columns
- **Title** - Component Title WYSIWIG. H2.
- **Asset position** - List. Visible only if Component size = Full Width. Options include:
- Left side (Default)
- Right side
- **Content alignment** - List. Visible only if Component size = Full Width. Options include:
- Top (Default)
- Right side
- Center
- **Image** - asset.

Optional New Single Featured Content Card configuration entries include:
- **Image caption** - text with formatting with text limit 110. WYSIWIG.
- **Small headline (Summary)** – text with formatting with text limit 60. 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 450. 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.
- **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**).

**Step 5:** Configure the block as required. For example:

- **Block Title** = “Home Single Featured Content”
- **Display title** = box is checked.
- **Component Size** = Full Width
- **Component Title** = “Full Width – Single Column”
- **Background color** = Primary (default)


**Step 6:** Media – Add selected image below followed by clicking **Insert selected**.


**Step 7:** Input the following entries:

- **Image Caption** = "Individual results may vary"
- **Small headline** = "In Future 5"
- **Title** = "Fast relief as early as week 3 lorem ipsum dolor sit"


**Step 8:** Click on **Add block**.


**Step 9:** View the newly created **Single Featured Content Card**.