Skip to content

RateCard

Exchange rate display card showing rates for currency pairs.

Open in Storybook

Interactive Demo

USD/NGN

undefined flag
1,580.00
undefined flag
1,560.00

BTC/USD

undefined flag
67,450.00
undefined flag
67,200.00

Usage

vue
<script setup>
import { RateCard } from '@yellowcard/b2b-design-system';

const rates = [
  { label: 'Buy', value: '1,580.00' },
  { label: 'Sell', value: '1,560.00' },
];
</script>

<template>
  <RateCard title="USD/NGN" :rate="rates" />
</template>

API Reference

Props

PropTypeDefaultDescription
title*stringCard title (e.g., currency pair)
rate*RateItem[]Array of rate items with label and value