Card

1"use client";2// Adapted from HeroUI v3.2.6 (e385ac202b2cdb94b1bf6fa76d32c31c8259cc5e), Apache-2.0.3// oxlint-disable jsx-a11y/prefer-tag-over-role -- A named SVG needs img semantics; an HTML img cannot render this icon.4import { CircleDollar } from "@gravity-ui/icons";5import { Card, Link } from "@lenso/ui";6import * as stylex from "@stylexjs/stylex";7import { s } from "./display.stylex";8
9export function Default() {10  return (11    <Card xstyle={s.card400}>12      <CircleDollar13        aria-label="Dollar sign icon"14        role="img"15        {...stylex.props(s.primary, s.icon6)}16      />17      <Card.Header>18        <Card.Title>Become an Acme Creator!</Card.Title>19        <Card.Description>20          Visit the Acme Creator Hub to sign up today and start earning credits from your fans and21          followers.22        </Card.Description>23      </Card.Header>24      <Card.Footer>25        <Link26          aria-label="Go to Acme Creator Hub (opens in new tab)"27          href="https://heroui.com"28          rel="noopener noreferrer"29          target="_blank"30        >31          Creator Hub <Link.Icon aria-hidden="true" />32        </Link>33      </Card.Footer>34    </Card>35  );36}

1"use client";2// Adapted from HeroUI v3.2.6 (e385ac202b2cdb94b1bf6fa76d32c31c8259cc5e), Apache-2.0.3import { Card } from "@lenso/ui";4import * as stylex from "@stylexjs/stylex";5import { s } from "./display.stylex";6
7const cards = [8  {9    variant: "transparent",10    title: "Transparent",11    description: "Minimal prominence with transparent background",12    content: "Use for less important content or nested cards",13  },14  {15    variant: "default",16    title: "Default",17    description: "Standard card appearance (bg-surface)",18    content: "The default card variant for most use cases",19  },20  {21    variant: "secondary",22    title: "Secondary",23    description: "Medium prominence (bg-surface-secondary)",24    content: "Use to draw moderate attention",25  },26  {27    variant: "tertiary",28    title: "Tertiary",29    description: "Higher prominence (bg-surface-tertiary)",30    content: "Use for primary or featured content",31  },32] as const;33export function Variants() {34  return (35    <div {...stylex.props(s.column4)}>36      {cards.map((card) => (37        <Card key={card.variant} xstyle={s.card320} variant={card.variant}>38          <Card.Header>39            <Card.Title>{card.title}</Card.Title>40            <Card.Description>{card.description}</Card.Description>41          </Card.Header>42          <Card.Content>43            <p>{card.content}</p>44          </Card.Content>45        </Card>46      ))}47    </div>48  );49}

1"use client";2// Adapted from HeroUI v3.2.6 (e385ac202b2cdb94b1bf6fa76d32c31c8259cc5e), Apache-2.0.3import { Button, Card, CloseButton } from "@lenso/ui";4import * as stylex from "@stylexjs/stylex";5import { s } from "./display.stylex";6
7export function Horizontal() {8  return (9    <Card xstyle={s.horizontal}>10      <div {...stylex.props(s.imageFrame)}>11        <img12          alt="Cherries"13          {...stylex.props(s.imageZoom)}14          loading="lazy"15          src="https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/docs/cherries.jpeg"16        />17      </div>18      <div {...stylex.props(s.flexContent)}>19        <Card.Header xstyle={s.gap1}>20          <Card.Title xstyle={s.titleInset}>Become an ACME Creator!</Card.Title>21          <Card.Description>22            Lorem ipsum dolor sit amet consectetur. Sed arcu donec id aliquam dolor sed amet23            faucibus etiam.24          </Card.Description>25          <CloseButton aria-label="Close banner" xstyle={s.close} />26        </Card.Header>27        <Card.Footer xstyle={s.footer}>28          <div {...stylex.props(s.column)}>29            <span {...stylex.props(s.textSm, s.medium, s.foreground)}>Only 10 spots</span>30            <span {...stylex.props(s.textXs, s.muted)}>Submission ends Oct 10.</span>31          </div>32          <Button xstyle={s.fullAuto}>Apply Now</Button>33        </Card.Footer>34      </div>35    </Card>36  );37}

