feat(ui): own responsive marketing layout APIs

packages/ui/components/Card.wrn

@@ -9,7 +9,8 @@ component Card {
   }
 
   props {
-    title: string = "Card title"
+    title: string = ""
+    icon: string = ""
     titleKey: string = ""
     subtitle: string = ""
     subtitleKey: string = ""
@@ -39,6 +40,9 @@ component Card {
     layout: string = "vertical"
     align: string = "left"
     hover: string = "none"
+    radius: string = "default"
+    shadow: string = "default"
+    equalHeight: boolean = false
     scrollable: boolean = false
     maxHeight: string = "18rem"
     dismissible: boolean = false
@@ -84,6 +88,7 @@ component Card {
       data-layout='{layout}'
       data-hover='{hover}'
       data-align='{align}'
+      data-radius='{radius}' data-shadow='{shadow}' data-equal-height='{equalHeight ? "true" : "false"}'
       class='wrn-component wrn-next--card wrn-component--color-{color} wrn-component--size-{size} wrn-next--variant-{variant} {class}'
     >
       {#if items.length > 0}
@@ -271,6 +276,7 @@ component Card {
                   <p>{emptyTitle}</p>
                 </div>
               {:else}
+                {#if icon}<span class='wrn-next__card-icon {icon}' aria-hidden="true"></span>{/if}
                 {#if description}
                   <p class="wrn-next__card-description" data-t='{descriptionKey}'>{description}</p>
                 {/if}
@@ -343,6 +349,12 @@ component Card {
     .wrn-next--card[data-size="sm"] {
       --wrn-card-padding: 0.85rem;
     }
+    .wrn-next--card[data-size="compact"] .wrn-next__card-body { padding: 1rem; }
+    .wrn-next--card[data-radius="lg"] > .wrn-next__card-panel { border-radius: 1rem; }
+    .wrn-next--card[data-shadow="none"] > .wrn-next__card-panel { box-shadow: none; }
+    .wrn-next--card[data-equal-height="true"], .wrn-next--card[data-equal-height="true"] > .wrn-next__card-panel { height: 100%; }
+    .wrn-next--card[data-layout="horizontal"] .wrn-next__card-body { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 0.8rem; }
+    .wrn-next__card-icon { display: grid; width: 2.35rem; height: 2.35rem; place-items: center; border-radius: 0.7rem; color: var(--wrn-color-primary); background: color-mix(in srgb, var(--wrn-color-primary) 12%, transparent); font-size: 1.15rem; }
 
     .wrn-next--card[data-size="lg"] {
       --wrn-card-padding: 1.75rem;