{"id":390,"date":"2024-04-30T12:57:24","date_gmt":"2024-04-30T16:57:24","guid":{"rendered":"https:\/\/brand.utk.edu\/web-design-system\/?page_id=390"},"modified":"2025-03-04T12:57:05","modified_gmt":"2025-03-04T17:57:05","slug":"buttons-and-links","status":"publish","type":"page","link":"https:\/\/brand.utk.edu\/web-design-system\/buttons-and-links\/","title":{"rendered":"Button &amp; Link Styles"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Link Hierarchy<\/h2>\n\n\n\n<p>The UT web design system offers a hierarchy of link styles so you can choose the right one for each context and level of emphasis. We like to describe these styles in terms of volume\u2014quiet, medium, and <strong>loud!<\/strong> <\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Quiet<\/h3>\n\n\n\n<p><strong>Text Links<\/strong><br>This is the subtlest link style. Text links are for optional, supplementary actions a user might take, such as finding more information on a subject. Use text links <a href=\"#\">within running copy<\/a> to help users browse related topics (see what we did there?).<\/p>\n\n\n\n<p>To employ this link style, simply highlight the text that you wish to link, and use the paragraph editor popup to add a URL to the selected text.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full has-custom-border is-style-utkwds-left-frame\"><img loading=\"lazy\" decoding=\"async\" width=\"1862\" height=\"288\" src=\"https:\/\/brand.utk.edu\/web-design-system\/wp-content\/uploads\/sites\/2\/2024\/04\/to-set-link.jpg\" alt=\"\" class=\"has-border-color has-gray-2-border-color wp-image-499\" style=\"border-width:1px\" srcset=\"https:\/\/brand.utk.edu\/web-design-system\/wp-content\/uploads\/sites\/2\/2024\/04\/to-set-link.jpg 1862w, https:\/\/brand.utk.edu\/web-design-system\/wp-content\/uploads\/sites\/2\/2024\/04\/to-set-link-300x46.jpg 300w, https:\/\/brand.utk.edu\/web-design-system\/wp-content\/uploads\/sites\/2\/2024\/04\/to-set-link-1024x158.jpg 1024w, https:\/\/brand.utk.edu\/web-design-system\/wp-content\/uploads\/sites\/2\/2024\/04\/to-set-link-768x119.jpg 768w, https:\/\/brand.utk.edu\/web-design-system\/wp-content\/uploads\/sites\/2\/2024\/04\/to-set-link-1536x238.jpg 1536w\" sizes=\"auto, (max-width: 1862px) 100vw, 1862px\" \/><figcaption class=\"wp-element-caption\"><em>As you can see, we are getting very clever with our examples<\/em><\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Medium<\/h3>\n\n\n\n<p><strong>Single Link<\/strong><br>When a link should stand apart from running text but doesn&#8217;t need to stand out <strong>too<\/strong> much, you can call on the single link. Use this link style for actions that are important but shouldn&#8217;t distract from other on-page elements, like promoting a new informational path at the end of a paragraph. There&#8217;s a small orange arrow to the left of the single link that moves slightly on hover. Limit link text to 30 characters or fewer to keep it looking &#8220;clickable.&#8221;<\/p>\n\n\n\n<p>This link style is a custom WordPress block.<\/p>\n\n\n\n<p class=\"is-style-utkwds-single-link\"><a href=\"https:\/\/www.utk.edu\/\">Single Link<\/a><\/p>\n\n\n\n<p><strong>Link Group<\/strong><br>The link group pattern collects links in either two or three responsive columns, and provides a means of grouping similar but distinct links. Users should be able to scan the link group text quickly and choose their next move with confidence. As with single links, there are small orange arrows to the left of each link that move slightly on hover, and each link includes a bottom border to keep things separated.<\/p>\n\n\n\n<p>The link group is a WDS pattern, and you can <a href=\"https:\/\/brand.utk.edu\/web-design-system\/component\/category\/buttons-and-links\/\">find more information about it on its component page<\/a>.<\/p>\n\n\n\n<div class=\"wp-block-group alignwide utkwds-link-group has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\" style=\"margin-top:var(--wp--preset--spacing--medium);margin-bottom:var(--wp--preset--spacing--medium)\">\n<ul class=\"wp-block-list is-style-utkwds-link-group-3up\">\n<li><a href=\"https:\/\/www.utk.edu\/\">Link 1<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.utk.edu\/\">Link 2<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.utk.edu\/\">Link 3<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.utk.edu\/\">Link 4<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.utk.edu\/\">Link 5<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.utk.edu\/\">Link 6<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.utk.edu\/\">Link 7<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.utk.edu\/\">Link 8<\/a><\/li>\n<\/ul>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Loud<\/h3>\n\n\n\n<p class=\"is-style-utkwds-fancy-link\"><strong>CTA Link<\/strong><br>CTA is an acronym for &#8220;call to action,&#8221; so please use this pattern for calls to action only. A CTA is something you want a user to <em>do<\/em> (versus somewhere you want them to <em>go<\/em>). In the WDS, CTA links function as a supporting button, taking the user down a task-path that leads to an interaction (e.g., starting a process for applying, scheduling, signing up, etc.). These links are visually heavy, so limit your use of them to home, routing, and landing pages. <em>Do not use more than two CTA links per page to protect the visual balance of the layout and the performance of your conversions.<\/em><\/p>\n\n\n\n<p>The CTA link style is a custom WordPress block.<\/p>\n\n\n\n<p class=\"is-style-utkwds-fancy-link\"><a href=\"https:\/\/www.utk.edu\/\">CTA Link<\/a><\/p>\n\n\n\n<p><strong>Button<\/strong><br>Use buttons for the final step of direct actions or tasks the user can take, such as submitting a form, or as a control to let them change the state of the content on their screen (e.g., opening a modal). Keep button text short and &#8220;clickable,&#8221; 20 characters or fewer. <\/p>\n\n\n\n<p>The button link style is a custom WordPress block.<\/p>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\">Button<\/a><\/div>\n<\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Writing Good Links: Best Practices<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Keep It Short<\/h3>\n\n\n\n<p>Studies show that website users read only about the first 11 characters of links and headlines when they scan a page. Front-load your link text so that the first part is the most important, and keep the text brief and to the point. <\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Be Descriptive<\/h3>\n\n\n\n<p>Use clear, descriptive link text to sets appropriate user expectations for what will happen when they choose to follow the link. Generic link text like &#8220;click here&#8221; or &#8220;learn more&#8221; are unhelpfully vague for all users and is an accessibility problem for users who navigate with a screen reader. <\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Tell Them What to Expect<\/h3>\n\n\n\n<p>Consequently, make sure the destination page or place for the link is a close match for what the link text is promising. If the connection is vague, users can feel confused or like they&#8217;re in the wrong place. It&#8217;s also a good idea to provide a warning if the link destination requires a login, is in a different file format (e.g. a pdf or other document), or is a different\/external website.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Link Hierarchy The UT web design system offers a hierarchy of link styles so you can choose the right one for each context and level of emphasis. We like to describe these styles in terms of volume\u2014quiet, medium, and loud! Quiet Text LinksThis is the subtlest link style. Text links are for optional, supplementary actions [&hellip;]<\/p>\n","protected":false},"author":449,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"class_list":["post-390","page","type-page","status-publish","hentry"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Button &amp; Link Styles - Torch Theme Pattern Library<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/brand.utk.edu\/web-design-system\/buttons-and-links\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Button &amp; Link Styles - Torch Theme Pattern Library\" \/>\n<meta property=\"og:description\" content=\"Link Hierarchy The UT web design system offers a hierarchy of link styles so you can choose the right one for each context and level of emphasis. We like to describe these styles in terms of volume\u2014quiet, medium, and loud! Quiet Text LinksThis is the subtlest link style. Text links are for optional, supplementary actions [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/brand.utk.edu\/web-design-system\/buttons-and-links\/\" \/>\n<meta property=\"og:site_name\" content=\"Torch Theme Pattern Library\" \/>\n<meta property=\"article:modified_time\" content=\"2025-03-04T17:57:05+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/brand.utk.edu\/web-design-system\/wp-content\/uploads\/sites\/2\/2024\/04\/to-set-link.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1862\" \/>\n\t<meta property=\"og:image:height\" content=\"288\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/brand.utk.edu\\\/web-design-system\\\/buttons-and-links\\\/\",\"url\":\"https:\\\/\\\/brand.utk.edu\\\/web-design-system\\\/buttons-and-links\\\/\",\"name\":\"Button &amp; Link Styles - Torch Theme Pattern Library\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/brand.utk.edu\\\/web-design-system\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/brand.utk.edu\\\/web-design-system\\\/buttons-and-links\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/brand.utk.edu\\\/web-design-system\\\/buttons-and-links\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/brand.utk.edu\\\/web-design-system\\\/wp-content\\\/uploads\\\/sites\\\/2\\\/2024\\\/04\\\/to-set-link.jpg\",\"datePublished\":\"2024-04-30T16:57:24+00:00\",\"dateModified\":\"2025-03-04T17:57:05+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/brand.utk.edu\\\/web-design-system\\\/buttons-and-links\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/brand.utk.edu\\\/web-design-system\\\/buttons-and-links\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/brand.utk.edu\\\/web-design-system\\\/buttons-and-links\\\/#primaryimage\",\"url\":\"https:\\\/\\\/brand.utk.edu\\\/web-design-system\\\/wp-content\\\/uploads\\\/sites\\\/2\\\/2024\\\/04\\\/to-set-link.jpg\",\"contentUrl\":\"https:\\\/\\\/brand.utk.edu\\\/web-design-system\\\/wp-content\\\/uploads\\\/sites\\\/2\\\/2024\\\/04\\\/to-set-link.jpg\",\"width\":1862,\"height\":288,\"caption\":\"Getting clever with our examples\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/brand.utk.edu\\\/web-design-system\\\/buttons-and-links\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/brand.utk.edu\\\/web-design-system\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Button &amp; Link Styles\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/brand.utk.edu\\\/web-design-system\\\/#website\",\"url\":\"https:\\\/\\\/brand.utk.edu\\\/web-design-system\\\/\",\"name\":\"Design System Documentation\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/brand.utk.edu\\\/web-design-system\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Button &amp; Link Styles - Torch Theme Pattern Library","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/brand.utk.edu\/web-design-system\/buttons-and-links\/","og_locale":"en_US","og_type":"article","og_title":"Button &amp; Link Styles - Torch Theme Pattern Library","og_description":"Link Hierarchy The UT web design system offers a hierarchy of link styles so you can choose the right one for each context and level of emphasis. We like to describe these styles in terms of volume\u2014quiet, medium, and loud! Quiet Text LinksThis is the subtlest link style. Text links are for optional, supplementary actions [&hellip;]","og_url":"https:\/\/brand.utk.edu\/web-design-system\/buttons-and-links\/","og_site_name":"Torch Theme Pattern Library","article_modified_time":"2025-03-04T17:57:05+00:00","og_image":[{"width":1862,"height":288,"url":"https:\/\/brand.utk.edu\/web-design-system\/wp-content\/uploads\/sites\/2\/2024\/04\/to-set-link.jpg","type":"image\/jpeg"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/brand.utk.edu\/web-design-system\/buttons-and-links\/","url":"https:\/\/brand.utk.edu\/web-design-system\/buttons-and-links\/","name":"Button &amp; Link Styles - Torch Theme Pattern Library","isPartOf":{"@id":"https:\/\/brand.utk.edu\/web-design-system\/#website"},"primaryImageOfPage":{"@id":"https:\/\/brand.utk.edu\/web-design-system\/buttons-and-links\/#primaryimage"},"image":{"@id":"https:\/\/brand.utk.edu\/web-design-system\/buttons-and-links\/#primaryimage"},"thumbnailUrl":"https:\/\/brand.utk.edu\/web-design-system\/wp-content\/uploads\/sites\/2\/2024\/04\/to-set-link.jpg","datePublished":"2024-04-30T16:57:24+00:00","dateModified":"2025-03-04T17:57:05+00:00","breadcrumb":{"@id":"https:\/\/brand.utk.edu\/web-design-system\/buttons-and-links\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/brand.utk.edu\/web-design-system\/buttons-and-links\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/brand.utk.edu\/web-design-system\/buttons-and-links\/#primaryimage","url":"https:\/\/brand.utk.edu\/web-design-system\/wp-content\/uploads\/sites\/2\/2024\/04\/to-set-link.jpg","contentUrl":"https:\/\/brand.utk.edu\/web-design-system\/wp-content\/uploads\/sites\/2\/2024\/04\/to-set-link.jpg","width":1862,"height":288,"caption":"Getting clever with our examples"},{"@type":"BreadcrumbList","@id":"https:\/\/brand.utk.edu\/web-design-system\/buttons-and-links\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/brand.utk.edu\/web-design-system\/"},{"@type":"ListItem","position":2,"name":"Button &amp; Link Styles"}]},{"@type":"WebSite","@id":"https:\/\/brand.utk.edu\/web-design-system\/#website","url":"https:\/\/brand.utk.edu\/web-design-system\/","name":"Design System Documentation","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/brand.utk.edu\/web-design-system\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/brand.utk.edu\/web-design-system\/wp-json\/wp\/v2\/pages\/390","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/brand.utk.edu\/web-design-system\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/brand.utk.edu\/web-design-system\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/brand.utk.edu\/web-design-system\/wp-json\/wp\/v2\/users\/449"}],"replies":[{"embeddable":true,"href":"https:\/\/brand.utk.edu\/web-design-system\/wp-json\/wp\/v2\/comments?post=390"}],"version-history":[{"count":0,"href":"https:\/\/brand.utk.edu\/web-design-system\/wp-json\/wp\/v2\/pages\/390\/revisions"}],"wp:attachment":[{"href":"https:\/\/brand.utk.edu\/web-design-system\/wp-json\/wp\/v2\/media?parent=390"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}