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

Basic Examples


						<form class="form">
							<div class="form-group row">
								<label class="col-3 col-form-label">Default Switch</label>
								<div class="col-3">
									<span class="switch">
										<label>
											<input type="checkbox" checked="checked" name="select"/>
											<span></span>
										</label>
									</span>
								</div>
								<label class="col-3 col-form-label">With Icon</label>
								<div class="col-3">
									<span class="switch switch-icon">
										<label>
											<input type="checkbox" checked="checked" name="select"/>
											<span></span>
										</label>
									</span>
								</div>
							</div>
							<div class="form-group row">
								<label class="col-3 col-form-label">Unchecked State</label>
								<div class="col-3">
									<span class="switch">
										<label>
											<input type="checkbox"  name=""/>
											<span></span>
										</label>
									</span>
								</div>
								<label class="col-3 col-form-label">With Icon</label>
								<div class="col-3">
									<span class="switch switch-icon">
										<label>
											<input type="checkbox"  name=""/>
											<span></span>
										</label>
									</span>
								</div>
							</div>
							<div class="form-group row">
								<label class="col-3 col-form-label">Disabled State</label>
								<div class="col-3">
									<span class="switch">
										<label>
											<input type="checkbox" disabled="disabled"/>
											<span></span>
										</label>
									</span>
								</div>
								<label class="col-3 col-form-label">With Icon</label>
								<div class="col-3">
									<span class="switch switch-icon">
										<label>
											<input type="checkbox" disabled="disabled"/>
											<span></span>
										</label>
									</span>
								</div>
							</div>
						</form>
					

Sizing

Large size:

							<form class="form">
								<div class="form-group row">
									<label class="col-3 col-form-label">Default Switch</label>
									<div class="col-3">
										<span class="switch switch-lg">
											<label>
												<input type="checkbox" checked="checked" name="select"/>
												<span></span>
											</label>
										</span>
									</div>
									<label class="col-3 col-form-label">With Icon</label>
									<div class="col-3">
										<span class="switch switch-lg switch-icon">
											<label>
												<input type="checkbox" checked="checked" name="select"/>
												<span></span>
											</label>
										</span>
									</div>
								</div>
								<div class="form-group row">
									<label class="col-3 col-form-label">Unchecked State</label>
									<div class="col-3">
										<span class="switch switch-lg">
											<label>
												<input type="checkbox" name="select" />
												<span></span>
											</label>
										</span>
									</div>
									<label class="col-3 col-form-label">With Icon</label>
									<div class="col-3">
										<span class="switch switch-lg switch-icon">
											<label>
												<input type="checkbox" name="select" />
												<span></span>
											</label>
										</span>
									</div>
								</div>
								<div class="form-group row">
									<label class="col-3 col-form-label">Disabled State</label>
									<div class="col-3">
										<span class="switch switch-lg">
											<label>
												<input type="checkbox" disabled="disabled"/>
												<span></span>
											</label>
										</span>
									</div>
									<label class="col-3 col-form-label">With Icon</label>
									<div class="col-3">
										<span class="switch switch-lg switch-icon">
											<label>
												<input type="checkbox" disabled="disabled"/>
												<span></span>
											</label>
										</span>
									</div>
								</div>
							</form>
						
Small size:

							<form class="form">
								<div class="form-group row">
									<label class="col-3 col-form-label">Default Switch</label>
									<div class="col-3">
										<span class="switch switch-sm">
											<label>
												<input type="checkbox" checked="checked" name="select"/>
												<span></span>
											</label>
										</span>
									</div>
									<label class="col-3 col-form-label">With Icon</label>
									<div class="col-3">
										<span class="switch switch-sm switch-icon">
											<label>
												<input type="checkbox" checked="checked" name="select"/>
												<span></span>
											</label>
										</span>
									</div>
								</div>
								<div class="form-group row">
									<label class="col-3 col-form-label">Unchecked State</label>
									<div class="col-3">
										<span class="switch switch-sm">
											<label>
												<input type="checkbox" name="select" />
												<span></span>
											</label>
										</span>
									</div>
									<label class="col-3 col-form-label">With Icon</label>
									<div class="col-3">
										<span class="switch switch-sm switch-icon">
											<label>
												<input type="checkbox" name="select" />
												<span></span>
											</label>
										</span>
									</div>
								</div>
								<div class="form-group row">
									<label class="col-3 col-form-label">Disabled State</label>
									<div class="col-3">
										<span class="switch switch-sm">
											<label>
												<input type="checkbox" disabled="disabled"/>
												<span></span>
											</label>
										</span>
									</div>
									<label class="col-3 col-form-label">With Icon</label>
									<div class="col-3">
										<span class="switch switch-sm switch-icon">
											<label>
												<input type="checkbox" disabled="disabled"/>
												<span></span>
											</label>
										</span>
									</div>
								</div>
							</form>
						

