docs: redesign cards (#8671)

* docs: redesign cards

* fix build error

www/packages/docs-ui/src/components/BorderedIcon/index.tsx

@@ -17,6 +17,7 @@ export const BorderedIcon = ({
   iconWrapperClassName,
   iconClassName,
   iconColorClassName = "",
+  wrapperClassName,
 }: BorderedIconProps) => {
   return (
     <span
@@ -26,23 +27,25 @@ export const BorderedIcon = ({
         iconWrapperClassName
       )}
     >
-      {!IconComponent && (
-        <img
-          src={icon || ""}
-          className={clsx(iconClassName, "bordered-icon")}
-          alt=""
-        />
-      )}
-      {IconComponent && (
-        <IconComponent
-          className={clsx(
-            "text-medusa-fg-subtle rounded-docs_sm",
-            iconClassName,
-            "bordered-icon",
-            iconColorClassName
-          )}
-        />
-      )}
+      <span className={clsx("rounded-docs_xs", wrapperClassName)}>
+        {!IconComponent && (
+          <img
+            src={icon || ""}
+            className={clsx(iconClassName, "bordered-icon")}
+            alt=""
+          />
+        )}
+        {IconComponent && (
+          <IconComponent
+            className={clsx(
+              "text-medusa-fg-subtle rounded-docs_xs",
+              iconClassName,
+              "bordered-icon",
+              iconColorClassName
+            )}
+          />
+        )}
+      </span>
     </span>
   )
 }