{% extends 'layouts/base.html' %}
{% load static %}
{% block sidebar_class %}
	sidebar sidebar-style-2
{% endblock sidebar_class %}
{% block content %}
	<div class="content">
		<div class="page-inner">
			<div class="page-header">
				<h4 class="page-title">Typography</h4>
				<ul class="breadcrumbs">
					<li class="nav-home">
						<a href="#">
							<i class="flaticon-home"></i>
						</a>
					</li>
					<li class="separator">
						<i class="flaticon-right-arrow"></i>
					</li>
					<li class="nav-item">
						<a href="#">Base</a>
					</li>
					<li class="separator">
						<i class="flaticon-right-arrow"></i>
					</li>
					<li class="nav-item">
						<a href="#">Typography</a>
					</li>
				</ul>
			</div>
			<div class="row">
				<div class="col-md-12">
					<div class="card">
						<div class="card-header">
							<div class="card-title">Card Title</div>
							<div class="card-category">Card Category</div>
						</div>
						<div class="card-body">
							<table class="table table-typo">
								<tbody>
									<tr>
										<td>
											<p>Header 1</p>

										</td>
										<td><span class="h1">h1. Bootstrap heading</span></td>
									</tr>
									<tr>
										<td>
											<p>Header 2</p>

										</td>
										<td><span class="h2">h2. Bootstrap heading</span></td>
									</tr>
									<tr>
										<td>
											<p>Header 3</p>

										</td>
										<td><span class="h3">h3. Bootstrap heading</span></td>
									</tr>
									<tr>
										<td>
											<p>Header 4</p>

										</td>
										<td><span class="h4">h4. Bootstrap heading</span></td>
									</tr>
									<tr>
										<td>
											<p>Header 5</p>

										</td>
										<td><span class="h5">h5. Bootstrap heading</span></td>
									</tr>
									<tr>
										<td>
											<p>Header 5</p>

										</td>
										<td><span class="h6">h6. Bootstrap heading</span></td>
									</tr>
									<tr>
										<td>
											<p>Paragraph</p>

										</td>
										<td><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p></td>
									</tr>
									<tr>
										<td>
											<p>Paragraph Lead</p>

										</td>
										<td><p class="lead">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p></td>
									</tr>
									<tr>
										<td>
											<p>Quote</p>

										</td>
										<td><blockquote>
											<p class="blockquote blockquote-primary">
												"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book."
												<br>
												<br>
												<small>
													- Noaa
												</small>
											</p>
										</blockquote></td>
									</tr>
									<tr>
										<td>
											<p>Primary Text</p>

										</td>
										<td><p class="text-primary">Lorem Ipsum is simply dummy text of the printing and typesetting industry...</p></td>
									</tr>
									<tr>
										<td>
											<p>Info Text</p>

										</td>
										<td><p class="text-info">Lorem Ipsum is simply dummy text of the printing and typesetting industry...</p></td>
									</tr>
									<tr>
										<td>
											<p>Success Text</p>

										</td>
										<td><p class="text-success">Lorem Ipsum is simply dummy text of the printing and typesetting industry...</p></td>
									</tr>
									<tr>
										<td>
											<p>Warning Text</p>

										</td>
										<td><p class="text-warning">Lorem Ipsum is simply dummy text of the printing and typesetting industry...</p></td>
									</tr>
									<tr>
										<td>
											<p>Danger Text</p>

										</td>
										<td><p class="text-danger">Lorem Ipsum is simply dummy text of the printing and typesetting industry...</p></td>
									</tr>
									<tr>
										<td>
											<p>Muted Text</p>

										</td>
										<td><p class="text-muted">Lorem Ipsum is simply dummy text of the printing and typesetting industry...</p></td>
									</tr>
								</tbody>
							</table>
						</div>
						<div class="card-footer">
							<hr>
							Card Footer
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
{% endblock content %}

