Component kit/Cards and galleryPhone

Cards and gallery

Anything you choose by eye, products and cloths, is a picture card. The garment and the cloth do the visual work; the card stays quiet.

The Global Store gallery, the product and cloth cards, and picker mode for the anchor and sibling cloths.

Product card

3:4 photo, title, price in GBP with EUR and USD, cloth code and collection, status, one action and the ⋯ menu.

Available
Navy birdseye two-piece suit
HS 81045 · Crystal Springs
£1,150€1,320 · $1,450
v4 · 2 Oct
Draft
Mid-grey flannel trousers
HS 64033 · Sherry Flannel
£340€390 · $430
v1 · Today 14:20
Retired
Brown glen check waistcoat
HS 92201 · Moorland Tweed
£260€299 · $330
v5 · 11 Aug
Available
Midnight mohair dinner suit
VBC 150.2201 · Ceremony
£1,480€1,700 · $1,860
v2 · 18 Sep
Uses.cg-card.cg-media.chip.available|draft|retired.btn-primary.sm.btn-secondary.sm.icon-btn.sm.menuCardAspectRatioDropdownMenu--r-card--e-pop

Product card states

Disabled is a brand choosing from the Global Store: already added.

default
Available
Navy chalk-stripe three-piece
VBC 403.0118 · Revenge
£1,390€1,595 · $1,750
v3 · 24 Sep
hover
Available
Navy chalk-stripe three-piece
VBC 403.0118 · Revenge
£1,390€1,595 · $1,750
v3 · 24 Sep
focus
Available
Navy chalk-stripe three-piece
VBC 403.0118 · Revenge
£1,390€1,595 · $1,750
v3 · 24 Sep
disabled
Added
Charcoal herringbone jacket
VBC 218.1003 · Perennial
£780€895 · $985
v2 · 29 Sep
In My Products since 12 Sep
error
Photo failed to loadThe CMS did not return hero.jpg
Stone linen jacket
HS 30612 · Irish Linen
£690€795 · $870
v1 · Yesterday
loading
Uses.cg-card.is-hover.is-focus.is-disabled.cg-nophoto.err.cg-skSkeleton--focus-ring

Cloth card

Square swatch, cloth code and id, collection and mill, colour, composition and weight.

HS 81045id 4127
Crystal Springs · Holland & Sherry
Colour
Navy · Birdseye
Cloth
100% wool
Weight
280 g/m²
VBC 218.1003id 2291
Perennial · Vitale Barberis Canonico
Colour
Charcoal · Herringbone
Cloth
100% wool
Weight
300 g/m²
HS 64033id 3866
Sherry Flannel · Holland & Sherry
Colour
Mid grey · Flannel
Cloth
100% wool
Weight
340 g/m²
Out of stock
HS 92201id 5012
Moorland Tweed · Holland & Sherry
Colour
Brown · Glen check
Cloth
100% wool
Weight
420 g/m²
Uses.cg-card.cg-swatch.cg-codeline.cg-dl.chip.warningCardAspectRatio--font-code

Cloth card states

Out of stock cloths stay visible and cannot be picked.

default
HS 81045id 4127
Crystal Springs · Holland & Sherry
Colour
Navy · Birdseye
Cloth
100% wool
Weight
280 g/m²
hover
HS 81045id 4127
Crystal Springs · Holland & Sherry
Colour
Navy · Birdseye
Cloth
100% wool
Weight
280 g/m²
focus
HS 81045id 4127
Crystal Springs · Holland & Sherry
Colour
Navy · Birdseye
Cloth
100% wool
Weight
280 g/m²
disabled
Out of stock
HS 92201id 5012
Moorland Tweed · Holland & Sherry
Colour
Brown · Glen check
Cloth
100% wool
Weight
420 g/m²
error
No swatch photoLaravel has no image for this cloth
HS 81053id 4135
Crystal Springs · Holland & Sherry
Colour
Ivory · Birdseye
Cloth
100% wool
Weight
280 g/m²
loading
Uses.cg-card.is-disabled.cg-nophoto.cg-sk.sqSkeleton

Picker mode

Anchor is a single choice; siblings are many. The anchor cannot also be a sibling. Click to choose.

1–8 of 38
HS 81045 anchor3 siblings
Uses.cg-picker.cg-pick[aria-selected].cg-tick.radio|box.cg-tag.anchor|sibling.cg-selbarToggleGroup type=single|multiple--primary

Picker card states

Each card is a toggle. Selection is a navy ring and a filled tick, never colour alone.

default
hover
focus
disabled
anchor
sibling
Uses.cg-pick.is-anchoraria-selectedaria-disabled--ring--primary

Gallery loading

Skeletons in the card's own shape: a slow pulse, no shimmer.

Loading 214 products from the master-draft store
Uses.cg-sk.media.cg-sk.l.spinSkeletonaria-busy

Empty, no matches and failed

Each one names the cause and offers the next step.

No products in the Global Store

Start with a cloth and a garment. Brands see a product once it is Available.

No Retired products match “mohair”

25 products are Retired. None use a mohair cloth or have mohair in the name.

Global Store did not load

The master-draft store did not answer within 10 seconds. Your products are safe.

Uses.cg-empty.cg-empty.err.btn-primary.btn-secondary--destructive

Image missing

A draft with no photo yet, and a photo the CMS failed to return, next to a normal card.

Draft
No photo yetAdd a hero shot before you publish
Mid-grey flannel trousers
HS 64033 · Sherry Flannel
£340€390 · $430
v1 · Today 14:20
Draft
Photo failed to loadThe CMS did not return hero.jpg
Stone linen jacket
HS 30612 · Irish Linen
£690€795 · $870
v1 · Yesterday
Available
Navy birdseye two-piece suit
HS 81045 · Crystal Springs
£1,150€1,320 · $1,450
v4 · 2 Oct
Uses.cg-nophoto.cg-nophoto.err.cg-outline--muted

Hover lift

Hover a card: it rises 2px and the shadow deepens over 120 ms. Reduced motion keeps the shadow and drops the move.

Available
Charcoal herringbone jacket
VBC 218.1003 · Perennial
£780€895 · $985
v2 · 29 Sep
Available
Navy chalk-stripe three-piece
VBC 403.0118 · Revenge
£1,390€1,595 · $1,750
v3 · 24 Sep
Available
Midnight mohair dinner suit
VBC 150.2201 · Ceremony
£1,480€1,700 · $1,860
v2 · 18 Sep
Uses.cg-card:hover--motion-hover--lift-shift--e-1--e-card-hover