--- title: Free Form Content tags: Free Form Content --- # Free Form Content: Free Form Content ###### **Control Code:** `FFC.FFC` <!-- ![](https://via.placeholder.com/1600x900/D3D3D3/000000/?text=Splash%20Placeholder%20Image) --> ## About This Component The free-form content block allows for more broad usage of text with all system-permitted font styles available. The block allows content editors to add images, videos, and CTA buttons in different positioning that might not be possible in other components. Care should be taken to use heading tags with accessibility in mind when plotting out content within the component. <!-- ### 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/HyS7LMuS5.png) | | **Medium Breakpoint (Tablet)** | **Extra Small Breakpoint (Mobile)** | | -------- | -------- | | ![](https://hackmd.io/_uploads/Hyj7Lfur9.png) | ![](https://hackmd.io/_uploads/rkZNUMOH5.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. ## Free Form Configurations All the content options for this component can be used as many times as you'd like in a mix-and-match format. Outlined here are the different options you have available when laying out your content. The numbered annotations in this case do not show the strict placement for each option, but rather show an example of each option available to you. These can all be used in whatever order best suits your content. Note that the [Title 2](#2-Text-Option-Title-2) text option includes additional optional configurations that can only be used when using the [Title 2](#2-Text-Option-Title-2) text option, including a paired icon and an under-title decoration line. All text options for this component follow the standard requirements outlined in the [Fonts and Typography](/AeZVwi4aTDCeevMI4zeDuQ) page of this documentation. Please refer to that page for full details on working with type in the system. ### 2. Text Option: Title 2 - **Optional:** Can be included as many times as needed - **Type Style:** Title 2 - **Color:** NEUTRAL_100 (Solid Black), changeable within site color palette - **SEO HTML Tag:** Default H2, changeable within H1 to H6 - **Alignment:** Default left aligned, can be center or right aligned ### 2a. Title 2 Under-Title Decoration Line This line provides a break between the title text and other body text. It can only be included in this component when you are including a Title 2 text option. It can be optionally removed, however if there is no other text being placed below this title then this 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 ### 2b. Title 2 Icon This icon can be paired with a Title 2 text option. It can only be included in this component when you are including a Title 2 text option. The placement of the icon (and its associated background color) depends on the [Component Size](#Component-Size) chosen for this component. When the component is Full Width the icon will be placed to the left of the title it is paired with. When the component is 7 Columns or 5 Columns, the icon will be placed above the content of the component. Because of this, you should only use one icon per usage of this component when using the 7 Column or 5 Column sizes. If you need additional titles with icons at those sizes, use additional instances of this component. - **Optional:** Can be excluded, component collapses to hide unused space - **Dimensions:** - Extra Large Breakpoint - Width: 24px - 48px - Height: 24px - 48px - Large Breakpoint - Width: 20px - 40px - Height: 20px - 40px - Medium Breakpoint - Width: 20px - 40px - Height: 20px - 40px - Extra Small Breakpoint - Width: 16px - 32px - Height: 16px - 32px The icon 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. ### 2c. Title 2 Icon Background Color This background color should not be included if the icon appearing over it is also not included. - **Optional:** Can be excluded, component collapses to hide unused space - **Color:** GRADIENT_PRIMARY_01_PRIMARY_03 (Brand Primary + Tertiary Gradient), changeable within site color palette ### 3. Text Option: Title 3 - **Optional:** Can be included as many times as needed - **Type Style:** Title 3 - **Color:** NEUTRAL_100 (Solid Black), changeable within site color palette - **SEO HTML Tag:** Default H3, changeable within H1 to H6 - **Alignment:** Default left aligned, can be center or right aligned ### 4. Text Option: Heading 1 - **Optional:** Can be included as many times as needed - **Type Style:** Heading 1 - **Color:** NEUTRAL_100 (Solid Black), changeable within site color palette - **SEO HTML Tag:** Default H4, changeable within H1 to H6 - **Alignment:** Default left aligned, can be center or right aligned ### 5. Text Option: Heading 2 - **Optional:** Can be included as many times as needed - **Type Style:** Heading 2 - **Color:** NEUTRAL_100 (Solid Black), changeable within site color palette - **SEO HTML Tag:** Default H5, changeable within H1 to H6 - **Alignment:** Default left aligned, can be center or right aligned ### 6. Text Option: Heading 3 - **Optional:** Can be included as many times as needed - **Type Style:** Heading 3 - **Color:** NEUTRAL_100 (Solid Black), changeable within site color palette - **SEO HTML Tag:** Default H6, changeable within H1 to H6 - **Alignment:** Default left aligned, can be center or right aligned ### 7. Text Option: Heading 4 - **Optional:** Can be included as many times as needed - **Type Style:** Heading 4 - **Color:** NEUTRAL_100 (Solid Black), changeable within site color palette - **SEO HTML Tag:** Default H6, changeable within H1 to H6 - **Alignment:** Default left aligned, can be center or right aligned ### 8. Text Option: Paragraph 1 - **Optional:** Can be included as many times as needed - **Type Style:** Paragraph 1 - **Color:** NEUTRAL_100 (Solid Black), changeable within site color palette - **Alignment:** Default left aligned, can be center or right aligned ### 9. Text Option: Paragraph 2 - **Optional:** Can be included as many times as needed - **Type Style:** Paragraph 2 - **Color:** NEUTRAL_100 (Solid Black), changeable within site color palette - **Alignment:** Default left aligned, can be center or right aligned ### 10. Text Option: Paragraph 3 - **Optional:** Can be included as many times as needed - **Type Style:** Paragraph 3 - **Color:** NEUTRAL_100 (Solid Black), changeable within site color palette - **Alignment:** Default left aligned, can be center or right aligned ### 11. Text Option: Disclaimers and Notes - **Optional:** Can be included as many times as needed - **Type Style:** Disclaimers and Notes - **Color:** NEUTRAL_100 (Solid Black), changeable within site color palette - **Alignment:** Default left aligned, can be center or right aligned ### 12. CTA Buttons Option - **Optional:** Can be included as many times as needed - **Number of Buttons:** 1 to 2 total buttons per inclusion of this option - **Alignment:** Default left aligned, can be center or right aligned 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. ### 13. Asset Option - **Optional:** Can be included as many times as needed - **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. ### 13a. Video Transcript Link This icon can be paired with an Asset Option when set to a video asset. It can only be included in this component when you are including an Asset Option when set to a video asset. 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. - **Optional:** Can be excluded, component collapses to hide unused space - **Type Style:** Default Text Link 1, can be Text Link 2 - **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 ### 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/SkWc8z_H5.png) | ![](https://hackmd.io/_uploads/SypYLfOrc.png) | ![](https://hackmd.io/_uploads/SktFUfuH9.png) | #### Medium Breakpoint (Tablet) | Full Width | 7 Columns | 5 Columns | | ---------- | --------- | --------- | | ![](https://hackmd.io/_uploads/BylFIMOrq.png) | ![](https://hackmd.io/_uploads/r13uUGur9.png) | ![](https://hackmd.io/_uploads/ByYdLMOH9.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/SyNw8MuBc.png) | ![](https://hackmd.io/_uploads/SyNw8MuBc.png) | ![](https://hackmd.io/_uploads/SyNw8MuBc.png) | ## Resources ### CMS Instructions #### Free Form Configuration While creating or editing content, site administrators and content editors can add a **Free form** 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: ![Content](https://hackmd.io/_uploads/Sk-bQliX9.png) On the **Layout** tab, click **Add block** at the section you want to add a free form content block. You may need to add a section before adding a block. ![Content Layout](https://hackmd.io/_uploads/SJhf7gimq.png) In the side panel on the right-hand side of the window click **Create custom block**. ![Custom Block](https://hackmd.io/_uploads/SkjNmxiX5.png) Select **Free form** from the list of available custom blocks. ![Create Free Form](https://hackmd.io/_uploads/rkbIXgjmq.png) **Step 2:** Displayed is the window with the free form properties: ![Free Form](https://hackmd.io/_uploads/SyOD7goXc.png) Mandatory entries include: - **Title** - The title of the block as shown to the user. - **Display title** - checkbox - **Component size** - Full wigths (default), Seven columns, Five columns - **Title** - text with formatting. - **HTML tag** – H1 to H6. This field only changes the wrapping HTML of this element. It does not change the style (appearance). - **Under title** - toggle hide or show (default) - **Body** - text with formatting. - **Align** - right, center or left (default) Optional entries include: - **Summary** - text with formatting. - **HTML tag** – H1 to H6. This field only changes the wrapping HTML of this element. It does not change the style (appearance). - **Icon** - up to one media item - **Show icon** - checkbox - **FUSE Code** - see [FUSE code CMS instructions](/cU84_lreQY2OTQupfjeaTg#CMS-Instructions) for details - **Vertical spacing** - see [dynamic vertical spacing CMS instructions](/azdwOTghR8uWkILRsGkvwA?both#CMS-Instructions) for details. - **Reusable** - checkbox. Would you like to be able to reuse this block? This option can not be changed after saving. If this option is selected, the you will be able to select this block from the list (see **Step 1**). <!--The entries are represented in the free form content block as follows: ![Free form details](https://hackmd.io/_uploads/BkXF7esm5.png)--> **Step 3:** Fill in the fields as required. For example: - **Title** - "Free text block". - **Display title** - check - **Component size** - Full wigths - **Title** - "This is a free text block created for testing purposes". - **Body** - "This is a free text block body created for testing purposes" **Step 4:** Be sure to click the **Add block** button to ensure that your changes are updated. ![Add Block Button](https://hackmd.io/_uploads/SySoXeiX9.png) **Step 5:** The layout tab displays the parameters of the added block. Click the edit icon the edit the block layout. ![Edit Block](https://hackmd.io/_uploads/BJt6mgsX5.png) **Step 6:** Click the **Save layout** button ![Save Layout](https://hackmd.io/_uploads/r1A0mxo79.png) On the **Edit** tab for the content, make sure that the **Published** checkbox is selected and click **Save**. ![Publish Layout](https://hackmd.io/_uploads/Hy8e4loQ5.png) **Step 7:** Open the content page using the **URL alias** for the page. URL alias is displayed on the **Edit** tab for the content, refer to the [flexible template CMS instructions](/k-R9oJNzSJG_F4x3P7gIug#CMS-Instructions) for details. ![URL Alias](https://hackmd.io/_uploads/BkrrNlo7c.png) View the updates: ![Updated Free Form](https://hackmd.io/_uploads/rkt8Veim5.png)