diff --git a/public/icons/electricity-outline.tsx b/public/icons/electricity-outline.tsx
new file mode 100644
index 0000000..0bf3626
--- /dev/null
+++ b/public/icons/electricity-outline.tsx
@@ -0,0 +1,12 @@
+import * as React from "react";
+import { SVGProps } from "react";
+
+export const ElectricityOutline = (props: SVGProps<SVGSVGElement>) => (
+ <svg viewBox="0 0 16 16" {...props}>
+ <path
+ fill-rule="evenodd"
+ clip-rule="evenodd"
+ d="M3.88419 9.08333H6.35011C6.53051 9.08333 6.69936 9.17054 6.80193 9.31652C6.90478 9.4625 6.92815 9.64883 6.86518 9.81512L5.90488 12.3374L10.81 8.54167H9.1001C8.89935 8.54167 8.71428 8.43415 8.61803 8.26054C8.52123 8.08748 8.52838 7.87596 8.6359 7.70913L11.948 2.58333H6.71256L3.88419 9.08333ZM4.70011 14.5C4.58626 14.5 4.47214 14.4653 4.37506 14.3955C4.17624 14.2519 4.09841 13.9957 4.18504 13.7682L5.55646 10.1667H3.05011C2.86531 10.1667 2.69261 10.0751 2.59086 9.92319C2.48911 9.77125 2.47151 9.57896 2.54466 9.41158L5.84466 1.82825C5.93101 1.62919 6.13011 1.5 6.35011 1.5H12.9501C13.1506 1.5 13.3356 1.60752 13.4322 1.78113C13.5287 1.95419 13.5218 2.16571 13.414 2.33254L10.1019 7.45833H12.4001C12.6344 7.45833 12.8431 7.60485 12.9198 7.82288C12.9966 8.04117 12.9242 8.28329 12.7397 8.42602L5.03973 14.3844C4.94046 14.4613 4.82001 14.5 4.70011 14.5Z"
+ />
+ </svg>
+);
diff --git a/public/icons/index.ts b/public/icons/index.ts
index e8ab54f..62e50fb 100644
--- a/public/icons/index.ts
+++ b/public/icons/index.ts
@@ -1,3 +1,4 @@
export { Alert } from "./alert";
export { ArrowRight } from "./arrow-right";
+export { ElectricityOutline } from "./electricity-outline";
export { GasOutline } from "./gas-outline";
diff --git a/src/components/card/card.stories.tsx b/src/components/card/card.stories.tsx
new file mode 100644
index 0000000..872eb26
--- /dev/null
+++ b/src/components/card/card.stories.tsx
@@ -0,0 +1,93 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import Card from ".";
+import { Alert, ElectricityOutline, GasOutline } from "../../../public/icons";
+import { Badge } from "../badge/badge";
+import { Cta } from "../cta";
+import { Text } from "../text";
+import { Title } from "../title";
+
+type CardType = typeof Card.Root &
+ typeof Card.Header &
+ typeof Card.Content &
+ typeof Card.Footer;
+
+const meta: Meta<CardType> = {
+ argTypes: {
+ supply: {
+ options: ["gas", "electricity"],
+ control: { type: "select" },
+ },
+ },
+ args: {
+ supply: "gas",
+ },
+};
+
+export default meta;
+type Story = StoryObj<CardType>;
+
+export const Template: Story = {
+ render: (args) => {
+ const isGasSupply = args.supply === "gas";
+ const supplyText = isGasSupply ? "Gas" : "Luce";
+ const supplyIcon = isGasSupply ? (
+ <GasOutline className="fill-black h-xs w-xs" />
+ ) : (
+ <ElectricityOutline className="fill-black h-xs w-xs" />
+ );
+
+ return (
+ <Card.Root {...args}>
+ <div className="flex w-full justify-end">
+ <Badge variant="error" className="mb-base">
+ A rischio sospensione
+ </Badge>
+ </div>
+ <Card.Header>
+ <div className="flex items-center gap-xxs">
+ {supplyIcon}
+ <Text size="sm" weight="medium">
+ {supplyText}
+ </Text>
+ </div>
+ <Text size="xs" weight="light">
+ Piazza Risorgimento 3, Amandola (FM)
+ </Text>
+ </Card.Header>
+ <Card.Content>
+ <div className="flex gap-2xs py-xxs pr-xs">
+ <Alert className="fill-black h-xs w-xs" />
+ <Text size="xs" weight="regular">
+ Dobbiamo chiederti di compilare un modulo. Entra per scaricarlo.
+ </Text>
+ </div>
+ <Text size="xs" weight="light" className="pb-base">
+ Per questa fornitura pagherai
+ </Text>
+ <Text size="xs" weight="medium" className="line-through leading-none">
+ 65,46 €
+ </Text>
+ <div className="flex items-top gap-base mb-[-4px]">
+ <Title as="h1" className="leading-none mt-[-5px]">
+ 57
+ </Title>
+ <div>
+ <Title as="h4" className="leading-none">
+ ,99 €
+ </Title>
+ <Text size="xs" weight="light" className="leading-none">
+ al mese,
+ </Text>
+ <Text size="xs" weight="light" className="leading-none">
+ per 12 mesi.
+ </Text>
+ </div>
+ </div>
+ </Card.Content>
+ <Card.Footer>
+ <Cta className="pt-xs">Monitora e gestisci</Cta>
+ </Card.Footer>
+ </Card.Root>
+ );
+ },
+};
diff --git a/src/components/card/card.tsx b/src/components/card/card.tsx
new file mode 100644
index 0000000..5d77cc7
--- /dev/null
+++ b/src/components/card/card.tsx
@@ -0,0 +1,75 @@
+import classNames from "classnames";
+import { forwardRef } from "react";
+import { CardProps } from "./types";
+import {
+ cardContentStyles,
+ cardFooterStyles,
+ cardHeaderStyles,
+ cardStyles,
+} from "./styles";
+
+const Card = forwardRef<HTMLDivElement, CardProps>(
+ ({ supply, className, children, ...rest }, ref) => {
+ return (
+ <div
+ ref={ref}
+ className={classNames(cardStyles({ supply }), className)}
+ {...rest}
+ >
+ {children}
+ </div>
+ );
+ }
+);
+
+Card.displayName = "Card";
+
+const CardHeader = forwardRef<HTMLDivElement, CardProps>(
+ ({ className, children, ...rest }, ref) => {
+ return (
+ <div
+ ref={ref}
+ className={classNames(cardHeaderStyles({}), className)}
+ {...rest}
+ >
+ {children}
+ </div>
+ );
+ }
+);
+
+CardHeader.displayName = "CardHeader";
+
+const CardContent = forwardRef<HTMLDivElement, CardProps>(
+ ({ className, children, ...rest }, ref) => {
+ return (
+ <div
+ ref={ref}
+ className={classNames(cardContentStyles({}), className)}
+ {...rest}
+ >
+ {children}
+ </div>
+ );
+ }
+);
+
+CardContent.displayName = "CardContent";
+
+const CardFooter = forwardRef<HTMLDivElement, CardProps>(
+ ({ className, children, ...rest }, ref) => {
+ return (
+ <div
+ ref={ref}
+ className={classNames(cardFooterStyles({}), className)}
+ {...rest}
+ >
+ {children}
+ </div>
+ );
+ }
+);
+
+CardFooter.displayName = "CardFooter";
+
+export { Card, CardHeader, CardContent, CardFooter };
diff --git a/src/components/card/index.ts b/src/components/card/index.ts
new file mode 100644
index 0000000..c968961
--- /dev/null
+++ b/src/components/card/index.ts
@@ -0,0 +1,12 @@
+import { Card, CardHeader, CardContent, CardFooter } from "./card";
+
+const CardObject = {
+ Root: Card,
+ Header: CardHeader,
+ Content: CardContent,
+ Footer: CardFooter,
+};
+
+export { Card, CardHeader, CardContent, CardFooter };
+
+export default CardObject;
diff --git a/src/components/card/styles.ts b/src/components/card/styles.ts
new file mode 100644
index 0000000..3b01dd0
--- /dev/null
+++ b/src/components/card/styles.ts
@@ -0,0 +1,15 @@
+import { cva } from "class-variance-authority";
+
+const cardStyles = cva("w-[280px] h-[280px] pl-xs", {
+ variants: {
+ supply: {
+ gas: "bg-cyan",
+ electricity: "bg-yellow",
+ },
+ },
+});
+const cardHeaderStyles = cva("border-b b-black pb-base");
+const cardContentStyles = cva("pb-2xs");
+const cardFooterStyles = cva("border-t b-black pr-xxs");
+
+export { cardStyles, cardHeaderStyles, cardContentStyles, cardFooterStyles };
diff --git a/src/components/card/types.ts b/src/components/card/types.ts
new file mode 100644
index 0000000..19b5dfb
--- /dev/null
+++ b/src/components/card/types.ts
@@ -0,0 +1,6 @@
+import { VariantProps } from "class-variance-authority";
+import { cardStyles } from "./styles";
+import { ComponentPropsWithoutRef } from "react";
+
+export type CardProps = ComponentPropsWithoutRef<"div"> &
+ VariantProps<typeof cardStyles>;
diff --git a/src/components/cta/cta.tsx b/src/components/cta/cta.tsx
index 561f367..b3e3847 100644
--- a/src/components/cta/cta.tsx
+++ b/src/components/cta/cta.tsx
@@ -1,7 +1,7 @@
import classNames from "classnames";
import { forwardRef } from "react";
-import { ArrowRight } from "../../../public/icons/arrow-right";
+import { ArrowRight } from "../../../public/icons";
import { Text } from "../text";
import { ctaStyles } from "./styles";
import { CtaProps } from "./types";
diff --git a/src/components/title/title.stories.tsx b/src/components/title/title.stories.tsx
index 00761a5..806e3c6 100644
--- a/src/components/title/title.stories.tsx
+++ b/src/components/title/title.stories.tsx
@@ -17,6 +17,6 @@ const meta: Meta<typeof Title> = {
export default meta;
type Story = StoryObj<typeof Title>;
-export const Primary: Story = {
+export const Template: Story = {
render: (args) => <Title {...args}>Heading</Title>,
};