Komponenten

Karten

Begrenzte Flächen, die Inhalte darstellen und auf Interaktion reagieren.

36 von 37

Das vollständige Suchverzeichnis wird geladen.

Spotlight card

1544Spotlight cardKartenKarten, deren 1-Pixel-Rand und -Oberfläche um den Zeiger herum aufleuchten, wobei sich die Hervorhebung über eine Reihe von Statistikkacheln erstreckt.

Tilt card

1545Tilt cardKartenEine Inhaltskarte, die sich mit einem beweglichen Blick in 3D in Richtung des Zeigers dreht, beim Einrasten angehoben wird und beim Verlassen des Zeigers wieder auf die gleiche Ebene zurückspringt.

Anchored site preview

1762Anchored site previewKartenEine Hover-Vorschau, deren Seite, Ausrichtung und Versatz eingestellt werden können, mit einem zeigenden Pfeil, der den Anker verfolgt und sich mit ihm dreht, wenn kein Platz mehr ist.

Cursor drift link preview

1768Cursor drift link previewKartenEin Link-Vorschaufenster, das sich dorthin neigt, wo sich der Zeiger auf dem Link befindet, und ihn auf einer weichen Feder nachzieht.

Deferred post card

1769Deferred post cardKartenEine Postkarte, die zuerst eine gemessene Platzhalterhülle anzeigt und dann den echten Beitrag mit einem wiederholbaren Fehlerstatus einfügt.

Fanning Spec Stack

1774Fanning Spec StackKartenEin Stapel von Produktkarten, der sich bei Bedarf zu einem Fächer ausbreitet, wobei jede Karte einen Schlag nach der vorherigen an ihren Platz springt.

Flip reveal card

1775Flip reveal cardKartenEine große Kurskarte, die sich beim Schweben umdreht, um ihre Detailliste anzuzeigen, wobei der Heiligenschein auf der Vorderseite pulsiert, während sie ruht.

Hairline Note Card

1778Hairline Note CardKartenEine ruhige, papierfarbene Notizkarte mit Haarlinienrand, einer kleinen optionalen Überschrift und einem einzelnen Textschlitz.

Hover preview popover

1779Hover preview popoverKartenEine kleine Detailkarte, die sich nach kurzem Bewegen des Mauszeigers neben einem Link öffnet und lange genug geöffnet bleibt, um den Zeiger darauf zu bewegen.

Link thumbnail peek

1784Link thumbnail peekKartenWenn Sie mit der Maus über einen Link im laufenden Text fahren, wird eine kleine gerahmte Miniaturansicht angezeigt, die zeigt, wohin er führt, mit dem Seitentitel und dem Host darunter.

Link thumbnail peek

1785Link thumbnail peekKartenEin Inline-Link, der über dem Wort ein kleines simuliertes Miniaturbild seines Ziels entfaltet, während der Zeiger darauf ruht.

1799Profile flip cardKartenEine Porträt-Profilkarte, die sich beim Bewegen oder Tippen in 3D umdreht, um eine Biografie, die Anzahl der Follower und eine Folgeaktion auf der Rückseite anzuzeigen.

1800Profile hover cardKartenWenn Sie mit der Maus über einen kleinen Avatar-Chip fahren oder ihn darauf fokussieren, wird ein Profilfenster mit Namen, Benutzername, Biografie und Anzahl der Follower geöffnet.

$Refracted glass player$

1801Refracted glass playerKartenEin Media-Player-Panel, das sich wie eine dicke Glasplatte verhält und alles, was sich dahinter befindet, in der Nähe der abgerundeten Kanten verbiegt, während die Tasten stärker gebrochen werden als das Gehäuse.

Repelling dot field card

1802Repelling dot field cardKartenEin Werbefeld, das mit einem Feld aus Punkten gefüllt ist, die sich vom Zeiger wegbewegen und beim Vorbeigehen heller werden.

Slotted panel card

1805Slotted panel cardKartenEine zusammensetzbare Oberfläche mit Header-, Action-, Body- und Footer-Slots, die ihren Abstand beibehalten, egal wie viele verwendet werden.

Threaded post card

1816Threaded post cardKartenEin Social-Media-Beitrag, der als gerahmtes Panel mit einem verifizierten Autor, einem mehrzeiligen Textkörper und einer verschachtelten Antwort unter einer Regel dargestellt wird.

Tilt Spotlight Grid

