Page Elements

Lone Wolf UI Kit

Before you begin...

Make sure you are familiar with Bootstrap's general structure and what's available out-of-the-box. Review their documentation on proper use of the The Grid System and Responsive Utilities in particular, these sections are imperative to writing Bootstrap semantic markup and will save you time with responsive work. Their JavaScript section covers all the plug-ins that come with the framework.

Any of the elements and components found within this UI Kit are ready to use! Just copy and paste. We've made a point of including accessibility attributes—these are important for those who use screen readers and other assistance tools, don't forget to update them so they are logical in the context you are using them in.


Buttons

Default Buttons

These are the two main button classes. 'Default' should be used in most instances, unless drawing attention to an important action. Link buttons are great for a subtle effect and for areas that are cramped for space, such as within modal footers and sidebars.

View Accessibility Notes

 <button class="btn btn-raised btn-default">Default</button>
 <button class="btn btn-raised btn-primary">Primary</button>
 <button class="btn btn-link">Link Button</button>

Action Buttons

These buttons should be used very sparingly, and only to accentuate or support an important action.

 <button class="btn btn-raised btn-info">Info</button>
 <button class="btn btn-raised btn-success">Success</button>
 <button class="btn btn-raised btn-warning">Warning</button>
 <button class="btn btn-raised btn-danger">Danger</button>

Outline Buttons

For accent use only.
Create a stylized, minimalist look using the .btn-*-outline classes.

Ghost Buttons

For accent use only.
The .btn-ghost and .btn-outline-ghost are semi-transparent for use on dark backgrounds or photo backgrounds.


 

 <button class="btn btn-ghost">Ghost Button</button>
 <button class="btn btn-ghost-outline">Ghost Outline</button>

Sizes

Buttons come in four sizes:

 <button class="btn btn-raised btn-primary btn-lg">Large</button>
 <button class="btn btn-raised btn-primary">Normal</button>
 <button class="btn btn-raised btn-primary btn-sm">Small</button>
 <button class="btn btn-raised btn-primary btn-xs">Extra Small</button>

Style Variations

Add a raised effect to a button by adding the .btn-raised class.
The circular Floating Action Button, or .btn-fab buttons, should be reserved only for appropriate important page actions. A Floating Action Button should only be used ONCE per page. See Google's Documentation.

 <button class="btn btn-default">Default</button>
 <button class="btn btn-default btn-raised">Raised</button>
 <button class="btn btn-default btn-raised" aria-label="REPLACE ME"><i class="material-icons" aria-hidden="true">done</i></button>
 <button class="btn btn-default btn-raised"><i class="material-icons" aria-hidden="true">arrow_back</i> With Icon</button>
 <button class="btn btn-default btn-raised btn-fab btn-fab-mini" aria-label="REPLACE ME"><i class="material-icons" aria-hidden="true">favorite</i></button>
 <button class="btn btn-default btn-raised btn-fab" aria-label="REPLACE ME"><i class="material-icons" aria-hidden="true">add</i></button>

Button Groups

Group Buttons together using the .btn-group class. You can style and size all buttons within the group using the .btn-group-* classes.

View Accessibility Notes

 <div class="btn-group" role="group" aria-label="REPLACE ME">
	<button type="button" class="btn btn-primary">One</button>
	<button type="button" class="btn btn-primary">Two</button>
	<button type="button" class="btn btn-primary">Three</button>
 </div>

 <div class="btn-group btn-group-sm btn-group-raised" role="group" aria-label="REPLACE ME">
	<button type="button" class="btn btn-default" aria-label="REPLACE ME">
		<i class="material-icons" aria-hidden="true">format_align_left</i>
	</button>
	<button type="button" class="btn btn-default" aria-label="REPLACE ME">
    	<i class="material-icons" aria-hidden="true">format_align_center</i>
    </button>
	<button type="button" class="btn btn-default" aria-label="REPLACE ME">
		<i class="material-icons" aria-hidden="true">format_align_right</i>
	</button>
	<button type="button" class="btn btn-default" aria-label="REPLACE ME">
		<i class="material-icons" aria-hidden="true">format_align_justify</i>
	</button>
 </div>

Typography

