Iryx UIMarketing
IFeatureCard
One thing the product does: an icon, a title, and a line about it. The grid of these is what a features section is made of.
<div class="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
<IFeatureCard
v-for="feature in features"
:key="feature.title"
:icon="feature.icon"
:title="feature.title"
:description="feature.description"
/>
</div>Money that adds up
Totals are summed in integer cents, so a column of invoices agrees with the ledger to the penny.
Reminders that go out
Set the terms once, and the nudge goes out on day three without you.
There is no grid inside — the section owns the grid and its column count, and the card owns one feature.
Icon
icon takes a Hugeicons export, or any Vue component — Hugeicons ships icons as data arrays rather than components, so IconLike accepts both and nothing narrower is required of a component you pass. It sits in a tinted square above the title.
Every currency, every locale
Rates are fetched once a day and stored with the invoice, so a total never moves after it is sent.
Reminders that go out
Set the terms once, and the nudge goes out on day three without you.
Recolour the square through ui when a card needs to read differently:
Locked down by default
Every session is scoped to one workspace, and a key only ever sees what it was issued for.
Alignment
start is the default. center centres the text and the icon square with it — useful for a row of three or fewer, less so in a dense grid, where a consistent left edge is easier to scan.
Every currency, every locale
Rates are stored with the invoice, so a total never moves after it is sent.
Reminders that go out
Set the terms once, and the nudge goes out on day three without you.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
icon | IconLike | — | Hugeicons export or SVG component |
title | string | — | Rendered as an h3 |
description | string | — | Short text under the title |
align | 'start' | 'center' | 'start' | Text and icon alignment |
unstyled | boolean | — | Drop built-in classes |
class | string | — | Merged with the built-in classes |
ui | { root?, icon?, title?, description? } | — | Per-element class overrides |
Slots
When both a prop and its matching slot are given, the slot wins.
| Slot | Description |
|---|---|
default | After the description — a link, a badge, anything extra |
icon | Replaces the icon square's contents |
title | Replaces the title prop |
description | Replaces the description prop |