Solid Style


						<form class="form">
							<div class="form-group row">
								<label class="col-3 col-form-label">Success</label>
								<div class="col-3">
									<span class="switch switch-success">
										<label>
											<input type="checkbox" checked="checked" name="select"/>
											<span></span>
										</label>
									</span>
								</div>
								<label class="col-3 col-form-label">Primary</label>
								<div class="col-3">
									<span class="switch switch-primary">
										<label>
											<input type="checkbox" checked="checked" name="select"/>
											<span></span>
										</label>
									</span>
								</div>
							</div>
							<div class="form-group row">
								<label class="col-3 col-form-label">Info</label>
								<div class="col-3">
									<span class="switch switch-info">
										<label>
											<input type="checkbox" checked="checked" name="select"/>
											<span></span>
										</label>
									</span>
								</div>
								<label class="col-3 col-form-label">Danger</label>
								<div class="col-3">
									<span class="switch switch-danger">
										<label>
											<input type="checkbox" checked="checked" name="select"/>
											<span></span>
										</label>
									</span>
								</div>
							</div>
							<div class="form-group row">
								<label class="col-3 col-form-label">Brand</label>
								<div class="col-3">
									<span class="switch switch-brand">
										<label>
											<input type="checkbox" checked="checked" name="select"/>
											<span></span>
										</label>
									</span>
								</div>
								<label class="col-3 col-form-label">Dark</label>
								<div class="col-3">
									<span class="switch switch-dark">
										<label>
											<input type="checkbox" checked="checked" name="select"/>
											<span></span>
										</label>
									</span>
								</div>
							</div>
						</form>
                    

Outline Style


						<form class="form">
							<div class="form-group row">
								<label class="col-3 col-form-label">Success</label>
								<div class="col-3">
									<span class="switch switch-outline switch-icon switch-success">
										<label>
											<input type="checkbox" checked="checked" name="select"/>
											<span></span>
										</label>
									</span>
								</div>
								<label class="col-3 col-form-label">Warning</label>
								<div class="col-3">
									<span class="switch switch-outline switch-icon switch-warning">
										<label>
											<input type="checkbox" checked="checked" name="select"/>
											<span></span>
										</label>
									</span>
								</div>
							</div>
							<div class="form-group row">
								<label class="col-3 col-form-label">Info</label>
								<div class="col-3">
									<span class="switch switch-outline switch-icon switch-info">
										<label>
											<input type="checkbox" checked="checked" name="select"/>
											<span></span>
										</label>
									</span>
								</div>
								<label class="col-3 col-form-label">Danger</label>
								<div class="col-3">
									<span class="switch switch-outline switch-icon switch-danger">
										<label>
											<input type="checkbox" checked="checked" name="select"/>
											<span></span>
										</label>
									</span>
								</div>
							</div>
							<div class="form-group row">
								<label class="col-3 col-form-label">Primary</label>
								<div class="col-3">
									<span class="switch switch-outline switch-icon switch-primary">
										<label>
											<input type="checkbox" checked="checked" name="select"/>
											<span></span>
										</label>
									</span>
								</div>
								<label class="col-3 col-form-label">Brand</label>
								<div class="col-3">
									<span class="switch switch-outline switch-icon switch-brand">
										<label>
											<input type="checkbox" checked="checked" name="select"/>
											<span></span>
										</label>
									</span>
								</div>
							</div>
							<div class="form-group row">
								<label class="col-3 col-form-label">Dark</label>
								<div class="col-3">
									<span class="switch switch-outline switch-icon switch-dark">
										<label>
											<input type="checkbox" checked="checked" name="select"/>
											<span></span>
										</label>
									</span>
								</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