{"id":38173,"date":"2024-11-16T15:39:52","date_gmt":"2024-11-16T20:39:52","guid":{"rendered":"https:\/\/university-communications.ncsu.edu\/documentation\/?post_type=reference-article&#038;p=38173"},"modified":"2024-11-16T15:40:25","modified_gmt":"2024-11-16T20:40:25","slug":"button-spotlight-block","status":"publish","type":"reference-article","link":"https:\/\/university-communications.ncsu.edu\/documentation\/reference-article\/button-spotlight-block\/","title":{"rendered":"Button Spotlight Block"},"content":{"rendered":"\n<p>The <strong>Button Spotlight<\/strong> block is a visually engaging way to highlight a call-to-action (CTA) within the NC State Theme. It combines a bold button with optional supporting content to draw attention and encourage user interaction.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How to Use<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Add the Block<\/strong>: In the WordPress block editor, click the \u201c+\u201d icon or type <code>\/Button Spotlight<\/code> to insert the block.<\/li>\n\n\n\n<li><strong>Configure the Content<\/strong>:<\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Add a <strong>Title<\/strong>: Enter a short and impactful headline.<\/li>\n\n\n\n<li>Write a <strong>Teaser<\/strong>: Optionally, add 1-2 sentences that provide more context or motivation for the action.<\/li>\n\n\n\n<li>Configure the <strong>Button<\/strong>:\n<ul class=\"wp-block-list\">\n<li>Add the button text (e.g., \u201cLearn More,\u201d \u201cApply Now\u201d).<\/li>\n\n\n\n<li>Add a destination link for the button.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<ol start=\"3\" class=\"wp-block-list\">\n<li><strong>Select an Icon<\/strong> (Optional): Open the icon settings and choose an icon from the NC State SVG icon set. Icons will display next to the title and teaser.<\/li>\n<\/ol>\n\n\n\n<ol start=\"4\" class=\"wp-block-list\">\n<li><strong>Set the Background Color<\/strong>: Choose a color from the NC State branded color palette in the block settings panel to set the background.<\/li>\n<\/ol>\n\n\n\n<ol start=\"5\" class=\"wp-block-list\">\n<li><strong>Preview and Publish<\/strong>: Check the block\u2019s appearance in your page preview and adjust as needed. Once satisfied, publish or update your page.<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">Best Practices<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Keep it Simple<\/strong>: Use concise text for the title and teaser to avoid overwhelming users.<\/li>\n\n\n\n<li><strong>Be Action-Oriented<\/strong>: Write a compelling CTA that clearly communicates the next step (e.g., \u201cRegister Now\u201d or \u201cExplore Programs\u201d).<\/li>\n\n\n\n<li><strong>Add an Icon Thoughtfully<\/strong>: Choose an icon that complements the message and reinforces the CTA.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Example<\/h2>\n\n\n\n<p>Here\u2019s how the Button Spotlight might appear:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2024\/11\/button-spotlight-block.jpg\" data-fullsize=\"800x328\" data-zoom=\"true\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"328\" src=\"https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2024\/11\/button-spotlight-block.jpg\" alt=\"Screenshot of Button Spotlight block\" class=\"wp-image-38174\" srcset=\"https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2024\/11\/button-spotlight-block.jpg 800w, https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2024\/11\/button-spotlight-block-300x123.jpg 300w, https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2024\/11\/button-spotlight-block-768x315.jpg 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/a><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Accessibility Notes<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Use descriptive text for links and CTAs to support screen readers.<\/li>\n\n\n\n<li>Avoid over-reliance on the icon alone to convey meaning.<\/li>\n<\/ul>\n\n\n\n<p>The <strong>Button Spotlight<\/strong> block makes it easy to add branded, high-impact calls-to-action to your pages. Use it strategically to enhance user engagement and guide visitors to key content.<\/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":[49],"content-type":[51],"class_list":["post-38173","reference-article","type-reference-article","status-publish","hentry","availability-nc-state-theme","content-type-block"],"acf":[],"_links":{"self":[{"href":"https:\/\/university-communications.ncsu.edu\/documentation\/wp-json\/wp\/v2\/reference-article\/38173","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":0,"href":"https:\/\/university-communications.ncsu.edu\/documentation\/wp-json\/wp\/v2\/reference-article\/38173\/revisions"}],"wp:attachment":[{"href":"https:\/\/university-communications.ncsu.edu\/documentation\/wp-json\/wp\/v2\/media?parent=38173"}],"wp:term":[{"taxonomy":"availability","embeddable":true,"href":"https:\/\/university-communications.ncsu.edu\/documentation\/wp-json\/wp\/v2\/availability?post=38173"},{"taxonomy":"content-type","embeddable":true,"href":"https:\/\/university-communications.ncsu.edu\/documentation\/wp-json\/wp\/v2\/content-type?post=38173"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}