[{"data":1,"prerenderedAt":20},["ShallowReactive",2],{"clay-page:\u002Fwriting\u002Fcomponents\u002Fcards":3},{"html":4,"toc":5,"description":16,"hero":17,"list":18,"socialImage":19},"\u003Ch1 id=\"cards\">Cards\u003C\u002Fh1>\n\u003Cp>Cards are links laid out as a grid: good for a start page, the top of a section or “where to go next”. Write a list of links:\u003C\u002Fp>\n\u003Cdiv class=\"code-block\">\u003Cpre class=\"shiki shiki-themes light-plus dark-plus\" style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4;--shiki-light-bg:#FFFFFF;--shiki-dark-bg:#1E1E1E\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">::: cards\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0451A5;--shiki-dark:#6796E6\">-\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\"> [\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#A31515;--shiki-dark:#CE9178\">Quick Start\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">](\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000;--shiki-light-text-decoration:underline;--shiki-dark:#D4D4D4;--shiki-dark-text-decoration:underline\">..\u002F..\u002Fgetting-started\u002Fquick-start.md\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">)\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0451A5;--shiki-dark:#6796E6\">-\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\"> [\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#A31515;--shiki-dark:#CE9178\">Publishing\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">](\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000;--shiki-light-text-decoration:underline;--shiki-dark:#D4D4D4;--shiki-dark-text-decoration:underline\">..\u002F..\u002Fpublishing\u002Findex.md\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">)\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0451A5;--shiki-dark:#6796E6\">-\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\"> [\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#A31515;--shiki-dark:#CE9178\">Search\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">](\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000;--shiki-light-text-decoration:underline;--shiki-dark:#D4D4D4;--shiki-dark-text-decoration:underline\">..\u002F..\u002Ffeatures\u002Fsearch.md\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">)\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">:::\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\u003Cbutton type=\"button\" class=\"copy-code btn btn-sm btn-square btn-ghost\" title=\"Copy code\" aria-label=\"Copy code\">\u003Ci class=\"fa-solid fa-copy\">\u003C\u002Fi>\u003C\u002Fbutton>\u003C\u002Fdiv>\n\u003Cdiv class=\"clay-cards not-prose\">\u003Ca class=\"clay-card\" href=\"\u002Fclay-example-repo\u002Fgetting-started\u002Fquick-start\" data-route=\"\u002Fgetting-started\u002Fquick-start\">\u003Ci class=\"clay-card-icon fa-solid fa-bolt\" aria-hidden=\"true\">\u003C\u002Fi>\u003Cspan class=\"clay-card-title\">Quick Start\u003C\u002Fspan>\u003Cspan class=\"clay-card-text\">Build your first Clay site from an empty folder in five minutes.\u003C\u002Fspan>\u003C\u002Fa>\u003Ca class=\"clay-card\" href=\"\u002Fclay-example-repo\u002Fpublishing\" data-route=\"\u002Fpublishing\">\u003Ci class=\"clay-card-icon fa-solid fa-cloud-arrow-up\" aria-hidden=\"true\">\u003C\u002Fi>\u003Cspan class=\"clay-card-title\">Publishing\u003C\u002Fspan>\u003Cspan class=\"clay-card-text\">The clay commands, the checks every build runs, and how to put the site online on GitHub Pages or any other host.\u003C\u002Fspan>\u003C\u002Fa>\u003Ca class=\"clay-card\" href=\"\u002Fclay-example-repo\u002Ffeatures\u002Fsearch\" data-route=\"\u002Ffeatures\u002Fsearch\">\u003Ci class=\"clay-card-icon fa-solid fa-magnifying-glass\" aria-hidden=\"true\">\u003C\u002Fi>\u003Cspan class=\"clay-card-title\">Search\u003C\u002Fspan>\u003Cspan class=\"clay-card-text\">Full-text search over every page and section, with typo tolerance, highlighted matches and keyboard shortcuts.\u003C\u002Fspan>\u003C\u002Fa>\u003C\u002Fdiv>\n\u003Cp>A card that leads to a page of your docs shows that page’s \u003Ccode>icon\u003C\u002Fcode> and \u003Ccode>description\u003C\u002Fcode> from its \u003Ca href=\"\u002Fclay-example-repo\u002Fconfiguration\u002Ffront-matter\" data-route=\"\u002Fconfiguration\u002Ffront-matter\">front matter\u003C\u002Fa>, so you write them once and every card stays up to date.\u003C\u002Fp>\n\u003Ch2 id=\"your-own-icon-and-text\">\u003Ca class=\"heading-anchor\" href=\"#your-own-icon-and-text\" aria-label=\"Link to this section\" data-route=\"#your-own-icon-and-text\">#\u003C\u002Fa>Your own icon and text\u003C\u002Fh2>\n\u003Cp>Give a card an icon in braces after the link, and its text on the next lines:\u003C\u002Fp>\n\u003Cdiv class=\"code-block\">\u003Cpre class=\"shiki shiki-themes light-plus dark-plus\" style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4;--shiki-light-bg:#FFFFFF;--shiki-dark-bg:#1E1E1E\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">::: cards\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0451A5;--shiki-dark:#6796E6\">-\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\"> [\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#A31515;--shiki-dark:#CE9178\">Clay on GitHub\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">](\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000;--shiki-light-text-decoration:underline;--shiki-dark:#D4D4D4;--shiki-dark-text-decoration:underline\">https:\u002F\u002Fgithub.com\u002Fclay-doc\u002Fclay\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">) {fa-brands fa-github}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">  Source code, issues and releases.\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0451A5;--shiki-dark:#6796E6\">-\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\"> [\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#A31515;--shiki-dark:#CE9178\">Code Blocks\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">](\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000;--shiki-light-text-decoration:underline;--shiki-dark:#D4D4D4;--shiki-dark-text-decoration:underline\">..\u002Fcode-blocks.md\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">) {fa-solid fa-star}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">  Our favorite page: highlighting, diffs and focus.\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">:::\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\u003Cbutton type=\"button\" class=\"copy-code btn btn-sm btn-square btn-ghost\" title=\"Copy code\" aria-label=\"Copy code\">\u003Ci class=\"fa-solid fa-copy\">\u003C\u002Fi>\u003C\u002Fbutton>\u003C\u002Fdiv>\n\u003Cdiv class=\"clay-cards not-prose\">\u003Ca class=\"clay-card\" href=\"https:\u002F\u002Fgithub.com\u002Fclay-doc\u002Fclay\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Ci class=\"clay-card-icon fa-brands fa-github\" aria-hidden=\"true\">\u003C\u002Fi>\u003Cspan class=\"clay-card-title\">Clay on GitHub\u003C\u002Fspan>\u003Cspan class=\"clay-card-text\">Source code, issues and releases.\u003C\u002Fspan>\u003C\u002Fa>\u003Ca class=\"clay-card\" href=\"\u002Fclay-example-repo\u002Fwriting\u002Fcode-blocks\" data-route=\"\u002Fwriting\u002Fcode-blocks\">\u003Ci class=\"clay-card-icon fa-solid fa-star\" aria-hidden=\"true\">\u003C\u002Fi>\u003Cspan class=\"clay-card-title\">Code Blocks\u003C\u002Fspan>\u003Cspan class=\"clay-card-text\">Our favorite page: highlighting, diffs and focus.\u003C\u002Fspan>\u003C\u002Fa>\u003C\u002Fdiv>\n\u003Cul>\n\u003Cli>\u003Cstrong>The link’s text is the card’s title.\u003C\u002Fstrong> The card leads where the link does.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>The icon\u003C\u002Fstrong> is a \u003Ca href=\"\u002Fclay-example-repo\u002Ffeatures\u002Fthemes-and-icons\" data-route=\"\u002Ffeatures\u002Fthemes-and-icons\">Font Awesome\u003C\u002Fa> icon, written as its classes.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>The text\u003C\u002Fstrong> is indented to the link, like the second line of any list item. \u003Cstrong>Bold\u003C\u002Fstrong>, \u003Cem>italics\u003C\u002Fem> and \u003Ccode>code\u003C\u002Fcode> work; links in it are shown as text, since the whole card is a link.\u003C\u002Fli>\n\u003Cli>Cards that lead to other sites have no page to borrow from: give them an icon and text of their own.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch2 id=\"cards-or-list\">\u003Ca class=\"heading-anchor\" href=\"#cards-or-list\" aria-label=\"Link to this section\" data-route=\"#cards-or-list\">#\u003C\u002Fa>Cards or \u003Ccode>list\u003C\u002Fcode>\u003C\u002Fh2>\n\u003Cp>\u003Ccode>list: true\u003C\u002Fcode> in a folder’s \u003Ccode>index.md\u003C\u002Fcode> lists \u003Cem>all\u003C\u002Fem> of the folder’s pages, in the order of the sidebar. Cards show the pages you choose, in the order you write them, from anywhere in your docs and beyond. See \u003Ca href=\"\u002Fclay-example-repo\u002Forganizing\u002Findex-pages\" data-route=\"\u002Forganizing\u002Findex-pages\">index pages\u003C\u002Fa>.\u003C\u002Fp>\n\u003Ch2 id=\"layout\">\u003Ca class=\"heading-anchor\" href=\"#layout\" aria-label=\"Link to this section\" data-route=\"#layout\">#\u003C\u002Fa>Layout\u003C\u002Fh2>\n\u003Cp>Cards fill as many columns as fit, and stack on phones. Links in cards are \u003Ca href=\"\u002Fclay-example-repo\u002Fpublishing\u002Fbuild-checks\" data-route=\"\u002Fpublishing\u002Fbuild-checks\">checked\u003C\u002Fa> on every build like all other links.\u003C\u002Fp>\n",[6,10,13],{"id":7,"text":8,"level":9},"your-own-icon-and-text","Your own icon and text",2,{"id":11,"text":12,"level":9},"cards-or-list","Cards or list",{"id":14,"text":15,"level":9},"layout","Layout","Links as a grid of cards, with the icon and description of the pages they lead to, or ones of your own.",null,false,"\u002F_clay\u002Fsocial\u002Fwriting\u002Fcomponents\u002Fcards.png",1792666370495]