The Huila lot scored 86 at cupping [1] and costs 9% more than last season [2]. Two cafés have asked for it again [3].
- 1Tasting notesCupping, 12 MarchHuila washed: red apple, panela, long finish. Score 86.
- 2Supplier pricesColombia price list, springFinca La Esperanza, 70 kg bag: up 9% on autumn.
- 3Open ordersStanding ordersNorth Street Café and Loom both ask for the Huila in their next delivery.
import { SourceCards } from '@brand-studio/ui';
export default function SourceCardsDemo() {
return (
<div style={{ width: '100%', maxWidth: 680, display: 'grid', gap: 16 }}>
<p style={{ margin: 0 }}>The Huila lot scored 86 at cupping [1] and costs 9% more than last season [2]. Two cafés have asked for it again [3].</p>
<SourceCards sources={[
{ id: 'cupping', source: 'Tasting notes', title: 'Cupping, 12 March', excerpt: 'Huila washed: red apple, panela, long finish. Score 86.' },
{ id: 'prices', source: 'Supplier prices', title: 'Colombia price list, spring', excerpt: 'Finca La Esperanza, 70 kg bag: up 9% on autumn.' },
{ id: 'orders', source: 'Open orders', title: 'Standing orders', excerpt: 'North Street Café and Loom both ask for the Huila in their next delivery.' },
]} />
</div>
);
}Installation
pnpm add @brand-studio/uinpm install @brand-studio/uiyarn add @brand-studio/uibun add @brand-studio/uiInstall the peer dependencies
npm install react react-domImport the stylesheet once
import '@brand-studio/ui/styles.css';Wrap your app in a brand theme
import { BrandTheme, SourceCards } from '@brand-studio/ui'; import brand from './brand.json'; <BrandTheme palette={brand.tokens} mode="system"> {/* your app */} </BrandTheme>
Usage
import { SourceCards } from '@brand-studio/ui';<SourceCards sources={[
{ id: 'cupping', source: 'Tasting notes', title: 'Cupping, 12 March', excerpt: 'Score 86.', href: '/notes/cupping' },
]} />The numbers follow the order of sources, so cite them as [1], [2] in the answer. A source with href becomes a link. The cards fill as many columns as fit and arrive one after another when they scroll into view.
Accessibility
- The cards are an ordered list named by
label, so screen readers hear the count and each number. - With reduced motion the cards show at once.
API Reference
| Prop | Type | Default |
|---|---|---|
sources | SourceItem[] | – |
label? | string | 'Sources' |
className? | string | '' |