Account Modal
The account-modal component, prefixed by gds-account-modal
, is a standard login window. This component is meant to be used on a page by itself.
<div className="gds-account-modal gds-account-modal--logo">
<div className="gds-account-modal__logo-product">Advertising</div>
<div className="gds-account-modal__form-cap -m-t-3-sm -m-t-0">Dashboard</div>
<form className="gds-form gds-account-modal__form gds-card -p-a-3">
<div className="gds-form-group -m-b-1">
<label className="gds-form-group__label">Email</label>
<input
className="gds-form-group__text-input"
type="text"
placeholder="user@gumgum.com"
/>
</div>
<div className="gds-form-group -m-b-2">
<label className="gds-form-group__label">Password</label>
<input
className="gds-form-group__text-input"
type="password"
placeholder="password123"
/>
</div>
<div className="gds-form-group -m-b-2">
<div className="gds-form-group__checkbox">
<label className="gds-form-group__checkbox-label">
<input className="gds-form-group__checkbox-input" type="checkbox" value="" />
<span className="gds-form-group__checkbox-indicator"></span> Stay signed in
</label>
</div>
</div>
<button type="submit" className="gds-button gds-button--block gds-button--primary">
Login
</button>
</form>
<p className="gds-account-modal__extra-links">
<a href="#" className="gds-text--link">Forgot your password?</a>
</p>
</div>