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

Basic Example

@
Some help content goes here
@example.com
$ 0.00
#
px

							<div class="card card-custom">
								<div class="card-header">
									<h3 class="card-title">
										Basic Example
									</h3>
								</div>
								<!--begin::Form-->
								<form class="form">
									<div class="card-body">
										<div class="form-group">
											<div class="alert alert-custom alert-default" role="alert">
												<div class="alert-icon"><i class="flaticon-warning text-primary"></i></div>
												<div class="alert-text">
													Use any icon in input group from <a  class="font-weight-bold" href="<?php echo Util::getUrl( 'components/icons/flaticon' ) ?>">Flaticon</a>,
													<a  class="font-weight-bold" href="<?php echo Util::getUrl( 'components/icons/fontawesome5' ) ?>">Fontawesome 5</a>,
													<a  class="font-weight-bold" href="<?php echo Util::getUrl( 'components/icons/duo-tone' ) ?>">Duotone</a>,
													<a  class="font-weight-bold" href="<?php echo Util::getUrl( 'components/icons/lineawesome' ) ?>">Lineawesome</a> or
													<a  class="font-weight-bold" href="<?php echo Util::getUrl( 'components/icons/socicons' ) ?>">Socicons</a> icons.
												</div>
											</div>
										</div>
										<div class="form-group">
											<label>Left Addon</label>
											<div class="input-group">
												<div class="input-group-prepend"><span class="input-group-text">@</span></div>
												<input type="text" class="form-control" placeholder="Email" />
											</div>
											<span class="form-text text-muted">Some help content goes here</span>
										</div>
										<div class="form-group">
											<label>Right Addon</label>
											<div class="input-group">
												<input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon2"/>
												<div class="input-group-append"><span class="input-group-text">@example.com</span></div>
											</div>
										</div>
										<div class="separator separator-dashed my-8"></div>
										<div class="form-group">
											<label>Joint Addons</label>
											<div class="input-group">
												<div class="input-group-prepend">
													<span class="input-group-text">$</span>
													<span class="input-group-text">0.00</span>
												</div>
												<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)"/>
											</div>
										</div>
										<div class="form-group mb-2">
											<label>Left & Right Addons</label>
											<div class="input-group">
												<div class="input-group-prepend"><span class="input-group-text">#</span></div>
												<input type="text" class="form-control" placeholder="Units" />
												<div class="input-group-append"><span class="input-group-text">px</span></div>
											</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>
								<!--end::Form-->
							</div>
						

With Icons

Some help content goes here
$
Stockholm-icons / General / Search Created with Sketch.
Stockholm-icons / Code / Compiling Created with Sketch.

							<div class="card card-custom">
								<div class="card-header">
									<h3 class="card-title">
										With Icons
									</h3>
								</div>
								<!--begin::Form-->
								<form class="form">
									<div class="card-body">
										<div class="form-group">
											<div class="alert alert-custom alert-default" role="alert">
												<div class="alert-icon"><?php echo Page::getSVG(Page::getMediaPath() . "svg/icons/Tools/Compass.svg", "svg-icon-primary svg-icon-xl");?></div>
												<div class="alert-text">
													Easily extend form controls by adding text, buttons, icons, or button groups on either side of the input.
												</div>
											</div>
										</div>
										<div class="form-group">
											<label>Left Addon</label>
											<div class="input-group">
												<div class="input-group-prepend"><span class="input-group-text"><i class="la la-exclamation-triangle icon-lg"></i></span></div>
												<input type="text" class="form-control" placeholder="Email" />
											</div>
											<span class="form-text text-muted">Some help content goes here</span>
										</div>
										<div class="form-group">
											<label>Right Addon</label>
											<div class="input-group">
												<input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2"/>
												<div class="input-group-append"><span class="input-group-text"><i class="la la-group icon-lg"></i></span></div>
											</div>
										</div>

										<div class="separator separator-dashed my-8"></div>

										<div class="form-group">
											<label>Joint Addons</label>
											<div class="input-group">
												<div class="input-group-prepend">
													<span class="input-group-text">$</span>
												</div>
												<input type="text" class="form-control" placeholder="0.00" aria-label="Amount (to the nearest dollar)"/>
												<div class="input-group-append">
													<span class="input-group-text"><i class="la la-registered"></i></span>
												</div>
											</div>
										</div>
										<div class="form-group">
											<label>Both Addons</label>
											<div class="input-group">
												<div class="input-group-prepend"><span class="input-group-text"><i class="flaticon-refresh"></i></span></div>
												<input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2"/>
												<div class="input-group-append"><span class="input-group-text"><i class="flaticon-user"></i></span></div>
											</div>
										</div>
										<div class="form-group">
											<label>Duotone Icons</label>
											<div class="input-group">
												<div class="input-group-prepend">
													<span class="input-group-text line-height-0 py-0">
														<?php echo Page::getSVG(Page::getMediaPath() . "svg/icons/General/Search.svg");?>
													</span>
												</div>
												<input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2"/>
												<div class="input-group-append">
													<span class="input-group-text line-height-0 py-0">
														<?php echo Page::getSVG(Page::getMediaPath() . "svg/icons/Code/Compiling.svg");?>
													</span>
												</div>
											</div>
										</div>
										<div class="form-group mb-2">
											<label>Keenthemes Icons</label>
											<div class="input-group">
												<div class="input-group-prepend">
													<span class="input-group-text line-height-0 py-0">
														<i class="ki ki-arrow-back icon-sm"></i>
													</span>
												</div>
												<input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2"/>
												<div class="input-group-append">
													<span class="input-group-text line-height-0 py-0">
														<i class="ki ki-arrow-next icon-sm"></i>
													</span>
												</div>
											</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>
								<!--end::Form-->
							</div>
						

