Hesoyam

Card

Compound surface built from Card, CardHeader, CardTitle, CardDescription, CardAction, CardContent, and CardFooter.

Default

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

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>
        

          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

  • Put trailing controls in CardAction so the header grid keeps title and description on the left.
  • 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.
  • Footer has no separator by default — add --ds-gray-alpha-400.