1817Tilt Spotlight GridKartenEin Fähigkeitsraster, bei dem die schwebende Karte zum Zeiger geneigt wird und aufleuchtet, während alle anderen Karten dunkler werden und zurückschrumpfen.

Traveling edge glow card

1821Traveling edge glow cardKartenEine dunkle Karte, umgeben von einem zweifarbigen Farbverlaufsrand, der endlos gleitet, verdoppelt durch ein verschwommenes Echo, das die Oberfläche dahinter erhellt.

Pointer spotlight card

1830Pointer spotlight cardKartenEine Karte, deren Rand nur entlang des Bogens leuchtet, der dem Cursor am nächsten liegt, mit einer weichen Innenfarbe, die dem Zeiger folgt und sich zurückzieht, wenn er ihn verlässt.

Social Post Card

1833Social Post CardKartenEin vollständiger Social-Media-Beitrag mit Autorenkopf, verlinktem Hauptteil, einem Medienraster, das sich an ein bis vier Elemente anpasst, und einer Metrikzeile.

Swipe photo stack

1838Swipe photo stackKartenEin Stapel Fotokarten, bei dem die oberste Karte nach links oder rechts geschleudert werden kann, sodass sie nach hinten rutscht, während der Stapel nach vorne geschoben wird.

Bevel Edge Panel Card

1841Bevel Edge Panel CardKartenEine Karte mit einer inneren Abschrägung von einem Pixel, die den Eindruck erweckt, sie sei in die Seite gedrückt, und einem Rahmenmodus, der gestapelte Unterfelder gruppiert.

Bouncing Photo Fan

1844Bouncing Photo FanKartenEine Reihe überlappender quadratischer Fotokacheln, die mit einer elastischen Überschwingung auftauchen und sich dann gegenseitig zur Seite schieben, wenn man darüber schwebt.

Brushed Metal Pass

1845Brushed Metal PassKartenEine Zugangskarte, deren Oberfläche aus gebürstetem Metall ein Spiegelband trägt, das mit dem Zeiger schwingt, über einer gewellten, rauschenden Oberfläche und einer feinen Körnung.

Card Shuffle Stack

1846Card Shuffle StackKartenEin aufgefächerter Stapel von Paneelen, der mit einem Timer abläuft: Das vordere Paneel fällt weg, der Rest tritt nach vorne und das heruntergefallene schwenkt hinten ein.

Edge tracking glow card

1854Edge tracking glow cardKartenEine Karte, deren Umriss nur dort aufleuchtet, wo sich der Zeiger der Karte nähert. Sie wird heller, wenn Sie sich dem Rand nähern, und wird in der Nähe der Mitte dunkel.

Holographic ID card

1865Holographic ID cardKartenEine Personenkarte, die sich in Richtung des Zeigers neigt, während ein holografischer Glanz über ihre Vorderseite gleitet, mit einem Fußzeilenstreifen, der den Avatar, den Griff, den Status und eine Kontakttaste trägt.

Inline term preview

1866Inline term previewKartenEin unterstrichener Begriff im Textkörper, der beim Schweben oder Fokussieren ein kleines Definitionsfenster öffnet, das von der Ecke, die dem Begriff am nächsten liegt, verkleinert wird.

Pixel Bloom Card

1875Pixel Bloom CardKartenEine Karte, deren Oberfläche sich mit winzigen Quadraten füllt, die beim Schweben aus der Mitte heraus aufblühen, beim Halten schimmern und beim Verlassen verschwinden.

Pointer Spotlight Panel

1876Pointer Spotlight PanelKartenEin Inhaltsbereich mit einem sanften Licht, das dem Zeiger über die Oberfläche folgt und beim Fokussieren der Tastatur in der Mitte fixiert wird.

Pointer tilt photo card

1877Pointer tilt photo cardKartenEine beschriftete Fotokarte, die sich auf einer Feder in Richtung des Zeigers neigt und bei der Drehung ein sanfter Glanz über die Vorderseite gleitet.

Sheen sweep card

1886Sheen sweep cardKartenEine Karte mit einem Lichtband an einer Ecke, das sich beim Schweben über die Vorderseite bewegt und zurückgleitet, sobald der Zeiger weggeht.

Tilt Parallax Tile

1897Tilt Parallax TileKartenEine Kachel, die sich auf Federn in 3D in Richtung des Zeigers neigt, eine Überlagerungsebene über ihre Oberfläche hebt und eine kleine Beschriftung nachzieht, die sich mit der Cursorgeschwindigkeit neigt.

