Value Card
Horizontal card with icon and text, for values or features lists.
<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
Quality First
Every component built with accessibility in mind.
Open Source
MIT licensed with an active community.
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
iconstring''- Icon text displayed beside content
headingstring''- Card title
descriptionstring''- Card body text