Cards for native styles

docs/docs/native/button.md

@@ -4,6 +4,7 @@ description: 'Button styles apply your Web Awesome theme to native HTML buttons.
 tags: native
 layout: element
 component: button
+icon: button
 ---
 
 ```html {.example}

docs/docs/native/content.md

@@ -3,6 +3,7 @@ title: Content
 description: 'Content styles apply your Web Awesome theme to HTML text content, code, and images.'
 tags: native
 layout: element
+icon: skeleton
 ---
 
 

docs/docs/native/details.md

@@ -4,6 +4,7 @@ description: 'Details styles apply your Web Awesome theme to the HTML `<details>
 tags: native
 layout: element
 component: details
+icon: details
 elements:
   "<details>": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details
 ---

docs/docs/native/dialog.md

@@ -3,6 +3,7 @@ title: Dialog
 description: 'Dialog styles apply your Web Awesome theme to the HTML `<dialog>` element. Dialogs, also called "modals", appear above the page and interrupt a user''s focus.'
 tags: native
 layout: element
+icon: dialog
 elements:
   "<dialog>":  https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog
 component: dialog

docs/docs/native/index.md

@@ -17,12 +17,24 @@ To use all Web Awesome Native Styles, include the following stylesheet in your p
 Here’s what we have so far:
 
 <!-- TODO make nice cards for these -->
-<ul>
+<div id="component-grid" class="index-grid">
+  <!-- <h2 class="index-category">Actions</h2> -->
+
   {%- for page in collections.native | sort -%}
-  <li>
-    <a href="/docs/native/{{ page.fileSlug }}">{{ page.data.title }}</a>
-  </li>
+  {%- if page.fileSlug != 'native' -%}
+  <a href="{{ page.url }}">
+    <wa-card with-header>
+      <div slot="header">
+        {% include "svgs/" + (page.data.icon or "thumbnail-placeholder") + ".njk" %}
+      </div>
+      <span class="page-name">{{ page.data.title }}</span>
+    </wa-card>
+  </a>
+  {%- endif -%}
   {%- endfor -%}
+</div>
+<ul>
+
 </ul>
 
 ## Opting Out of Native Styles

docs/docs/native/input.md

@@ -3,6 +3,7 @@ title: Form Inputs
 description: 'Form input styles apply your Web Awesome theme to HTML elements like text fields, checkboxes, and more. Form inputs are interactive, allowing users to enter data or control an interface.'
 tags: native
 layout: element
+icon: input
 component:
  - input
  - select
@@ -124,4 +125,4 @@ With swatches:
   <wa-option value="option-2">Option 2</wa-option>
   <wa-option value="option-3">Option 3</wa-option>
 </wa-select>
-```
+```

docs/docs/native/progress.md

@@ -8,6 +8,7 @@ component:
  - progress-bar
 elements:
   "<progress>": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress
+icon: progress-bar
 ---