Logo
Stockholm-icons / Layout / Layout-4-blocks Created with Sketch.
Stockholm-icons / Communication / Chat6 Created with Sketch.

Default Action Bar

Please enter your full name
We'll never share your email with anyone else

								<form class="form">
									<div class="card-body">
										<div class="form-group">
											<label>Full Name:</label>
											<input type="email" class="form-control" placeholder="Enter full name"/>
											<span class="form-text text-muted">Please enter your full name</span>
										</div>
										<div class="form-group">
											<label>Email address:</label>
											<input type="email" class="form-control" placeholder="Enter email"/>
											<span class="form-text text-muted">We'll never share your email with anyone else</span>
										</div>
										<div class="form-group mb-0">
											<label>Communication:</label>
											<div class="checkbox-list">
												<label class="checkbox checkbox-outline">
													<input type="checkbox"/>
													<span></span>
													Email
												</label>
												<label class="checkbox checkbox-outline">
													<input type="checkbox"/>
													<span></span>
													SMS
												</label>
												<label class="checkbox checkbox-outline">
													<input type="checkbox"/>
													<span></span>
													Phone
												</label>
											</div>
										</div>
									</div>
									<div class="card-footer">
										<button type="reset" class="btn btn-primary mr-2">Submit</button>
										<button type="reset" class="btn btn-secondary">Cancel</button>
									</div>
								</form>
								

Right Action Bar

Please enter your full name
We'll never share your email with anyone else

								<form class="form">
									<div class="card-body">
										<div class="form-group">
											<label>Full Name:</label>
											<input type="email" class="form-control" placeholder="Enter full name"/>
											<span class="form-text text-muted">Please enter your full name</span>
										</div>
										<div class="form-group">
											<label>Email address:</label>
											<input type="email" class="form-control" placeholder="Enter email"/>
											<span class="form-text text-muted">We'll never share your email with anyone else</span>
										</div>
										<div class="form-group mb-0">
											<label>Communication:</label>
											<div class="checkbox-list">
												<label class="checkbox checkbox-outline">
													<input type="checkbox"/>
													<span></span>
													Email
												</label>
												<label class="checkbox checkbox-outline">
													<input type="checkbox"/>
													<span></span>
													SMS
												</label>
												<label class="checkbox checkbox-outline">
													<input type="checkbox"/>
													<span></span>
													Phone
												</label>
											</div>
										</div>
									</div>
									<div class="card-footer text-right">
										<button type="reset" class="btn btn-primary mr-2">Submit</button>
										<button type="reset" class="btn btn-secondary">Cancel</button>
									</div>
								</form>
								

Multiple Buttons

Please enter your full name
We'll never share your email with anyone else

								<form class="form">
									<div class="card-body">
										<div class="form-group">
											<label>Full Name:</label>
											<input type="email" class="form-control" placeholder="Enter full name"/>
											<span class="form-text text-muted">Please enter your full name</span>
										</div>
										<div class="form-group">
											<label>Email address:</label>
											<input type="email" class="form-control" placeholder="Enter email"/>
											<span class="form-text text-muted">We'll never share your email with anyone else</span>
										</div>
										<div class="form-group mb-0">
											<label>Communication:</label>
											<div class="checkbox-list">
												<label class="checkbox checkbox-outline">
													<input type="checkbox"/>
													<span></span>
													Email
												</label>
												<label class="checkbox checkbox-outline">
													<input type="checkbox"/>
													<span></span>
													SMS
												</label>
												<label class="checkbox checkbox-outline">
													<input type="checkbox"/>
													<span></span>
													Phone
												</label>
											</div>
										</div>
									</div>
									<div class="card-footer">
										<div class="row">
											<div class="col text-left">
												<button type="reset" class="btn btn-primary  mr-2">Submit</button>
												<button type="reset" class="btn btn-secondary">Cancel</button>
											</div>
											<div class="col text-right">
												<button type="reset" class="btn btn-danger">Delete</button>
											</div>
										</div>
									</div>
								</form>
								

Action Button & Link