1"use client";2// Adapted from HeroUI v3.2.6 (e385ac202b2cdb94b1bf6fa76d32c31c8259cc5e), Apache-2.0.3import { Avatar, Card } from "@lenso/ui";4import * as stylex from "@stylexjs/stylex";5import { s } from "./display.stylex";6
7export function WithAvatar() {8  return (9    <div {...stylex.props(s.wrap4)}>10      <Card xstyle={s.card200}>11        <img12          alt="Indie Hackers community"13          {...stylex.props(s.imageCommunity)}14          loading="lazy"15          src="https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/docs/demo1.jpg"16        />17        <Card.Header>18          <Card.Title>Indie Hackers</Card.Title>19          <Card.Description>148 members</Card.Description>20        </Card.Header>21        <Card.Footer xstyle={s.row2}>22          <Avatar aria-label="Martha's profile picture" xstyle={s.avatarTiny}>23            <Avatar.Image24              alt="Martha's avatar"25              src="https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/avatars/red.jpg"26            />27            <Avatar.Fallback xstyle={s.textXs}>IH</Avatar.Fallback>28          </Avatar>29          <span {...stylex.props(s.textXs)}>By Martha</span>30        </Card.Footer>31      </Card>32      <Card xstyle={s.card200}>33        <img34          alt="AI Builders community"35          {...stylex.props(s.imageCommunity)}36          loading="lazy"37          src="https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/docs/demo2.jpg"38        />39        <Card.Header>40          <Card.Title>AI Builders</Card.Title>41          <Card.Description>362 members</Card.Description>42        </Card.Header>43        <Card.Footer xstyle={s.row2}>44          <Avatar aria-label="John's profile picture" xstyle={s.avatarTiny}>45            <Avatar.Image46              alt="John's avatar - blue themed"47              src="https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/avatars/blue.jpg"48            />49            <Avatar.Fallback xstyle={s.textXs}>B</Avatar.Fallback>50          </Avatar>51          <span {...stylex.props(s.textXs)}>By John</span>52        </Card.Footer>53      </Card>54    </div>55  );56}

