Credit Score Card

Visualises a user's credit score with gauge, rating label, and key factors.

Preview · Credit Score Card

Code

HTML · @primus/ui-core

<div class="card" style="max-width:260px;text-align:center;padding:1.5rem">
  <p style="margin:0 0 0.5rem;font-size:0.75rem;text-transform:uppercase;letter-spacing:0.06em;color:var(--muted-foreground)">Credit Score</p>
  <div style="font-size:3rem;font-weight:700;color:var(--success)">742</div>
  <span class="badge success" style="margin:0.5rem 0 0.75rem">Very Good</span>
  <progress value="74" max="100"></progress>
  <p style="margin:0.5rem 0 0;font-size:0.75rem;color:var(--muted-foreground)">Range: 300 – 850</p>
</div>

React

import { CreditScoreCard } from 'primus-react-ui';

<CreditScoreCard userId="user-123" apiUrl="https://api.yourdomain.com" />

Angular

<primus-credit-score-card userId="user-123"
  [apiUrl]="'https://api.yourdomain.com'">
</primus-credit-score-card>

Props

Prop	Type	Default	Description
userId	string	—	User identifier
apiUrl	string	—	API base URL

TypeScript interfaces

interface CreditScoreData {
  score:   number;   // e.g. 742
  min:     number;   // Scale minimum e.g. 300
  max:     number;   // Scale maximum e.g. 850
  rating:  'Poor' | 'Fair' | 'Good' | 'Very Good' | 'Excellent';
  factors?: { label: string; impact: 'positive' | 'negative' | 'neutral' }[];
}

Version history

See the Changelog for version history and breaking changes.