memberdev Docs
Global
Components
Forms
Tables

Global

Icons

e900 e901 e902 e903 e904 e905 e906 e907 e908 e909 e90a e90b e90c e90d e90e e90f e910 e911 e912 e913 e914 e915 e916 e917 e918 e919 e91a e91b e91c e91d e91e e91f e920 e921 e922 e923 e924 e925 e926 e927 e928 e929 e92a e92b e92c e92d e92e e92f e930 e931 e932 e933 e934 e935 e936 e937 e938 e939 e93a e93b e93c e93d e93e e93f e940 e941 e942 e943 e944 e945 e946 e947 e948 e949 e94a e94b e94c e94d e94e e94f e950 e951 e952 e953 e954 e955 e956 e957 e958 e959 e95a e95b e95c e95d e95e e95f e960 e961 e962 e963 e964 e965 e966 e967 e968 e969 e96a e96b e96c e96d e96e e96f e970 e971 e972 e973 e974 e975 e976 e977 e978 e979 e97a e97b e97c e97d e97e e97f e980 e981 e982 e983 e984 e985 e986 e987 e988 e989 e98a e98b e98c e98d e98e e98f e990 e991 e992 e993 e994 e995 e996 e997 e998 e999 e99a e99b e99c e99d e99e e99f e9a0 e9a1 e9a2 e9a3 e9a4 e9a5 e9a6 e9a7 e9a8 e9a9 e9aa e9ab e9ac e9ad e9ae e9af e9b0 e9b1 e9b2 e9b3 e9b4 e9b5 e9b6 e9b7 e9b8 e9b9 e9ba e9bb e9bc e9bd e9be e9bf e9c0 e9c1 e9c2 e9c3 e9c4 e9c5 e9c6 e9c7 e9c8 e9c9 e9ca e9cb e9cc e9cd e9ce e9cf e9d0 e9d1
Code
<i class="mdi mdi-code"></i>

Text

Type UI Display
h1

Header 1
h2

Header 2
h3

Header 3
h4

Header 4
h5
Header 5
h6
Header 6
p

Paragraph text
headline

Headline text
terms

Terms text
blockquote
Some quoted text...
Code
<h1>Header 1</h1>
<h2>Header 2</h2>
<h3>Header 3</h3>
<h4>Header 4</h4>
<h5>Header 5</h5>
<h6>Header 6</h6>

<p>Paragraph text</p>
<p class="headline">Paragraph text</p>
<p class="terms">Terms text</p>

<blockquote>Some quoted text...</blockquote>

Buttons

Type UI Display CSS Class
Default Default Button .btn.btn-default
Primary Primary Button .btn.btn-primary
CTA CTA Button .btn.btn-cta
Save Save Button .btn.btn-save
Delete Delete Button .btn.btn-delete
Trans (transparent) Trans Button .btn.btn-trans
Code
<a href="#" class="btn btn-default"></a>

Lists

Type UI Display CSS Class
List
  • List item
  • List item
  • List item
 .list
Check List
  • List item
  • List item
  • List item
 .list.list-check
Icon List
Nav Title
  • List item
  • List item
  • List item
 .list.list-icon
Inline List
  • List item
  • List item
  • List item
  • List item
 .list.list-inline
Nav List
Nav Title
Code
<ul class="list">
	<li>List item<li>
	<li>List item<li>
	<li>List item<li>
</ul>


<ul class="list list-nav">
	<li><a href="#">List item</a><li>
	<li><a href="#">List item</a><li>
	<li><a href="#">List item</a><li>
</ul>

Components

Cards

Category Date/Time
Card Title or Link

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Category Date/Time
Card Title or Link

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Category Date/Time
Card Title or Link

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Code
<div class="card">
	<div class="card-image">
		<a href="#"><img src="_base_images/placeholder-image.png" /></a>
	</div>
	<!--/.card-image-->
	<div class="card-content">
		<div class="meta">
			<span class="meta-label label-cat">Category</span>
			<span class="meta-label">Date/Time</span>
		</div>
		<!--/.meta-->	
		<h5 class="card-title"><a href="#">Card Title or Link</a></h5>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
	</div>
	<!--/.card-content-->
</div>
<!--/.card-->

Features

Feature Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Feature Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Feature Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Code
<div class="feature">
	<span class="feature-icon"><i class="fa fa-desktop"></i></span>
	<h3 class="feature-title">Feature Title</h3>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<!--/.feature-->

Items

Standard Items
Category Date/Time

Item Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Category Date/Time

Item Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Category Date/Time

Item Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Image Items
Category Date/Time

Item Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Category Date/Time

Item Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Category Date/Time

Item Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Number Items
1

Item Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

2

Item Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

3

Item Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Code
<div class="item item-with-image">
	<div class="item-image">
		<a href="#"><img src="_base_images/placeholder-thumb.png" /></a>
	</div>
	<!--/.item-image-->	
	<div class="meta">
		<span class="meta-label label-cat">Category</span>
		<span class="meta-label">Date/Time</span>
	</div>
	<!--/.meta-->	
	<h4 class="item-title"><a href="#">Item Title</a></h4>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<!--/.item-->

Metrics

Metric Label

Metric Value

Metric Label

Metric Value

Metric Label

Metric Value

Metric Label

Metric Value

Metric Label

Metric Value

Metric Label

Metric Value

Code
<div class="metric">
  	<span class="metric-icon color-white"><i class="glyphicon glyphicon-equalizer"></i></span>
  	<span class="metric-label">Metric Label</span>
  	<h3 class="metric-value color-white">Metric Value</h3>
</div>

Social Nav