1"use client";2// Adapted from HeroUI v3.2.6 (e385ac202b2cdb94b1bf6fa76d32c31c8259cc5e), Apache-2.0.3// oxlint-disable jsx-a11y/prefer-tag-over-role -- A named SVG needs img semantics; an HTML img cannot render this icon.4import { CircleDollar } from "@gravity-ui/icons";5import { Avatar, Button, Card, CloseButton, Link } from "@lenso/ui";6import * as stylex from "@stylexjs/stylex";7import { s } from "./display.stylex";8
9const DOCS = "https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/docs/";10const AVATARS = "https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/avatars/";11
12export function WithImages() {13  return (14    <div {...stylex.props(s.gridOuter)}>15      <div {...stylex.props(s.grid)}>16        <Card xstyle={s.firstCard}>17          <div {...stylex.props(s.imageFrame)}>18            <img19              alt="Cherries"20              {...stylex.props(s.imageZoom)}21              loading="lazy"22              src={`${DOCS}cherries.jpeg`}23            />24          </div>25          <div {...stylex.props(s.flexContent)}>26            <Card.Header xstyle={s.gap1}>27              <Card.Title xstyle={s.titleInset}>Become an ACME Creator!</Card.Title>28              <Card.Description>29                Lorem ipsum dolor sit amet consectetur. Sed arcu donec id aliquam dolor sed amet30                faucibus etiam.31              </Card.Description>32              <CloseButton aria-label="Close banner" xstyle={s.close} />33            </Card.Header>34            <Card.Footer xstyle={s.footer}>35              <div {...stylex.props(s.column)}>36                <span {...stylex.props(s.textSm, s.medium, s.foreground)}>Only 10 spots</span>37                <span {...stylex.props(s.textXs, s.muted)}>Submission ends Oct 10.</span>38              </div>39              <Button xstyle={s.fullAuto}>Apply Now</Button>40            </Card.Footer>41          </div>42        </Card>43        <div {...stylex.props(s.gridRow)}>44          <div {...stylex.props(s.gridHalf)}>45            <Card xstyle={s.span12}>46              <div {...stylex.props(s.close, s.z10)}>47                <CloseButton aria-label="Close notification" />48              </div>49              <Card.Header xstyle={s.gap3}>50                <CircleDollar51                  aria-label="Dollar sign icon"52                  {...stylex.props(s.primary, s.icon8, s.shrink0)}53                  role="img"54                />55                <div {...stylex.props(s.column1)}>56                  <span {...stylex.props(s.textXs, s.medium, s.muted, s.uppercase)}>PAYMENT</span>57                  <Card.Title xstyle={s.responsiveTitle}>You can now withdraw on crypto</Card.Title>58                  <Card.Description xstyle={s.responsiveXs}>59                    Add your wallet in settings to withdraw60                  </Card.Description>61                </div>62              </Card.Header>63              <Card.Footer>64                <Link aria-label="Go to settings" href="#" rel="noopener noreferrer">65                  Go to settings66                  <Link.Icon aria-hidden="true" />67                </Link>68              </Card.Footer>69            </Card>70            <div {...stylex.props(s.gridRow)}>71              <Card xstyle={s.smallCard}>72                <Card.Header>73                  <Avatar xstyle={s.roundedAvatar}>74                    <Avatar.Image alt="Demo 1" src={`${DOCS}demo1.jpg`} />75                    <Avatar.Fallback>JK</Avatar.Fallback>76                  </Avatar>77                </Card.Header>78                <Card.Content xstyle={s.mt1}>79                  <p {...stylex.props(s.textSm, s.leading4, s.medium)}>Indie Hackers</p>80                  <p {...stylex.props(s.textXs, s.muted)}>148 members</p>81                </Card.Content>82                <Card.Footer xstyle={s.row2}>83                  <Avatar xstyle={s.avatarMini}>84                    <Avatar.Image alt="John" src={`${AVATARS}red.jpg`} />85                    <Avatar.Fallback>JK</Avatar.Fallback>86                  </Avatar>87                  <p {...stylex.props(s.textXs, s.muted)}>By John</p>88                </Card.Footer>89              </Card>90              <Card xstyle={s.smallCard}>91                <Card.Header>92                  <Avatar xstyle={s.roundedAvatar}>93                    <Avatar.Image alt="Demo 2" src={`${DOCS}demo2.jpg`} />94                    <Avatar.Fallback>AB</Avatar.Fallback>95                  </Avatar>96                </Card.Header>97                <Card.Content xstyle={s.mt1}>98                  <p {...stylex.props(s.textSm, s.leading4, s.medium)}>AI Builders</p>99                  <p {...stylex.props(s.textXs, s.muted)}>362 members</p>100                </Card.Content>101                <Card.Footer xstyle={s.row2}>102                  <Avatar xstyle={s.avatarMini}>103                    <Avatar.Image alt="John" src={`${AVATARS}blue.jpg`} />104                    <Avatar.Fallback>M</Avatar.Fallback>105                  </Avatar>106                  <p {...stylex.props(s.textXs, s.muted)}>By Martha</p>107                </Card.Footer>108              </Card>109            </div>110          </div>111          <Card xstyle={s.robotCard}>112            <img113              alt="NEO Home Robot"114              aria-hidden="true"115              {...stylex.props(s.imageCover)}116              src={`${DOCS}neo2.jpeg`}117            />118            <Card.Header xstyle={[s.z10, s.white]}>119              <Card.Title xstyle={[s.textXs, s.semibold, s.tracking, s.black70]}>NEO</Card.Title>120              <Card.Description xstyle={[s.textSm, s.medium, s.black50]}>121                Home Robot122              </Card.Description>123            </Card.Header>124            <Card.Footer xstyle={s.robotFooter}>125              <div>126                <div {...stylex.props(s.textSm, s.medium, s.black)}>Available soon</div>127                <div {...stylex.props(s.textXs, s.black60)}>Get notified</div>128              </div>129              <Button xstyle={s.whiteButton} size="sm" variant="tertiary">130                Notify me131              </Button>132            </Card.Footer>133          </Card>134        </div>135        <div {...stylex.props(s.gridRow)}>136          <Card xstyle={s.robotLarge}>137            <img138              alt="NEO Home Robot"139              aria-hidden="true"140              {...stylex.props(s.imageCover)}141              src={`${DOCS}neo1.jpeg`}142            />143            <Card.Footer xstyle={s.robotLargeFooter}>144              <div>145                <div {...stylex.props(s.responsiveBase, s.medium, s.black)}>NEO</div>146                <div {...stylex.props(s.responsiveXs, s.medium, s.black50)}>$499/m</div>147              </div>148              <Button xstyle={s.whiteButton} size="sm" variant="tertiary">149                Get now150              </Button>151            </Card.Footer>152          </Card>153          <div {...stylex.props(s.robotStack)}>154            <Card xstyle={s.eventCard} variant="transparent">155              <img156                alt="Futuristic Robot"157                {...stylex.props(s.eventImage)}158                loading="lazy"159                src={`${DOCS}robot1.jpeg`}160              />161              <div {...stylex.props(s.eventContent)}>162                <Card.Title xstyle={s.textSm}>Bridging the Future</Card.Title>163                <Card.Description xstyle={s.textXs}>Today, 6:30 PM</Card.Description>164              </div>165            </Card>166            <Card xstyle={s.eventCard} variant="transparent">167              <img168                alt="Avocado"169                {...stylex.props(s.eventImage)}170                loading="lazy"171                src={`${DOCS}avocado.jpeg`}172              />173              <div {...stylex.props(s.eventContent)}>174                <Card.Title xstyle={s.textSm}>Avocado Hackathon</Card.Title>175                <Card.Description xstyle={s.textXs}>Wed, 4:30 PM</Card.Description>176              </div>177            </Card>178            <Card xstyle={s.eventCard} variant="transparent">179              <img180                alt="Sound Electro event"181                {...stylex.props(s.eventImage)}182                loading="lazy"183                src={`${DOCS}oranges.jpeg`}184              />185              <div {...stylex.props(s.eventContent)}>186                <Card.Title xstyle={s.textSm}>Sound Electro | Beyond art</Card.Title>187                <Card.Description xstyle={s.textXs}>Fri, 8:00 PM</Card.Description>188              </div>189            </Card>190          </div>191        </div>192      </div>193    </div>194  );195}

