Feature Card — ARC UI

Components

Feature Card

content

static

<arc-feature-card>

Overview

Guidelines

When to use

Use in a CSS grid for feature grids — the card fills its height via flex layout
Provide an href when the card should navigate to a detail or docs page
Keep descriptions concise (one to two sentences) for scannable feature lists
Use the icon slot for SVG icons when you need precise sizing and color control
Combine multiple feature cards in a 2- or 3-column grid for landing page sections

When not to use

Nest interactive elements (buttons, links) inside a feature card that already has an href
Use long paragraph-length descriptions — the card is designed for brief summaries
Mix feature cards with value cards in the same grid — choose one style per section
Override the gradient border with a flat color — it loses the signature hover effect
Use feature cards for data display — use value cards or stat components instead

Features

Gradient border hover effect using a 1px padding technique for smooth transitions
Icon slot with fallback to the icon string property for simple emoji or text
Renders as an <a> when href is set, or a <div> for static display
Animated icon lift with glow shadow (--accent-primary-glow) on hover
Expanding accent rule that fades in on hover for visual polish
Focus-visible outline using --focus-glow for keyboard navigation
Responsive padding that adjusts at the 768px breakpoint
CSS parts (card, inner, icon, title, description) for external styling

Preview

Usage

<arc-feature-card
  heading="Performance"
  description="Optimised builds for lightning-fast load times."
></arc-feature-card>

import { FeatureCard } from '@arclux/arc-ui-react';

<FeatureCard
  heading="Performance"
  description="Optimised builds for lightning-fast load times."
/>

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

<template>
  <FeatureCard
    heading="Performance"
    description="Optimised builds for lightning-fast load times."
  ></FeatureCard>
</template>

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

<FeatureCard
  heading="Performance"
  description="Optimised builds for lightning-fast load times."
></FeatureCard>

import { Component } from '@angular/core';
import { FeatureCard } from '@arclux/arc-ui-angular';

@Component({
  imports: [FeatureCard],
  template: `
    <FeatureCard
      heading="Performance"
      description="Optimised builds for lightning-fast load times."
    ></FeatureCard>
  `,
})
export class MyComponent {}

import { FeatureCard } from '@arclux/arc-ui-solid';

<FeatureCard
  heading="Performance"
  description="Optimised builds for lightning-fast load times."
></FeatureCard>

import { FeatureCard } from '@arclux/arc-ui-preact';

<FeatureCard
  heading="Performance"
  description="Optimised builds for lightning-fast load times."
></FeatureCard>

<!-- Auto-generated by @arclux/prism — do not edit manually -->
<!-- arc-feature-card — requires feature-card.css + base.css (or arc-ui.css) -->
<div class="arc-feature-card">
  <a class="card" href="#">
   <div class="card__inner">
   <div class="card__icon">★</div>
   <h3 class="card__title">Heading</h3>
   <p class="card__desc">Description text goes here</p>
   <span class="card__rule"></span>
   </div>
   </a>
</div>

<!-- Auto-generated by @arclux/prism — do not edit manually -->
<!-- arc-feature-card — self-contained, no external CSS needed -->
<style>
  @media (max-width: 768px) {
    .arc-feature-card .card__inner { padding: 24px 16px; }
  }
  .arc-feature-card .card:hover { background: linear-gradient(135deg, rgba(77, 126, 247,0.3), rgba(139, 92, 246,0.15), rgb(34, 34, 41)); }
  .arc-feature-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-feature-card .card:hover .card__icon { border-color: rgba(77, 126, 247,0.3);
        box-shadow: 0 0 20px rgba(77, 126, 247, 0.2), 0 0 6px rgba(77, 126, 247, 0.12);
        transform: translateY(-2px); }
  .arc-feature-card .card:hover .card__title { color: #fff; }
  .arc-feature-card .card:hover .card__rule { opacity: 0.5; width: 48px; }
  .arc-feature-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-feature-card" style="display: block; height: 100%">
  <a class="card" style="position: relative; border-radius: 14px; height: 100%; padding: 1px; background: rgb(24, 24, 30); text-decoration: none; display: flex; flex-direction: column" href="#">
   <div class="card__inner" style="position: relative; background: rgb(13, 13, 18); border-radius: calc(14px - 1px); padding: 40px 24px; display: flex; flex-direction: column; gap: 16px; flex: 1; z-index: 1">
   <div class="card__icon" style="width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: rgba(77, 126, 247, 0.06); border: 1px solid rgba(77, 126, 247, 0.12); color: rgb(77, 126, 247); font-size: 20px">★</div>
   <h3 class="card__title" style="font-size: 17px; font-weight: 600; color: rgb(232, 232, 236); margin: 0">Heading</h3>
   <p style="color: rgb(138, 138, 150); font-family: 'Host Grotesk', system-ui, sans-serif; font-size: 14px; line-height: 1.7; flex: 1; margin: 0">Description text goes here</p>
   <span class="card__rule" style="width: 32px; height: 1px; background: linear-gradient(90deg, rgb(77, 126, 247), transparent); opacity: 0"></span>
   </div>
   </a>
</div>

API

Prop	Type	Default	Description
`icon`	`string`	`''`	Icon text or emoji displayed in the icon box
`heading`	`string`	`''`	Card title
`description`	`string`	`''`	Card body text
`href`	`string`	`''`	Makes the card a link
`action`	`string`	—	Action label (e.g. "Learn more") shown at the bottom of the card when href is set. Hidden when empty or when no href is provided.

Overview

Guidelines

When to use

When not to use

Features

Preview

Usage

API

See Also

ARC UI

Arclight