Composants

Mise en page

Grilles, panneaux, piles et conteneurs qui organisent le contenu.

Créer à partir d’un guide Connectez votre agent Explorer les modèles de pages

21 sur 21

Masonry flow

1532Masonry flowMise en pageUn mur de maçonnerie qui regroupe des carreaux de différentes hauteurs dans des colonnes, soulève chacun d'entre eux lorsqu'il défile et réinstalle la grille entière lorsque le nombre de colonnes change.

Split panes

1542Split panesMise en pageDeux volets divisés par une poignée qui les redimensionne par glisser-déplacer ou par flèche, conserve une taille minimale des deux côtés et se referme sur double-clic.

Curved Scroll Wall

2330Curved Scroll WallMise en pageUn mur de photos à défilement horizontal rendu sur un plan légèrement incurvé et courbé qui continue de défiler à l'infini dans les deux sens.

Drag split panels

2342Drag split panelsMise en pagePanneaux divisés par de fines poignées déplaçables qui redimensionnent les volets adjacents en temps réel, disposés en rangée ou empilés.

Expanding panel gallery

2351Expanding panel galleryMise en pageUne rangée de panneaux de couverture où le survol, le clic ou la touche fléchée sur l'un d'entre eux l'étend sur toute la largeur tandis que le reste se compresse en éclats.

Fading edge scroll panel

2353Fading edge scroll panelMise en pageUn panneau de défilement qui masque la barre native, fait flotter un pouce mince uniquement pendant que vous l'utilisez et fait disparaître le contenu sur le bord qui a encore plus à atteindre.

Focus scroll list

2357Focus scroll listMise en pageUne file d'attente déroulante dont les lignes apparaissent en taille réelle et en opacité lorsqu'elles atteignent le centre de la vue, avec survol et sélection au clavier.

Inner Dome Viewer

2370Inner Dome ViewerMise en pageUne galerie de vignettes de photos disposées à l'intérieur d'une sphère en rotation, déplacées comme si vous regardiez l'intérieur d'un dôme, avec tap-to-enlarge.

Locked ratio frame

2381Locked ratio frameMise en pageUn conteneur qui maintient son contenu verrouillé selon un rapport width-to-height choisi, quelle que soit sa largeur.

Masked reveal disclosure

2384Masked reveal disclosureMise en pageUne divulgation dont le panneau s'agrandit jusqu'à sa propre hauteur naturelle tandis qu'un bord légèrement dégradé efface le contenu depuis le haut, puis recule à la fermeture.

Overlay scroll panel

2396Overlay scroll panelMise en pageUn panneau délimité qui masque la barre de défilement de la plate-forme et dessine sa propre piste de superposition fine, de la taille d'un pouce par rapport au contenu.

Peek Inside Folder

2400Peek Inside FolderMise en pageUne icône de dossier stylisée qui s'ouvre en un clic pour déployer trois papiers rangés à l'intérieur, chacun s'éloignant du pointeur.

Pinned Card Stack Scroll

2401Pinned Card Stack ScrollMise en pageUne séquence verticale de cartes qui s'épinglent en place et rétrécissent légèrement à mesure que la carte suivante défile pour s'empiler dessus.

Progressive edge blur

2407Progressive edge blurMise en pageUne bande épinglée sur un bord d'un panneau défilant qui brouille et fond progressivement son contenu vers l'arrière-plan au lieu de le couper sur une ligne dure.

Reactive bento panels

2409Reactive bento panelsMise en pageUne grille bento de panneaux qui brillent au pointeur, s'inclinent en 3D, dérivent vers le curseur et éclatent de particules et d'ondulations au clic.

Receding stack carousel

2411Receding stack carouselMise en pageUn carrousel où les cartes s'éloignent derrière la carte ciblée, s'assombrissant et se floutant à mesure qu'elles s'éloignent.

Ripple Origin Grid

2415Ripple Origin GridMise en pageUne grille de tuiles colorées qui s'illuminent selon une ondulation rayonnant vers l'extérieur à partir d'une tuile choisie, chronométrée en fonction de la distance par rapport à cette tuile.

Settling photo masonry

2424Settling photo masonryMise en pageUne grille de maçonnerie de tuiles photo à hauteur variable qui volent depuis l'écran et s'installent dans leurs colonnes remplies, devenant floues à mesure qu'elles atterrissent.

2438Spotlight profile gridMise en pageUne grille de cartes de profil qui reste désaturée et sombre, à l'exception d'un projecteur doux qui suit le pointeur et révèle toute la couleur en dessous.

Spring drag carousel

2439Spring drag carouselMise en pageUn carrousel de cartes déplaçables qui s'aligne sur la carte la plus proche avec la physique du ressort et peut être lu automatiquement en boucle.

Swipe away card deck

2446Swipe away card deckMise en pageUn jeu de cartes photo en éventail sur lequel vous pouvez faire glisser ou appuyer pour envoyer celle du haut vers l'arrière, une à la fois.

Comparer ces composants

Choisissez selon le comportement et la mise en page, puis vérifiez les frameworks disponibles et les conditions d’accès sur la page de chaque composant.

Curved Scroll Wall
Un mur de photos à défilement horizontal rendu sur un plan légèrement incurvé et courbé qui continue de défiler à l'infini dans les deux sens.
Drag split panels
Panneaux divisés par de fines poignées déplaçables qui redimensionnent les volets adjacents en temps réel, disposés en rangée ou empilés.
Expanding panel gallery
Une rangée de panneaux de couverture où le survol, le clic ou la touche fléchée sur l'un d'entre eux l'étend sur toute la largeur tandis que le reste se compresse en éclats.

Conseils de design

Ouvrir l’index complet

Étiquettes

3d (16)accessible (4)accordion (9)action (3)actions (6)activity (5)add (7)admin (12)agent (12)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)billing (10)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 (7)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 (4)columns (3)combobox (4)command palette (3)commercial (10)compact (8)comparison (8)composer (4)concentric (4)confetti (4)confirm (24)confirmation (7)console (5)contact (3)context menu (4)controlled-state (18)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)customer (13)cycle (6)dark (15)dark mode (4)dashboard (9)dashed (5)data (13)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 (13)finance (10)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 (50)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)log (3)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)product (6)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 (4)registration (3)relay (3)relief (6)remove (3)reorder (3)resize (4)restore (3)retro (4)retry (3)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 (21)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)workflow (18)workspace (36)wrapper (3)zoom (4)