add: card component (WIP)

css/colors.css

@@ -48,11 +48,11 @@
   --sk-color-outline: hsl(0, 0%, 85%);
   --sk-color-focus: hsla(299, 100%, 50%, 0.45);
 
-  --sk-color-shadow: 0px 0px 4px 4px rgba(0, 0, 0, 0.25);
+  --sk-color-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.25);
 
   --sk-color-inverse-surface: hsla(240, 3%, 19.4%, 1);
   --sk-color-inverse-on-surface: hsla(285, 15.4%, 94.9%, 1);
   --sk-color-inverse-primary: hsla(240, 100%, 87.8%, 1);
 
   color-scheme: light;
-}
+}

css/components/card/card.css

@@ -0,0 +1,6 @@
+.sk-card {
+    padding: 0.75rem;
+    background: var(--sk-color-surface);
+    border-radius: 0.5rem;
+    box-shadow: var(--sk-color-shadow);
+}

css/components/components.css

@@ -1,12 +1,13 @@
 /* SurfKit Components */
 @import url(accordion/accordion.css);
+@import url(accordion/accordion-list.css);
 
 @import url(button/button.css);
 @import url(button/button-container.css);
 
+@import url(card/card.css);
+
 @import url(infobox/infobox.css);
 @import url(infobox/infobox-extended.css);
 
-@import url(badge/badge.css);
-
-
+@import url(badge/badge.css);

examples/index.html

@@ -29,9 +29,13 @@ <h2>Infobox (AKA Alerts) (v0.0.3)</h2>
     <p class="sk-infobox sk-infobox--error">This is an infobox with the error modifier</p>
     -->
     <h2>Badges (v0.0.4)</h2>
-    <p class="sk-badge">Hello!</p> 
+    <p class="sk-badge">Hello!</p>
     <a href="/" class="sk-badge">Hello!</a>
     <a href="/">A link test</a>
+    <article class="sk-card">
+      <h2 class="sk-card__heading">Card (v0.0.4)</h2>
+      <p>This is a SurfKit default card</p>
+    </article>
     <blockquote>Hello, this is a quote!</blockquote>
     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis deleniti, ut nostrum dignissimos earum tempore
       molestiae cumque ipsa quos debitis ullam ab voluptate aperiam delectus quasi incidunt quibusdam non sequi.</p>
@@ -43,18 +47,20 @@ <h2>Badges (v0.0.4)</h2>
     <div class="sk-accordion-list">
       <details class="sk-accordion">
         <summary class="sk-accordion__label">This is a summary</summary>
-        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Pariatur obcaecati harum, hic eum neque nesciunt a sint?
+        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Pariatur obcaecati harum, hic eum neque nesciunt a
+        sint?
         Magni ipsa saepe nulla ea inventore id. Natus porro sint laudantium eligendi sunt.
       </details>
       <details class="sk-accordion">
         <summary class="sk-accordion__label">This is a summary</summary>
-        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Pariatur obcaecati harum, hic eum neque nesciunt a sint?
+        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Pariatur obcaecati harum, hic eum neque nesciunt a
+        sint?
         Magni ipsa saepe nulla ea inventore id. Natus porro sint laudantium eligendi sunt.
       </details>
     </div>
   </main>
   <script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
-<script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>
+  <script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>
 </body>
 
 </html>