Components / Display / Site cardOpen in Figma

Site card

Ready

Shows one site with a thumbnail, either as a choice in a list or as a site already picked into a form.

Platforms Phone · TabletGroup DisplayUpdated 26 Oct 2026

When to use

  • People choose one or more sites from a list.
  • A form shows the sites already picked, each with a way to remove it.

When not to use

If people need toUse
Show an animalAnimal card
Show a section or an enclosureNot designed yet; ask for the Figma frame
Choose from short text options with no pictureBottom sheet option rows

Anatomy

Site name
Area
check_box
Site name
Area
cancel
  1. Choosing card · in a picker list
  2. Thumbnail · required; grey when there is no photo
  3. Site name · required
  4. Area · optional
  5. Check · required when choosing
  6. Picked card · in a form, after picking
  7. Remove · required on a picked card

Variants

VariantPurposeFigma
ChoosingA row in a picker list, 48 thumbnail and a check on the rightDesigned
PickedA site already chosen, shown under its field with a remove iconDesigned

States

StateWhenWhat changesFigma
Not selectedThe site is not chosenEmpty check boxDesigned
SelectedThe site is chosen1px Antz green border and a ticked check box in Antz greenDesigned

Behaviour

  • Tapping anywhere on a choosing card selects or clears it.
  • Picks are saved only when the picker is saved; closing it drops unsaved picks.
  • On a picked card only the remove icon acts; it removes the site from the form at once.
  • Choosing cards sit 8 apart.

Phone and tablet

PhoneTablet
WidthFull width less 16 each sideWidth of the sheet or form column

Content

PartRule
Site nameThe name people use on site, sentence case
AreaThe wider area the site belongs to, one line

Do and don't

Site name
Area
check_box
DoShow selection with the border and a different icon.
Site name
Area
check_box_outline_blank
Don'tShow selection by colour alone.
Site name
Area
cancel
DoUse the picked card under the field after choosing.
Site name
Area
check_box
Don'tReuse the choosing card inside the form.
Picker fieldBottom sheetAnimal cardCheckbox
← Animal cardStatus label →