Card

Cards are flat by design: raised or surface on the ground, content for body text. Glass is available but belongs to chrome; two hundred glass tiles on one page is how a frame rate dies.

import { Card } from '@andrewbehma/glass-ui';

Playground

Card.tsx

import { Card } from '@andrewbehma/glass-ui';

<div className="w-full max-w-80">
  <Card variant="raised" pad="lg">
    <p className="text-section text-ink">Weekly digest</p>
    <p className="mt-1 text-body text-ink-2">
      Seven new comments and two merged pull requests since Monday.
    </p>
  </Card>
</div>

States

Each tile is the live component. Open one in the playground to keep tweaking it.

Raised
Surface
Content
Glass
With hue