Composants

page

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

18 sur 18

2731Account signupPagesUne page d'inscription centrée avec un champ de courrier électronique, un bouton principal de création de compte, un séparateur et deux boutons secondaires de poursuite pour les autres fournisseurs d'identité.

2732Analytics console pagePagesExplorez les indicateurs et les tâches dans une console et téléchargez le tableau actuel au format CSV local.

2733Centered signup cardPagesUne carte de page centrée qui collecte un nom complet, une adresse e-mail, un mot de passe et une confirmation, chaque champ avec une courte ligne d'assistance, ainsi qu'un bouton d'inscription au compte connecté.

2737Image panel signup cardPagesUne large carte d'inscription divisée en un panneau de formulaire et un panneau d'image décoratif, avec des champs de mot de passe appariés et trois boutons de fournisseur contenant uniquement des icônes sous un séparateur.

2739Minimal email loginPagesUne page de connexion sans mot de passe avec une petite marque, un en-tête de bienvenue, un champ de courrier électronique obligatoire, un seul bouton de soumission et deux options de connexion alternatives sous un séparateur.

2740Minimal email sign inPagesUne page de connexion sans mot de passe avec une marque, un en-tête de bienvenue, un champ de courrier électronique, un bouton principal et deux options de connexion alternatives sous un séparateur.

2742Muted social loginPagesUne page de connexion complète sur un fond légèrement teinté avec une marque, deux boutons de connexion sociale, un séparateur et un formulaire d'e-mail et de mot de passe sur une seule carte.

2743Muted compact signupPagesUne page d'inscription avec une carte centrée sur un arrière-plan teinté sourd où les deux champs de mot de passe partagent une ligne compacte à deux colonnes sous une seule ligne d'assistance.

2747Sign-in card with photoPagesUne large carte de connexion divisée en une moitié de formulaire et une moitié de photo, centrée sur une page teintée, avec des boutons de fournisseur contenant uniquement des icônes.

2748Signup card on tintPagesUne carte d'inscription centrée sur un fond de page teinté, associant les champs de mot de passe et de confirmation de mot de passe côte à côte sous une ligne d'assistance partagée.

2749Signup card with photoPagesUne large carte d'inscription divisée en une moitié de formulaire et une moitié de photo découpée, collectant les e-mails et les mots de passe appariés avant une rangée de boutons de fournisseur composés uniquement d'icônes.

2750Signup page with socialPagesUne page d'inscription sans carte collectant le nom, l'adresse e-mail et les mots de passe correspondants au-dessus d'un bouton de fournisseur alternatif décrit et d'un lien de connexion centré.

2751Simple centered loginPagesUne carte de page de connexion centrée avec des champs d'e-mail et de mot de passe, un bouton d'envoi pleine largeur, un bouton d'authentification unique en option et un lien pour créer un compte.

2752Simple sign-in cardPagesUne carte de page de connexion centrée avec un champ de courrier électronique étiqueté, un champ de mot de passe avec un lien de mot de passe oublié, un bouton de soumission principal et un bouton de fournisseur alternatif décrit.

2753Social sign-in cardPagesUne carte de page de connexion sur fond teinté qui mène à des boutons de fournisseur sur toute la largeur, puis propose un e-mail et un mot de passe de secours avec les termes en petits caractères ci-dessous.

2754Split cover loginPagesUne page de connexion à deux colonnes avec un formulaire de connexion centré à côté d'un panneau de couverture décoratif à fond perdu qui tombe sur des écrans étroits.

2755Split cover signupPagesUne page d'inscription à deux colonnes : une forme étroite centrée avec une marque d'un côté et une couverture illustrée à fond perdu de l'autre, se réduisant en une seule colonne lorsqu'elle est étroite.

2756Split sign-in pagePagesUne page de connexion à deux colonnes associant une colonne de formulaire étroite à une image de couverture pleine hauteur sur le côté opposé, l'image tombant sur les petits écrans.

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.

Account signup
Une page d'inscription centrée avec un champ de courrier électronique, un bouton principal de création de compte, un séparateur et deux boutons secondaires de poursuite pour les autres fournisseurs d'identité.
Analytics console page
Explorez les indicateurs et les tâches dans une console et téléchargez le tableau actuel au format CSV local.
Centered signup card
Une carte de page centrée qui collecte un nom complet, une adresse e-mail, un mot de passe et une confirmation, chaque champ avec une courte ligne d'assistance, ainsi qu'un bouton d'inscription au compte connecté.

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)