zuel-itsm-3.0.2/assets/views/ui_media.html

<!-- start: PAGE TITLE -->
<section id="page-title">
	<div class="row">
		<div class="col-sm-8">
			<h1 class="mainTitle" translate="sidebar.nav.element.MEDIA">{{ mainTitle }}</h1>
			<span class="mainDescription">Images, thumbnails and media object.</span>
		</div>
		<div ncy-breadcrumb></div>
	</div>
</section>
<!-- end: PAGE TITLE -->
<!-- start: MEDIA OBJECT -->
<div class="container-fluid container-fullw bg-white">
	<div class="row">
		<div class="col-md-12">
			<h5 class="over-title">Media <span class="text-bold">Object</span></h5>
			<p class="margin-bottom-30">
				Abstract object styles for building various types of components (like blog comments, Tweets, etc) that feature a left- or right-aligned image alongside textual content.
			</p>
			<div class="row">
				<div class="col-sm-6">
					<div class="panel panel-white">
						<div class="panel-heading">
							<div class="panel-title">
								Default media
							</div>
						</div>
						<div class="panel-body">
							<p class="text-small">
								The default media displays a media object (images, video, audio) to the left or right of a content block.
							</p>
							<ul class="media-list">
								<li class="media">
									<a href="#" class="pull-left">
										<img src="assets/images/media-user.png" alt="" class="media-object">
									</a>
									<div class="media-body">
										<h4 class="media-heading">Media heading</h4>
										<p>
											Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
										</p>
										<!-- Nested media object -->
										<div class="media">
											<a href="#" class="pull-left">
												<img src="assets/images/media-user.png" alt="" class="media-object">
											</a>
											<div class="media-body">
												<h4 class="media-heading">Nested media heading</h4>
												Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
												<!-- Nested media object -->
												<div class="media">
													<a href="#" class="pull-left">
														<img src="assets/images/media-user.png" alt="" class="media-object">
													</a>
													<div class="media-body">
														<h4 class="media-heading">Nested media heading</h4>
														Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
													</div>
												</div>
											</div>
										</div>
										<!-- Nested media object -->
										<div class="media">
											<a href="#" class="pull-left">
												<img src="assets/images/media-user.png" alt="" class="media-object">
											</a>
											<div class="media-body">
												<h4 class="media-heading">Nested media heading</h4>
												Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
											</div>
										</div>
									</div>
								</li>
								<li class="media">
									<a href="#" class="pull-right">
										<img src="assets/images/media-user.png" alt="" class="media-object">
									</a>
									<div class="media-body">
										<h4 class="media-heading">Media heading</h4>
										Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
									</div>
								</li>
								<li class="media">
									<a class="media-left" href="#">
										<img src="assets/images/media-user.png" alt="" class="media-object">
									</a>
									<div class="media-body">
										<h4 class="media-heading">Media heading</h4>
										Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
									</div>
									<a class="media-right" href="#">
										<img src="assets/images/media-user.png" alt="" class="media-object">
									</a>
								</li>
							</ul>
						</div>
					</div>
				</div>
				<div class="col-sm-6">
					<div class="panel panel-transparent">
						<div class="panel-heading">
							<div class="panel-title">
								Media alignment
							</div>
						</div>
						<div class="panel-body">
							<p class="text-small">
								The images or other media can be aligned top, middle, or bottom. The default is top aligned.
							</p>
							<div class="media">
								<a class="media-left" href="#">
									<img src="assets/images/media-user.png" alt="" class="media-object">
								</a>
								<div class="media-body">
									<h4 class="media-heading">Top aligned media</h4>
									<p>
										Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
									</p>
									<p>
										Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
									</p>
								</div>
							</div>
							<div class="media">
								<a class="media-left media-middle" href="#">
									<img src="assets/images/media-user.png" alt="" class="media-object">
								</a>
								<div class="media-body">
									<h4 class="media-heading">Middle aligned media</h4>
									<p>
										Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
									</p>
									<p>
										Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
									</p>
								</div>
							</div>
							<div class="media">
								<a class="media-left media-bottom" href="#">
									<img src="assets/images/media-user.png" alt="" class="media-object">
								</a>
								<div class="media-body">
									<h4 class="media-heading">Bottom aligned media</h4>
									<p>
										Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
									</p>
									<p class="no-margin">
										Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
									</p>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<!-- end: MEDIA OBJECT -->
