Wettbewerb: Erstellen Sie zwischen dem 29. Mai und dem 14. Juni eine SaaS-Anwendung und gewinnen Sie Geldpreise, kostenlose Pläne und mehr!
Komponente laden...
Laden
Ich danke Ihnen! Ich werde
dieses Projekt so schnell wie möglich aktualisieren.
dieses Projekt so schnell wie möglich aktualisieren.
Huch! Beim Absenden des Formulars ist etwas schief gelaufen.
So aktivieren Sie die Google-Authentifizierung
So aktivieren Sie die Facebook-Authentifizierung
So aktivieren Sie die Spotify-Authentifizierung
Wie man die Dribbble-Authentifizierung aktiviert
Wie man die Github-Authentifizierung aktiviert
So aktivieren Sie die LinkedIn-Authentifizierung
So aktivieren Sie passwortlose Anmeldungen
So konfigurieren Sie die Kennwortüberprüfung
Passwort ein-/ausblenden
Wie man mit Profilbildern arbeitet
So fügen Sie einen Fluss für vergessene Passwörter hinzu
Wie man mit Kontrollkästchen arbeitet
Wie man Preistabellen konfiguriert
Über das Stripe-Kundenportal
{"type":"@webflow/XscpData","payload":{"nodes":[{"_id":"188c2703-8b12-9bb2-37f0-4bf5be7c1a51","type":"Block","tag":"div","classes":["526b9ff0-6526-d6de-bbe8-43e1cee49c1b"],"children":["188c2703-8b12-9bb2-37f0-4bf5be7c1a53","cc7c9c1c-1dc6-471b-309e-4bb58a254af0"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"188c2703-8b12-9bb2-37f0-4bf5be7c1a53","type":"Image","tag":"img","classes":["c31593e8-9c06-c1be-7ed5-94861a86b5ed"],"children":[],"data":{"img":{"id":"6477894da2a19699c9eed744"},"xattr":[{"name":"data-ms-member","value":"profile-image"}],"attr":{"src":"https://cdn.prod.website-files.com/62a8ca076604387b48cffef4/6477894da2a19699c9eed744_white-profile-empty%20(1).svg","loading":"auto","width":"auto","height":"auto"},"displayName":"","search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"cc7c9c1c-1dc6-471b-309e-4bb58a254af0","type":"Block","tag":"div","classes":[],"children":["6fd5ebff-5c34-b40b-5777-23cd73418123"],"data":{"tag":"div","text":false}},{"_id":"6fd5ebff-5c34-b40b-5777-23cd73418123","type":"Link","tag":"a","classes":[],"children":["6fd5ebff-5c34-b40b-5777-23cd73418124"],"data":{"button":false,"block":"","link":{"mode":"external","url":"#"},"xattr":[{"name":"data-ms-action","value":"profile-image"}]}},{"_id":"6fd5ebff-5c34-b40b-5777-23cd73418124","text":true,"v":"Change Avatar"}],"styles":[{"_id":"526b9ff0-6526-d6de-bbe8-43e1cee49c1b","fake":false,"type":"class","name":"ms-center","namespace":"","comb":"","styleLess":"text-align: center;","variants":{},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"c31593e8-9c06-c1be-7ed5-94861a86b5ed","fake":false,"type":"class","name":"ms-profile-image-preview","namespace":"","comb":"","styleLess":"display: inline-block; width: 56px; height: 56px; margin-top: 5px; margin-bottom: 5px; border-top-left-radius: 100px; border-top-right-radius: 100px; border-bottom-left-radius: 100px; border-bottom-right-radius: 100px; background-color: hsla(0, 0.00%, 80.00%, 1.00);","variants":{},"children":[],"selector":null}],"assets":[{"cdnUrl":"https://cdn.prod.website-files.com/62a8ca076604387b48cffef4/6477894da2a19699c9eed744_white-profile-empty%20(1).svg","siteId":"62a8ca076604387b48cffef4","width":42,"isHD":false,"height":42,"fileName":"6477894da2a19699c9eed744_white-profile-empty (1).svg","createdOn":"2023-05-31T17:52:13.618Z","origFileName":"white-profile-empty (1).svg","fileHash":"1dcd7a5bfd206688009248d0e2c942a9","variants":[],"mimeType":"image/svg+xml","s3Url":"https://s3.amazonaws.com/webflow-prod-assets/62a8ca076604387b48cffef4/6477894da2a19699c9eed744_white-profile-empty%20(1).svg","thumbUrl":"https://cdn.prod.website-files.com/62a8ca076604387b48cffef4/6477894da2a19699c9eed744_white-profile-empty%20(1).svg","_id":"6477894da2a19699c9eed744","updatedOn":"2023-05-31T17:52:13.618Z","fileSize":359}],"ix1":[],"ix2":{"interactions":[],"events":[],"actionLists":[]}},"meta":{"unlinkedSymbolCount":0,"droppedLinks":0,"dynBindRemovedCount":0,"dynListBindRemovedCount":0,"paginationRemovedCount":0}}
Klonen in Webflow
Komponente kopieren
{"type":"@webflow/XscpData","payload":{"nodes":[{"_id":"188c2703-8b12-9bb2-37f0-4bf5be7c1a51","type":"Block","tag":"div","classes":["526b9ff0-6526-d6de-bbe8-43e1cee49c1b"],"children":["188c2703-8b12-9bb2-37f0-4bf5be7c1a53","cc7c9c1c-1dc6-471b-309e-4bb58a254af0"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"188c2703-8b12-9bb2-37f0-4bf5be7c1a53","type":"Image","tag":"img","classes":["c31593e8-9c06-c1be-7ed5-94861a86b5ed"],"children":[],"data":{"img":{"id":"6477894da2a19699c9eed744"},"xattr":[{"name":"data-ms-member","value":"profile-image"}],"attr":{"src":"https://cdn.prod.website-files.com/62a8ca076604387b48cffef4/6477894da2a19699c9eed744_white-profile-empty%20(1).svg","loading":"auto","width":"auto","height":"auto"},"displayName":"","search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"cc7c9c1c-1dc6-471b-309e-4bb58a254af0","type":"Block","tag":"div","classes":[],"children":["6fd5ebff-5c34-b40b-5777-23cd73418123"],"data":{"tag":"div","text":false}},{"_id":"6fd5ebff-5c34-b40b-5777-23cd73418123","type":"Link","tag":"a","classes":[],"children":["6fd5ebff-5c34-b40b-5777-23cd73418124"],"data":{"button":false,"block":"","link":{"mode":"external","url":"#"},"xattr":[{"name":"data-ms-action","value":"profile-image"}]}},{"_id":"6fd5ebff-5c34-b40b-5777-23cd73418124","text":true,"v":"Change Avatar"}],"styles":[{"_id":"526b9ff0-6526-d6de-bbe8-43e1cee49c1b","fake":false,"type":"class","name":"ms-center","namespace":"","comb":"","styleLess":"text-align: center;","variants":{},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"c31593e8-9c06-c1be-7ed5-94861a86b5ed","fake":false,"type":"class","name":"ms-profile-image-preview","namespace":"","comb":"","styleLess":"display: inline-block; width: 56px; height: 56px; margin-top: 5px; margin-bottom: 5px; border-top-left-radius: 100px; border-top-right-radius: 100px; border-bottom-left-radius: 100px; border-bottom-right-radius: 100px; background-color: hsla(0, 0.00%, 80.00%, 1.00);","variants":{},"children":[],"selector":null}],"assets":[{"cdnUrl":"https://cdn.prod.website-files.com/62a8ca076604387b48cffef4/6477894da2a19699c9eed744_white-profile-empty%20(1).svg","siteId":"62a8ca076604387b48cffef4","width":42,"isHD":false,"height":42,"fileName":"6477894da2a19699c9eed744_white-profile-empty (1).svg","createdOn":"2023-05-31T17:52:13.618Z","origFileName":"white-profile-empty (1).svg","fileHash":"1dcd7a5bfd206688009248d0e2c942a9","variants":[],"mimeType":"image/svg+xml","s3Url":"https://s3.amazonaws.com/webflow-prod-assets/62a8ca076604387b48cffef4/6477894da2a19699c9eed744_white-profile-empty%20(1).svg","thumbUrl":"https://cdn.prod.website-files.com/62a8ca076604387b48cffef4/6477894da2a19699c9eed744_white-profile-empty%20(1).svg","_id":"6477894da2a19699c9eed744","updatedOn":"2023-05-31T17:52:13.618Z","fileSize":359}],"ix1":[],"ix2":{"interactions":[],"events":[],"actionLists":[]}},"meta":{"unlinkedSymbolCount":0,"droppedLinks":0,"dynBindRemovedCount":0,"dynListBindRemovedCount":0,"paginationRemovedCount":0}}
Browser nicht unterstützt. Verwenden Sie
Chrome oder Safari.
Chrome oder Safari.
Über diese Komponente
AI-generiert
Komponentenbeschreibung (von AI generiert)
The Profile Image component is designed to display user avatars with an option to change them, making it ideal for personal profiles or user accounts.
Wesentliche Merkmale:
- Displays a circular profile image with a customizable avatar.
- Includes a 'Change Avatar' link for user interaction.
- Responsive design with auto width and height settings.
- Centered alignment for a clean presentation.
Gestaltungselemente:
- Circular image with a border-radius for a soft appearance.
- Light gray background color for the image placeholder.
- Compact size of 56px by 56px for a neat layout.
Potenzielle Anwendungsfälle:
- Social media platforms for user profiles.
- E-commerce websites for customer accounts.
- Online forums or community sites for member avatars.
- Corporate websites for employee profiles.
- Blogging platforms for author images.
Conclusion: The Profile Image component is versatile and user-friendly, making it an essential element for any platform that requires user representation.
Mit dem Bau beginnen
Bauen Sie Ihre Träume
Memberstack ist 100% kostenlos, bis Sie bereit sind, zu starten - worauf warten Sie also noch? Erstellen Sie Ihre erste App und beginnen Sie noch heute mit der Entwicklung.
.png)
