Value Card — ARC UI

Components

Value Card

data

static

<arc-value-card>

Overview

Guidelines

When to use

Use for lists of values, principles, or benefits where compact layout matters
Place in a 2-column grid for a balanced presentation of 4-6 items
Use the icon slot to insert SVG icons for consistent sizing and theming
Keep headings short (2-4 words) since horizontal space is limited
Pair with a section heading above the grid for context

When not to use

Add an href — value cards are not linkable; use Feature Card for navigation
Use excessively long descriptions that break the horizontal balance
Mix value cards and feature cards in the same grid row
Override the violet icon color without updating the hover glow to match
Use value cards for single items — they are designed for grouped lists

Features

Horizontal icon-beside-text layout for compact, scannable presentation
Violet-accented icon area using --accent-secondary for visual distinction
Subtle hover border brightening with a soft violet glow shadow
Icon slot with fallback to the icon string property
Full-height flex layout that equalises card heights in a grid
CSS parts (card, icon, title, description) for external style customization
Clean typographic hierarchy with 17px heading and 14px body text

Preview

Usage

<arc-value-card
  heading="Quality First"
  description="Every component built with accessibility in mind."
></arc-value-card>

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

<ValueCard
  heading="Quality First"
  description="Every component built with accessibility in mind."
/>

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

<template>
  <ValueCard
    heading="Quality First"
    description="Every component built with accessibility in mind."
  ></ValueCard>
</template>

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

<ValueCard
  heading="Quality First"
  description="Every component built with accessibility in mind."
></ValueCard>

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

@Component({
  imports: [ValueCard],
  template: `
    <ValueCard
      heading="Quality First"
      description="Every component built with accessibility in mind."
    ></ValueCard>
  `,
})
export class MyComponent {}

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

<ValueCard
  heading="Quality First"
  description="Every component built with accessibility in mind."
></ValueCard>

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

<ValueCard
  heading="Quality First"
  description="Every component built with accessibility in mind."
></ValueCard>

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

<!-- Auto-generated by @arclux/prism — do not edit manually -->
<!-- arc-value-card — self-contained, no external CSS needed -->
<style>
  .arc-value-card .card:hover { border-color: rgb(51, 51, 64);
        box-shadow: 0 0 20px rgba(139, 92, 246,0.06); }
</style>
<div class="arc-value-card" style="display: flex; flex-direction: column; height: 100%">
  <div class="card" style="position: relative; display: flex; align-items: flex-start; gap: 24px; padding: 24px; flex: 1; border: 1px solid rgb(24, 24, 30); border-radius: 14px">
   <div style="flex-shrink: 0; color: rgb(139, 92, 246); font-size: 24px; line-height: 1; padding-top: 2px">★</div>
   <div style="display: flex; flex-direction: column; gap: 8px">
   <h3 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; margin: 0">Description text goes here</p>
   </div>
   </div>
</div>

API

Prop	Type	Default	Description
`icon`	`string`	`''`	Icon text displayed beside content
`heading`	`string`	`''`	Card title
`description`	`string`	`''`	Card body text

Overview

Guidelines

When to use

When not to use

Features

Preview

Usage

API

See Also

ARC UI

Arclight