{"id":3691,"date":"2023-12-06T17:22:05","date_gmt":"2023-12-06T22:22:05","guid":{"rendered":"https:\/\/university-communications.ncsu.edu\/documentation\/?post_type=reference-article&#038;p=3691"},"modified":"2026-02-27T17:32:45","modified_gmt":"2026-02-27T22:32:45","slug":"fancy-paragraph-block","status":"publish","type":"reference-article","link":"https:\/\/university-communications.ncsu.edu\/documentation\/reference-article\/fancy-paragraph-block\/","title":{"rendered":"Fancy Paragraph Block"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Use Cases<\/h2>\n\n\n\n<p>The Fancy Paragraph block supports basic text content and supplemental information in a two column format. The Fancy Paragraph block highlights content inline with your copy and ensures that this content displays correctly across all devices.<\/p>\n\n\n\n<p><strong>Benefits of the Fancy Paragraph&#8217;s two column layout include<\/strong>:<\/p>\n\n\n\n<figure class=\"wp-block-table is-style-red-heading-stripes\"><table class=\"has-fixed-layout\"><thead><tr><th>Benefit<\/th><th>Concept<\/th><\/tr><\/thead><tbody><tr><td><strong>Highlighting Content<\/strong><\/td><td>Perfect for highlighting important information<\/td><\/tr><tr><td><strong>Visual Balance<\/strong><\/td><td>Keeps the page visually appealing by breaking up dense text blocks<\/td><\/tr><tr><td><strong>Improved Comprehension<\/strong><\/td><td>Non-text elements support and enhance the meaning of the text<\/td><\/tr><tr><td><strong>Accessibility<\/strong><\/td><td>Helps users parse information by pairing visual cues with text<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Features<\/h2>\n\n\n\n<p>You can choose either &#8220;expanded&#8221; or &#8220;condensed&#8221; width options for the supplemental content. This flexible approach allows for optimal display of different types of supplemental content across various screen sizes and breakpoints. Supplemental content block availability may differ based upon the selected width option.<\/p>\n\n\n<div class=\"is-text wp-block-ncst-buttons\">\n    \n<div class=\"wp-block-ncst-button\">\n      <a\n        class=\"ncst-block__button-link btn\"\n        href=\"https:\/\/university-communications.ncsu.edu\/documentation\/build-your-site\/fancy-paragraph-schematic\/\"\n        data-ncst-lightbox=\"false\"\n                      >\n                  <span class=\"text\">Fancy Paragraph Example Schematic<\/span><span class=\"arrow-indicator\"><svg class=\"wolficon wolficon-arrow-right-bold\" role=\"img\"  aria-hidden=\"true\">\n\t\t\t\n\t\t\t<use xlink:href=\"#wolficon-arrow-right-bold\">\n\t\t<\/svg><\/span>\n              <\/a>\n    <\/div>\n  \n\n  <\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Available Main Content Types<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Paragraph<\/li>\n\n\n\n<li>Heading<\/li>\n\n\n\n<li>List<\/li>\n\n\n\n<li>Accordion<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-medium\"><a href=\"https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/31\/2025\/07\/fancy-paragraph-blocks.png\" data-fullsize=\"1460x1152\" data-zoom=\"true\"><img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"237\" src=\"https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/31\/2025\/07\/fancy-paragraph-blocks-300x237.png\" alt=\"An expanded view of clicking the plus arrow in a fancy paragraph to change the default paragraph text to a heading or list.\" class=\"wp-image-38784\" srcset=\"https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2025\/07\/fancy-paragraph-blocks-300x237.png 300w, https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2025\/07\/fancy-paragraph-blocks-1024x808.png 1024w, https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2025\/07\/fancy-paragraph-blocks-768x606.png 768w, https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2025\/07\/fancy-paragraph-blocks.png 1460w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><figcaption class=\"wp-element-caption\">Content maintainers can add one or more blocks to the main content side of the Fancy Paragraph block.<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Available Accompaniment Content Types<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Contact Card<\/li>\n\n\n\n<li>Icon<\/li>\n\n\n\n<li>Image<\/li>\n\n\n\n<li>Text Links<\/li>\n\n\n\n<li>Quote<\/li>\n\n\n\n<li>Event<\/li>\n\n\n\n<li>Fact<\/li>\n\n\n\n<li>Spotlight Card<\/li>\n\n\n\n<li>Form (uses <a href=\"https:\/\/university-communications.ncsu.edu\/documentation\/reference-article\/gravity-forms\/\" data-type=\"link\" data-id=\"https:\/\/university-communications.ncsu.edu\/documentation\/reference-article\/gravity-forms\/\">Gravity Forms<\/a>)<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-medium\"><a href=\"https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/31\/2024\/03\/fancy-paragraph.jpg\" data-fullsize=\"1127x1108\" data-zoom=\"true\"><img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"295\" src=\"https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/31\/2024\/03\/fancy-paragraph-300x295.jpg\" alt=\"Fancy Paragraph options utilizing paragraph and quote\" class=\"wp-image-37502\" srcset=\"https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2024\/03\/fancy-paragraph-300x295.jpg 300w, https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2024\/03\/fancy-paragraph-1024x1007.jpg 1024w, https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2024\/03\/fancy-paragraph-768x755.jpg 768w, https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2024\/03\/fancy-paragraph.jpg 1127w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><figcaption class=\"wp-element-caption\">Example of Text Links and Quote supplemental content within a Fancy Paragraph.<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-medium\"><a href=\"https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/31\/2023\/12\/fancy-paragraph-floated-spotlight.jpg\" data-fullsize=\"800x737\" data-zoom=\"true\"><img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"276\" src=\"https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/31\/2023\/12\/fancy-paragraph-floated-spotlight-300x276.jpg\" alt=\"Webpage showing a Fancy Paragraph block with a Spotlight Box\" class=\"wp-image-38577\" srcset=\"https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2023\/12\/fancy-paragraph-floated-spotlight-300x276.jpg 300w, https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2023\/12\/fancy-paragraph-floated-spotlight-768x708.jpg 768w, https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2023\/12\/fancy-paragraph-floated-spotlight.jpg 800w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><figcaption class=\"wp-element-caption\">Example of Spotlight Box within a Fancy Paragraph.<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Migration from Standalone Blocks<\/h2>\n\n\n\n<p>Starting with version 4.10, three standalone blocks will be incorporated into the Fancy Paragraph block as supplemental content types:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Floated Spotlight Box<\/strong>&nbsp;&#8211; previously used to point users to another page or story relevant to the current content<\/li>\n\n\n\n<li><strong>Floated Fact<\/strong>&nbsp;&#8211; previously used to draw attention to relevant facts with a custom heading, supporting text, and icon<\/li>\n\n\n\n<li><strong>Floated Image<\/strong>&nbsp;&#8211; previously used to float images beside text content<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">What This Means for Content Maintainers<\/h3>\n\n\n\n<p>If you have pages with these standalone blocks, here&#8217;s what you need to know:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Existing Content:<\/strong>&nbsp;Pages with the legacy standalone blocks will continue to display correctly through CSS styling that preserves their appearance.<\/li>\n\n\n\n<li><strong>Editing Existing Content:<\/strong>&nbsp;When you edit a page that contains one of these legacy blocks, a migration script will automatically convert them to the Fancy Paragraph format.<\/li>\n\n\n\n<li><strong>Visual Balance:<\/strong>&nbsp;After migration, you may need to adjust the amount of paragraph content beside the supplemental content to maintain visual balance between the left and right sides.<\/li>\n\n\n\n<li><strong>Why the Change:<\/strong>&nbsp;This migration is part of removing all CSS floats from the theme, which improves responsiveness and accessibility. The Fancy Paragraph block provides a more modern and consistent way to achieve similar visual effects.<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">How to Use Migrated Content Types<\/h3>\n\n\n\n<p>When using these migrated content types within Fancy Paragraph:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Add a Fancy Paragraph block to your page<\/li>\n\n\n\n<li>Add your paragraph text on the left side<\/li>\n\n\n\n<li>Select the appropriate supplemental content type (Spotlight, Icon, or Image) for the right side<\/li>\n\n\n\n<li>Select either &#8220;expanded&#8221; or &#8220;condensed&#8221; width option to achieve the desired visual balance<\/li>\n\n\n\n<li>Adjust content as needed to ensure proper alignment and presentation<\/li>\n<\/ol>\n\n\n\n<p>The Fancy Paragraph approach provides better consistency across devices and improves the overall user experience compared to the older floating elements.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Need help?<\/h2>\n\n\n\n<p>Have questions? Feel free to reach out with any questions or concerns at\u00a0<a href=\"http:\/\/go.ncsu.edu\/ucomm-dev-request\">go.ncsu.edu\/ucomm-dev-request<\/a>.<\/p>\n","protected":false},"featured_media":0,"template":"","meta":{"_acf_changed":false,"ncst_custom_author":"","ncst_show_custom_author":false,"ncst_dynamicHeaderBlockName":"","ncst_dynamicHeaderData":"","ncst_content_audit_freq":"","ncst_content_audit_date":"","ncst_content_audit_display":false,"ncst_backToTopFlag":"","_links_to":"","_links_to_target":""},"availability":[72,71,49],"content-type":[51],"class_list":["post-3691","reference-article","type-reference-article","status-publish","hentry","availability-nc-state-premium-add-on","availability-nc-state-pro-add-on","availability-nc-state-theme","content-type-block"],"acf":[],"_links":{"self":[{"href":"https:\/\/university-communications.ncsu.edu\/documentation\/wp-json\/wp\/v2\/reference-article\/3691","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/university-communications.ncsu.edu\/documentation\/wp-json\/wp\/v2\/reference-article"}],"about":[{"href":"https:\/\/university-communications.ncsu.edu\/documentation\/wp-json\/wp\/v2\/types\/reference-article"}],"version-history":[{"count":11,"href":"https:\/\/university-communications.ncsu.edu\/documentation\/wp-json\/wp\/v2\/reference-article\/3691\/revisions"}],"predecessor-version":[{"id":39312,"href":"https:\/\/university-communications.ncsu.edu\/documentation\/wp-json\/wp\/v2\/reference-article\/3691\/revisions\/39312"}],"wp:attachment":[{"href":"https:\/\/university-communications.ncsu.edu\/documentation\/wp-json\/wp\/v2\/media?parent=3691"}],"wp:term":[{"taxonomy":"availability","embeddable":true,"href":"https:\/\/university-communications.ncsu.edu\/documentation\/wp-json\/wp\/v2\/availability?post=3691"},{"taxonomy":"content-type","embeddable":true,"href":"https:\/\/university-communications.ncsu.edu\/documentation\/wp-json\/wp\/v2\/content-type?post=3691"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}