Card for a fixed-term bond receipt: principal locked for a maturity period, accruing some pro-rata yield from a shared pool, redeemable at maturity (or rolled for another term). Generic for any term-deposit primitive (OHM-style bonds, fixed-term deposits, treasury bills, ...).

Web3.Ui.BondCard.view []
    { bondId = receipt.id
    , principal = receipt.principal
    , principalSymbol = "PLS"
    , decimals = 18
    , maturitySec = receipt.maturity
    , nowSec = model.nowSec
    , pendingYield = receipt.pendingYield
    , yieldSymbol = "PLS"
    , yieldDecimals = 18
    , onClaimYield = Just (ClaimYield receipt.id)
    , onRedeem = Just (Redeem receipt.id)
    , onRoll = Just (Roll receipt.id)
    }

decimals scales principal; yieldDecimals scales pendingYield, which is often paid in a different token (a 6-decimal coupon on an 18-decimal principal renders 1e12 too small if the two share one field).

CSS classes: web3-bondcard, web3-bondcard__id, web3-bondcard__principal, web3-bondcard__maturity, web3-bondcard__yield, web3-bondcard__actions, web3-bondcard__action. Maturity gets a --matured modifier once nowSec >= maturitySec.