1"use client";2// Adapted from HeroUI v3.2.6 (e385ac202b2cdb94b1bf6fa76d32c31c8259cc5e), Apache-2.0.3import { Button, Card, Form, Input, Label, Link, TextField } from "@lenso/ui";4import type { FormEvent } from "react";5import * as stylex from "@stylexjs/stylex";6import { s } from "./display.stylex";7
8export function WithForm() {9  const onSubmit = (event: FormEvent<HTMLFormElement>) => {10    event.preventDefault();11    window.alert("Form submitted successfully!");12  };13  return (14    <Card xstyle={s.maxMd}>15      <Card.Header>16        <Card.Title>Login</Card.Title>17        <Card.Description>Enter your credentials to access your account</Card.Description>18      </Card.Header>19      <Form onSubmit={onSubmit}>20        <Card.Content>21          <div {...stylex.props(s.column4)}>22            <TextField name="email">23              <Label>Email</Label>24              <Input25                name="email"26                type="email"27                placeholder="[email protected]"28                variant="secondary"29              />30            </TextField>31            <TextField name="password">32              <Label>Password</Label>33              <Input name="password" type="password" placeholder="••••••••" variant="secondary" />34            </TextField>35          </div>36        </Card.Content>37        <Card.Footer xstyle={s.formFooter}>38          <Button xstyle={s.full} type="submit">39            Sign In40          </Button>41          <Link xstyle={[s.centerText, s.textSm]} href="#">42            Forgot password?43          </Link>44        </Card.Footer>45      </Form>46    </Card>47  );48}

