Surfaces

Card

GlassCard content patterns: text card, stat cards, accent treatments and a built-in header.

<script>
  import { GlassCard } from "@codeatlasdev/ui";
</script>

<GlassCard title="Team" tinted>…</GlassCard>

These are composition patterns built on Glass Card, which owns the full prop list. Cards render as a link when href is set.

Content card

Text-heavy card with eyebrow, title, body and a link.

Featured

Liquid Glass materials

Depth and clarity for UI surfaces through real-time backdrop blur and optical refraction.

Explore materials →

Code

<script lang="ts">
  import { GlassCard } from '@codeatlasdev/ui';
</script>

<GlassCard class="content-card">
  <div class="body">
    <p class="eyebrow">Featured</p>
    <h3>Liquid Glass materials</h3>
    <p class="text">
      Depth and clarity for UI surfaces through real-time backdrop blur and optical refraction.
    </p>
    <a href="/docs/foundation/materials/">Explore materials →</a>
  </div>
</GlassCard>

<style>
  :global(.content-card) { max-width: 360px; width: 100%; }
  .body { display: flex; flex-direction: column; gap: var(--ca-space-2); }
  .eyebrow {
    margin: 0;
    font-size: var(--ca-font-size-caption);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ca-brand-text);
  }
  h3 { margin: 0; font-size: var(--ca-font-size-h5); font-weight: 600; color: var(--ca-text-primary); }
  .text { margin: 0; font-size: var(--ca-font-size-body2); color: var(--ca-text-secondary); line-height: 1.5; }
  a { font-size: var(--ca-font-size-body2); font-weight: 500; color: var(--ca-brand-text); text-decoration: none; }
  a:hover { text-decoration: underline; }
</style>

Stat cards

Compact metric display.

Components

70+

Svelte 5 + Bits UI

Presets

Amber, Ocean, Crimson and more

Tokens

80+

CSS custom properties

Code

<script lang="ts">
  import { GlassCard } from '@codeatlasdev/ui';

  const stats = [
    { label: 'Components', value: '70+', delta: 'Svelte 5 + Bits UI' },
    { label: 'Presets', value: '8', delta: 'Amber, Ocean, Crimson and more' },
    { label: 'Tokens', value: '80+', delta: 'CSS custom properties' },
  ];
</script>

<div class="grid">
  {#each stats as s}
    <GlassCard class="stat">
      <p class="label">{s.label}</p>
      <p class="value">{s.value}</p>
      <p class="delta">{s.delta}</p>
    </GlassCard>
  {/each}
</div>

<style>
  .grid { display: flex; flex-wrap: wrap; gap: var(--ca-space-3); width: 100%; }
  :global(.stat) { flex: 1; min-width: 140px; }
  .label {
    margin: 0 0 4px;
    font-size: var(--ca-font-size-caption);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ca-text-secondary);
  }
  .value { margin: 0 0 4px; font-size: var(--ca-font-size-h3); font-weight: 700; line-height: 1.1; color: var(--ca-text-primary); }
  .delta { margin: 0; font-size: var(--ca-font-size-caption); color: var(--ca-brand-text); }
</style>

Tinted and glowing

Cards with accent treatments.

Tinted

Brand gradient overlay on the surface.

Glowing

Backlit halo behind the surface.

Code

<script lang="ts">
  import { GlassCard } from '@codeatlasdev/ui';
</script>

<div class="row">
  <GlassCard tinted class="accent">
    <p class="title">Tinted</p>
    <p class="text">Brand gradient overlay on the surface.</p>
  </GlassCard>
  <GlassCard glowing class="accent">
    <p class="title">Glowing</p>
    <p class="text">Backlit halo behind the surface.</p>
  </GlassCard>
</div>

<style>
  .row { display: flex; flex-wrap: wrap; gap: var(--ca-space-3); width: 100%; }
  :global(.accent) { flex: 1; min-width: 200px; }
  .title { margin: 0 0 4px; font-size: var(--ca-font-size-h5); font-weight: 600; color: var(--ca-text-primary); }
  .text { margin: 0; font-size: var(--ca-font-size-body2); color: var(--ca-text-secondary); }
</style>

Header and actions

`title` and `headerActions` render a built-in header row.

Use title and headerActions for a built-in card header.

Code

<script lang="ts">
  import { GlassCard, Button } from '@codeatlasdev/ui';
</script>

<GlassCard title="Team members" class="titled">
  {#snippet headerActions()}<Button size="sm" variant="outlined">Invite</Button>{/snippet}
  <p>Use <code>title</code> and <code>headerActions</code> for a built-in card header.</p>
</GlassCard>

<style>
  :global(.titled) { max-width: 420px; width: 100%; }
  p { margin: 0; font-size: var(--ca-font-size-body2); color: var(--ca-text-secondary); }
</style>

Props

Prop	Type	Default	Description
`thickness`	`'ultra-thin' \| 'thin' \| 'regular' \| 'thick' \| 'chrome'`	`'regular'`	Glass thickness tier.
`tinted`	`boolean`	`false`	Adds the brand accent gradient.
`glowing`	`boolean`	`false`	Adds a backlit glow halo.
`title`	`string`	`undefined`	Header title.
`headerActions`	`Snippet`	`undefined`	Actions aligned to the end of the header.
`class`	`string`	`''`	Extra class names.
`children`	`Snippet`	`undefined`	Card content.