Update card.mdx

Author: axelut

documentation/html/card.mdx

@@ -24,6 +24,8 @@ navigation:
     "card-with-tabs",
     "card-with-bottom-image",
     "card-with-animation",
+    "card-with-alert",
+    "card-with-centered-content",
     "card-with-hover",
     "more-examples",
     "best-practices",
@@ -1159,6 +1161,95 @@ On this example we added a hover effect to the card. When you hover over the car
 
 ---
 
+## Card with Alert
+
+Card with alert is a card that contains a message that is displayed at the top of the card. It is useful for displaying important information that the user needs to know.
+
+<CodePreview
+  id="card-with-alert"
+  link="card#card-with-alert"
+  component={<HTMLCardExamples.CardWithAlert/>}
+>
+```html
+<div class="relative flex flex-col my-6 bg-white shadow-sm border border-slate-200 rounded-lg w-96 p-2">
+  <div class="relative flex w-full p-3 pr-12 text-sm text-white bg-red-500 rounded-md">
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 mr-2">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0M3.124 7.5A8.969 8.969 0 0 1 5.292 3m13.416 0a8.969 8.969 0 0 1 2.168 4.5" />
+    </svg>
+    Please update your card details.
+    <button class="flex items-center justify-center transition-all w-8 h-8 rounded-md text-white hover:bg-white/10 active:bg-white/10 absolute top-1.5 right-1.5" type="button">
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-5 w-5" stroke-width="2">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path>
+        </svg>
+    </button>
+  </div>
+  <div class="p-3">
+    <div class="flex items-center mb-2">
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-5 w-5 text-slate-600">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M12 21a9.004 9.004 0 0 0 8.716-6.747M12 21a9.004 9.004 0 0 1-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 0 1 7.843 4.582M12 3a8.997 8.997 0 0 0-7.843 4.582m15.686 0A11.953 11.953 0 0 1 12 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0 1 21 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0 1 12 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 0 1 3 12c0-1.605.42-3.113 1.157-4.418" />
+        </svg>
+        <h5 class="ml-2 text-slate-800 text-xl font-semibold">
+        Custom CMS for startup
+        </h5>
+    </div>
+    <p class="block text-slate-600 leading-normal font-light mb-4">
+        Because it&apos;s about motivating the doers. Because I&apos;m here to follow my dreams and inspire others.
+    </p>
+    <div>
+        <a href="#" class="text-slate-800 font-semibold text-sm hover:underline flex items-center">
+        Learn More
+        <svg xmlns="http://www.w3.org/2000/svg" class="ml-2 h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" />
+        </svg>
+        </a>
+    </div>
+  </div>
+</div>
+```
+</CodePreview>
+
+---
+
+## Card with Centered Content
+
+Card with centered content is a card that contains all the details encapsulated in the middle of the card. 
+It is useful for displaying contextually important information that the user needs to know. The card is taking more space than the other cards.
+
+<CodePreview
+  id="card-with-centered-content"
+  link="card#card-with-centered-content"
+  component={<HTMLCardExamples.CardWithCenteredContent/>}
+>
+```html
+<div class="relative min-h-80 w-full flex flex-col justify-center items-center my-6 bg-white shadow-sm border border-slate-200 rounded-lg p-2">
+  <div class="p-3 text-center">
+    <div class="flex justify-center mb-4">
+      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-10 h-10 text-purple-400">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M15.362 5.214A8.252 8.252 0 0 1 12 21 8.25 8.25 0 0 1 6.038 7.047 8.287 8.287 0 0 0 9 9.601a8.983 8.983 0 0 1 3.361-6.867 8.21 8.21 0 0 0 3 2.48Z" />
+        <path stroke-linecap="round" stroke-linejoin="round" d="M12 18a3.75 3.75 0 0 0 .495-7.468 5.99 5.99 0 0 0-1.925 3.547 5.975 5.975 0 0 1-2.133-1.001A3.75 3.75 0 0 0 12 18Z" />
+      </svg>
+    </div>
+    <div class="flex justify-center mb-2">
+      <h5 class="text-slate-800 text-2xl font-semibold">
+        Lit Ideas for Startups
+      </h5>
+    </div>
+    <p class="block text-slate-600 leading-normal font-light mb-4 max-w-lg">
+      Because it&apos;s about motivating the doers. Because I&apos;m here to follow my dreams and inspire others.
+    </p>
+    <div class="text-center">
+      <button class="min-w-32 rounded-md bg-slate-800 py-2 px-4 border border-transparent text-center text-sm text-white transition-all shadow-md hover:shadow-lg focus:bg-slate-700 focus:shadow-none active:bg-slate-700 hover:bg-slate-700 active:shadow-none" type="button">
+        View More
+      </button>
+    </div>
+  </div>
+</div>
+```
+</CodePreview>
+
+---
+
+
 ## Card with Hover Effect
 
 Use this card example with simple design and a beautiful hover effect for places where you want the attention of the user to be focused. It is great in combination with an <code>a tag</code> for linking to other pages, categories or blog posts.