1"use client";2// Adapted from HeroUI v3.2.6 (e385ac202b2cdb94b1bf6fa76d32c31c8259cc5e), Apache-2.0.3import { Check, Star } from "@gravity-ui/icons";4import { Button, Card } from "@lenso/ui";5import * as stylex from "@stylexjs/stylex";6import { s } from "./display.stylex";7
8const PRO_FEATURES = [9  "Unlimited projects and collaborators",10  "Priority support with 24h response",11  "Advanced analytics and exports",12] as const;13const styles = stylex.create({14  card: {15    position: "relative",16    width: "100%",17    maxWidth: 448,18    overflow: "hidden",19    borderWidth: 1,20    borderStyle: "solid",21    borderColor: {22      default: "color-mix(in oklab, var(--accent) 20%, transparent)",23      ':is([data-theme="dark"] *)': "color-mix(in oklab, var(--accent) 30%, transparent)",24    },25    backgroundImage: {26      default:27        "linear-gradient(to bottom right in oklab, color-mix(in oklab, var(--accent) 12%, transparent), var(--surface), var(--surface-secondary))",28      ':is([data-theme="dark"] *)':29        "linear-gradient(to bottom right in oklab, color-mix(in oklab, var(--accent) 20%, transparent), var(--surface), color-mix(in oklab, var(--accent) 8%, transparent))",30    },31    boxShadow: {32      default:33        "0 10px 15px -3px color-mix(in oklab, var(--accent) 10%, transparent), 0 4px 6px -4px color-mix(in oklab, var(--accent) 10%, transparent)",34      ':is([data-theme="dark"] *)':35        "0 10px 15px -3px color-mix(in oklab, var(--accent) 5%, transparent), 0 4px 6px -4px color-mix(in oklab, var(--accent) 5%, transparent)",36    },37  },38  topGlow: {39    pointerEvents: "none",40    position: "absolute",41    top: -48,42    right: -48,43    width: 160,44    height: 160,45    borderRadius: 9999,46    filter: "blur(64px)",47    backgroundColor: {48      default: "color-mix(in oklab, var(--accent) 20%, transparent)",49      ':is([data-theme="dark"] *)': "color-mix(in oklab, var(--accent) 30%, transparent)",50    },51  },52  bottomGlow: {53    pointerEvents: "none",54    position: "absolute",55    bottom: -32,56    left: -32,57    width: 112,58    height: 112,59    borderRadius: 9999,60    filter: "blur(40px)",61    backgroundColor: {62      default: "color-mix(in oklab, var(--accent) 10%, transparent)",63      ':is([data-theme="dark"] *)': "color-mix(in oklab, var(--accent) 20%, transparent)",64    },65  },66  recommended: {67    width: "fit-content",68    borderRadius: 9999,69    paddingInline: 10,70    paddingBlock: 2,71    fontSize: 12,72    lineHeight: "16px",73    fontWeight: 500,74    letterSpacing: "0.025em",75    backgroundColor: {76      default: "color-mix(in oklab, var(--accent) 15%, transparent)",77      ':is([data-theme="dark"] *)': "color-mix(in oklab, var(--accent) 25%, transparent)",78    },79    color: {80      default: "var(--accent)",81      ':is([data-theme="dark"] *)': "var(--accent-soft-foreground)",82    },83  },84  star: {85    display: "flex",86    width: 40,87    height: 40,88    flexShrink: 0,89    alignItems: "center",90    justifyContent: "center",91    borderRadius: 12,92    backgroundColor: {93      default: "color-mix(in oklab, var(--accent) 15%, transparent)",94      ':is([data-theme="dark"] *)': "color-mix(in oklab, var(--accent) 20%, transparent)",95    },96    color: {97      default: "var(--accent)",98      ':is([data-theme="dark"] *)': "var(--accent-soft-foreground)",99    },100  },101  footer: {102    position: "relative",103    flexDirection: { default: "column", "@media (min-width: 640px)": "row" },104    gap: 8,105  },106  upgrade: {107    width: "100%",108    boxShadow:109      "0 4px 6px -1px color-mix(in oklab, var(--accent) 20%, transparent), 0 2px 4px -2px color-mix(in oklab, var(--accent) 20%, transparent)",110  },111});112export function CustomStyles() {113  return (114    <Card xstyle={styles.card}>115      <div aria-hidden="true" {...stylex.props(styles.topGlow)} />116      <div aria-hidden="true" {...stylex.props(styles.bottomGlow)} />117      <Card.Header xstyle={[s.relative, s.gap3]}>118        <span {...stylex.props(styles.recommended)}>Recommended</span>119        <div {...stylex.props(s.startRow3)}>120          <div {...stylex.props(styles.star)}>121            <Star aria-hidden="true" {...stylex.props(s.icon5)} />122          </div>123          <div {...stylex.props(s.column1)}>124            <Card.Title>Upgrade to Pro</Card.Title>125            <Card.Description>126              Unlock team workflows and insights built for growing products.127            </Card.Description>128          </div>129        </div>130      </Card.Header>131      <Card.Content xstyle={s.relative}>132        <ul {...stylex.props(s.column2)}>133          {PRO_FEATURES.map((feature) => (134            <li key={feature} {...stylex.props(s.row2, s.textSm, s.muted)}>135              <Check aria-hidden="true" {...stylex.props(s.icon4, s.shrink0, s.accent)} />136              {feature}137            </li>138          ))}139        </ul>140      </Card.Content>141      <Card.Footer xstyle={styles.footer}>142        <Button xstyle={styles.upgrade}>Upgrade now</Button>143        <Button xstyle={s.full} variant="secondary">144          Compare plans145        </Button>146      </Card.Footer>147    </Card>148  );149}