Sizing

Some help content goes here
0.00

							<div class="card card-custom">
								<div class="card-header">
									<h3 class="card-title">
										Sizing
									</h3>
								</div>
								<!--begin::Form-->
								<form class="form">
									<div class="card-body">
										<div class="form-group">
											<div class="alert alert-custom alert-default" role="alert">
												<div class="alert-icon"><i class="flaticon-warning text-primary"></i></div>
												<div class="alert-text">
													Add the relative form sizing classes to the <code>.input-group</code> itself and contents within
													will automatically resize.
												</div>
											</div>
										</div>
										<div class="form-group">
											<label>Large Input Group</label>
											<div class="input-group input-group-lg">
												<div class="input-group-prepend"><span class="input-group-text"><i class="la la-exclamation-triangle "></i></span></div>
												<input type="text" class="form-control" placeholder="Large size" />
											</div>
											<span class="form-text text-muted">Some help content goes here</span>
										</div>
										<div class="form-group">
											<label>Large Input Group</label>
											<div class="input-group input-group-lg">
												<div class="input-group-prepend">
													<span class="input-group-text"><i class="flaticon-refresh"></i></span>
													<span class="input-group-text">0.00</span>
												</div>
												<input type="text" class="form-control" aria-label="Large size"/>
											</div>
										</div>
										<div class="form-group">
											<label>Small Input Group</label>
											<div class="input-group input-group-sm">
												<input type="text" class="form-control" placeholder="Small size" aria-describedby="basic-addon2"/>
												<div class="input-group-append"><span class="input-group-text"><i class="la la-group"></i></span></div>
											</div>
										</div>
										<div class="form-group">
											<label>Small Input Group</label>
											<div class="input-group input-group-sm">
												<div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-paper-plane" aria-hidden="true"></i></span></div>
												<input type="text" class="form-control" placeholder="Small size" aria-describedby="basic-addon2"/>
											</div>
										</div>
										<div class="form-group mb-2">
											<label>Small Input Group</label>
											<div class="input-group input-group-sm">
												<div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-paper-plane" aria-hidden="true"></i></span></div>
												<input type="text" class="form-control" placeholder="Small size" aria-describedby="basic-addon2"/>
												<div class="input-group-append"><span class="input-group-text"><i class="la la-group"></i></span></div>
											</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>
								<!--end::Form-->
							</div>
						

Input Icons

Some help content goes here
Some help content goes here

							<div class="card card-custom">
								<div class="card-header">
									<h3 class="card-title">
										Input Icons
									</h3>
								</div>
								<!--begin::Form-->
								<form class="form">
									<div class="card-body">
										<div class="form-group">
											<div class="alert alert-custom alert-default" role="alert">
												<div class="alert-icon"><i class="flaticon-warning text-primary"></i></div>
												<div class="alert-text">Use custom icon input component to place icon inside input control.</div>
											</div>
										</div>
										<div class="form-group">
											<label>Left Icon Input</label>
											<div class="input-icon">
												<input type="text" class="form-control" placeholder="Search..."/>
												<span><i class="flaticon2-search-1 icon-md"></i></span>
											</div>
											<span class="form-text text-muted">Some help content goes here</span>
										</div>
										<div class="form-group">
											<label>Right Icon Input</label>
											<div class="input-icon input-icon-right">
												<input type="text" class="form-control" placeholder="Search..."/>
												<span><i class="flaticon2-search-1 icon-md"></i></span>
											</div>
											<span class="form-text text-muted">Some help content goes here</span>
										</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>
								<!--end::Form-->
							</div>
						