Please enter your full name
We'll never share your email with anyone else

								<form class="form">
									<div class="card-body">
										<div class="form-group">
											<label>Full Name:</label>
											<input type="email" class="form-control" placeholder="Enter full name"/>
											<span class="form-text text-muted">Please enter your full name</span>
										</div>
										<div class="form-group">
											<label>Email address:</label>
											<input type="email" class="form-control" placeholder="Enter email"/>
											<span class="form-text text-muted">We'll never share your email with anyone else</span>
										</div>
										<div class="form-group mb-0">
											<label>Communication:</label>
											<div class="checkbox-list">
												<label class="checkbox checkbox-outline">
													<input type="checkbox"/>
													<span></span>
													Email
												</label>
												<label class="checkbox checkbox-outline">
													<input type="checkbox"/>
													<span></span>
													SMS
												</label>
												<label class="checkbox checkbox-outline">
													<input type="checkbox"/>
													<span></span>
													Phone
												</label>
											</div>
										</div>
									</div>
									<div class="card-footer text-right">
										<button type="reset" class="btn btn-primary mr-2">Submit</button>
										<span class="ml-2">or <a href="#" class="font-weight-bold ml-2">Cancel</a></span>
									</div>
								</form>
								

Aside Space

Please enter your full name
We'll never share your email with anyone else

								<form class="form">
									<div class="card-body">
										<div class="form-group">
											<label>Full Name:</label>
											<input type="email" class="form-control" placeholder="Enter full name"/>
											<span class="form-text text-muted">Please enter your full name</span>
										</div>
										<div class="form-group">
											<label>Email address:</label>
											<input type="email" class="form-control" placeholder="Enter email"/>
											<span class="form-text text-muted">We'll never share your email with anyone else</span>
										</div>
										<div class="form-group mb-0">
											<label>Communication:</label>
											<div class="checkbox-list">
												<label class="checkbox checkbox-outline">
													<input type="checkbox"/>
													<span></span>
													Email
												</label>
												<label class="checkbox checkbox-outline">
													<input type="checkbox"/>
													<span></span>
													SMS
												</label>
												<label class="checkbox checkbox-outline">
													<input type="checkbox"/>
													<span></span>
													Phone
												</label>
											</div>
										</div>
									</div>
									<div class="card-footer">
										<div class="row">
											<div class="col text-left">
												<button type="reset" class="btn btn-primary mr-2">Submit</button>
												<button type="reset" class="btn btn-secondary">Cancel</button>
											</div>
											<div class="col text-right">
												<button type="reset" class="btn btn-danger">Delete</button>
											</div>
										</div>
									</div>
								</form>
								

Solid Bar

Please enter your full name
We'll never share your email with anyone else

								<form class="form">
									<div class="card-body">
										<div class="form-group">
											<label>Full Name:</label>
											<input type="email" class="form-control" placeholder="Enter full name"/>
											<span class="form-text text-muted">Please enter your full name</span>
										</div>
										<div class="form-group">
											<label>Email address:</label>
											<input type="email" class="form-control" placeholder="Enter email"/>
											<span class="form-text text-muted">We'll never share your email with anyone else</span>
										</div>
										<div class="form-group mb-0">
											<label>Communication:</label>
											<div class="checkbox-list">
												<label class="checkbox checkbox-outline">
													<input type="checkbox"/>
													<span></span>
													Email
												</label>
												<label class="checkbox checkbox-outline">
													<input type="checkbox"/>
													<span></span>
													SMS
												</label>
												<label class="checkbox checkbox-outline">
													<input type="checkbox"/>
													<span></span>
													Phone
												</label>
											</div>
										</div>
									</div>
									<div class="card-footer text-right bg-gray-100 border-top-0">
										<button type="reset" class="btn btn-primary">Submit</button>
										<span class="mx-2">or</span>
										<a href="#" class="btn btn-link btn-link-primary">Cancel</a>
									</div>
								</form>
								

Top & Bottom Actions Bars

