Hesoyam

Card

Leftover shadcn surface. Hesoyam has no Card analog — keep this folder, do not invent a replacement.

Default

Compound parts: Card, CardHeader, CardTitle, CardDescription, CardAction, CardContent, CardFooter. size is default or sm.

Card is leftover shadcn. New product UI should not grow a parallel “Hesoyam card”. For a hover preview with identity and a few facts, use Context Card. For a settings block with a title and footer actions, use Fieldset.

Production
Last deploy 12 minutes ago.

Region fra1 · 3 instances


        

          1
          
          <Card class="w-[320px]">
        

          2
          
            <CardHeader>
        

          3
          
              <CardTitle>Production</CardTitle>
        

          4
          
              <CardDescription>Last deploy 12 minutes ago.</CardDescription>
        

          5
          
              <CardAction>
        

          6
          
                <Button size="small" variant="secondary">Open</Button>
        

          7
          
              </CardAction>
        

          8
          
            </CardHeader>
        

          9
          
            <CardContent>
        

          10
          
              Region fra1 · 3 instances
        

          11
          
            </CardContent>
        

          12
          
            <CardFooter class="border-t border-[var(--ds-gray-alpha-400)]">
        

          13
          
              <Button size="small">Promote</Button>
        

          14
          
            </CardFooter>
        

          15
          
          </Card>

Small

Hobby
Shared CPU, 100 GB bandwidth.

$0 / month


        

          1
          
          <Card size="sm" class="w-[280px]">
        

          2
          
            <CardHeader>
        

          3
          
              <CardTitle>Hobby</CardTitle>
        

          4
          
              <CardDescription>Shared CPU, 100 GB bandwidth.</CardDescription>
        

          5
          
            </CardHeader>
        

          6
          
            <CardContent>
        

          7
          
              $0 / month
        

          8
          
            </CardContent>
        

          9
          
          </Card>

Best practices

  • Do not port Hesoyam “cards” here. Existing screens that already import Card can stay.
  • New settings copy belongs in Fieldset. Hover identity belongs in Context Card.
  • size="sm" tightens padding and gap. Do not invent a third size.
  • Put the trailing control in CardAction so the header grid keeps title and description on the left.
  • Tokens only. Hairline on footer uses --ds-gray-alpha-400.