✨ Add flat variant to Cards

Author: Frontendland

src/components/Card/Card.astro

@@ -13,12 +13,14 @@ const {
     className,
     bodyClassName,
     secondary,
+    flat,
     ...rest
 } = Astro.props
 
 const classes = [
     styles.card,
     secondary && styles.secondary,
+    (flat && (compact || secondary)) && styles.flat,
     className
 ]
 
@@ -28,13 +30,18 @@ const bodyClasses = [
     bodyClassName
 ]
 
+const titleClasses = [
+    styles.title,
+    flat && styles.flat
+]
+
 const Component = element
 const Title = titleTag
 ---
 
 <Component class:list={classes} {...rest}>
     {title && (
-        <Title class:list={styles.title}>{title}</Title>
+        <Title class:list={titleClasses}>{title}</Title>
     )}
     <div class:list={bodyClasses}>
         <slot />

src/components/Card/Card.svelte

@@ -13,13 +13,15 @@
         className,
         bodyClassName,
         secondary,
+        flat,
         children,
         ...rest
     }: SvelteCardProps = $props()
 
     const classes = $derived(classNames([
         styles.card,
         secondary && styles.secondary,
+        (flat && (compact || secondary)) && styles.flat,
         className
     ]))
 
@@ -28,11 +30,17 @@
         compact && styles.compact,
         bodyClassName
     ]))
+
+    const titleClasses = $derived(classNames([
+        styles.title,
+        flat && styles.flat,
+        (flat && compact) && styles.compact
+    ]))
 </script>
 
 <svelte:element this={element} class={classes} {...rest}>
     {#if title}
-        <svelte:element this={titleTag} class={styles.title}>
+        <svelte:element this={titleTag} class={titleClasses}>
             {title}
         </svelte:element>
     {/if}

src/components/Card/Card.tsx

@@ -13,13 +13,15 @@ const Card = ({
     className,
     bodyClassName,
     secondary,
+    flat,
     children,
     ...rest
 }: ReactCardProps) => {
     const classes = classNames([
         styles.card,
-        className,
-        secondary && styles.secondary
+        secondary && styles.secondary,
+        (flat && (compact || secondary)) && styles.flat,
+        className
     ])
 
     const bodyClasses = classNames([
@@ -28,10 +30,16 @@ const Card = ({
         bodyClassName
     ])
 
+    const titleClasses = classNames([
+        styles.title,
+        flat && styles.flat,
+        (flat && compact) && styles.compact
+    ])
+
     return (
         <Element className={classes} {...rest}>
             {title && (
-                <TitleTag className={styles.title}>{title}</TitleTag>
+                <TitleTag className={titleClasses}>{title}</TitleTag>
             )}
             <div className={bodyClasses}>
                 {children}

src/components/Card/card.module.scss

@@ -1,20 +1,27 @@
 @use '../../scss/config.scss' as *;
 
 .card {
-    @include border(primary-50);
     @include border-radius(md);
     @include layout(flex, column);
     @include background(primary-70);
     @include visibility(hidden);
+    
+    &:not(.flat) {
+        @include border(primary-50);
+    }
 
-    &.secondary .body {
+    &.secondary .body,
+    &.flat .title {
         @include background(primary-60);
     }
 
     .title {
-        @include spacing(p-default);
-        @include border(primary-50, bottom);
         @include visibility(block);
+        @include spacing(p-default);
+
+        &:not(.flat) {
+            @include border(primary-50, bottom);
+        }
     }
 
     .body {

src/components/Card/card.ts

@@ -9,6 +9,7 @@ export type CardProps = {
     className?: string
     bodyClassName?: string
     secondary?: boolean
+    flat?: boolean
     [key: string]: any
 }
 

src/pages/components/card.astro

@@ -60,6 +60,22 @@ const sections = getSections({
             <section.component compact={true}>
                 Compact card without title
             </section.component>
+
+            <section.component compact={true} secondary={true}>
+                Compact + secondary card
+            </section.component>
+
+            <section.component flat={true} title="Flat card title">
+                Flat card without <code>compact</code> or <code>secondary</code> still gets a border to prevent it from becoming invisible against the background.
+            </section.component>
+
+            <section.component flat={true} compact={true} title="Flat + Compact">
+                Flat + compact card with a title
+            </section.component>
+
+            <section.component flat={true} secondary={true} title="Flat + Secondary">
+                Flat + secondary card with a title
+            </section.component>
         </div>
     ))}
 </Layout>