Value Card

Horizontal card with icon and text, for values or features lists.

Components

Value Card

data

static

<arc-value-card>

Overview

ValueCard presents an icon beside a heading and description in a horizontal layout, making it ideal for company values, principle lists, and benefit grids. Unlike FeatureCard's vertical stacking, ValueCard places the icon to the left of the text block, producing a more compact and scannable layout that works well in tighter spaces or when you have many items to display. The card uses a subtle border with a hover effect that brightens the border via `--border-bright` and adds a soft violet box shadow. The icon is rendered in `--accent-secondary` by default, giving it a distinct visual identity that separates it from the blue-accented FeatureCard. This color distinction helps maintain visual hierarchy when both card types appear on the same page. Like FeatureCard, ValueCard exposes an `icon` named slot for custom icon content alongside the string `icon` property for simple text. CSS parts (`card`, `icon`, `title`, `description`) enable targeted styling from outside the shadow DOM.

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

Do not add an href — value cards are not linkable; use FeatureCard for navigation
Do not use excessively long descriptions that break the horizontal balance
Do not mix value cards and feature cards in the same grid row
Do not override the violet icon color without updating the hover glow to match
Do not 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';

export default function Example() {
  return (
    <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." />
</template>

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

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

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

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

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

export default function Example() {
  return (
    <ValueCard
      heading="Quality First"
      description="Every component built with accessibility in mind." />
  );
}

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

export default function Example() {
  return (
    <ValueCard
      heading="Quality First"
      description="Every component built with accessibility in mind." />
  );
}

<!-- 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

icon string ='': Icon text displayed beside content
heading string ='': Card title
description string ='': Card body text

Value Card

Overview

Guidelines

When to use

When not to use

Features

Preview

Quality First

Open Source

Usage

API

See Also

Docs

Project

Arclight