Use typography styles as defined in Bootstrap. We will review a few key typography style options here on this page, but you should refer to Bootstrap's documentation for the full range of options.

Heading sizes with small secondary text

h1 Bootstrap heading Secondary text

h2 Bootstrap heading Secondary text

h3 Bootstrap heading Secondary text

h4 Bootstrap heading Secondary text

h5 Bootstrap heading Secondary text
h6 Bootstrap heading Secondary text
<h1>h1 Bootstrap heading <small>Secondary text</small></h1>

Text and Helper Classes

Use paragraph and span styles as defined in Bootstrap. Make use of their Helper Classes for both text and layout when needed. Helper Classes include things like .clearfix, .text-justify and .pull-left which help with layout structure, as well as contextual color options for text.
Here are just a few examples, please see the Bootstrap documentation for the full list of options.

Lead paragraph

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

Small paragraph
This line of text is meant to be treated as fine print.
<p class="lead">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>
<small>This line of text is meant to be treated as fine print.</small>

Contextual Colors

Style to make 'muted' text.

Style to make 'primary' text.

Style to make 'success' text.

Style to make 'info' text.

Style to make 'warning' text.

Style to make 'danger' text.

<p class="text-warning">Style to make 'warning' text.</p>

Blockquote, Address Block and List Styles

Knowing these helpful typographic elements is handy when you need to format text. Here are a few options:

Reverse Blockquote

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title
Address Block
Twitter, Inc.
1355 Market Street, Suite 900
San Francisco, CA 94103
P: (123) 456-7890
Unstyled List
  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel

IMPORTANT! Again, these are just a few examples to get you started. For a full-list and in-depth customization options, please refer to the Bootstrap documentation.

All Bootstrap Elements (Open in new tab)


Responsive Utilities

If you haven't already, we highly recommend brushing up on the Responsive Utilities, like .hidden-xs, .visible-md-inline-block, to be aware of ways to easily show or hide content/elements based on pre-defined Media Queries.

These classes are especially helpful when designing for smaller screens. A simple example would be hiding text within a button on mobile devices to save horizontal space.

View Accessibility Notes

Example: Hide button text on smaller screens

Slowly resize your browser window, the text within the second button should become hidden around 1200px.

 vs. 

All Responsive Utilities (Open in new tab)


Icons

We are using Google's Material Design (GMD) icon set. Google provides a full library of the icons. Just navigate to the Full Icon Set, then copy and paste icons!

View Accessibility Notes

Google Icon Set


Full Icon Set (open in a new tab)

 <i class="material-icons" aria-hidden="true">done</i>

IMPORTANT! You do not need to link to the font stylesheet shown below if you are working within one of the re-branded Lone Wolf products; the link should already be included in the head of the document. This link is only provided for reference if your project is starting from scratch.

 <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />

Cards

Cards are introduced in Bootstrap 4, but go ahead and use them now whenever you want.

A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options. If you're familiar with Bootstrap 3, cards replace our old panels, wells, and thumbnails. Similar functionality to those components is available as modifier classes for cards. — Source.

Cards accept a variety of structural and class mix-ins to quickly change their look, such as .card-primary+ .card-inverse, .text-xs-center, .card-primary-outline, .card-secondary-outline, and .card-raised.
Add headers and footers to the .card-block with .card-header and .card-footer.

View Accessibility Notes

Card image cap

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Button

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title
Featured Card Header

Special title here

Some quick example text to build on the card title and make up the bulk of the card's content.

Card title

Support card subtitle
Card image cap

Special title here

Some quick example text to build on the card title and make up the bulk of the card's content.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title
 <div class="card">
	<div class="card-header">
		Featured Card Header
	</div>
	<div class="card-block">
		<h4 class="card-title">Special title here</h4>
		<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
	</div>
 </div>

Tables

All Boostrap classes for tables are supported and improved.

View Accessibility Notes

Simple Table with Actions

