Card

Content container with a subtle border and hover effects. Links the entire card surface when an href is provided, with an animated gradient border.

Components

Card

content

static

<arc-card>

Overview

Card is the content container in ARC UI. It wraps any slotted content in a rounded, bordered surface that sits on top of the page background, separating grouped information from its surroundings. When you provide an `href` attribute, the card transforms into a full-surface link. On hover, a gradient border animates from blue to violet, and the inner surface gains a subtle lift shadow. Linked cards suit navigation grids, project listings, and dashboard tiles where the entire card should be clickable. Cards have no opinion about their inner layout. Slot any headings, paragraphs, badges, icons, or images inside and style them with your own markup. The card handles the outer chrome (border, radius, background, padding, focus ring, and responsive adjustments).

Guidelines

When to use

Use cards to group related content that belongs together visually
Provide an href when the entire card should navigate somewhere
Place cards in CSS Grid or Flexbox layouts for consistent sizing
Keep card content concise: a heading, short description, and optional metadata
Use arc-badge or arc-tag inside cards to surface status or category information

When not to use

Do not nest interactive elements (buttons, links) inside a linked card; it creates conflicting click targets
Do not use cards for single lines of text. Use inline elements or a list instead
Do not overload a card with too much content. If it needs scrolling, break it into sections
Do not mix linked and non-linked cards in the same grid without visual distinction

Features

Gradient border hover animation on linked cards (blue to violet)
Full-surface link behavior when href is set, so no nested anchor tags are needed
Accessible focus ring with glow effect for keyboard navigation
Responsive padding that tightens on small viewports
Footer slot for actions, links, or metadata, with no visual chrome and hidden when empty
CSS parts (card, body, footer, inner) for style customization
Equal-height support via height: 100% for grid layouts
Dark-mode-native design with subtle inset highlight on hover

Preview

Project Atlas

Active

Cloud migration toolkit for legacy enterprise systems. Automates dependency mapping and generates infrastructure-as-code templates.

Updated 2 days ago

Meridian API

Shipped

GraphQL gateway that unifies three internal services behind a single schema. Handles 12k requests per second in production.

Updated 5 days ago

Nightfall Theme

Beta

Dark-mode design system tokens and component skins. Provides WCAG AAA contrast ratios across all interactive states.

Updated today

Usage

<div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;">
  <arc-card href="/projects/atlas">
    <div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px;">
      <h3 style="margin: 0; font-size: 1.1rem;">Project Atlas</h3>
      <arc-badge variant="info">Active</arc-badge>
    </div>
    <p style="margin: 0 0 16px; color: var(--text-muted); font-size: 0.875rem;">Cloud migration toolkit for legacy enterprise systems. Automates dependency mapping and generates infrastructure-as-code templates.</p>
    <span style="font-size: 0.75rem; color: var(--text-subtle);">Updated 2 days ago</span>
  </arc-card>

  <arc-card href="/projects/meridian">
    <div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px;">
      <h3 style="margin: 0; font-size: 1.1rem;">Meridian API</h3>
      <arc-badge variant="success">Shipped</arc-badge>
    </div>
    <p style="margin: 0 0 16px; color: var(--text-muted); font-size: 0.875rem;">GraphQL gateway that unifies three internal services behind a single schema. Handles 12k requests per second in production.</p>
    <span style="font-size: 0.75rem; color: var(--text-subtle);">Updated 5 days ago</span>
  </arc-card>

  <arc-card href="/projects/nightfall">
    <div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px;">
      <h3 style="margin: 0; font-size: 1.1rem;">Nightfall Theme</h3>
      <arc-badge variant="warning">Beta</arc-badge>
    </div>
    <p style="margin: 0 0 16px; color: var(--text-muted); font-size: 0.875rem;">Dark-mode design system tokens and component skins. Provides WCAG AAA contrast ratios across all interactive states.</p>
    <span style="font-size: 0.75rem; color: var(--text-subtle);">Updated today</span>
  </arc-card>
</div>

import { Card, Badge } from '@arclux/arc-ui-react';

