TrackVia Protected: Style Guide

Branding

Favicon

Text

Fonts

Roboto

<h1 class="font-open-sans">Open Sans</h1>

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
<h1>Heading 1</h1>
								<h2>Heading 2</h2>
								<h3>Heading 3</h3>
								<h4>Heading 4</h4>
								<h5>Heading 5</h5>
								<h6>Heading 6</h6>

Display Headings

Display Heading 1

Display Heading 2

Display Heading 3

Display Heading 4

<h1 class="display-1">Display Heading 1</h1>
								 <h2 class="display-2">Display Heading 2</h2>
								 <h3 class="display-3">Display Heading 3</h3>
								 <h4 class="display-4">Display Heading 4</h4>

Paragraphs

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat dolorum fugit odit iste. Iste ea, maxime alias, eaque aspernatur, ipsa accusantium omnis repellat cum earum nostrum odit pariatur cupiditate modi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat dolorum fugit odit iste.

Cupiditate tenetur modi nobis expedita aperiam excepturi dolore dignissimos, quibusdam officiis, et ut rem nemo debitis. Odio voluptas rerum magnam, eveniet libero, obcaecati saepe nam officia quidem, nisi unde id! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat dolorum fugit odit iste.

Lead Text

Apply .lead to the paragraph to turn it into a lead text.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat dolorum fugit odit iste. Iste ea, maxime alias, eaque aspernatur, ipsa accusantium omnis repellat cum earum nostrum odit pariatur cupiditate modi.

Blockquotes

A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text.

Said no one, ever.

Lists

Definition list

Definition List Title
This is a definition list division.

Ordered List

  1. List Item 1
    1. List Item 1
    2. List Item 2
  2. List Item 2
  3. List Item 3
  4. List Item 4

Unordered List

  • Praesent aliquet quam et libero dictum, vitae dignissim
  • vestibulum non enim nec, tempor mollis mi.
    • Praesent aliquet quam et libero dictum, vitae dignissim
    • leo eleifend. In in turpis turpis. Quisque justo turpis,
  • Sed vel tristique quam.

Horizontal rules


<hr>

Tabular data

Table Caption
Table Heading 1 Table Heading 2 Table Heading 3 Table Heading 4 Table Heading 5
Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5
Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5
Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5

Inline elements

This is a text link.

Strong is used to indicate strong importance.

This text has added emphasis.

The u element is text with an unarticulated, though explicitly rendered, non-textual annotation.

This text has a strikethrough.

Superscript®.

Subscript for things like H2O.

This small text is small for for fine print, etc.

Icons

Blennder Theme uses Font Awesome for Icons

Icons - TrackVia

icon icon icon-blog
icon icon-use-cases
icon icon-business
icon icon-industries
icon icon-it-pros
icon icon-low-code
icon icon-pricing
icon icon-resources

Icons - Theme

fal fa-cog
fas fa-sort-down
fas fa-sort-up
far fa-chevron-left
far fa-chevron-right
far fa-chevron-down
far fa-chevron-up
fas fa-play
fas fa-pause
fal fa-user
far fa-phone
fal fa-long-arrow-right
fal fa-long-arrow-left
fal fa-clock
fal fa-check-circle
fal fa-check
far fa-search
far fa-search
fal fa-envelope
fal fa-expand-arrows
fal fa-times
<i class="far fa-search"></i>

Icons - Social

fab fa-facebook-f
fab fa-twitter
fab fa-instagram
fab fa-youtube
<i class="fab fa-facebook-f"></i>

Colors

Grays

white
gray-100
gray-200
gray-300
gray-400
gray-500
gray-600
gray-700
gray-800
gray-900
black

Theme Colors

.bg-primary
.bg-secondary
.bg-success
.bg-danger
.bg-warning
.bg-info
.bg-light
.bg-dark

Buttons

Buttons Sizes

<a href="#" class="btn btn-primary btn-sm">Small</a>
<a href="#" class="btn btn-primary btn-lg">Large</a>

Text Links

<a href="#" class="btn btn-text">Text Link</a>

Components

Cards

Card image cap
Featured
Card Title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Vestibulum at eros
	<div class="card" style="max-width: 18rem;">
		<img class="card-img-top" src="http://placehold.it/250x150" alt="Card image cap">
		<div class="card-header">Featured</div>
		<div class="card-body">
			<h5 class="card-title">Card Title</h5>
			<p class="card-text">Card Text....</p>
		</div>
		<ul class="list-group list-group-flush">
			<li class="list-group-item">Cras justo odio</li>
			<li class="list-group-item">Dapibus ac facilisis in</li>
			<li class="list-group-item">Vestibulum at eros</li>
		</ul>
		<div class="card-footer">
			<small class="text-muted">Last updated 3 mins ago</small>
		</div>
	</div>

Tabs

	<ul class="nav nav-tabs">
		<li class="nav-item">
			<a class="nav-link active" href="#">Tab 1</a>
		</li>
		<li class="nav-item">
			<a class="nav-link" href="#">Tab 2</a>
		</li>
	</ul>

Modals

Blog

Pagination

Forms