Logo

Switch

Stockholm-icons / General / Search Created with Sketch.
Stockholm-icons / Communication / Group-chat Created with Sketch.
Sean UX Designer
S

Search Job

Job Management System
Stockholm-icons / General / Search Created with Sketch.
Stockholm-icons / Layout / Layout-4-blocks Created with Sketch.
Stockholm-icons / Media / Rec Created with Sketch.

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 12 messages

Recent Notifications
Stockholm-icons / Home / Library Created with Sketch.
Another purpose persuade Due in 2 Days
+28%
Stockholm-icons / Communication / Write Created with Sketch.
Would be to people Due in 2 Days
+50%
Stockholm-icons / Communication / Group-chat Created with Sketch. -27%
Stockholm-icons / General / Attachment2 Created with Sketch.
The best product Due in 2 Days
+8%
System Messages
Top Authors Most Successful Fellas
+82$
Popular Authors Most Successful Fellas
+280$
New Users Most Successful Fellas
+4500$
Active Customers Most Successful Fellas
+4500$
Bestseller Theme Most Successful Fellas
+4500$
Notifications
Stockholm-icons / Home / Library Created with Sketch.
Another purpose persuade Due in 2 Days
+28%
Stockholm-icons / Communication / Write Created with Sketch.
Would be to people Due in 2 Days
+50%
Stockholm-icons / Communication / Group-chat Created with Sketch. -27%
Stockholm-icons / General / Attachment2 Created with Sketch.
The best product Due in 2 Days
+8%
Customer Care
Reports
Memebers
Stockholm-icons / Navigation / Up-2 Created with Sketch.

Select A Demo