Create a sign-in experience using a combination of components. Even common workflows like registration, onboarding, and authentication can require a large number of controls. By combining components thoughtfully, you can create a cohesive and intuitive user experience that guides users through the sign-in process.
Functionality considerations
This sample uses a combination of Panel, Block, Input, Button, List, and Link components.
The experience defaults to an open Block, allowing the user to immediately act on the most common sign-in method. Supplementary methods are quickly available to a user.
Component functionality
The Panel component can be used in creative ways to house content and controls. In this sample, there is custom styling applied to the Panel to make it the focal point of the application. Blocks serve as groupings for the sign-in methods, and each Block has a unique set of components specific to that sign-in workflow.
Implementation details
In this sample, there is conditional CSS applied to Block components for the purpose of highlighting the currently open Block. Additionally, icons are programmatically swapped via JavaScript based on the Block's expanded state. Small styling adjustments have been made to various components to support the workflow. When possible, use Calcite design tokens to facilitate customization.