ani-card

Animalia DS Card — interactive and read-only container with hover, focus, and selected states.

Part of the Animalia Design System.

Install

npm install ani-card styled-components

Peer dependencies: react >= 17, react-dom >= 17, styled-components >= 5

Usage

import { AniCard } from 'ani-card'

// Basic interactive card
function Example() {
  const [selected, setSelected] = React.useState(false)

  return (
    <AniCard
      mode="interactive"
      selected={selected}
      onClick={() => setSelected(s => !s)}
      tabIndex={0}
      onKeyDown={e => e.key === 'Enter' && setSelected(s => !s)}
      style={{ width: 320 }}
    >
      <p>Card content goes here.</p>
    </AniCard>
  )
}

// Read-only card (static, dimmed)
function ReadOnlyExample() {
  return (
    <AniCard mode="read-only" style={{ width: 320 }}>
      <p>This card is not interactive.</p>
    </AniCard>
  )
}

Props

| Prop | Type | Default | Description | |---|---|---|---| | mode | 'interactive' \| 'read-only' | 'interactive' | Interactive cards support hover, focus, and selected states. Read-only cards are dimmed and non-interactive. | | selected | boolean | false | Selected state. Only applies when mode='interactive'. | | children | React.ReactNode | — | Card body content. | | theme | Partial<AniCardTheme> | — | Override any design token. | | ...rest | React.HTMLAttributes<HTMLDivElement> | — | All standard div attributes (onClick, tabIndex, aria-*, etc.). |

Theme tokens

All visual values are overridable via the theme prop. Pass a partial object — only the tokens you provide are overridden.

| Token | Default | Figma variable | |---|---|---| | background | rgba(251,252,254,0.7) | --ani-card/interactive/--background | | backgroundSelected | #e5fcff | --ani-card/interactive/--background-selected | | borderColor | #dae2ed | --ani-card/interactive/--border-color | | borderColorHover | #000e33 | --ani-card/interactive/--border-color-hover | | borderColorSelected | #00445b | --ani-card/interactive/--border-color-selected | | outlineColorFocused | #000e19 | --ani-card/interactive/--outline-color-focused | | borderRadius | 16px | --ani-card/--border-radius | | borderWidth | 1px | --border-width/sm | | focusRingWidth | 2px | --focus-indicator/focus-size | | padding | 16px | --spacing/sm | | readOnlyOpacity | 0.8 | --opacity/80 | | backdropBlur | 8px | --blur/default |

Theme override example

import { AniCard, defaultAniCardTheme } from 'ani-card'

<AniCard
  theme={{
    borderRadius: '8px',
    padding: '24px',
    borderColorSelected: '#6200ee',
  }}
>
  Custom-themed card
</AniCard>

Accessibility

• In interactive mode, pass tabIndex={0} and onKeyDown to make the card keyboard-accessible.
• aria-selected, aria-pressed, or role="option" can be added via ...rest as appropriate for your use case.
• The focus ring uses :focus-visible, so it only appears for keyboard navigation.
• In read-only mode, pointer-events: none is applied automatically.