Ranking# Name Title Since Total Sales Actions
1 Helen K. Pompeii Sales Representative 2013 $225,810,000
2 Michelle Brown Broker 2012 $221,295,000
3 Franky Ocean Sales Representative 2010 $198,332,000
 <div class="table-responsive">
	<table class="table">
		<thead>
			<tr>
				<th class="text-center" scope="col"><span class="sr-only">Ranking</span><span aria-hidden="true">#</span></th>
				<th scope="col">Name</th>
				<th scope="col">Title</th>
				<th scope="col">Since</th>
				<th class="text-right" scope="col">Total Sales</th>
				<th class="text-right" scope="col">Actions</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td class="text-center">1</td>
				<td>Helen K. Pompeii</td>
				<td>Sales Representative</td>
				<td>2013</td>
				<td class="text-right"> $225,810,000</td>
				<td class="td-actions text-right">
					<button type="button" rel="tooltip" title="View Profile" class="btn btn-info btn-sm" aria-label="REPLACE ME">
						<i class="material-icons" aria-hidden="true">perm_identity</i>
					</button>
					<button type="button" rel="tooltip" title="Edit Profile" class="btn btn-default btn-sm" aria-label="REPLACE ME">
						<i class="material-icons" aria-hidden="true">settings</i>
					</button>
					<button type="button" rel="tooltip" title="Remove" class="btn btn-danger btn-sm" aria-label="REPLACE ME">
						<i class="material-icons" aria-hidden="true">delete_forever</i>
					</button>
				</td>
			</tr>
			<tr>
				<td class="text-center">2</td>
				<td>Michelle Brown</td>
				<td>Broker</td>
				<td>2012</td>
				<td class="text-right"> $221,295,000</td>
				<td class="td-actions text-right">
					<button type="button" rel="tooltip" title="View Profile" class="btn btn-info btn-sm" aria-label="REPLACE ME">
						<i class="material-icons" aria-hidden="true">perm_identity</i>
					</button>
					<button type="button" rel="tooltip" title="Edit Profile" class="btn btn-default btn-sm" aria-label="REPLACE ME">
						<i class="material-icons" aria-hidden="true">settings</i>
					</button>
					<button type="button" rel="tooltip" title="Remove" class="btn btn-danger btn-sm" aria-label="REPLACE ME">
						<i class="material-icons" aria-hidden="true">delete_forever</i>
					</button>
				</td>
			</tr>
			<tr>
				<td class="text-center">3</td>
				<td>Franky Ocean</td>
				<td>Sales Representative</td>
				<td>2010</td>
				<td class="text-right"> $198,332,000</td>
				<td class="td-actions text-right">
					<button type="button" rel="tooltip" title="View Profile" class="btn btn-info btn-sm" aria-label="REPLACE ME">
						<i class="material-icons" aria-hidden="true">perm_identity</i>
					</button>
					<button type="button" rel="tooltip" title="Edit Profile" class="btn btn-default btn-sm" aria-label="REPLACE ME">
						<i class="material-icons" aria-hidden="true">settings</i>
					</button>
					<button type="button" rel="tooltip" title="Remove" class="btn btn-danger btn-sm" aria-label="REPLACE ME">
						<i class="material-icons" aria-hidden="true">delete_forever</i>
					</button>
				</td>
			</tr>
		</tbody>
	</table>
 </div>

Complex Table with Many Actions

Alternate row background colours with .table-striped. Use the .table-hover to add row highlight on :hover.

For tables that contain many action items, make use of the .btn-group + .dropdown-toggle + .dropdown-menu combination. Read more about Button Groups and Dropdowns above.