2834Link Thumbnail PeekKartenEin Inline-Link, der eine kleine Miniaturansicht seines Ziels über dem Text einblendet, während der Zeiger darauf ruht.

2836Nested panel frameKartenEine gedämpfte Außenhülle mit einem kompakten Kopf- und Fußzeilenstreifen, der ein oder mehrere klarere Einsatzfelder enthält und verwandte Inhalte mit klarer Tiefe gruppiert.

Gesamtes Verzeichnis öffnen

Schlagwörter

3d (16)accessible (4)accordion (9)action (3)actions (6)activity (5)add (7)alert (8)align (3)ambient (39)analytics (13)anchored (3)animated (82)animation (4)annotation (3)app shell (3)arc (4)arcs (3)area (12)area chart (4)arrow (32)audio (3)aurora (4)auth (11)authentication (12)auto height (4)autocomplete (4)avatar (10)avatars (3)axis (5)backdrop (18)backer (3)background (54)badge (21)band (6)banner (9)bar (16)bar chart (3)bars (6)beam (6)beams (5)bevel (12)bezel (3)bin (3)blend (4)blob (4)blobs (3)bloom (10)blur (15)booking (9)bookmark (3)border (16)bounce (6)brackets (3)breadcrumb (4)breathing (3)broadcast (3)burst (7)busy (5)button (397)button group (5)buttons (4)calendar (32)call to action (11)callout (3)canvas (89)capsule (12)caption (8)card (35)cards (7)caret (5)carousel (11)cascade (3)category (3)cells (4)chain (3)characters (4)chart (59)chat (4)check (3)checkbox (13)checklist (6)checkmark (5)chevron (10)chip (22)chips (4)circle (9)circular (5)click (7)clip (9)clipboard (3)close (4)cloud (3)cluster (3)code (6)collapse (11)collapsible (6)collision (3)column (3)columns (3)combobox (4)command palette (3)compact (8)comparison (8)composer (4)concentric (4)confetti (4)confirm (24)confirmation (7)console (5)contact (3)context menu (4)copy (4)corner (6)corners (7)count (7)count-up (3)counter (18)crossfade (5)crosshair (6)cta (28)cue (4)cursor (26)curtain (7)curve (4)cycle (6)dark (15)dark mode (4)dashboard (9)dashed (5)date picker (16)date range (13)deck (3)delay (5)delete (8)depth (32)destructive (9)destructive-action (4)device mockup (3)diagonal (13)diagram (3)dial (5)dialog (17)digits (5)direction (5)disc (5)disclosure (8)dismiss (6)displacement (3)distortion (5)divider (4)dock (4)donut (7)dots (15)download (10)drag (21)draw (3)drawer (10)drift (17)dropdown (18)dropdown menu (3)duration (3)easing (4)echo (3)edge (7)edge light (3)editor (3)elastic (8)elevation (6)ellipsis (3)email (3)emboss (4)emphasis (3)empty state (3)entrance (14)error state (3)events (3)exit (3)expand (23)explorer (3)fade (9)falling (3)falloff (4)fan (6)faq (4)feed (3)feedback (12)field (6)fill (46)film (3)filter (12)flat (6)flat shadow (3)flight (3)flip (10)floating panel (4)flood (14)flow (5)fluid (3)flyout (3)focus (19)focus ring (5)focus trap (6)folder (5)follow (11)form (47)form-control (12)formatting (3)frame (19)gallery (15)game (3)gap (4)gauge (5)gesture (6)ghost (7)glare (3)glitch (9)glow (39)glyph (7)gradient (38)grain (10)gravity (3)grid (35)group (8)guide (3)hairline (8)halftone (4)halo (15)hamburger (4)hard shadow (6)heading (8)headline (19)hero (11)hexagon (3)highlight (22)hinge (4)hint (12)hold (6)horizon (3)horizontal (4)hover (251)hover card (10)hover reveal (3)icon (121)icon-button (23)icons (4)identity (3)indeterminate (4)indicator (9)inertia (4)initials (3)ink (4)inline (5)input (20)input group (3)inset (11)interactive (8)invert (26)italic (3)key (11)keyboard (20)keyboard navigation (6)keycap (10)knob (4)kpi (5)label (14)label reveal (3)label swap (9)labels (7)lag (4)lattice (4)launch (3)layered (9)layers (3)layout (18)ledge (6)legend (9)lens (4)letters (10)lift (19)light (22)lightbox (4)like (4)line (11)line chart (4)lines (8)link (11)link preview (7)liquid (7)list (13)live (3)loader (9)loading (27)login (10)loop (42)magnet (5)magnetic (3)magnify (3)map (4)marker (3)markers (6)marquee (8)mask (9)matrix (4)media (4)menu (23)merge (3)mesh (5)message (4)metal (10)meter (5)metric (10)metrics (5)minimal (10)modal (19)monospace (12)monthly (12)morph (14)motion (3)motion tuning (3)moulded (6)multi-select (4)nav (3)navbar (3)navigation (21)nested (7)neutral (4)night (4)noise (16)notification (3)notifications (4)nudge (4)number (11)odometer (5)offset (7)on-off (4)onboarding (3)one time code (5)options (5)orb (4)orbit (13)otp (3)outline (63)outlined (4)overflow (7)overlay (24)overshoot (3)page (18)palette (3)panel (31)panels (6)paper plane (4)paragraph (3)parallax (15)particles (18)paste (3)path (4)pattern (9)percentage (4)perimeter (3)perspective (20)photo (5)physics (5)picker (3)pie (7)pill (83)pill switch (4)pin (3)pinned (3)pixel (3)placeholder (4)plane (5)plate (9)play (4)playful (7)pointer (65)polar (8)pop (4)popover (17)post card (3)power (3)press (77)pressed (6)pricing (3)primitive (4)print (4)profile (8)progress (27)proportion (4)providers (4)pulse (17)queue (3)quiet (5)radar (9)radial (8)radio (4)radio group (8)raised (3)ramp (5)ranking (3)rays (4)readout (4)record (3)registration (3)relay (3)relief (6)remove (3)reorder (3)resize (4)restore (3)retro (4)reveal (80)ribbon (6)rim (8)ring (25)rings (10)ripple (18)rise (3)roll (6)rotate (21)rotating text (4)rotation (6)round (5)rounded (3)row (11)rows (4)save (5)scale (20)scan (5)scatter (4)scheduler (3)scramble (5)screen (3)screenshot frame (3)scroll (38)scrub (5)search (8)section (4)sections (4)segmented (7)segmented control (12)select (5)selection (5)send (23)sequence (8)series (7)settings (11)shadow (28)shape (3)share (25)shared element (4)sheen (14)sheet (4)shell (3)shimmer (8)shine (5)shortcut (4)shuffle (3)shutter (5)sidebar (7)sign in (11)signal (8)signup (9)silhouette (3)sizes (4)skew (9)slab (6)slide (20)slider (10)sliding highlight (7)sliding indicator (3)snap (4)social (6)soft (6)space (5)spark (3)sparkline (3)spin (15)spinner (9)split (9)split-flap (3)split text (3)spotlight (7)spring (63)square (5)squash (4)stack (17)stacked (7)stagger (40)staircase (3)star (3)stars (6)stat (5)state (11)static (3)status (21)stepper (3)steps (3)sticker (4)sticky (4)streaks (3)strikethrough (3)stripes (5)stroke (6)submenu (9)submit (7)subtle (3)success (3)surface (5)svg (102)swap (12)sweep (40)swell (4)swipe (5)swirl (3)switch (16)tabs (22)tactile (26)tap (4)target (3)task (3)team (5)terminal (3)text (40)text button (3)text-effect (3)text field (4)text transition (3)textarea (4)texture (11)theme (3)theme toggle (4)thumbnail (4)ticker (5)tile (16)tiles (12)tilt (26)time (3)time range (3)time series (3)timeline (3)timer (3)timing (5)tint (5)toggle (65)toggle group (10)toolbar (25)tooltip (37)total (3)touch (3)trace (4)tracking (6)trail (20)transition (6)translucent (9)travel (6)tray (3)tree (3)trend (10)trigger (4)tunnel (4)twinkle (4)typewriter (9)typing (8)typography (18)underline (10)upload (5)uppercase (14)validation (5)value (3)values (4)variants (4)velocity (3)verification (8)video (4)viewport (6)voice (3)warp (6)wash (5)wave (13)waveform (3)waves (7)window (3)wipe (23)wireframe (3)wireless (3)wobble (6)word swap (3)words (3)wrapper (3)zoom (4)