Surfaces

Glass Card

A card built on GlassSurface with rounded corners and overflow clipping, the default container for content sections.

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

<GlassCard title="Overview" headerActions={actions}>…</GlassCard>

GlassCard is the primary surface of the library. Padding comes from --ca-card-padding; use flush for content that touches the edges, such as tables, images and code. Backdrop blur needs something behind the card, which is why the demos sit on a gradient.

Default

Regular thickness, no tint.

Glass Card

Regular thickness, default settings.

Code

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

<div class="backdrop">
  <GlassCard class="demo">
    <p class="title">Glass Card</p>
    <p class="text">Regular thickness, default settings.</p>
  </GlassCard>
</div>

<style>
  .backdrop {
    background: linear-gradient(135deg, var(--ca-brand-main) 0%, var(--ca-semantic-info) 100%);
    border-radius: var(--ca-radius-lg);
    padding: var(--ca-space-8);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
  }
  :global(.demo) { min-width: 220px; max-width: 320px; }
  .title { margin: 0 0 4px; font-size: var(--ca-font-size-body1); font-weight: 600; color: var(--ca-text-primary); }
  .text { margin: 0; font-size: var(--ca-font-size-body2); color: var(--ca-text-secondary); }
</style>

Tinted and glowing

Brand gradient overlay and backlit halo.

Tinted

Brand accent gradient applied.

Glowing

Backlit glow halo behind the surface.

Code

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

<div class="backdrop">
  <GlassCard tinted class="demo">
    <p class="title">Tinted</p>
    <p class="text">Brand accent gradient applied.</p>
  </GlassCard>
  <GlassCard glowing class="demo">
    <p class="title">Glowing</p>
    <p class="text">Backlit glow halo behind the surface.</p>
  </GlassCard>
</div>

<style>
  .backdrop {
    background: linear-gradient(135deg, var(--ca-brand-main) 0%, var(--ca-semantic-info) 100%);
    border-radius: var(--ca-radius-lg);
    padding: var(--ca-space-8);
    display: flex;
    flex-wrap: wrap;
    gap: var(--ca-space-3);
    align-items: center;
    justify-content: center;
    width: 100%;
  }
  :global(.demo) { min-width: 220px; max-width: 320px; }
  .title { margin: 0 0 4px; font-size: var(--ca-font-size-body1); font-weight: 600; color: var(--ca-text-primary); }
  .text { margin: 0; font-size: var(--ca-font-size-body2); color: var(--ca-text-secondary); }
</style>

Thickness tiers

All five tiers in a row.

ultra-thin

thin

regular

thick

chrome

Code

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

<div class="backdrop">
  {#each ['ultra-thin', 'thin', 'regular', 'thick', 'chrome'] as const as t}
    <GlassCard thickness={t} class="tier">
      <p class="title">{t}</p>
    </GlassCard>
  {/each}
</div>

<style>
  .backdrop {
    background: linear-gradient(135deg, var(--ca-brand-main) 0%, var(--ca-semantic-info) 100%);
    border-radius: var(--ca-radius-lg);
    padding: var(--ca-space-8);
    display: flex;
    flex-wrap: wrap;
    gap: var(--ca-space-3);
    width: 100%;
  }
  :global(.tier) { flex: 1; min-width: 100px; }
  .title { margin: 0; font-size: var(--ca-font-size-body1); font-weight: 600; color: var(--ca-text-primary); }
</style>

Flush

Drops the padding for edge-to-edge content.

Edge-to-edge content

With flush the card drops its padding. Use it for tables, images and code.

Code

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

<GlassCard flush full>
  <div class="media">Edge-to-edge content</div>
  <p class="text">With <code>flush</code> the card drops its padding. Use it for tables, images and code.</p>
</GlassCard>

<style>
  .media {
    height: 96px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--ca-brand-main), var(--ca-semantic-info));
    color: var(--ca-brand-contrast);
    font-weight: 600;
  }
  .text { margin: 0; padding: var(--ca-space-4); 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 material tier.
`tinted`	`boolean`	`false`	Adds the brand accent gradient overlay.
`glowing`	`boolean`	`false`	Adds a backlit glow halo.
`href`	`string`	`undefined`	Renders the card as a link.
`target`	`string`	`undefined`	Link target when `href` is set.
`padding`	`string \| number`	`undefined`	Overrides `--ca-card-padding`. Numbers are pixels.
`flush`	`boolean`	`false`	Removes all padding.
`full`	`boolean`	`false`	Sets `width: 100%`.
`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.