Checkboxes and Radio addons

$
$
$
$

							<div class="card card-custom">
								<div class="card-header">
									<h3 class="card-title">
										Checkboxes and Radio addons
									</h3>
								</div>
								<!--begin::Form-->
								<form class="form">
									<div class="card-body">
										<div class="form-group">
											<div class="alert alert-custom alert-default" role="alert">
												<div class="alert-icon"><i class="flaticon-warning text-primary"></i></div>
												<div class="alert-text">
													Place any checkbox or radio option within an input group’s addon instead of text.
												</div>
											</div>
										</div>
										<div class="form-group">
											<label>Left Checkbox Addon</label>
											<div class="input-group">
												<div class="input-group-prepend">
													<span class="input-group-text">
														<label class="checkbox checkbox-inline checkbox-success">
															<input type="checkbox" checked=""/>
															<span></span>
														</label>
													</span>
													<span class="input-group-text">$</span>
												</div>
												<input type="text" class="form-control" aria-label="Text input with checkbox"/>
											</div>
										</div>
										<div class="form-group">
											<label>Right Checkbox Addon</label>
											<div class="input-group">
												<div class="input-group-prepend">
													<span class="input-group-text">$</span>
												</div>
												<input type="text" class="form-control" aria-label="Text input with checkbox"/>
												<div class="input-group-append">
													<span class="input-group-text">
														<label class="checkbox checkbox-inline checkbox-primary">
															<input type="checkbox" checked=""/>
															<span></span>
														</label>
													</span>
												</div>
											</div>
										</div>
										<div class="form-group">
											<label>Right & Left Checkbox Addon</label>
											<div class="input-group">
												<div class="input-group-prepend">
													<span class="input-group-text">
														<label class="checkbox checkbox-inline">
															<input type="checkbox" checked="checked"/>
															<span></span>
														</label>
													</span>
												</div>
												<input type="text" class="form-control" aria-label="Text input with checkbox"/>
												<div class="input-group-append">
													<span class="input-group-text">
														<label class="checkbox checkbox-inline">
															<input type="checkbox"/>
															<span></span>
														</label>
													</span>
												</div>
											</div>
										</div>
										<div class="form-group">
											<label>Left Radio Addon</label>
											<div class="input-group">
												<div class="input-group-prepend">
													<span class="input-group-text">
														<label class="radio radio-single radio-success">
															<input type="radio" checked=""/>
															<span></span>
														</label>
													</span>
													<span class="input-group-text">$</span>
												</div>
												<input type="text" class="form-control" aria-label="Text input with radio"/>
											</div>
										</div>
										<div class="form-group">
											<label>Right Radio Addon</label>
											<div class="input-group">
												<div class="input-group-prepend">
													<span class="input-group-text">$</span>
												</div>
												<input type="text" class="form-control" aria-label="Text input with radio"/>
												<div class="input-group-append">
													<span class="input-group-text">
														<label class="radio radio-single radio-primary">
															<input type="radio" checked=""/>
															<span></span>
														</label>
													</span>
												</div>
											</div>
										</div>
										<div class="form-group mb-2">
											<label>Right & Left Radio Addon</label>
											<div class="input-group">
												<div class="input-group-prepend">
													<span class="input-group-text">
														<label class="radio radio-single">
															<input type="radio"/>
															<span></span>
														</label>
													</span>
												</div>
												<input type="text" class="form-control" aria-label="Text input with radio"/>
												<div class="input-group-append">
													<span class="input-group-text">
														<label class="radio radio-single">
															<input type="radio"/>
															<span></span>
														</label>
													</span>
												</div>
											</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>
								<!--end::Form-->
							</div>
						