export default function Example() {
  return (
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
      <Card href="/projects/atlas">
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 12 }}>
          <h3 style={{ margin: 0, fontSize: '1.1rem' }}>Project Atlas</h3>
          <Badge variant="info">Active</Badge>
        </div>
        <p style={{ margin: '0 0 16px', color: 'var(--text-muted)', fontSize: '0.875rem' }}>Cloud migration toolkit for legacy enterprise systems. Automates dependency mapping and generates infrastructure-as-code templates.</p>
        <span style={{ fontSize: '0.75rem', color: 'var(--text-subtle)' }}>Updated 2 days ago</span>
      </Card>

      <Card href="/projects/meridian">
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 12 }}>
          <h3 style={{ margin: 0, fontSize: '1.1rem' }}>Meridian API</h3>
          <Badge variant="success">Shipped</Badge>
        </div>
        <p style={{ margin: '0 0 16px', color: 'var(--text-muted)', fontSize: '0.875rem' }}>GraphQL gateway that unifies three internal services behind a single schema. Handles 12k requests per second in production.</p>
        <span style={{ fontSize: '0.75rem', color: 'var(--text-subtle)' }}>Updated 5 days ago</span>
      </Card>

      <Card href="/projects/nightfall">
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 12 }}>
          <h3 style={{ margin: 0, fontSize: '1.1rem' }}>Nightfall Theme</h3>
          <Badge variant="warning">Beta</Badge>
        </div>
        <p style={{ margin: '0 0 16px', color: 'var(--text-muted)', fontSize: '0.875rem' }}>Dark-mode design system tokens and component skins. Provides WCAG AAA contrast ratios across all interactive states.</p>
        <span style={{ fontSize: '0.75rem', color: 'var(--text-subtle)' }}>Updated today</span>
      </Card>
    </div>
  );
}

<script setup>
import { Card, Badge } from '@arclux/arc-ui-vue';
</script>

<template>
  <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;">
    <Card href="/projects/atlas">
      <div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px;">
        <h3 style="margin: 0; font-size: 1.1rem;">Project Atlas</h3>
        <Badge variant="info">Active</Badge>
      </div>
      <p style="margin: 0 0 16px; color: var(--text-muted); font-size: 0.875rem;">Cloud migration toolkit for legacy enterprise systems. Automates dependency mapping and generates infrastructure-as-code templates.</p>
      <span style="font-size: 0.75rem; color: var(--text-subtle);">Updated 2 days ago</span>
    </Card>

    <Card href="/projects/meridian">
      <div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px;">
        <h3 style="margin: 0; font-size: 1.1rem;">Meridian API</h3>
        <Badge variant="success">Shipped</Badge>
      </div>
      <p style="margin: 0 0 16px; color: var(--text-muted); font-size: 0.875rem;">GraphQL gateway that unifies three internal services behind a single schema. Handles 12k requests per second in production.</p>
      <span style="font-size: 0.75rem; color: var(--text-subtle);">Updated 5 days ago</span>
    </Card>

    <Card href="/projects/nightfall">
      <div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px;">
        <h3 style="margin: 0; font-size: 1.1rem;">Nightfall Theme</h3>
        <Badge variant="warning">Beta</Badge>
      </div>
      <p style="margin: 0 0 16px; color: var(--text-muted); font-size: 0.875rem;">Dark-mode design system tokens and component skins. Provides WCAG AAA contrast ratios across all interactive states.</p>
      <span style="font-size: 0.75rem; color: var(--text-subtle);">Updated today</span>
    </Card>
  </div>
</template>

<script>
  import { Card, Badge } from '@arclux/arc-ui-svelte';
</script>

<div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;">
  <Card href="/projects/atlas">
    <div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px;">
      <h3 style="margin: 0; font-size: 1.1rem;">Project Atlas</h3>
      <Badge variant="info">Active</Badge>
    </div>
    <p style="margin: 0 0 16px; color: var(--text-muted); font-size: 0.875rem;">Cloud migration toolkit for legacy enterprise systems. Automates dependency mapping and generates infrastructure-as-code templates.</p>
    <span style="font-size: 0.75rem; color: var(--text-subtle);">Updated 2 days ago</span>
  </Card>

  <Card href="/projects/meridian">
    <div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px;">
      <h3 style="margin: 0; font-size: 1.1rem;">Meridian API</h3>
      <Badge variant="success">Shipped</Badge>
    </div>
    <p style="margin: 0 0 16px; color: var(--text-muted); font-size: 0.875rem;">GraphQL gateway that unifies three internal services behind a single schema. Handles 12k requests per second in production.</p>
    <span style="font-size: 0.75rem; color: var(--text-subtle);">Updated 5 days ago</span>
  </Card>

  <Card href="/projects/nightfall">
    <div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px;">
      <h3 style="margin: 0; font-size: 1.1rem;">Nightfall Theme</h3>
      <Badge variant="warning">Beta</Badge>
    </div>
    <p style="margin: 0 0 16px; color: var(--text-muted); font-size: 0.875rem;">Dark-mode design system tokens and component skins. Provides WCAG AAA contrast ratios across all interactive states.</p>
    <span style="font-size: 0.75rem; color: var(--text-subtle);">Updated today</span>
  </Card>
