# Springer Nature User Details Display current signed in user; click to expand to reveal more details ## Requirements A class name of `.js` on the document root element will be required to enable visual styles for the user info drop down. The class should be added via a micro (but blocking) script, placed as far up in the of the document as possible. ```javascript ``` ## Usage ### HTML The component assumes you have the following data available to your template: user-details { first_name last_name email_address } logoutUri ### Javascript ```javascript import userDetails from '@springernature/user-details/js'; userDetails(); ``` ### CSS Import the core styles into your main stylesheet ```scss // core.scss @import '@springernature/brand-context/springernature/scss/10-settings/colors/default'; @import '@springernature/brand-context/default/scss/30-mixins/focus'; @import '@springernature/springernature-user-details/scss/10-settings/colours'; @import '@springernature/springernature-user-details/scss/10-settings/typography'; @import '@springernature/springernature-user-details/scss/50-components/core'; ``` Import the enhanced settings and styles into your main stylesheet ```scss // enhanced.scss @import '@springernature/brand-context/default/scss/enhanced'; @import '@springernature/springernature-user-details/scss/10-settings/layout'; @import '@springernature/brand-context/default/scss/30-mixins/arrow'; @import '@springernature/springernature-user-details/scss/50-components/enhanced'; ```