Button Addons


							<div class="card card-custom">
								<div class="card-header">
									<h3 class="card-title">
										Button Addons
									</h3>
								</div>
								<!--begin::Form-->
								<form class="form">
									<div class="card-body">
										<div class="form-group">
											<div class="alert alert-custom alert-default" role="alert">
												<div class="alert-icon"><i class="flaticon-warning text-primary"></i></div>
												<div class="alert-text">
													Buttons in input groups must wrapped in a <code>.input-group-prepend</code> or <code>.input-group-append</code> for proper alignment and sizing.
												This is required due to default browser styles that cannot be overridden.
												</div>
											</div>
										</div>
										<div class="form-group">
											<label>Left Addon Button</label>
											<div class="input-group">
												<div class="input-group-prepend">
													<button class="btn btn-secondary" type="button">Go!</button>
												</div>
												<input type="text" class="form-control" placeholder="Search for..."/>
											</div>
										</div>
										<div class="form-group">
											<label>Right Addon Button</label>
											<div class="input-group">
												<input type="text" class="form-control" placeholder="Search for..."/>
												<div class="input-group-append">
													<button class="btn btn-secondary" type="button">Go!</button>
												</div>
											</div>
										</div>
										<div class="form-group">
											<label>Left & Right Addon Button</label>
											<div class="input-group">
												<div class="input-group-prepend">
													<button class="btn btn-secondary" type="button">Go!</button>
												</div>
												<input type="text" class="form-control" placeholder="Search for..."/>
												<div class="input-group-append">
													<button class="btn btn-secondary" type="button">Go!</button>
												</div>
											</div>
										</div>
										<div class="form-group">
											<label>Left Addon Button</label>
											<div class="input-group">
												<div class="input-group-prepend">
													<button class="btn btn-primary" type="button">Go!</button>
												</div>
												<input type="text" class="form-control" placeholder="Search for..."/>
											</div>
										</div>
										<div class="form-group">
											<label>Right Addon Button</label>
											<div class="input-group">
												<input type="text" class="form-control" placeholder="Search for..."/>
												<div class="input-group-append">
													<button class="btn btn-primary" type="button">Go!</button>
												</div>
											</div>
										</div>
										<div class="form-group mb-2">
											<label>Left & Right Addon Button</label>
											<div class="input-group">
												<div class="input-group-prepend">
													<button class="btn btn-success" type="button">Go!</button>
												</div>
												<input type="text" class="form-control" placeholder="Search for..."/>
												<div class="input-group-append">
													<button class="btn btn-warning" type="button">Go!</button>
												</div>
											</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>
								<!--end::Form-->
							</div>
						

Buttons With Dropdowns

Some help content goes here
Some help content goes here
Some help content goes here

							<div class="card card-custom">
								<div class="card-header">
									<h3 class="card-title">
										Buttons With Dropdowns
									</h3>
								</div>
								<!--begin::Form-->
								<form class="form">
									<div class="card-body">
										<div class="form-group">
											<div class="alert alert-custom alert-default" role="alert">
												<div class="alert-icon"><i class="flaticon-warning text-primary"></i></div>
												<div class="alert-text">
													The example form below demonstrates common HTML form elements that receive updated styles from Bootstrap with additional classes.
												</div>
											</div>
										</div>
										<div class="form-group">
											<label>Left Button Dropdown</label>
											<div class="input-group">
												<div class="input-group-prepend">
													<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
													Action
													</button>
													<div class="dropdown-menu">
														<a class="dropdown-item" href="#">Action</a>
														<a class="dropdown-item" href="#">Another action</a>
														<a class="dropdown-item" href="#">Something else here</a>
														<div role="separator" class="dropdown-divider"></div>
														<a class="dropdown-item" href="#">Separated link</a>
													</div>
												</div>
												<input type="text" class="form-control" aria-label="Text input with dropdown button"/>
											</div>
											<span class="form-text text-muted">Some help content goes here</span>
										</div>
										<div class="form-group">
											<label>Right Button Dropdown</label>
											<div class="input-group">
												<input type="text" class="form-control" aria-label="Text input with dropdown button"/>
												<div class="input-group-append">
													<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
													Action
													</button>
													<div class="dropdown-menu">
														<a class="dropdown-item" href="#">Action</a>
														<a class="dropdown-item" href="#">Another action</a>
														<a class="dropdown-item" href="#">Something else here</a>
														<div role="separator" class="dropdown-divider"></div>
														<a class="dropdown-item" href="#">Separated link</a>
													</div>
												</div>
											</div>
											<span class="form-text text-muted">Some help content goes here</span>
										</div>
										<div class="form-group mb-2">
											<label>Left & Right Button Dropdown</label>
											<div class="input-group">
												<div class="input-group-prepend">
													<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
													Action
													</button>
													<div class="dropdown-menu">
														<a class="dropdown-item" href="#">Action</a>
														<a class="dropdown-item" href="#">Another action</a>
														<a class="dropdown-item" href="#">Something else here</a>
														<div role="separator" class="dropdown-divider"></div>
														<a class="dropdown-item" href="#">Separated link</a>
													</div>
												</div>
												<input type="text" class="form-control" aria-label="Text input with dropdown button"/>
												<div class="input-group-append">
													<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
													Action
													</button>
													<div class="dropdown-menu">
														<a class="dropdown-item" href="#">Action</a>
														<a class="dropdown-item" href="#">Another action</a>
														<a class="dropdown-item" href="#">Something else here</a>
														<div role="separator" class="dropdown-divider"></div>
														<a class="dropdown-item" href="#">Separated link</a>
													</div>
												</div>
											</div>
											<span class="form-text text-muted">Some help content goes here</span>
										</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>
								<!--end::Form-->
							</div>
						

