From 47d82fdd9a75d74bd8f6af4e81a1d580f354594b Mon Sep 17 00:00:00 2001
From: Eric Y Liu <ericyl.us@gmail.com>
Date: Fri, 23 Jul 2021 08:45:55 -0700
Subject: [PATCH] docs: add svelte:head example for loading CDN styles

---
 docs/src/pages/index.svelte | 20 ++++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

diff --git a/docs/src/pages/index.svelte b/docs/src/pages/index.svelte
index 19048b3f..d19d69c4 100644
--- a/docs/src/pages/index.svelte
+++ b/docs/src/pages/index.svelte
@@ -40,6 +40,12 @@
     />
   </head>
 </html>`;
+  $: cssCdnSvelteHead = `<svelte:head>
+  <link
+    rel="stylesheet"
+    href="https://unpkg.com/carbon-components-svelte/css/${$theme}.css"
+  />
+</svelte:head>`;
 </script>
 
 <Content>
@@ -144,10 +150,8 @@
                   unpkg.com
                 </OutboundLink>.
               </p>
-              <p>
-                This is best suited for rapid prototyping or if your set-up does
-                not use a CSS loader.
-              </p>
+              <p>This is best suited for rapid prototyping.</p>
+              <h5>HTML</h5>
               <Row padding noGutter>
                 <Column>
                   <p>
@@ -155,6 +159,14 @@
                   </p>
                 </Column>
               </Row>
+              <h5>svelte:head</h5>
+              <Row padding noGutter>
+                <Column>
+                  <p>
+                    <CodeSnippet type="multi" code="{cssCdnSvelteHead}" />
+                  </p>
+                </Column>
+              </Row>
             </TabContent>
             <TabContent>
               <p>