<!-- start: IMAGES AND THUMBNAILS -->
<div class="container-fluid container-fullw">
	<div class="row">
		<div class="col-md-12">
			<h5 class="over-title margin-bottom-15">Images &amp; <span class="text-bold">Thumbnails</span></h5>
			<p>
				Extend Bootstrap's grid system with the thumbnail component to easily display grids of images, videos, text, and more.
			</p>
			<div class="row">
				<div class="col-sm-12">
					<div class="panel panel-white">
						<div class="panel-heading">
							<div class="panel-title">
								Default example
							</div>
						</div>
						<div class="panel-body">
							<p class="text-small">
								By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.
							</p>
							<div class="row">
								<div class="col-sm-6 col-md-3">
									<a href="#" class="thumbnail">
										<img src="assets/images/lion-565820_640.jpg" alt="">
									</a>
								</div>
								<div class="col-sm-6 col-md-3">
									<a href="#" class="thumbnail">
										<img src="assets/images/africa-17344_640.jpg" alt="">
									</a>
								</div>
								<div class="col-sm-6 col-md-3">
									<a href="#" class="thumbnail">
										<img src="assets/images/lion-403764_640.jpg" alt="">
									</a>
								</div>
								<div class="col-sm-6 col-md-3">
									<a href="#" class="thumbnail">
										<img src="assets/images/lion-565818_640.jpg" alt="">
									</a>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="col-sm-12 col-md-12">
					<div class="panel panel-transparent">
						<div class="panel-heading">
							<div class="panel-title">
								Custom Content
							</div>
						</div>
						<div class="panel-body">
							<p class="text-small">
								With a bit of extra markup, it's possible to add any kind of HTML content like headings, paragraphs, or buttons into thumbnails.
							</p>
							<div class="row">
								<div class="col-sm-6 col-md-3">
									<div class="thumbnail">
										<img src="assets/images/lion-565818_640.jpg" alt="">
										<div class="caption">
											<h3>Thumbnail label</h3>
											<p>
												Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
											</p>
											<p>
												<a href="#" class="btn btn-o btn-danger">
													Button
												</a>
												<a href="#" class="btn btn-o btn-primary">
													Button
												</a>
											</p>
										</div>
									</div>
								</div>
								<div class="col-sm-6 col-md-3">
									<div class="thumbnail">
										<img src="assets/images/lion-403764_640.jpg" alt="">
										<div class="caption">
											<h3>Thumbnail label</h3>
											<p>
												Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
											</p>
											<p>
												<a href="#" class="btn btn-o btn-danger">
													Button
												</a>
												<a href="#" class="btn btn-o btn-primary">
													Button
												</a>
											</p>
										</div>
									</div>
								</div>
								<div class="col-sm-6 col-md-3">
									<div class="thumbnail">
										<img src="assets/images/africa-17344_640.jpg" alt="">
										<div class="caption">
											<h3>Thumbnail label</h3>
											<p>
												Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
											</p>
											<p>
												<a href="#" class="btn btn-o btn-danger">
													Button
												</a>
												<a href="#" class="btn btn-o btn-primary">
													Button
												</a>
											</p>
										</div>
									</div>
								</div>
								<div class="col-sm-6 col-md-3">
									<div class="thumbnail">
										<img src="assets/images/lion-565820_640.jpg" alt="">
										<div class="caption">
											<h3>Thumbnail label</h3>
											<p>
												Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
											</p>
											<p>
												<a href="#" class="btn btn-o btn-danger">
													Button
												</a>
												<a href="#" class="btn btn-o btn-primary">
													Button
												</a>
											</p>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="col-sm-12 col-md-12">
					<div class="panel panel-transparent">
						<div class="panel-heading">
							<div class="panel-title">
								Image shapes
							</div>
						</div>
						<div class="panel-body">
							<p class="text-small">
								Add classes to an <code> &lt;img&gt;</code>
								element to easily style images in any project.
							</p>
							<div class="row">
								<div class="col-sm-4">
									<div class="row">
										<div class="col-xs-6 col-xs-offset-3">
											<img src="assets/images/lion-565818_640.jpg" class="img-rounded img-responsive margin-bottom-15" alt="A generic image with rounded corners">
										</div>
										<div class="col-xs-12">
											<div class="well well-sm margin-bottom-15 text-center">
												<span class="nt">&lt;img </span><span class="na">src=</span><span class="s">"..." </span><span class="na">alt=</span><span class="s">"..." </span><span class="na">class=</span><span class="s">"img-rounded"</span><span class="nt">&gt;</span>
											</div>
										</div>
									</div>
								</div>
								<div class="col-sm-4">
									<div class="row">
										<div class="col-xs-6 col-xs-offset-3">
											<img src="assets/images/lion-565818_640.jpg" class="img-circle img-responsive margin-bottom-15" alt="A generic image where only the portion within the circle circumscribed about said square is visible">
										</div>
										<div class="col-xs-12">
											<div class="well well-sm margin-bottom-15 text-center">
												<span class="nt">&lt;img </span><span class="na">src=</span><span class="s">"..." </span><span class="na">alt=</span><span class="s">"..." </span><span class="na">class=</span><span class="s">"img-circle"</span><span class="nt">&gt;</span>
											</div>
										</div>
									</div>
								</div>
								<div class="col-sm-4">
									<div class="row">
										<div class="col-xs-6 col-xs-offset-3">
											<img src="assets/images/lion-565818_640.jpg" class="img-thumbnail img-responsive margin-bottom-15" alt="A generic image with a white border around it, making it resemble a photograph taken with an old instant camera">
										</div>
										<div class="col-xs-12">
											<div class="well well-sm margin-bottom-15 text-center">
												<span class="nt">&lt;img </span><span class="na">src=</span><span class="s">"..." </span><span class="na">alt=</span><span class="s">"..." </span><span class="na">class=</span><span class="s">"img-thumbnail"</span><span class="nt">&gt;</span>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<!-- end: IMAGES AND THUMBNAILS -->