Elephant

A small, playful elephant mark — « the elephant with those ears can fly »: standing with its ear folded down, or flying with the ear spread like a wing. Sage body, sand ear, flat colours that read on both themes. A figure, not a product logo.

Web · ✓Mobile · n/aBureau · ✓DépréciéRetours

import { Elephant } from "@krizaka/ui/elephant";

Web uniquement — React, depuis @krizaka/ui/elephant. Déprécié : conservé pour les apps qui l'utilisent encore, retiré à sa prochaine version majeure.

Mobile · n/a. A web mark for a page's hero or a chat's closing line; the app takes the same drawing from the mark assets until an app screen needs it. → Mascots

Pourquoi il est là. No product or site imports it and no filed need names it (ADR-006 audit, 2026-10-25): there is no replacement.

DépréciéDepuis 3.55.0, retiré en 4.0.0. No product or site imports it and no filed need names it (ADR-006 audit, 2026-10-25): there is no replacement.

Quand l’utiliser

In the hero of a neighbourly page, small, beside the words (pose="standing").
At the closing of a conversation, as a warm last line (pose="flying").

Quand ne pas l’utiliser

A product's own mark in a navigation or a header.À la place : Mascots
A bird that answers a state (a wait, an error, an empty list).À la place : Mascot state

Installation

Installer

npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcss

Styles

@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";

Importer

import { Elephant } from "@krizaka/ui/elephant";

Exemples

Standing and flying

The two poses: the ear folded down, then spread like a wing.

The closing of a chat

The small flying elephant beside one warm line.

See you next Sunday, neighbour. The door stays open.

Props

The elephant: a small, playful mark from the neighbour joke — « the elephant with those ears can fly ». Not a product logo: a quiet figure for the hero of a page or the closing of a chat. Sage body, sand ear, flat colours that read on both themes; decorative by default.

Prop	Type	Défaut	Description
`animated`	`boolean`	`true`	The wing flaps gently (a flying elephant only). Off with `false`; always off under prefers-reduced-motion.
`pose`	`"standing" \| "flying"`	`standing`	`standing` with the ear folded down, or `flying` with the ear spread like a wing.
`size`	`number`	`64`	Width and height in pixels.
`title`	`string`	—	An accessible name (the mark becomes an image); without it the mark is decorative.

Accessibilité

Decorative by default (aria-hidden): the text next to it carries the meaning. With title it becomes an image with that name.
The wing flap stops under prefers-reduced-motion and with animated={false}.
Sage and sand reach at least 3:1 on the page surfaces of both themes (tested).

Bonnes pratiques

Use it small and rarely: once per screen at most, never as a pattern or a background.
Keep the words beside it: the elephant never carries the message alone.
Standing is the default; flying is for a moment that lifts (a goodbye, a good news).
Leave the colours as they are: the sage and the sand are two stops of the brand palette, each readable on both themes.

Générée depuis le code de @krizaka/ui 3.63.1 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur GitHub