{"id":1718,"date":"2024-05-02T18:46:00","date_gmt":"2024-05-02T18:46:00","guid":{"rendered":"https:\/\/shuffle.dev\/blog\/?p=1718"},"modified":"2024-05-04T20:20:17","modified_gmt":"2024-05-04T20:20:17","slug":"hero-components-spotlight","status":"publish","type":"post","link":"https:\/\/shuffle.dev\/blog\/2024\/05\/hero-components-spotlight\/","title":{"rendered":"Hero Components Spotlight"},"content":{"rendered":"\n<p class=\"mb-6 leading-loose\"><strong>Picking the right header is crucial to website reception. Will the user stay on the website or bounce? That depends on what he will see!<\/strong><\/p>\n\n\n\n<p class=\"mb-6 leading-loose\">In this post we&#8217;ll explore design choices during choosing and building headers sections (also know as hero components).<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"683\" src=\"https:\/\/static.shuffle.dev\/blog\/uploads\/2022\/05\/hero-spotlight-tiny-1024x683.png\" alt=\"Cover graphics for article about hero components. You can see hero components examples in the background behind the shadows.\" class=\"wp-image-1720\" srcset=\"https:\/\/static.shuffle.dev\/blog\/uploads\/2022\/05\/hero-spotlight-tiny-1024x683.png 1024w, https:\/\/static.shuffle.dev\/blog\/uploads\/2022\/05\/hero-spotlight-tiny-300x200.png 300w, https:\/\/static.shuffle.dev\/blog\/uploads\/2022\/05\/hero-spotlight-tiny-768x512.png 768w, https:\/\/static.shuffle.dev\/blog\/uploads\/2022\/05\/hero-spotlight-tiny.png 1326w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"mb-6 leading-loose\">In Shuffle we have over 270 header components in different UI libraries. They represent different aesthetic and usability visions. We&#8217;ll go through some examples here, and you can see the <a href=\"https:\/\/shuffle.dev\/components\/all\/all\/headers\" class=\"text-brand-blue underline hover:no-underline\">entire collection with source code here<\/a>. <\/p>\n\n\n\n<h2 class=\"mb-6 text-3xl font-bold\">Put your headline in the center of hero components<\/h2>\n\n\n\n<p class=\"mb-6 leading-loose\">The first element that speaks to the user is the slogan. Most hero section layouts revolve around it. The headline must be the central element, boldly conveying the main message of the page.<\/p>\n\n\n\n<figure class=\"wp-block-image mt-8 mb-8\"><img decoding=\"async\" src=\"https:\/\/static.shuffle.dev\/components\/preview\/2c34f9b9-2c85-41cf-bacb-c88439ad8ae8\/headers\/04_a4116e77f5.png\" alt=\"tailwind hero component with headline in the center\"\/><figcaption class=\"wp-element-caption\" class=\"mt-2 text-sm leading-loose text-center\">Flaro UI library<\/figcaption><\/figure>\n\n\n\n<p class=\"mb-6 leading-loose\">There are many theories about what the text should convey and they differ from industry to industry. Here, for example, you will find <a href=\"https:\/\/www.forbes.com\/sites\/forbesagencycouncil\/2022\/05\/03\/16-smart-tips-to-write-eye-catching-homepage-headlines\/\" rel=\"nofollow\" class=\"text-brand-blue underline hover:no-underline\">detailed guide for writing SaaS headline with examples<\/a>. One thing is certain &#8211; it needs to grab attention, introduce the story and be relatively short.<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/static.shuffle.dev\/components\/preview\/58d6fa43-a4b7-4504-baf1-0364fee2658f\/headers\/08_6327fea01f.png\" alt=\"bootstrap header component with massive headline, without key visual\" width=\"840\" height=\"461\"\/><figcaption class=\"wp-element-caption\" class=\"mt-2 text-sm leading-loose text-center\">Cronos UI library<\/figcaption><\/figure>\n\n\n\n<h2 class=\"mb-6 text-3xl font-bold\">Key visual is, well, the key<\/h2>\n\n\n\n<p class=\"mb-6 leading-loose\">The second important aspect is key visual. These graphics will give style and character to the entire page, complementing the message of the headline. If it is a page about a specific product, choosing it is easy.<\/p>\n\n\n\n<figure class=\"wp-block-image mt-8 mb-8\"><img decoding=\"async\" src=\"https:\/\/static.shuffle.dev\/components\/preview\/2eae72cf-d2c1-44ef-be9a-0cd09d36bc4d\/headers-dark-wave\/02_awz.jpg\" alt=\"Flex UI library\"\/><figcaption class=\"wp-element-caption\" class=\"mt-2 text-sm leading-loose text-center\">Flex UI library<\/figcaption><\/figure>\n\n\n\n<p class=\"mb-6 leading-loose\">However, when it is an agency site or a slightly more abstract business, the aesthetics and the right emotional message of the graphic are more crucial.<\/p>\n\n\n\n<figure class=\"wp-block-image mt-8 mb-8\"><img decoding=\"async\" src=\"https:\/\/static.shuffle.dev\/components\/preview\/2eae72cf-d2c1-44ef-be9a-0cd09d36bc4d\/headers-white-pattern\/01_awz.jpg\" alt=\"Well balanced hero component with key visual, headlines and buttons for Tailwind CSS\"\/><\/figure>\n\n\n\n<h2 class=\"mb-6 text-3xl font-bold\">Show your users what they have to do<\/h2>\n\n\n\n<p class=\"mb-6 leading-loose\">The third important element is to clearly show the user what to do next. What action to take or what to click on. You need to plan the user&#8217;s path and give them a chance to complete it with buttons or forms.<\/p>\n\n\n\n<figure class=\"wp-block-image mt-8 mb-8\"><img decoding=\"async\" src=\"https:\/\/static.shuffle.dev\/components\/preview\/52655c82-4380-4a57-9501-6cba93b3b9d3\/headers\/01_awz.jpg\" alt=\"Bootstrap and Tailwind header component with one clear way of action - to leave an email\"\/><figcaption class=\"wp-element-caption\" class=\"mt-2 text-sm leading-loose text-center\">Saturn UI library<\/figcaption><\/figure>\n\n\n\n<h2 class=\"mb-6 text-3xl font-bold\">If someone already trusts you, brag about it in hero component<\/h2>\n\n\n\n<p class=\"mb-6 leading-loose\">The fourth aspect is social proof. If you can show off customer ratings or logos of companies using your product, then visitors are much more likely to stay and explore your website. People like to be fashion trendsetters, but in business decisions, however, most of us would like to choose something that is proven and works.<\/p>\n\n\n\n<figure class=\"wp-block-image mt-8 mb-8\"><img decoding=\"async\" src=\"https:\/\/static.shuffle.dev\/components\/preview\/3a954963-1c2b-4e22-8e7b-4c0232c302fc\/headers\/04_c433d9e988.png\" alt=\"Tailwind CSS header component with brand logos\"\/><figcaption class=\"wp-element-caption\" class=\"mt-2 text-sm leading-loose text-center\">Zospace UI library<\/figcaption><\/figure>\n\n\n\n<h2 class=\"mb-6 text-3xl font-bold\">Copy the code or build whole landing page in visual editor<\/h2>\n\n\n\n<p class=\"mb-6 leading-loose\">So much for the hero components. <br><br>These were just a few select examples. These were just a few select examples. You can view the full gallery of components together, or by breaking it down into frameworks &#8211; <a href=\"https:\/\/shuffle.dev\/components\/bootstrap\" class=\"text-brand-blue underline hover:no-underline\">Bootstrap<\/a>, <a href=\"https:\/\/shuffle.dev\/components\/bulma\" class=\"text-brand-blue underline hover:no-underline\">Bulma<\/a>, <a href=\"https:\/\/shuffle.dev\/components\/material-ui\" class=\"text-brand-blue underline hover:no-underline\">Material-UI<\/a> and <a href=\"https:\/\/shuffle.dev\/components\/tailwind\" class=\"text-brand-blue underline hover:no-underline\">Tailwind CSS components<\/a> and types. <\/p>\n\n\n\n<p class=\"mb-6 leading-loose\">Use our visual editor to combine them with thousands of other components in the same style. Once you&#8217;ve built the template and completed the assets, export the code and deploy it freely!&nbsp;<\/p>\n\n\n\n<p class=\"mb-6 leading-loose\"><a href=\"https:\/\/shuffle.dev\/editor\" class=\"text-brand-blue underline hover:no-underline\">Play with it now<\/a><\/p>\n\n\n\n<figure class=\"wp-block-image mt-8 mb-8\"><img decoding=\"async\" src=\"https:\/\/lh5.googleusercontent.com\/4dsJfzq49dye-gOgN0vDinf_S5uGUUYA5p_DoGr6i9Mf-pCzlc1iF-B5yK_qB0j1G5NWygeP7ubmEE-F0TBAKzWkqIQ3zo6SCAJYlng4oAIdkQUbl9XrcJ-54NGXzZuupYqbnHdHBn3Q4h9MwA\" alt=\"\"\/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Picking the right header is crucial to website reception. Will the user stay on the website or bounce? That depends on what he will see!<\/p>\n","protected":false},"author":6,"featured_media":1720,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[4,12,30,14,22,24],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.0 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>6 examples of design choices for hero components | Shuffle<\/title>\n<meta name=\"description\" content=\"In this post we&#039;ll explore design choices during choosing and building hero components and show examples with code.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/shuffle.dev\/blog\/2024\/05\/hero-components-spotlight\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"6 examples of design choices for hero components | Shuffle\" \/>\n<meta property=\"og:description\" content=\"In this post we&#039;ll explore design choices during choosing and building hero components and show examples with code.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/shuffle.dev\/blog\/2024\/05\/hero-components-spotlight\/\" \/>\n<meta property=\"og:site_name\" content=\"Shuffle\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/BootstrapShuffle\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-05-02T18:46:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-05-04T20:20:17+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/static.shuffle.dev\/blog\/uploads\/2022\/05\/hero-spotlight-tiny.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1326\" \/>\n\t<meta property=\"og:image:height\" content=\"884\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"S\u0142awomir Pawlak\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"S\u0142awomir Pawlak\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/shuffle.dev\/blog\/2024\/05\/hero-components-spotlight\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/shuffle.dev\/blog\/2024\/05\/hero-components-spotlight\/\"},\"author\":{\"name\":\"S\u0142awomir Pawlak\",\"@id\":\"https:\/\/shuffle.dev\/blog\/#\/schema\/person\/3bc78df53e2d5db26b5b0ec8d3087168\"},\"headline\":\"Hero Components Spotlight\",\"datePublished\":\"2024-05-02T18:46:00+00:00\",\"dateModified\":\"2024-05-04T20:20:17+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/shuffle.dev\/blog\/2024\/05\/hero-components-spotlight\/\"},\"wordCount\":470,\"publisher\":{\"@id\":\"https:\/\/shuffle.dev\/blog\/#organization\"},\"articleSection\":[\"Bootstrap\",\"Builder\",\"Bulma\",\"Learning\",\"Tailwind\",\"Templates\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/shuffle.dev\/blog\/2024\/05\/hero-components-spotlight\/\",\"url\":\"https:\/\/shuffle.dev\/blog\/2024\/05\/hero-components-spotlight\/\",\"name\":\"6 examples of design choices for hero components | Shuffle\",\"isPartOf\":{\"@id\":\"https:\/\/shuffle.dev\/blog\/#website\"},\"datePublished\":\"2024-05-02T18:46:00+00:00\",\"dateModified\":\"2024-05-04T20:20:17+00:00\",\"description\":\"In this post we'll explore design choices during choosing and building hero components and show examples with code.\",\"breadcrumb\":{\"@id\":\"https:\/\/shuffle.dev\/blog\/2024\/05\/hero-components-spotlight\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/shuffle.dev\/blog\/2024\/05\/hero-components-spotlight\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/shuffle.dev\/blog\/2024\/05\/hero-components-spotlight\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/shuffle.dev\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Hero Components Spotlight\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/shuffle.dev\/blog\/#website\",\"url\":\"https:\/\/shuffle.dev\/blog\/\",\"name\":\"Shuffle\",\"description\":\"Build Websites Faster with an AI Visual Editor\",\"publisher\":{\"@id\":\"https:\/\/shuffle.dev\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/shuffle.dev\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/shuffle.dev\/blog\/#organization\",\"name\":\"Shuffle\",\"url\":\"https:\/\/shuffle.dev\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/shuffle.dev\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/static.shuffle.dev\/blog\/uploads\/2021\/07\/logo.jpg\",\"contentUrl\":\"https:\/\/static.shuffle.dev\/blog\/uploads\/2021\/07\/logo.jpg\",\"width\":400,\"height\":400,\"caption\":\"Shuffle\"},\"image\":{\"@id\":\"https:\/\/shuffle.dev\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.linkedin.com\/company\/bootstrap-shuffle\/about\/\",\"https:\/\/www.facebook.com\/BootstrapShuffle\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/shuffle.dev\/blog\/#\/schema\/person\/3bc78df53e2d5db26b5b0ec8d3087168\",\"name\":\"S\u0142awomir Pawlak\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/shuffle.dev\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/96c62afa0672a20d8601c9ed9b9df2b1?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/96c62afa0672a20d8601c9ed9b9df2b1?s=96&d=mm&r=g\",\"caption\":\"S\u0142awomir Pawlak\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"6 examples of design choices for hero components | Shuffle","description":"In this post we'll explore design choices during choosing and building hero components and show examples with code.","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:\/\/shuffle.dev\/blog\/2024\/05\/hero-components-spotlight\/","og_locale":"en_US","og_type":"article","og_title":"6 examples of design choices for hero components | Shuffle","og_description":"In this post we'll explore design choices during choosing and building hero components and show examples with code.","og_url":"https:\/\/shuffle.dev\/blog\/2024\/05\/hero-components-spotlight\/","og_site_name":"Shuffle","article_publisher":"https:\/\/www.facebook.com\/BootstrapShuffle\/","article_published_time":"2024-05-02T18:46:00+00:00","article_modified_time":"2024-05-04T20:20:17+00:00","og_image":[{"width":1326,"height":884,"url":"https:\/\/static.shuffle.dev\/blog\/uploads\/2022\/05\/hero-spotlight-tiny.png","type":"image\/png"}],"author":"S\u0142awomir Pawlak","twitter_card":"summary_large_image","twitter_misc":{"Written by":"S\u0142awomir Pawlak","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/shuffle.dev\/blog\/2024\/05\/hero-components-spotlight\/#article","isPartOf":{"@id":"https:\/\/shuffle.dev\/blog\/2024\/05\/hero-components-spotlight\/"},"author":{"name":"S\u0142awomir Pawlak","@id":"https:\/\/shuffle.dev\/blog\/#\/schema\/person\/3bc78df53e2d5db26b5b0ec8d3087168"},"headline":"Hero Components Spotlight","datePublished":"2024-05-02T18:46:00+00:00","dateModified":"2024-05-04T20:20:17+00:00","mainEntityOfPage":{"@id":"https:\/\/shuffle.dev\/blog\/2024\/05\/hero-components-spotlight\/"},"wordCount":470,"publisher":{"@id":"https:\/\/shuffle.dev\/blog\/#organization"},"articleSection":["Bootstrap","Builder","Bulma","Learning","Tailwind","Templates"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/shuffle.dev\/blog\/2024\/05\/hero-components-spotlight\/","url":"https:\/\/shuffle.dev\/blog\/2024\/05\/hero-components-spotlight\/","name":"6 examples of design choices for hero components | Shuffle","isPartOf":{"@id":"https:\/\/shuffle.dev\/blog\/#website"},"datePublished":"2024-05-02T18:46:00+00:00","dateModified":"2024-05-04T20:20:17+00:00","description":"In this post we'll explore design choices during choosing and building hero components and show examples with code.","breadcrumb":{"@id":"https:\/\/shuffle.dev\/blog\/2024\/05\/hero-components-spotlight\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/shuffle.dev\/blog\/2024\/05\/hero-components-spotlight\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/shuffle.dev\/blog\/2024\/05\/hero-components-spotlight\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/shuffle.dev\/blog\/"},{"@type":"ListItem","position":2,"name":"Hero Components Spotlight"}]},{"@type":"WebSite","@id":"https:\/\/shuffle.dev\/blog\/#website","url":"https:\/\/shuffle.dev\/blog\/","name":"Shuffle","description":"Build Websites Faster with an AI Visual Editor","publisher":{"@id":"https:\/\/shuffle.dev\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/shuffle.dev\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/shuffle.dev\/blog\/#organization","name":"Shuffle","url":"https:\/\/shuffle.dev\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/shuffle.dev\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/static.shuffle.dev\/blog\/uploads\/2021\/07\/logo.jpg","contentUrl":"https:\/\/static.shuffle.dev\/blog\/uploads\/2021\/07\/logo.jpg","width":400,"height":400,"caption":"Shuffle"},"image":{"@id":"https:\/\/shuffle.dev\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.linkedin.com\/company\/bootstrap-shuffle\/about\/","https:\/\/www.facebook.com\/BootstrapShuffle\/"]},{"@type":"Person","@id":"https:\/\/shuffle.dev\/blog\/#\/schema\/person\/3bc78df53e2d5db26b5b0ec8d3087168","name":"S\u0142awomir Pawlak","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/shuffle.dev\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/96c62afa0672a20d8601c9ed9b9df2b1?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/96c62afa0672a20d8601c9ed9b9df2b1?s=96&d=mm&r=g","caption":"S\u0142awomir Pawlak"}}]}},"_links":{"self":[{"href":"https:\/\/shuffle.dev\/blog\/wp-json\/wp\/v2\/posts\/1718"}],"collection":[{"href":"https:\/\/shuffle.dev\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/shuffle.dev\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/shuffle.dev\/blog\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/shuffle.dev\/blog\/wp-json\/wp\/v2\/comments?post=1718"}],"version-history":[{"count":10,"href":"https:\/\/shuffle.dev\/blog\/wp-json\/wp\/v2\/posts\/1718\/revisions"}],"predecessor-version":[{"id":1829,"href":"https:\/\/shuffle.dev\/blog\/wp-json\/wp\/v2\/posts\/1718\/revisions\/1829"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/shuffle.dev\/blog\/wp-json\/wp\/v2\/media\/1720"}],"wp:attachment":[{"href":"https:\/\/shuffle.dev\/blog\/wp-json\/wp\/v2\/media?parent=1718"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/shuffle.dev\/blog\/wp-json\/wp\/v2\/categories?post=1718"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/shuffle.dev\/blog\/wp-json\/wp\/v2\/tags?post=1718"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}