Name Email Status Tools Billing
Helen K. Pompeii hkpompeii@gmail.com Active
Michelle Brown m.brown@examplerealty.com Active
Franky Ocean frankyo@hotmail.com Active
 <div class="table-responsive">
	<table class="table table-striped table-hover">
		<thead>
			<tr>
				<th scope="col">Name</th>
				<th scope="col">Email</th>
				<th scope="col">Status</th>
				<th class="text-right" scope="col">Tools</th>
				<th class="text-right" scope="col">Billing</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>Helen K. Pompeii</td>
				<td>hkpompeii@gmail.com</td>
				<td>Active</td>
				<td class="text-right">
					<button type="button" rel="tooltip" title="View Notes" class="btn btn-default btn-sm" aria-label="REPLACE ME">
						<i class="material-icons" aria-hidden="true">assignment</i>
					</button>
					<button type="button" rel="tooltip" title="Tickets" class="btn btn-default btn-sm" aria-label="REPLACE ME">
						<i class="material-icons" aria-hidden="true">help</i>
					</button>
					<button type="button" rel="tooltip" title="Login" class="btn btn-info btn-sm" aria-label="REPLACE ME">
						<i class="material-icons" aria-hidden="true">person</i>
					</button>
					<button type="button" rel="tooltip" title="UA Documents" class="btn btn-default btn-sm" aria-label="REPLACE ME">
						<i class="material-icons" aria-hidden="true">folder</i>
					</button>
					<div class="btn-group dropdown">
						<button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-haspopup="true">
							More
							<span class="sr-only">Toggle Dropdown</span>
						</button>
						<ul class="dropdown-menu" role="menu"  aria-hidden="true">
							<li><a href="#" role="menuitem">Features</a></li>
							<li role="separator" class="divider"></li>
							<li><a href="#" role="menuitem">Send Email</a></li>
							<li><a href="#" role="menuitem">Assign MLS</a></li>
							<li><a href="#" role="menuitem">Brokerage</a></li>
							<li role="separator" class="divider"></li>
							<li><a href="#" role="menuitem">Domains</a></li>
						</ul>
					</div>
				</td>
				<td class="td-actions text-right">
					<!-- Split button -->
					<div class="btn-group dropdown">
						<button type="button" class="btn btn-default btn-sm">Billing</button>
						<button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-haspopup="true">
							<span class="sr-only">Toggle Dropdown</span>
						</button>
						<ul class="dropdown-menu" role="menu" aria-hidden="true">
							<li><a href="#" role="menuitem">Update Credit Card</a></li>
							<li><a href="#" role="menuitem">Place Charge</a></li>
							<li><a href="#" role="menuitem">Invoices</a></li>
							<li role="separator" class="divider"></li>
							<li><a href="#" role="menuitem">Remove All Paid Features</a></li>
						</ul>
					</div>
				</td>
			</tr>
			<tr>
				<td>Michelle Brown</td>
				<td>m.brown@examplerealty.com</td>
				<td>Active</td>
				<td class="text-right">
					<button type="button" rel="tooltip" title="View Notes" class="btn btn-default btn-sm" aria-label="REPLACE ME">
						<i class="material-icons" aria-hidden="true">assignment</i>
					</button>
					<button type="button" rel="tooltip" title="Tickets" class="btn btn-default btn-sm" aria-label="REPLACE ME">
						<i class="material-icons" aria-hidden="true">help</i>
					</button>
					<button type="button" rel="tooltip" title="Login" class="btn btn-info btn-sm" aria-label="REPLACE ME">
						<i class="material-icons" aria-hidden="true">person</i>
					</button>
					<button type="button" rel="tooltip" title="UA Documents" class="btn btn-default btn-sm" aria-label="REPLACE ME">
						<i class="material-icons" aria-hidden="true">folder</i>
					</button>
					<div class="btn-group dropdown">
						<button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-haspopup="true">
							More
							<span class="sr-only">Toggle Dropdown</span>
						</button>
						<ul class="dropdown-menu" role="menu" aria-hidden="true">
							<li><a href="#" role="menuitem">Features</a></li>
							<li role="separator" class="divider"></li>
							<li><a href="#" role="menuitem">Send Email</a></li>
							<li><a href="#" role="menuitem">Assign MLS</a></li>
							<li><a href="#" role="menuitem">Brokerage</a></li>
							<li role="separator" class="divider"></li>
							<li><a href="#" role="menuitem">Domains</a></li>
						</ul>
					</div>
				</td>
				<td class="td-actions text-right">
					<!-- Split button -->
					<div class="btn-group dropdown">
						<button type="button" class="btn btn-default btn-sm">Billing</button>
						<button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-haspopup="true">
							<span class="sr-only">Toggle Dropdown</span>
						</button>
						<ul class="dropdown-menu" role="menu" aria-hidden="true">
							<li><a href="#" role="menuitem">Update Credit Card</a></li>
							<li><a href="#" role="menuitem">Place Charge</a></li>
							<li><a href="#" role="menuitem">Invoices</a></li>
							<li role="separator" class="divider"></li>
							<li><a href="#" role="menuitem">Remove All Paid Features</a></li>
						</ul>
					</div>
				</td>
			</tr>
			<tr>
				<td>Franky Ocean</td>
				<td>frankyo@hotmail.com</td>
				<td>Active</td>
				<td class="text-right">
					<button type="button" rel="tooltip" title="View Notes" class="btn btn-default btn-sm" aria-label="REPLACE ME">
						<i class="material-icons" aria-hidden="true">assignment</i>
					</button>
					<button type="button" rel="tooltip" title="Tickets" class="btn btn-default btn-sm" aria-label="REPLACE ME">
						<i class="material-icons" aria-hidden="true">help</i>
					</button>
					<button type="button" rel="tooltip" title="Login" class="btn btn-info btn-sm" aria-label="REPLACE ME">
						<i class="material-icons" aria-hidden="true">person</i>
					</button>
					<button type="button" rel="tooltip" title="UA Documents" class="btn btn-default btn-sm" aria-label="REPLACE ME ">
						<i class="material-icons" aria-hidden="true">folder</i>
					</button>
					<div class="btn-group dropdown">
						<button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-haspopup="true">
							More
							<span class="sr-only">Toggle Dropdown</span>
						</button>
						<ul class="dropdown-menu" role="menu" aria-hidden="true">
							<li><a href="#" role="menuitem">Features</a></li>
							<li role="separator" class="divider"></li>
							<li><a href="#" role="menuitem">Send Email</a></li>
							<li><a href="#" role="menuitem">Assign MLS</a></li>
							<li><a href="#" role="menuitem">Brokerage</a></li>
							<li role="separator" class="divider"></li>
							<li><a href="#" role="menuitem">Domains</a></li>
						</ul>
					</div>
				</td>
				<td class="td-actions text-right">
					<!-- Split button -->
					<div class="btn-group dropdown">
						<button type="button" class="btn btn-default btn-sm">Billing</button>
						<button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-haspopup="true">
							<span class="sr-only">Toggle Dropdown</span>
						</button>
						<ul class="dropdown-menu" role="menu" aria-hidden="true">
							<li><a href="#" role="menuitem">Update Credit Card</a></li>
							<li><a href="#" role="menuitem">Place Charge</a></li>
							<li><a href="#" role="menuitem">Invoices</a></li>
							<li role="separator" class="divider"></li>
							<li><a href="#" role="menuitem">Remove All Paid Features</a></li>
						</ul>
					</div>
				</td>
			</tr>
		</tbody>
	</table>
 </div>

