Add cards

css/buttons.css

@@ -2,7 +2,7 @@ button, .button {
     --background: var(--button-background-color);
     --text-color: var(--button-text-color);
     --border: var(--button-border-color);
-    --loader: var(--button-loader);
+    --loader: var(--button-loader-primary);
 
     display: flex;
     align-items: center;
@@ -46,7 +46,7 @@ button.loading, .button.loading {
 button.secondary, .button.secondary {
     --background: var(--background-color);
     --text-color: var(--button-border-color);
-    --loader: var(--button-loader-primary);
+    --loader: var(--button-loader-secondary);
 }
 
 button.alert, .button.alert {

css/cards.css

@@ -0,0 +1,12 @@
+.card-list {
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+}
+
+.card {
+    padding: 1.5rem;
+    border-radius: var(--border-radius);
+    box-shadow: var(--box-shadow);
+    background-color: var(--card-background-color);
+}

css/dropdowns.css

@@ -18,8 +18,10 @@
 
     width: max-content;
     max-width: 14rem;
-    box-shadow: var(--dropdown-box-shadow);
+    box-shadow: var(--box-shadow);
     background-color: var(--dropdown-menu-background);
+    border-radius: var(--border-radius);
+    border-top-left-radius: 0;
 }
 
 .dropdown .menu a {

css/style.css

@@ -9,3 +9,4 @@
 @import "modals.css";
 @import "dropdowns.css";
 @import "tooltips.css";
+@import "cards.css";

css/theme.css

@@ -26,16 +26,19 @@
     --header-background-color: var(--primary);
     --header-text-color: var(--white);
 
+    --card-background-color: var(--lightest-gray);
+
     --button-background-color: var(--primary);
     --button-border-color: var(--primary);
     --button-text-color: var(--white);
     --button-alert-color: var(--alert);
-    --button-loader: url("../images/loader-white.svg");
-    --button-loader-primary: url("../images/loader-primary.svg");
+    --button-loader-primary: url("../images/loader-white.svg");
+    --button-loader-secondary: url("../images/loader-primary.svg");
+
+    --box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
 
     --dropdown-menu-background: var(--white);
     --dropdown-menu-hover: var(--lightest-gray);
-    --dropdown-box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .3), 0 2px 6px 2px rgba(60, 64, 67, .15);
 
     --header-height: 5rem;
     --body-padding: 2rem;
@@ -67,6 +70,10 @@ html {
         --nav-background-color: var(--dark-gray);
         --button-border-color: var(--white);
 
+        --button-loader-secondary: url("../images/loader-white.svg");
+
+        --card-background-color: var(--darkest-gray);
+
         --dropdown-menu-background: var(--black);
         --dropdown-menu-hover: var(--darkest-gray);
 

index.html

@@ -99,6 +99,14 @@ <h2>Sections</h2>
                 Tooltips
             </a>
         </li>
+        <li>
+            <a href="#cards">
+                <svg>
+                    <use xlink:href="images/cards.svg#icon"></use>
+                </svg>
+                Cards
+            </a>
+        </li>
         <li>
             <a href="#buttons">
                 <svg>
@@ -228,6 +236,7 @@ <h2>Inline form</h2>
             </fieldset>
         </form>
     </section>
+
     <section id="tables">
         <h1>Tables</h1>
         <div class="table-scroll-wrapper">
@@ -301,6 +310,7 @@ <h2>Warning</h2>
         </dialog>
         <p>Click <a href="javascript:document.querySelector('dialog').showModal()">here</a> to open the modal</p>
     </section>
+
     <section id="tooltips">
         <h1>Tooltips</h1>
 
@@ -315,6 +325,47 @@ <h1>Tooltips</h1>
             </a> to see a tooltip with a ton of text.
         </p>
     </section>
+
+    <section id="cards">
+        <h1>Cards</h1>
+
+        <div class="card-list">
+            <div class="card">
+                <h2>Lorem ipsum</h2>
+
+                <p>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce consequat, enim id efficitur porta,
+                    diam sem porta sapien, ut dignissim velit erat quis sapien. Nullam vulputate enim placerat tortor
+                    consequat, vulputate blandit nunc tempor. Integer purus augue, fringilla eu molestie in, consequat
+                    at turpis.
+                </p>
+            </div>
+            <div class="card">
+                <h2>Orci varius</h2>
+
+                <p>
+                    Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus vel
+                    pulvinar orci, ac auctor urna. Nulla aliquam enim rutrum, auctor urna at, facilisis metus. Vivamus
+                    euismod arcu ut leo tincidunt auctor. Vestibulum auctor neque leo, vitae dignissim tellus lobortis
+                    vitae. Fusce vestibulum eleifend tortor et convallis. Aliquam congue nec ipsum id accumsan. Ut et
+                    sagittis velit. Vestibulum lacinia, diam vitae sodales euismod, nulla diam molestie velit, vitae
+                    iaculis neque nisl sit amet metus. Cras vehicula auctor fermentum.
+                </p>
+            </div>
+            <div class="card">
+                <h2>Mauris felis</h2>
+
+                <p>
+                    Mauris felis lorem, condimentum vel lobortis et, condimentum eu libero. Fusce eget iaculis metus.
+                    Pellentesque quis ligula eget sem bibendum ultrices. Maecenas et ante id ex ultrices sagittis.
+                    Suspendisse malesuada eleifend arcu congue tempus. Pellentesque sed dictum ex. Pellentesque orci mi,
+                    vestibulum quis enim at, posuere iaculis neque.
+                </p>
+            </div>
+        </div>
+
+    </section>
+
     <section id="buttons">
         <h1>Buttons</h1>