Please enter your full name
We'll never share your email with anyone else

								<form class="form">
									<div class="card-footer bg-gray-100 border-top-0">
										<div class="row align-items-center">
											<div class="col text-left">
												Top Actions:
											</div>
											<div class="col text-right">
												<button type="reset" class="btn btn-primary font-weight-bold mr-2">Submit</button>
												<button type="reset" class="btn btn-light-primary font-weight-bold">Cancel</button>
											</div>
										</div>
									</div>
									<div class="card-body">
										<div class="form-group">
											<label>Full Name:</label>
											<input type="email" class="form-control" placeholder="Enter full name"/>
											<span class="form-text text-muted">Please enter your full name</span>
										</div>
										<div class="form-group">
											<label>Email address:</label>
											<input type="email" class="form-control" placeholder="Enter email"/>
											<span class="form-text text-muted">We'll never share your email with anyone else</span>
										</div>
										<div class="form-group mb-0">
											<label>Communication:</label>
											<div class="checkbox-list">
												<label class="checkbox checkbox-outline">
													<input type="checkbox"/>
													<span></span>
													Email
												</label>
												<label class="checkbox checkbox-outline">
													<input type="checkbox"/>
													<span></span>
													SMS
												</label>
												<label class="checkbox checkbox-outline">
													<input type="checkbox"/>
													<span></span>
													Phone
												</label>
											</div>
										</div>
									</div>
									<div class="card-footer bg-gray-100 border-top-0 text-right">
										<button type="reset" class="btn btn-primary font-weight-bold mr-2">Submit</button>
										<button type="reset" class="btn btn-light-primary font-weight-bold">Cancel</button>
									</div>
								</form>
								

Horizontal Form Layout

Please enter your full name
We'll never share your email with anyone else

								<form class="form">
									<div class="card-body">
										<div class="form-group row mt-4">
											<label  class="col-3 col-form-label">Full Name:</label>
											<div class="col-9">
												<input type="email" class="form-control" placeholder="Enter full name"/>
												<span class="form-text text-muted">Please enter your full name</span>
											</div>
										</div>
										<div class="form-group row">
											<label  class="col-3 col-form-label">Email address:</label>
											<div class="col-9">
												<input type="email" class="form-control" placeholder="Enter email"/>
												<span class="form-text text-muted">We'll never share your email with anyone else</span>
											</div>
										</div>
										<div class="form-group row mb-1">
											<label  class="col-3 col-form-label">Communication:</label>
											<div class="col-9">
												<div class="checkbox-inline">
													<label class="checkbox checkbox-outline">
														<input type="checkbox"/>
														<span></span>
														Email
													</label>
													<label class="checkbox checkbox-outline">
														<input type="checkbox"/>
														<span></span>
														SMS
													</label>
													<label class="checkbox checkbox-outline">
														<input type="checkbox"/>
														<span></span>
														Phone
													</label>
												</div>
											</div>
										</div>
									</div>
									<div class="card-footer">
										<div class="row">
											<div class="col-3">

											</div>
											<div class="col-9">
												<button type="reset" class="btn btn-primary mr-2">Submit</button>
												<button type="reset" class="btn btn-secondary">Cancel</button>
											</div>
										</div>
									</div>
								</form>
								

User Profile 15 messages

Recent Notifications
Stockholm-icons / Layout / Layout-polygon Created with Figma. Stockholm-icons / Files / File-done Created with Sketch.

Important Notice

Lorem Ipsum is simply dummy text of the printing and industry.

Stockholm-icons / Layout / Layout-polygon Created with Figma. Stockholm-icons / Design / Pen&ruller Created with Sketch.

System Update

There are many variations of passages of Lorem Ipsum available.

Stockholm-icons / Layout / Layout-polygon Created with Figma. Stockholm-icons / General / Thunder-move Created with Sketch.

Server Maintenance

Contrary to popular belief, Lorem Ipsum is not simply random text.

Stockholm-icons / Layout / Layout-polygon Created with Figma. Stockholm-icons / Home / Alarm-clock Created with Sketch.

DB Migration

If you are going to use a passage of Lorem Ipsum, you need.

System Messages
Stockholm-icons / Communication / Group-chat Created with Sketch.
09:30 AM

To start a blog, think of a topic about and first brainstorm ways to write details

Stockholm-icons / General / Attachment2 Created with Sketch.
2:45 PM

To start a blog, think of a topic about and first brainstorm ways to write details

Stockholm-icons / Home / Library Created with Sketch.
3:12 PM

To start a blog, think of a topic about and first brainstorm ways to write details

Stockholm-icons / Communication / Add-user Created with Sketch.
7:05 PM

To start a blog, think of a topic about and first brainstorm ways to write details

Privacy Settings:

After you log in, you will be asked for additional information to confirm your identity.

Security Settings:

After you log in, you will be asked for additional information to confirm your identity. For extra security, this requires you to confirm your email. Learn more.

Stockholm-icons / Navigation / Up-2 Created with Sketch.

Select A Demo

Demo 1
Demo 2
Demo 3
Demo 4
Demo 5
Demo 6
Demo 7
Demo 8
Demo 9