Sorting Table With Filters

Use tablesorter.js to sort and filter data within tables using the inputs within the thead. You must include thead in your table for tablesorter.js to work!

Additionally, we pair the Bootstrap 3 Theme with the base plugin, so be sure to include the related CSS files for it.

View Accessibility Notes

First Name Last Name Gender English Japanese Calculus
GillianWongfemale807092
StacySinatrafemale9088100
StephenGillmale859580
GordonMcAllenmale6055100
Alisafemale728095
JustinSmithmale10099100
RobMmale856890
PhilFoalsmale1009090
TeaganFoalsmale805065
Carlmale85100100
HelenWongfemale8685100
JoeyDeraymale1007570
Heatherfemale10080100
Brittanyfemale504555
ChristopherKmale9535100

Alerts

For these alert examples we used the .container-fluid class, so they will be fluid, please use the class .container when you use them outside of the .wrapper so they will be aligned with the general page container.

IMPORTANT! Ensure you use the Material Design .material-icons icon for the close button.

View Accessibility Notes

 <div class="alert alert-info" role="alert" aria-label="REPLACE ME" aria-describedby="REPLACE ME">
	<div class="container-fluid">
		<div class="alert-icon" aria-hidden="true">
			<i class="material-icons">info_outline</i>
		</div>
		<button type="button" class="close" data-dismiss="alert" aria-label="Close">
			<i class="material-icons" aria-hidden="true">clear</i>
		</button>

		<span id="REPLACE ME"><b>Info Alert:</b> Your Ticket #33333 has been updated.</span>
	</div>
 </div>