diff --git a/docs/package.json b/docs/package.json
index d74ab016..aa2009cd 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -14,7 +14,7 @@
   },
   "devDependencies": {
     "autoprefixer": "^9.8.5",
-    "carbon-components": "^10.16.0",
+    "carbon-components": "^10.17.0",
     "carbon-components-svelte": "../",
     "clipboard-copy": "^3.1.0",
     "cypress": "^4.10.0",
diff --git a/docs/src/components/Portfolio.svelte b/docs/src/components/Portfolio.svelte
index b006aeae..91c1e349 100644
--- a/docs/src/components/Portfolio.svelte
+++ b/docs/src/components/Portfolio.svelte
@@ -1,35 +1,13 @@
 <script>
   import * as Carbon from "carbon-components-svelte";
   import Add16 from "carbon-icons-svelte/lib/Add16";
+  import TileCard from "./TileCard.svelte";
 
   let skeleton = false;
   let accordionItemOpen = false;
 </script>
 
 <style>
-  :global(.tile-card) {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    min-height: 12rem;
-  }
-
-  .title {
-    font-size: 0.75rem;
-  }
-
-  .tile-card__preview {
-    flex: 1;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 2rem 0;
-  }
-
-  .tile-card__actions {
-    display: none;
-  }
-
   :global(.component-grid) {
     margin-top: 1.5rem;
   }
@@ -58,171 +36,174 @@
 
   <Carbon.Row class="scope">
     <Carbon.Column noGutter>
-      <Carbon.Tile class="tile-card">
-        <div class="title">Accordion</div>
-        <div class="tile-card__preview">
-          <Carbon.Accordion count={3} {skeleton} open={accordionItemOpen}>
-            <Carbon.AccordionItem title="Title 1" bind:open={accordionItemOpen}>
-              Content 1
-            </Carbon.AccordionItem>
-            <Carbon.AccordionItem title="Title 2">
-              Content 2
-            </Carbon.AccordionItem>
-            <Carbon.AccordionItem title="Title 3">
-              Content 3
-            </Carbon.AccordionItem>
-          </Carbon.Accordion>
-        </div>
-        <div class="tile-card__actions">Actions</div>
-      </Carbon.Tile>
+      <TileCard title="Accordion">
+        <Carbon.Accordion count={3} {skeleton} open={accordionItemOpen}>
+          <Carbon.AccordionItem title="Title 1" bind:open={accordionItemOpen}>
+            Content 1
+          </Carbon.AccordionItem>
+          <Carbon.AccordionItem title="Title 2">Content 2</Carbon.AccordionItem>
+          <Carbon.AccordionItem title="Title 3">Content 3</Carbon.AccordionItem>
+        </Carbon.Accordion>
+      </TileCard>
     </Carbon.Column>
     <Carbon.Column noGutter>
-      <Carbon.Tile class="tile-card">
-        <div class="title">Breadcrumb</div>
-        <div class="tile-card__preview">
-          <Carbon.Breadcrumb {skeleton}>
-            <Carbon.BreadcrumbItem href="/">Breadcrumb 1</Carbon.BreadcrumbItem>
-            <Carbon.BreadcrumbItem href="/">Breadcrumb 2</Carbon.BreadcrumbItem>
-            <Carbon.BreadcrumbItem href="/">Breadcrumb 3</Carbon.BreadcrumbItem>
-          </Carbon.Breadcrumb>
-        </div>
-        <div class="tile-card__actions">Actions</div>
-      </Carbon.Tile>
+      <TileCard title="Breadcrumb">
+        <Carbon.Breadcrumb {skeleton}>
+          <Carbon.BreadcrumbItem href="/">Breadcrumb 1</Carbon.BreadcrumbItem>
+          <Carbon.BreadcrumbItem href="/">Breadcrumb 2</Carbon.BreadcrumbItem>
+          <Carbon.BreadcrumbItem href="/">Breadcrumb 3</Carbon.BreadcrumbItem>
+        </Carbon.Breadcrumb>
+      </TileCard>
     </Carbon.Column>
   </Carbon.Row>
 
   <Carbon.Row class="scope">
     <Carbon.Column noGutter>
-      <Carbon.Tile class="tile-card">
-        <div class="title">Primary button</div>
-        <div class="tile-card__preview">
-          <Carbon.Button {skeleton}>Primary</Carbon.Button>
-        </div>
-        <div class="tile-card__actions">Actions</div>
-      </Carbon.Tile>
+      <TileCard title="Primary button">
+        <Carbon.Button {skeleton}>Primary</Carbon.Button>
+      </TileCard>
     </Carbon.Column>
     <Carbon.Column noGutter>
-      <Carbon.Tile class="tile-card">
-        <div class="title">Secondary button</div>
-        <div class="tile-card__preview">
-          <Carbon.Button kind="secondary" {skeleton}>Secondary</Carbon.Button>
-        </div>
-        <div class="tile-card__actions">Actions</div>
-      </Carbon.Tile>
+      <TileCard title="Secondary button">
+        <Carbon.Button kind="secondary" {skeleton}>Secondary</Carbon.Button>
+      </TileCard>
     </Carbon.Column>
     <Carbon.Column noGutter>
-      <Carbon.Tile class="tile-card">
-        <div class="title">Tertiary button</div>
-        <div class="tile-card__preview">
-          <Carbon.Button kind="tertiary" {skeleton}>Tertiary</Carbon.Button>
-        </div>
-        <div class="tile-card__actions">Actions</div>
-      </Carbon.Tile>
+      <TileCard title="Tertiary button">
+        <Carbon.Button kind="tertiary" {skeleton}>Tertiary</Carbon.Button>
+      </TileCard>
     </Carbon.Column>
     <Carbon.Column noGutter>
-      <Carbon.Tile class="tile-card">
-        <div class="title">Ghost button</div>
-        <div class="tile-card__preview">
-          <Carbon.Button kind="ghost" {skeleton}>Ghost</Carbon.Button>
-        </div>
-        <div class="tile-card__actions">Actions</div>
-      </Carbon.Tile>
+      <TileCard title="Ghost button">
+        <Carbon.Button kind="ghost" {skeleton}>Ghost</Carbon.Button>
+      </TileCard>
     </Carbon.Column>
     <Carbon.Column noGutter>
-      <Carbon.Tile class="tile-card">
-        <div class="title">Danger button</div>
-        <div class="tile-card__preview">
-          <Carbon.Button kind="danger" {skeleton}>Danger</Carbon.Button>
-        </div>
-        <div class="tile-card__actions">Actions</div>
-      </Carbon.Tile>
+      <TileCard title="Danger button">
+        <Carbon.Button kind="danger" {skeleton}>Danger</Carbon.Button>
+      </TileCard>
     </Carbon.Column>
   </Carbon.Row>
 
   <Carbon.Row class="scope">
     <Carbon.Column noGutter>
-      <Carbon.Tile class="tile-card">
-        <div class="title">Primary button with icon</div>
-        <div class="tile-card__preview">
-          <Carbon.Button icon={Add16} {skeleton}>With icon</Carbon.Button>
-        </div>
-        <div class="tile-card__actions">Actions</div>
-      </Carbon.Tile>
+      <TileCard title="Primary button with icon">
+        <Carbon.Button icon={Add16} {skeleton}>With icon</Carbon.Button>
+      </TileCard>
     </Carbon.Column>
     <Carbon.Column noGutter>
-      <Carbon.Tile class="tile-card">
-        <div class="title">Icon-only buttons</div>
-        <div class="tile-card__preview">
-          <Carbon.Button
-            icon={Add16}
-            hasIconOnly
-            iconDescription="Primary"
-            tooltipPosition="bottom"
-            tooltipAlignment="center"
-            {skeleton} />
-          <Carbon.Button
-            icon={Add16}
-            hasIconOnly
-            kind="secondary"
-            iconDescription="Secondary"
-            tooltipPosition="bottom"
-            tooltipAlignment="center"
-            {skeleton} />
-          <Carbon.Button
-            icon={Add16}
-            hasIconOnly
-            kind="tertiary"
-            iconDescription="Tertiary"
-            tooltipPosition="bottom"
-            tooltipAlignment="center"
-            {skeleton} />
-          <Carbon.Button
-            icon={Add16}
-            hasIconOnly
-            kind="ghost"
-            iconDescription="Ghost"
-            tooltipPosition="bottom"
-            tooltipAlignment="center"
-            {skeleton} />
-          <Carbon.Button
-            icon={Add16}
-            hasIconOnly
-            kind="danger"
-            iconDescription="Danger"
-            tooltipPosition="bottom"
-            tooltipAlignment="center"
-            {skeleton} />
-        </div>
-        <div class="tile-card__actions">Actions</div>
-      </Carbon.Tile>
+      <TileCard title="Icon-only buttons">
+        <Carbon.Button
+          icon={Add16}
+          hasIconOnly
+          iconDescription="Primary"
+          tooltipPosition="bottom"
+          tooltipAlignment="center"
+          {skeleton} />
+        <Carbon.Button
+          icon={Add16}
+          hasIconOnly
+          kind="secondary"
+          iconDescription="Secondary"
+          tooltipPosition="bottom"
+          tooltipAlignment="center"
+          {skeleton} />
+        <Carbon.Button
+          icon={Add16}
+          hasIconOnly
+          kind="tertiary"
+          iconDescription="Tertiary"
+          tooltipPosition="bottom"
+          tooltipAlignment="center"
+          {skeleton} />
+        <Carbon.Button
+          icon={Add16}
+          hasIconOnly
+          kind="ghost"
+          iconDescription="Ghost"
+          tooltipPosition="bottom"
+          tooltipAlignment="center"
+          {skeleton} />
+        <Carbon.Button
+          icon={Add16}
+          hasIconOnly
+          kind="danger"
+          iconDescription="Danger"
+          tooltipPosition="bottom"
+          tooltipAlignment="center"
+          {skeleton} />
+      </TileCard>
     </Carbon.Column>
   </Carbon.Row>
 
   <Carbon.Row class="scope">
     <Carbon.Column noGutter>
-      <Carbon.Tile class="tile-card">
-        <div class="title">Checkbox</div>
-        <div class="tile-card__preview">
-          <fieldset class="bx--fieldset">
-            <legend class="bx--label">Checkbox heading</legend>
-            <Carbon.Checkbox {skeleton} labelText="Checkbox label" />
-            <Carbon.Checkbox {skeleton} labelText="Checkbox label" />
-            <Carbon.Checkbox {skeleton} labelText="Checkbox label" />
-          </fieldset>
-        </div>
-        <div class="tile-card__actions">Actions</div>
-      </Carbon.Tile>
+      <TileCard title="Checkbox">
+        <fieldset class="bx--fieldset">
+          <legend class="bx--label">Checkbox heading</legend>
+          <Carbon.Checkbox {skeleton} labelText="Checkbox label" />
+          <Carbon.Checkbox {skeleton} labelText="Checkbox label" />
+          <Carbon.Checkbox {skeleton} labelText="Checkbox label" />
+        </fieldset>
+      </TileCard>
     </Carbon.Column>
     <Carbon.Column noGutter>
-      <Carbon.Tile class="tile-card">
-        <div class="title">Code Snippet</div>
-        <div class="tile-card__preview">
-          <Carbon.CodeSnippet type="single" light {skeleton}>
-            {`body { margin: 0; padding: 0; }`}
-          </Carbon.CodeSnippet>
-        </div>
-        <div class="tile-card__actions">Actions</div>
-      </Carbon.Tile>
+      <TileCard title="Indeterminate Checkboox">
+        <fieldset class="bx--fieldset">
+          <legend class="bx--label">Checkbox heading</legend>
+          <Carbon.Checkbox
+            indeterminate
+            {skeleton}
+            labelText="Checkbox label" />
+          <Carbon.Checkbox
+            indeterminate
+            {skeleton}
+            labelText="Checkbox label" />
+        </fieldset>
+      </TileCard>
+    </Carbon.Column>
+  </Carbon.Row>
+
+  <Carbon.Row class="scope">
+    <Carbon.Column noGutter>
+      <TileCard title="Inline Code Snippet">
+        <Carbon.CodeSnippet type="inline" light {skeleton}>
+          {`node -v`}
+        </Carbon.CodeSnippet>
+      </TileCard>
+    </Carbon.Column>
+    <Carbon.Column noGutter>
+      <TileCard title="Single-line Code Snippet">
+        <Carbon.CodeSnippet type="single" light {skeleton}>
+          {`tsc -c tsconfig.json`}
+        </Carbon.CodeSnippet>
+      </TileCard>
+    </Carbon.Column>
+    <Carbon.Column lg={8} noGutter>
+      <TileCard title="Multi-line Code Snippet">
+        <Carbon.CodeSnippet type="multi" light {skeleton}>
+          {`* {
+margin: 0;
+padding: 0;
+box-sizing: border-box;
+}
+
+body {
+font-family: "IBM Plex Sans";
+lin-height: 1.45;
+}
+
+h1 {
+font-size: 1rem;
+color: #171717; 
+}
+
+a {
+color: currentColor;
+text-decoration: underline;
+}`}
+        </Carbon.CodeSnippet>
+      </TileCard>
     </Carbon.Column>
   </Carbon.Row>
 </div>
diff --git a/docs/src/components/TileCard.svelte b/docs/src/components/TileCard.svelte
new file mode 100644
index 00000000..e92e25e9
--- /dev/null
+++ b/docs/src/components/TileCard.svelte
@@ -0,0 +1,61 @@
+<script>
+  export let title = "";
+
+  import { Tile, Button, ButtonSet } from "carbon-components-svelte";
+  import Code16 from "carbon-icons-svelte/lib/Code16";
+</script>
+
+<style>
+  :global(.tile-card) {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    min-height: 12rem;
+  }
+
+  .title {
+    font-size: 0.75rem;
+  }
+
+  .tile-card__preview {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 2rem 0;
+  }
+
+  .tile-card__actions {
+    display: flex;
+    justify-content: flex-end;
+    margin-right: -1rem;
+    margin-bottom: -1rem;
+  }
+</style>
+
+<Tile class="tile-card">
+  <div class="title">{title}</div>
+  <div class="tile-card__preview">
+    <slot />
+  </div>
+  <div class="tile-card__actions">
+    <div>
+      <Button
+        hasIconOnly
+        kind="ghost"
+        size="small"
+        icon={Code16}
+        iconDescription="Usage"
+        tooltipAlignment="center"
+        tooltipPosition="top" />
+      <Button
+        hasIconOnly
+        kind="ghost"
+        size="small"
+        icon={Code16}
+        iconDescription="Usage"
+        tooltipAlignment="center"
+        tooltipPosition="top" />
+    </div>
+  </div>
+</Tile>
diff --git a/docs/src/routes/_layout.svelte b/docs/src/routes/_layout.svelte
index c0a5835b..33baa2c7 100644
--- a/docs/src/routes/_layout.svelte
+++ b/docs/src/routes/_layout.svelte
@@ -59,7 +59,7 @@
 
 {#if segment !== 'examples'}
   <GlobalHeader {segment} />
-  <SideNav isOpen={true}>
+  <SideNav isOpen>
     <SideNavItems>
       <SideNavLink
         text="Getting Started"
diff --git a/docs/src/routes/getting-started/index.svelte b/docs/src/routes/getting-started/index.svelte
index ae78578d..fecad248 100644
--- a/docs/src/routes/getting-started/index.svelte
+++ b/docs/src/routes/getting-started/index.svelte
@@ -16,7 +16,7 @@
 <Row>
   <Column>
     <h1>Getting Started</h1>
-    <p>
+    <p style="position: relative; z-index: 1;">
       <CopyableCodeSnippet type="inline" code="carbon-components-svelte" />
       can be installed as a development dependency.
     </p>
@@ -37,17 +37,3 @@
     </p>
   </Column>
 </Row>
-<!-- 
-<div style="margin-left: -1rem; margin-right: -1rem;">
-  <Tabs type="container">
-    <Tab label="Rapid Prototyping" />
-    <Tab label="Single-Page Application (SPA)" />
-    <Tab label="Server-side Rendered (SSR)" />
-    <div slot="content" class="content">
-      <TabContent>1</TabContent>
-      <TabContent>2</TabContent>
-      <TabContent>3</TabContent>
-    </div>
-  </Tabs>
-</div>
- -->
diff --git a/docs/yarn.lock b/docs/yarn.lock
index a4427699..6bd05825 100644
--- a/docs/yarn.lock
+++ b/docs/yarn.lock
@@ -719,15 +719,15 @@ caniuse-lite@^1.0.30001093, caniuse-lite@^1.0.30001097:
   integrity sha512-JupOe6+dGMr7E20siZHIZQwYqrllxotAhiaej96y6x00b/48rPt42o+SzOSCPbrpsDWvRja40Hwrj0g0q6LZJg==
 
 carbon-components-svelte@../:
-  version "0.9.0"
+  version "0.9.3"
   dependencies:
     carbon-icons-svelte "^10.14.0"
     flatpickr "4.6.3"
 
-carbon-components@^10.16.0:
-  version "10.16.0"
-  resolved "https://registry.npmjs.org/carbon-components/-/carbon-components-10.16.0.tgz#1f631788ea16485041729c5a6b65d1d79063eb86"
-  integrity sha512-7MltjxNKEjjJ+TOJv3qexE2wBiXQ5qNtMb+in2OJqAWEfixeDHLB+ZtkShAQmKzNw5jIX7w8jfsp2JC4CkApiw==
+carbon-components@^10.17.0:
+  version "10.17.0"
+  resolved "https://registry.npmjs.org/carbon-components/-/carbon-components-10.17.0.tgz#e1f5e219443b9317147013280224cdb89dbc0bf8"
+  integrity sha512-kTSWkgtTaW9FGBTHOCj0/Ir86RCNRBti0Ckf7yVC1LaQJ0VWy2/BLrwhfNWaWGCGUnx4A+qt8MwEuG1Yz07JhA==
   dependencies:
     flatpickr "4.6.1"
     lodash.debounce "^4.0.8"