Components / Display / Animal cardOpen in Figma

Animal card

Ready

Shows one animal with its photo and the lines people use to tell it apart.

Platforms Phone · TabletGroup DisplayUpdated 26 Oct 2026

When to use

  • Any time an animal appears on a screen: in a list, a form, a picker or a record.
  • People need to be sure which animal it is before they act.

When not to use

If people need toUse
Show a person or a recordList card
Show a siteSite card
Show a section or an enclosureNot designed yet; ask for the Figma frame

Anatomy

MC 1
IdentifierAnimal IDCommon nameScientific nameEnclosure
  1. Photo · required; a grey block when there is no photo
  2. Sex tag · required: M, F or U
  3. CITES tag · when the species is CITES listed
  4. Expand icon · required; opens the photo full size
  5. Identifier · optional: ear tag, name or chip
  6. Animal ID · required
  7. Common name · required
  8. Scientific name · required, italic
  9. Enclosure · optional

Variants

VariantPurposeFigma
MaleSex tag in TurquoiseDesigned
FemaleSex tag in CoralDesigned
UnknownSex tag in RedDesigned
With CITES tagAppendix shown as "C" and its numberDesigned
No identifierThe animal has no ear tag, name or chipDesigned

States

StateWhenWhat changesFigma
DefaultThe animal is shownAs drawnDesigned

Behaviour

  • Tapping the expand icon opens the photo full size; tapping elsewhere opens the animal or picks it, depending on the screen.
  • Every line is one line; long text ends in an ellipsis and the card keeps its height.
  • The card stretches to the width it is given: a list column on tablet, the full form width in a form.
  • The same card is used for every animal everywhere, so people learn one shape.

Phone and tablet

PhoneTablet
WidthFull width less 16 each side303 in a list panel, 786 in a form
Photo104 × 104104 × 104

Content

PartRule
Identifier"Ear tag", "Name" or "Chip" then the value; whichever the zoo uses first
Animal IDThe ID as the system gives it
Common nameAs in the species list, sentence case
Scientific nameGenus and species, italic, never shortened
EnclosureThe current enclosure name

Do and don't

M
Animal IDCommon nameScientific name
DoUse the same animal card for every animal.
CN
Common name
Animal ID
Don'tShow an animal as a person-style row with initials.
F
Animal IDCommon name that is long…Scientific name
DoEnd long lines in an ellipsis.
F
Animal IDCommon name that is long and wraps onto a second lineScientific name
Don'tLet a line wrap and push the card taller.
Site cardPicker fieldList cardRecord layout
← Request cardSite card →