Komponenten

Layout

Raster, Bereiche und Container zur Anordnung von Inhalten.

21 von 21

Masonry flow

1532Masonry flowLayoutEine Mauerwerkswand, die Kacheln unterschiedlicher Höhe in Säulen packt, jede einzelne anhebt, während sie ins Blickfeld gescrollt wird, und das gesamte Raster neu positioniert, wenn sich die Anzahl der Säulen ändert.

Split panes

1542Split panesLayoutZwei Bereiche, die durch einen Griff getrennt sind, der ihre Größe durch Ziehen oder Pfeiltasten ändert, auf beiden Seiten eine Mindestgröße beibehält und bei Doppelklick wieder einrastet.

Curved Scroll Wall

2330Curved Scroll WallLayoutEine horizontal scrollende Wand aus Fotos, die auf einer sanft gekrümmten, gebogenen Ebene gerendert wird und endlos in beide Richtungen scrollt.

Drag split panels

2342Drag split panelsLayoutDurch dünne ziehbare Griffe unterteilte Bereiche, die die Größe der angrenzenden Bereiche in Echtzeit ändern, in einer Reihe angeordnet oder gestapelt.

Expanding panel gallery

2351Expanding panel galleryLayoutEine Reihe von Abdeckfeldern, bei denen durch Bewegen des Mauszeigers, Klicken oder Drücken der Pfeiltaste auf eines dieses auf die volle Breite erweitert wird, während der Rest in Splitter komprimiert wird.

Fading edge scroll panel

2353Fading edge scroll panelLayoutEin Scroll-Bedienfeld, das die native Leiste verbirgt, einen schlanken Daumen nur dann schweben lässt, wenn Sie ihn verwenden, und den Inhalt an der Kante ausblendet, die noch zu erreichen ist.

Focus scroll list

2357Focus scroll listLayoutEine scrollbare Warteschlange, deren Zeilen in voller Größe und opacity erscheinen, wenn sie die Mitte der Ansicht erreichen, mit Hover und Tastaturauswahl.

Inner Dome Viewer

2370Inner Dome ViewerLayoutEine Galerie mit Fotokacheln, die im Inneren einer rotierenden Kugel angeordnet sind und so gezogen werden, als würde man sich im Inneren einer Kuppel umsehen, mit Tipp zum Vergrößern.

Locked ratio frame

2381Locked ratio frameLayoutEin Container, dessen Inhalt unabhängig von der Ausdehnung in einem gewählten Verhältnis von Breite zu Höhe bleibt.

Masked reveal disclosure

2384Masked reveal disclosureLayoutEine Offenlegung, deren Panel auf seine natürliche Höhe anwächst, während ein weicher Verlaufsrand den Inhalt von oben ins Blickfeld wischt und beim Schließen dann rückwärts läuft.

Overlay scroll panel

2396Overlay scroll panelLayoutEin begrenztes Panel, das die Bildlaufleiste der Plattform verbirgt und eine eigene schlanke Overlay-Spur zeichnet, die in Daumengröße dem Inhalt entspricht.

Peek Inside Folder

2400Peek Inside FolderLayoutEin stilisiertes Ordnersymbol, das beim Klicken aufspringt und drei darin versteckte Papiere auffächert, die sich jeweils vom Zeiger wegbewegen.

Pinned Card Stack Scroll

2401Pinned Card Stack ScrollLayoutEine vertikale Abfolge von Karten, die festsitzen und leicht schrumpfen, während die nächste Karte nach oben gescrollt wird, um darauf gestapelt zu werden.

Progressive edge blur

2407Progressive edge blurLayoutEin Band, das an einer Kante eines Bildlauffelds befestigt ist und dessen Inhalt allmählich in den Hintergrund tritt, anstatt ihn an einer harten Linie abzuschneiden.

Reactive bento panels

2409Reactive bento panelsLayoutEin Bento-Gitter aus Panels, die auf den Mauszeiger leuchten, sich in 3D neigen, in Richtung des Cursors driften und beim Klicken vor Partikeln und Wellen platzen.

Receding stack carousel

2411Receding stack carouselLayoutEin Karussell, bei dem Karten in die Ferne hinter der fokussierten Karte verschwinden und je weiter hinten sie liegen, dunkler und unschärfer wird.

Ripple Origin Grid

2415Ripple Origin GridLayoutEin Gitter aus farbigen Kacheln, die in einer Welle aufleuchten, die von einer ausgewählten Kachel nach außen ausstrahlt, abhängig von der Entfernung zu dieser Kachel.

Settling photo masonry

2424Settling photo masonryLayoutEin Mauerwerksgitter aus Fotokacheln unterschiedlicher Höhe, die von außerhalb des Bildschirms einfliegen, sich in ihren gepackten Säulen niederlassen und bei der Landung unscharf werden.

2438Spotlight profile gridLayoutEin Raster aus Profilkarten, das entsättigt und gedimmt bleibt, mit Ausnahme eines sanften Scheinwerferlichts, das dem Zeiger folgt und die volle Farbe darunter zum Vorschein bringt.

Spring drag carousel

2439Spring drag carouselLayoutEin ziehbares Kartenkarussell, das mit Federphysik zur nächsten Karte springt und automatisch in einer Schleife abgespielt werden kann.

Swipe away card deck

2446Swipe away card deckLayoutEin aufgefächerter Stapel Fotokarten, den Sie ziehen oder antippen können, um die oberste Karte einzeln nach hinten zu verschieben.

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)