Solid Style

Some help content goes here
Some help content goes here
Some help content goes here
Some help content goes here

							<div class="card card-custom">
								<div class="card-header">
									<h3 class="card-title">
										Solid Style
									</h3>
								</div>
								<!--begin::Form-->
								<form class="form">
									<div class="card-body">
										<div class="form-group">
											<div class="alert alert-custom alert-default" role="alert">
												<div class="alert-icon"><i class="flaticon-warning text-primary"></i></div>
												<div class="alert-text">
													The example form below demonstrates common HTML form elements that receive updated styles from Bootstrap with additional classes.
												</div>
											</div>
										</div>
										<div class="form-group">
											<label>Left Addon</label>
											<div class="input-group input-group-solid">
												<div class="input-group-prepend"><span class="input-group-text"><i class="la la-exclamation-triangle icon-lg"></i></span></div>
												<input type="text" class="form-control" placeholder="Email" />
											</div>
											<span class="form-text text-muted">Some help content goes here</span>
										</div>
										<div class="form-group">
											<label>Right Addon</label>
											<div class="input-group input-group-solid">
												<input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2"/>
												<div class="input-group-append"><span class="input-group-text"><i class="la la-group icon-lg"></i></span></div>
											</div>
										</div>
										<div class="form-group">
											<label>Left Button Dropdown</label>
											<div class="input-group input-group-solid">
												<div class="input-group-prepend">
													<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
													Action
													</button>
													<div class="dropdown-menu">
														<a class="dropdown-item" href="#">Action</a>
														<a class="dropdown-item" href="#">Another action</a>
														<a class="dropdown-item" href="#">Something else here</a>
														<div role="separator" class="dropdown-divider"></div>
														<a class="dropdown-item" href="#">Separated link</a>
													</div>
												</div>
												<input type="text" class="form-control" aria-label="Text input with dropdown button"/>
											</div>
											<span class="form-text text-muted">Some help content goes here</span>
										</div>
										<div class="form-group">
											<label>Right Button Dropdown</label>
											<div class="input-group input-group-solid">
												<input type="text" class="form-control" aria-label="Text input with dropdown button"/>
												<div class="input-group-append">
													<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
													Action
													</button>
													<div class="dropdown-menu dropdown-menu-right">
														<a class="dropdown-item" href="#">Action</a>
														<a class="dropdown-item" href="#">Another action</a>
														<a class="dropdown-item" href="#">Something else here</a>
														<div role="separator" class="dropdown-divider"></div>
														<a class="dropdown-item" href="#">Separated link</a>
													</div>
												</div>
											</div>
											<span class="form-text text-muted">Some help content goes here</span>
										</div>
										<div class="form-group">
											<label>Left & Right Button Dropdown</label>
											<div class="input-group input-group-solid">
												<div class="input-group-prepend">
													<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
													Action
													</button>
													<div class="dropdown-menu">
														<a class="dropdown-item" href="#">Action</a>
														<a class="dropdown-item" href="#">Another action</a>
														<a class="dropdown-item" href="#">Something else here</a>
														<div role="separator" class="dropdown-divider"></div>
														<a class="dropdown-item" href="#">Separated link</a>
													</div>
												</div>
												<input type="text" class="form-control" aria-label="Text input with dropdown button"/>
												<div class="input-group-append">
													<button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
													Action
													</button>
													<div class="dropdown-menu dropdown-menu-right">
														<a class="dropdown-item" href="#">Action</a>
														<a class="dropdown-item" href="#">Another action</a>
														<a class="dropdown-item" href="#">Something else here</a>
														<div role="separator" class="dropdown-divider"></div>
														<a class="dropdown-item" href="#">Separated link</a>
													</div>
												</div>
											</div>
											<span class="form-text text-muted">Some help content goes here</span>
										</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>
								<!--end::Form-->
							</div>
						

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