examples of using Lion components - still WIP

thescientist13 · thescientist13 · commit 5dd81092825d · 2021-10-15T16:00:17.000-04:00
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -36,5 +36,10 @@
     "stylelint": "^13.8.0",
     "stylelint-a11y": "^1.2.3",
     "stylelint-config-standard": "^20.0.0"
+  },
+  "dependencies": {
+    "@lion/button": "^0.14.3",
+    "@lion/calendar": "^0.16.5",
+    "@lion/tabs": "^0.9.3"
   }
 }
diff --git a/src/templates/page.html b/src/templates/page.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" prefix="og:http://ogp.me/ns#">
+<html lang="en-GB" prefix="og:http://ogp.me/ns#">
 
   <head>
     <meta charset="utf-8">
@@ -11,13 +11,30 @@
 
     <link rel="stylesheet" href="../styles/theme.css"></link>
     <link rel="stylesheet" href="../styles/home.css"></link>
+
+    <script type="module">
+      import '@lion/button/define';
+      import '@lion/calendar/define';
+      import '@lion/tabs/define';
+    </script>
   </head>
 
   <body>
 
     <div>
       <app-header></app-header>
       
+      <lion-button>This is a Lion button.</lion-button>
+      
+      <lion-calendar></lion-calendar>
+
+      <lion-tabs>
+        <button slot="tab">Info</button>
+        <p slot="panel">Info page with lots of information about us.</p>
+        <button slot="tab">Work</button>
+        <p slot="panel">Work page that showcases our work.</p>
+      </lion-tabs>
+
       <div class='content'>
         <content-outlet></content-outlet>
       </div>
