Composants

frame

Explorez les aperçus interactifs, trouvez les bons composants et intégrez les composants ouverts à votre projet avec leur code source.

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

19 sur 19

1559Crop iconIcônesDeux rails de culture qui glissent l'un sur l'autre, ouvrant le rectangle qu'ils découpent entre eux.

1564Frame iconIcônesUn viseur dont les quatre coins arrondis respirent à leur tour autour d'un point central fixe.

1571Maximize iconIcônesQuatre supports d'angle qui se séparent par paires, étirant le cadre pour remplir l'écran.

1685Drifting border sheenArrière-plansUn panneau dont le contour est éclairé par une douce lueur bicolore, plusieurs fois la taille du panneau, dérivant lentement autour du cadre.

1944Corner ticks frame buttonBoutonsUn rectangle sombre marqué uniquement par quatre graduations de coin qui s'étendent pour dessiner un cadre complet, après quoi un panneau éclairé s'ouvre depuis le centre et l'étiquette s'inverse.

2135Crackling border frameAnimationUne monture arrondie dont le contour est redessiné à chaque image comme un arc de lumière tremblant, avec une lueur constante en dessous et parfaitement immobile sur le dessus.

2498Foil frame buttonBoutonsUn bouton de mise à niveau construit comme une plaque sombre à l'intérieur d'un mince cadre métallique, où l'éclat diagonal du cadre glisse vers le coin opposé en survol tandis que la plaque se soulève, s'éclaircit et gagne une ombre teintée d'accent.

2539Plinth lift buttonBoutonsUne lourde plaque d'étiquette encadrée sur une base à carreaux qui se soulève en diagonale de son socle et prend de la couleur lorsqu'elle est survolée ou mise au point.

2548Shifting frame buttonBoutonsUn bouton suivi sombre encadré par quelques pixels d'une large rampe bicolore qui glisse lentement pour que le cadre visible continue de changer de ton.

2583Capsule in frame buttonBoutonsUn plateau extérieur bordé contenant une capsule intérieure flottante qui s'enfonce dans le cadre sur la longueur d'une presse.

2596Corner bracket frame buttonBoutonsUne étiquette majuscule nue qui est encadrée par deux supports en forme de L coulissant depuis des côtés opposés puis s'agrandissant pour fermer le cadre.

2615Sealing frame buttonBoutonsUn appel à l'action au contour carré dont la frontière est brisée par trois espaces au repos ; le vol stationnaire scelle le cadre fermé lorsque le remplissage s'inverse.

2639Two Tone Frame PillBoutonsUne capsule pâle se trouve à l’intérieur d’un cadre arrondi épais divisé en deux bandes de couleur plates, et un glyphe solide gonfle au survol.

2644Corner bracket seal buttonBoutonsDeux supports d'angle courts poussent le long des bords jusqu'à ce qu'ils se scellent pour former un cadre complet autour de l'étiquette en survol.

2646Frame draw buttonBoutonsUn bouton rempli qui se vide en survol tandis que quatre fines barres sortent des coins opposés pour dessiner un cadre complet, puis tout revient en congé.

2659Contrast Boost Frame ButtonBoutonsUne plaque intérieure pâle flotte à l’intérieur d’un épais cadre peint, et en planant, le tout devient plus lumineux et plus saturé sans rien bouger.

2674Bevel frame buttonBoutonsUn bouton à cadre carré dont les deux extrémités se biseautent en pointes au survol, transformant le rectangle en un badge à six côtés.

2764Drifting halo buttonBoutonsUn bouton sombre entouré d'un cadre en forme de halo légèrement plus grand dans lequel une bande lumineuse de l'accent dérive sans fin autour du périmètre, éclaircissant et soulevant la plaque en survol.

2836Nested panel frameCartesUne coque extérieure discrète avec une bande d'en-tête et de pied de page compacte qui contient un ou plusieurs panneaux insérés plus nets, regroupant le contenu associé avec une profondeur claire.

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.

Bevel frame button
Un bouton à cadre carré dont les deux extrémités se biseautent en pointes au survol, transformant le rectangle en un badge à six côtés.
Contrast Boost Frame Button
Une plaque intérieure pâle flotte à l’intérieur d’un épais cadre peint, et en planant, le tout devient plus lumineux et plus saturé sans rien bouger.
Corner bracket frame button
Une étiquette majuscule nue qui est encadrée par deux supports en forme de L coulissant depuis des côtés opposés puis s'agrandissant pour fermer le cadre.

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)