{"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-07-31T17:08:00","modified_gmt":"2026-07-31T21:08:00","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 class=\"wp-block-paragraph\">The Fancy Paragraph block presents basic text content and supplemental information in a two-column format. This block highlights content inline with your copy and ensures that it displays correctly across all devices.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><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>Nontext 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 class=\"wp-block-paragraph\">You can choose either &#8220;expanded&#8221; or &#8220;condensed&#8221; width options for the supplemental content displayed in a Fancy Paragraph block. 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 Stand-Alone Blocks<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Starting with version 4.10, three stand-alone 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>\u00a0\u2014 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>\u00a0\u2014 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>\u00a0\u2014 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 class=\"wp-block-paragraph\">If you have pages with these stand-alone 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>\u00a0Pages with the legacy stand-alone blocks will continue to display correctly through CSS styling that preserves their appearance.<\/li>\n\n\n\n<li><strong>Editing existing content:<\/strong>\u00a0When 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>\u00a0After 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>\u00a0This 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 class=\"wp-block-paragraph\">When using these migrated content types within a 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 the &#8220;expanded&#8221; or the &#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 class=\"wp-block-paragraph\">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","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":13,"href":"https:\/\/university-communications.ncsu.edu\/documentation\/wp-json\/wp\/v2\/reference-article\/3691\/revisions"}],"predecessor-version":[{"id":39993,"href":"https:\/\/university-communications.ncsu.edu\/documentation\/wp-json\/wp\/v2\/reference-article\/3691\/revisions\/39993"}],"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}]}}