Code
<ul class="social-nav">
	<li><a href="#"><i class="fa fa-facebook"></i></a></li>
	<li><a href="#"><i class="fa fa-instagram"></i></a></li>
	<li><a href="#"><i class="fa fa-twitter"></i></a></li>
	<li><a href="#"><i class="fa fa-linkedin"></i></a></li>
	<li><a href="#"><i class="fa fa-google"></i></a></li>
</ul>

Users

User Label
User Name/Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

User Label
User Name/Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

User Label
User Name/Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Code
<div class="user">
	<span class="user-avatar"><img src="_base_images/placeholder-user.jpg" /></span>
	<span class="user-label">User Label</span>
	<h5 class="user-title">User Name/Title</h5>
	<p class="user-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<!--/.user-->

Forms

Standard Form

Complete the fields below

Code
<div class="form-container">
	<h5>Standard Form</h5>
	<p>Complete the fields below</p>
	<div class="input-container">
		<input type="text" placeholder="Name" />
	</div>
	<!--/.input-container-->
	<div class="input-container">
		<input type="text" placeholder="Email" />
	</div>
	<!--/.input-container-->
	<div class="input-container">
		<input type="text" placeholder="Phone" />
	</div>
	<!--/.input-container-->
	<div class="input-container">
		<label>Whicho selection?</label>
		<select>
			<option>-- please select --</option>
			<option>Selection 1</option>
			<option>Selection 2</option>
			<option>Selection 3</option>
		</select>	
	</div>
	<!--/.input-container-->
	<div class="input-container">
		<label>What is your preference?</label>
		<label class="label-option">
			<input type="radio" name="option_radio" value="option_1">
			<span class="option-title">Preference 1</span>
		</label>
		<label class="label-option">
			<input type="radio" name="option_radio" value="option_2">
			<span class="option-title">Preference 2</span>
		</label>
		<label class="label-option">
			<input type="radio" name="option_radio" value="option_3">
			<span class="option-title">Preference 3</span>
		</label>
	</div>
	<!--/.input-container-->
	<div class="input-container">
		<textarea placeholder="Add comments here..."></textarea>
	</div>
	<!--/.input-container-->
	<div class="input-container">
		<label class="label-check">
			<input type="checkbox" name="checkbox_confirm" value="Yes">
			<span class="check-title">I agree to the terms and conditions</span>
		</label>
	</div>
	<!--/.input-container-->
	<hr/>
	<div class="input-container">
		<input type="submit" value="Submit Form" />
	</div>
	<!--/.input-container-->
</div>
<!--/.form-container-->
Member Login Form
Code
<div class="form-container">
	<h5><i class="fa fa-lock icon-left"></i> Member Login Form</h5>
	<div class="input-container">
		<input type="text" placeholder="Email" />
	</div>
	<!--/.input-container-->
	<div class="input-container">
		<input type="text" placeholder="Password" />
	</div>
	<!--/.input-container-->
	<div class="input-container">
		<button type="submit" class="btn-block"><i class="fa fa-lock icon-left"></i> Login</button>
	</div>
	<!--/.input-container-->
</div>
<!--/.form-container-->
Optin Form
Code
<div class="form-container">
	<h5>Optin Form</h5>
	<p>Join our mailing list!</p>
	<div class="input-container">
		<input type="text" placeholder="Email" />
	</div>
	<!--/.input-container-->
	<div class="input-container">
		<input type="submit" value="Subscribe" class="btn-block" />
	</div>
	<!--/.input-container-->
</div>
<!--/.form-container-->

Tables

Action Tables

Column Name Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Action Action
Column Name Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Action Action
Column Name Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Action Action
Code
<table class="table table-contact">
	<tr>
		<th><i class="fa fa-clock-o"></i> Business Hours</th>
		<td>9am-5pm / Mon-Fri</td>
	</tr>
	<tr>
		<th><i class="fa fa-envelope-o"></i> General Inquiries</th>
		<td><a href="#">info@memberdev.com</a></td>
	</tr>
	<tr>
		<th><i class="fa fa-map-marker"></i> Address</th>
		<td>1624 Market Street<br/>Denver, CO 80202</td>
	</tr>
</table>

Data Tables

Data Type Column 1 Column 2 Column 3 Column 4
Type A Value 1 Value 2 Value 3 Value 4
Type B Value 1 Value 2 Value 3 Value 4
Type C Value 1 Value 2 Value 3 Value 4
Code
<table class="table table-data">
	<thead>
		<tr>
			<th>Data Type</th>
			<th>Column 1</th>
			<th>Column 2</th>
			<th>Column 3</th>
			<th>Column 4</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th>Type A</th>
			<td>Value 1</td>
			<td>Value 2</td>
			<td>Value 3</td>
			<td>Value 4</td>
		</tr>
		<tr>
			<th>Type B</th>
			<td>Value 1</td>
			<td>Value 2</td>
			<td>Value 3</td>
			<td>Value 4</td>
		</tr>
		<tr>
			<th>Type C</th>
			<td>Value 1</td>
			<td>Value 2</td>
			<td>Value 3</td>
			<td>Value 4</td>
		</tr>
	</tbody>
</table>

List Tables

Business Hours 9am-5pm / Mon-Fri
General Inquiries info@memberdev.com
Address 1624 Market Street
Denver, CO 80202
Code
<table class="table table-list">
	<tr>
		<th><i class="fa fa-clock-o"></i> Business Hours</th>
		<td>9am-5pm / Mon-Fri</td>
	</tr>
	<tr>
		<th><i class="fa fa-envelope-o"></i> General Inquiries</th>
		<td><a href="#">info@memberdev.com</a></td>
	</tr>
	<tr>
		<th><i class="fa fa-map-marker"></i> Address</th>
		<td>1624 Market Street<br/>Denver, CO 80202</td>
	</tr>
</table>