[{"data":1,"prerenderedAt":20},["ShallowReactive",2],{"clay-page:\u002Fde\u002Fwriting\u002Fcomponents\u002Fcards":3},{"html":4,"toc":5,"description":16,"hero":17,"list":18,"socialImage":19},"\u003Ch1 id=\"karten\">Karten\u003C\u002Fh1>\n\u003Cp>Karten sind Links, als Raster angeordnet: gut für eine Startseite, den Anfang eines Bereichs oder „wie es weitergeht“. Schreib eine Liste von 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\">Schnellstart\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\">Veröffentlichen\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\">Suche\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=\"Code kopieren\" aria-label=\"Code kopieren\">\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\u002Fde\u002Fgetting-started\u002Fquick-start\" data-route=\"\u002Fde\u002Fgetting-started\u002Fquick-start\">\u003Ci class=\"clay-card-icon fa-solid fa-bolt\" aria-hidden=\"true\">\u003C\u002Fi>\u003Cspan class=\"clay-card-title\">Schnellstart\u003C\u002Fspan>\u003Cspan class=\"clay-card-text\">Deine erste Clay-Seite, von einem leeren Ordner bis zum fertigen Build in fünf Minuten.\u003C\u002Fspan>\u003C\u002Fa>\u003Ca class=\"clay-card\" href=\"\u002Fclay-example-repo\u002Fde\u002Fpublishing\" data-route=\"\u002Fde\u002Fpublishing\">\u003Ci class=\"clay-card-icon fa-solid fa-cloud-arrow-up\" aria-hidden=\"true\">\u003C\u002Fi>\u003Cspan class=\"clay-card-title\">Veröffentlichen\u003C\u002Fspan>\u003Cspan class=\"clay-card-text\">Die clay-Befehle, die Prüfungen jedes Builds und wie die Seite auf GitHub Pages oder bei einem anderen Hoster online geht.\u003C\u002Fspan>\u003C\u002Fa>\u003Ca class=\"clay-card\" href=\"\u002Fclay-example-repo\u002Fde\u002Ffeatures\u002Fsearch\" data-route=\"\u002Fde\u002Ffeatures\u002Fsearch\">\u003Ci class=\"clay-card-icon fa-solid fa-magnifying-glass\" aria-hidden=\"true\">\u003C\u002Fi>\u003Cspan class=\"clay-card-title\">Suche\u003C\u002Fspan>\u003Cspan class=\"clay-card-text\">Volltextsuche über jede Seite und jeden Abschnitt, mit Tippfehlertoleranz, markierten Treffern und Tastenkürzeln.\u003C\u002Fspan>\u003C\u002Fa>\u003C\u002Fdiv>\n\u003Cp>Eine Karte, die zu einer Seite deiner Dokumentation führt, zeigt deren \u003Ccode>icon\u003C\u002Fcode> und \u003Ccode>description\u003C\u002Fcode> aus dem \u003Ca href=\"\u002Fclay-example-repo\u002Fde\u002Fconfiguration\u002Ffront-matter\" data-route=\"\u002Fde\u002Fconfiguration\u002Ffront-matter\">Front Matter\u003C\u002Fa>. Du schreibst sie einmal, und jede Karte bleibt aktuell.\u003C\u002Fp>\n\u003Ch2 id=\"eigenes-icon-und-eigener-text\">\u003Ca class=\"heading-anchor\" href=\"#eigenes-icon-und-eigener-text\" aria-label=\"Link zu diesem Abschnitt\" data-route=\"#eigenes-icon-und-eigener-text\">#\u003C\u002Fa>Eigenes Icon und eigener Text\u003C\u002Fh2>\n\u003Cp>Gib einer Karte ein Icon in geschweiften Klammern nach dem Link und ihren Text in den Zeilen darunter:\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 auf 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\">  Quellcode, Issues und 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\">Codeblöcke\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\">  Unsere Lieblingsseite: Hervorhebung, Diffs und Fokus.\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=\"Code kopieren\" aria-label=\"Code kopieren\">\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 auf GitHub\u003C\u002Fspan>\u003Cspan class=\"clay-card-text\">Quellcode, Issues und Releases.\u003C\u002Fspan>\u003C\u002Fa>\u003Ca class=\"clay-card\" href=\"\u002Fclay-example-repo\u002Fde\u002Fwriting\u002Fcode-blocks\" data-route=\"\u002Fde\u002Fwriting\u002Fcode-blocks\">\u003Ci class=\"clay-card-icon fa-solid fa-star\" aria-hidden=\"true\">\u003C\u002Fi>\u003Cspan class=\"clay-card-title\">Codeblöcke\u003C\u002Fspan>\u003Cspan class=\"clay-card-text\">Unsere Lieblingsseite: Hervorhebung, Diffs und Fokus.\u003C\u002Fspan>\u003C\u002Fa>\u003C\u002Fdiv>\n\u003Cul>\n\u003Cli>\u003Cstrong>Der Text des Links ist der Titel der Karte.\u003C\u002Fstrong> Die Karte führt dorthin, wohin der Link führt.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Das Icon\u003C\u002Fstrong> ist ein \u003Ca href=\"\u002Fclay-example-repo\u002Fde\u002Ffeatures\u002Fthemes-and-icons\" data-route=\"\u002Fde\u002Ffeatures\u002Fthemes-and-icons\">Font-Awesome\u003C\u002Fa>-Icon, geschrieben als seine Klassen.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Der Text\u003C\u002Fstrong> ist bis zum Link eingerückt, wie die zweite Zeile jedes Listenpunkts. \u003Cstrong>Fett\u003C\u002Fstrong>, \u003Cem>kursiv\u003C\u002Fem> und \u003Ccode>Code\u003C\u002Fcode> funktionieren; Links darin erscheinen als Text, denn die ganze Karte ist ein Link.\u003C\u002Fli>\n\u003Cli>Karten zu anderen Websites haben keine Seite, von der sie Icon und Text übernehmen: Gib ihnen eigene.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch2 id=\"karten-oder-list\">\u003Ca class=\"heading-anchor\" href=\"#karten-oder-list\" aria-label=\"Link zu diesem Abschnitt\" data-route=\"#karten-oder-list\">#\u003C\u002Fa>Karten oder \u003Ccode>list\u003C\u002Fcode>\u003C\u002Fh2>\n\u003Cp>\u003Ccode>list: true\u003C\u002Fcode> in der \u003Ccode>index.md\u003C\u002Fcode> eines Ordners listet \u003Cem>alle\u003C\u002Fem> Seiten des Ordners, in der Reihenfolge der Seitenleiste. Karten zeigen die Seiten, die du wählst, in der Reihenfolge, in der du sie schreibst, aus der ganzen Dokumentation und darüber hinaus. Siehe \u003Ca href=\"\u002Fclay-example-repo\u002Fde\u002Forganizing\u002Findex-pages\" data-route=\"\u002Fde\u002Forganizing\u002Findex-pages\">Indexseiten\u003C\u002Fa>.\u003C\u002Fp>\n\u003Ch2 id=\"anordnung\">\u003Ca class=\"heading-anchor\" href=\"#anordnung\" aria-label=\"Link zu diesem Abschnitt\" data-route=\"#anordnung\">#\u003C\u002Fa>Anordnung\u003C\u002Fh2>\n\u003Cp>Karten füllen so viele Spalten, wie Platz haben, und stehen auf Smartphones untereinander. Links in Karten werden bei jedem Build \u003Ca href=\"\u002Fclay-example-repo\u002Fde\u002Fpublishing\u002Fbuild-checks\" data-route=\"\u002Fde\u002Fpublishing\u002Fbuild-checks\">geprüft\u003C\u002Fa> wie alle anderen Links.\u003C\u002Fp>\n",[6,10,13],{"id":7,"text":8,"level":9},"eigenes-icon-und-eigener-text","Eigenes Icon und eigener Text",2,{"id":11,"text":12,"level":9},"karten-oder-list","Karten oder list",{"id":14,"text":15,"level":9},"anordnung","Anordnung","Links als Raster aus Karten, mit Icon und Beschreibung der Seiten, zu denen sie führen, oder eigenen.",null,false,"\u002F_clay\u002Fsocial\u002Fde\u002Fwriting\u002Fcomponents\u002Fcards.png",1792666372009]