</div>

import { Component } from '@angular/core';
import { Card, Badge } from '@arclux/arc-ui-angular';

@Component({
  imports: [Card, Badge],
  template: `
    <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;">
      <arc-card href="/projects/atlas">
        <div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px;">
          <h3 style="margin: 0; font-size: 1.1rem;">Project Atlas</h3>
          <arc-badge variant="info">Active</arc-badge>
        </div>
        <p style="margin: 0 0 16px; color: var(--text-muted); font-size: 0.875rem;">Cloud migration toolkit for legacy enterprise systems. Automates dependency mapping and generates infrastructure-as-code templates.</p>
        <span style="font-size: 0.75rem; color: var(--text-subtle);">Updated 2 days ago</span>
      </arc-card>

      <arc-card href="/projects/meridian">
        <div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px;">
          <h3 style="margin: 0; font-size: 1.1rem;">Meridian API</h3>
          <arc-badge variant="success">Shipped</arc-badge>
        </div>
        <p style="margin: 0 0 16px; color: var(--text-muted); font-size: 0.875rem;">GraphQL gateway that unifies three internal services behind a single schema. Handles 12k requests per second in production.</p>
        <span style="font-size: 0.75rem; color: var(--text-subtle);">Updated 5 days ago</span>
      </arc-card>

      <arc-card href="/projects/nightfall">
        <div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px;">
          <h3 style="margin: 0; font-size: 1.1rem;">Nightfall Theme</h3>
          <arc-badge variant="warning">Beta</arc-badge>
        </div>
        <p style="margin: 0 0 16px; color: var(--text-muted); font-size: 0.875rem;">Dark-mode design system tokens and component skins. Provides WCAG AAA contrast ratios across all interactive states.</p>
        <span style="font-size: 0.75rem; color: var(--text-subtle);">Updated today</span>
      </arc-card>
    </div>
  `,
})
export class ProjectCardsComponent {}

import { Card, Badge } from '@arclux/arc-ui-solid';

export default function Example() {
  return (
    <div style={{ display: 'grid', 'grid-template-columns': 'repeat(3, 1fr)', gap: '16px' }}>
      <Card href="/projects/atlas">
        <div style={{ display: 'flex', 'justify-content': 'space-between', 'align-items': 'flex-start', 'margin-bottom': '12px' }}>
          <h3 style={{ margin: 0, 'font-size': '1.1rem' }}>Project Atlas</h3>
          <Badge variant="info">Active</Badge>
        </div>
        <p style={{ margin: '0 0 16px', color: 'var(--text-muted)', 'font-size': '0.875rem' }}>Cloud migration toolkit for legacy enterprise systems. Automates dependency mapping and generates infrastructure-as-code templates.</p>
        <span style={{ 'font-size': '0.75rem', color: 'var(--text-subtle)' }}>Updated 2 days ago</span>
      </Card>

      <Card href="/projects/meridian">
        <div style={{ display: 'flex', 'justify-content': 'space-between', 'align-items': 'flex-start', 'margin-bottom': '12px' }}>
          <h3 style={{ margin: 0, 'font-size': '1.1rem' }}>Meridian API</h3>
          <Badge variant="success">Shipped</Badge>
        </div>
        <p style={{ margin: '0 0 16px', color: 'var(--text-muted)', 'font-size': '0.875rem' }}>GraphQL gateway that unifies three internal services behind a single schema. Handles 12k requests per second in production.</p>
        <span style={{ 'font-size': '0.75rem', color: 'var(--text-subtle)' }}>Updated 5 days ago</span>
      </Card>

      <Card href="/projects/nightfall">
        <div style={{ display: 'flex', 'justify-content': 'space-between', 'align-items': 'flex-start', 'margin-bottom': '12px' }}>
          <h3 style={{ margin: 0, 'font-size': '1.1rem' }}>Nightfall Theme</h3>
          <Badge variant="warning">Beta</Badge>
        </div>
        <p style={{ margin: '0 0 16px', color: 'var(--text-muted)', 'font-size': '0.875rem' }}>Dark-mode design system tokens and component skins. Provides WCAG AAA contrast ratios across all interactive states.</p>
        <span style={{ 'font-size': '0.75rem', color: 'var(--text-subtle)' }}>Updated today</span>
      </Card>
    </div>
  );
}

import { Card, Badge } from '@arclux/arc-ui-preact';

export default function Example() {
  return (
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
      <Card href="/projects/atlas">
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 12 }}>
          <h3 style={{ margin: 0, fontSize: '1.1rem' }}>Project Atlas</h3>
          <Badge variant="info">Active</Badge>
        </div>
        <p style={{ margin: '0 0 16px', color: 'var(--text-muted)', fontSize: '0.875rem' }}>Cloud migration toolkit for legacy enterprise systems. Automates dependency mapping and generates infrastructure-as-code templates.</p>
        <span style={{ fontSize: '0.75rem', color: 'var(--text-subtle)' }}>Updated 2 days ago</span>
      </Card>

      <Card href="/projects/meridian">
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 12 }}>
          <h3 style={{ margin: 0, fontSize: '1.1rem' }}>Meridian API</h3>
          <Badge variant="success">Shipped</Badge>
        </div>
        <p style={{ margin: '0 0 16px', color: 'var(--text-muted)', fontSize: '0.875rem' }}>GraphQL gateway that unifies three internal services behind a single schema. Handles 12k requests per second in production.</p>
        <span style={{ fontSize: '0.75rem', color: 'var(--text-subtle)' }}>Updated 5 days ago</span>
      </Card>

      <Card href="/projects/nightfall">
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 12 }}>
          <h3 style={{ margin: 0, fontSize: '1.1rem' }}>Nightfall Theme</h3>
          <Badge variant="warning">Beta</Badge>
        </div>
        <p style={{ margin: '0 0 16px', color: 'var(--text-muted)', fontSize: '0.875rem' }}>Dark-mode design system tokens and component skins. Provides WCAG AAA contrast ratios across all interactive states.</p>
        <span style={{ fontSize: '0.75rem', color: 'var(--text-subtle)' }}>Updated today</span>
      </Card>
    </div>
  );
}

<!-- Auto-generated by @arclux/prism — do not edit manually -->
<!-- arc-card — requires card.css + base.css (or arc-ui.css) -->
<div class="arc-card">
  <a class="card" href="#"><div class="card__inner">Card</div></a>
</div>

<!-- Auto-generated by @arclux/prism — do not edit manually -->
<!-- arc-card — self-contained, no external CSS needed -->
<style>
  @media (max-width: 768px) {
    .arc-card .card__inner { padding: 24px 16px; }
  }
  .arc-card[href] .card:hover { background: linear-gradient(135deg, rgba(77, 126, 247,0.3), rgba(139, 92, 246,0.15), rgb(34, 34, 41)); }
  .arc-card .card:hover .card__inner { box-shadow: inset 0 1px 0 rgba(255, 255, 255,0.04), 0 4px 24px rgba(0,0,0,0.2); }
  .arc-card .card:focus-visible { outline: none; box-shadow: 0 0 0 2px rgb(3, 3, 7), 0 0 0 4px rgb(77, 126, 247), 0 0 16px rgba(77,126,247,0.3); border-radius: 14px; }
</style>
<div class="arc-card" style="display: block">
  <a class="card" style="position: relative; border-radius: 14px; padding: 1px; background: rgb(24, 24, 30); text-decoration: none; display: block; height: 100%" href="#"><div class="card__inner" style="position: relative; background: rgb(13, 13, 18); border-radius: calc(14px - 1px); padding: 40px 24px; height: 100%">Card</div></a>
</div>

API

hrefstring='': When set, renders the card as an anchor element, making the entire card surface a clickable link. On hover, the border transitions to a blue-to-violet gradient and the inner surface gains a lift shadow.
padding'none' | 'sm' | 'md' | 'lg'='md': Controls internal spacing. Options: 'none', 'sm', 'md', 'lg'.
interactiveboolean=false: Enables hover effects for clickable cards that trigger JS instead of navigating via href.

Card

Overview

Guidelines

When to use

When not to use

Features

Preview

Project Atlas

Meridian API

Nightfall Theme

Usage

API

See Also

Docs

Project

Arclight