Text:

h1. Text heading

h2. Text heading

h3. Text heading

h4. Text heading

h5. Text heading
h6. Text heading

Colors:

Labels & tags: 

<label>Labels for fields</label>
label label-default label label-primary label label-blue label label-red label label-orange label label-yellow label label-green 
<span class="label label-default">label label-default</span>

Tabbed navigation:

...
...
...
...

Buttons with glyphicons:

All buttons are to have an appropriate glypicon.

<button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-stats"></span> Get Rates</button>

Put a space between the span and the button label

</span> Get Rates</button> 

    <button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-stats"></span> Get Rates</button> 
    <button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-search"></span> Find Account/Search</button> 
    <button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-plus-sign"></span> Additional</button> 
    <button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-minus-sign"></span> Fewer</button> 
    <button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-play-circle"></span> Run Report</button> 
    <button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-refresh"></span> Updated</button>
    <button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-comment"></span> Send Feedback</button>
    <button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-saved"></span> Save</button> 
    <button type="button" class="btn btn-grey"><span class="glyphicon glyphicon-grey"></span> Cancel</button> 
    <button type="button" class="btn btn-red"><span class="glyphicon glyphicon-ban-circle"></span> Reset</button>
    <button type="button" class="btn btn-red"><span class="glyphicon glyphicon-alert"></span> Overdue</button> 
    <button type="button" class="btn btn-orange"><span class="glyphicon glyphicon-ok-sign"></span> Acknowledged</button> 
    <button type="button" class="btn btn-yellow"><span class="glyphicon glyphicon-time"></span> Pending</button> 
    <button type="button" class="btn btn-white"><span class="glyphicon glyphicon-refresh"></span> Updated</button>

Glyphicons we use:

All buttons should have an icon, using the appropriate glyph. To use a glyphicon inside of a span .glyphicon glyphicon-####

    glyphicon glyphicon-info-alert Usage: Used in warning boxes and Overdue button
    <span class="glyphicon glyphicon-info-alert"></span>
    glyphicon glyphicon-refresh Usage: Updated button
    <span class="glyphicon glyphicon-refresh"></span>
    glyphicon glyphicon-time Usage: Pending button
    <span class="glyphicon glyphicon-time"></span>
    glyphicon glyphicon-ok-sign Usage: Tags for Rates page
    <span class="glyphicon glyphicon-ok-sign"></span>
    glyphicon glyphicon-remove Usage: Close button
    <span class="glyphicon glyphicon-remove"></span>
    glyphicon glyphicon-cog Usage: Settings for Marksman
    <span class="glyphicon glyphicon-cog"></span>
    glyphicon glyphicon-new-window Usage: New Window Link
    <span class="glyphicon glyphicon-new-window"></span>
    glyphicon glyphicon-move Usage: Move widgets on dashboard screens
    <span class="glyphicon glyphicon-move"></span>
    glyphicon glyphicon-ban-circle Usage: Reset or Cancel button
    <span class="glyphicon glyphicon-ban-circle"></span>
    glyphicon glyphicon-saved Usage: Save button
    <span class="glyphicon glyphicon-saved"></span>
    glyphicon glyphicon-ok Usage: Continue button
    <span class="glyphicon glyphicon-ok"></span>
    glyphicon glyphicon-trash Usage: Delete button
    <span class="glyphicon glyphicon-trash"></span>
    glyphicon glyphicon-plus-sign Usage: Additional information button
    <span class="glyphicon glyphicon-plus-sign"></span>
    glyphicon glyphicon-minus-sign Usage: Less information button
    <span class="glyphicon glyphicon-minus-sign"></span>
    glyphicon glyphicon-minus Usage: Not used
    <span class="glyphicon glyphicon-minus"></span>
    glyphicon glyphicon-plus Usage: Not used
    <span class="glyphicon glyphicon-plus"></span>
    glyphicon glyphicon-th-large Usage: Widget/Panel headers
    <span class="glyphicon glyphicon-th-large"></span>
    glyphicon glyphicon-stats Usage: Get Rates button
    <span class="glyphicon glyphicon-stats"></span>
    glyphicon glyphicon-search Usage: Search/Find
    <span class="glyphicon glyphicon-search"></span>
    glyphicon glyphicon-download-alt Usage: Download button
    <span class="glyphicon glyphicon-download-alt"></span>
    glyphicon glyphicon-play-circle Usage: Run Report button
    <span class="glyphicon glyphicon-play-circle"></span>
    glyphicon glyphicon-book Usage: Publish button
    <span class="glyphicon glyphicon-book"></span>
    glyphicon glyphicon-list-alt Usage: Create Rate Grid Mapping File button
    <span class="glyphicon glyphicon-list-alt"></span>

Button colors and classes:

We currently use these different colors for buttons.

<button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-info-sign"></span> btn-primary</button>

Button sizes:

Mortech's default button size is "btn btn-default". Other sizes are available;

class="btn btn-default btn-lg"

class="btn btn-default"

class="btn btn-default btn-sm"

class="btn btn-default btn-xs"

Alert Boxes: 

<div class="alert alert-success" role="alert"><span class="glyphicon glyphicon-exclamation"> </span> ...</div> 
<div class="alert alert-info" role="alert"><span class="glyphicon glyphicon-alert"> </span> ...</div>
<div class="alert alert-warning" role="alert"><span class="glyphicon glyphicon-alert"> </span> ...</div>
<div class="alert alert-danger" role="alert"><span class="glyphicon glyphicon-alert"> </span> ...</div>

Form Elements

All fields with .form-control are set to width: 100%; by default. Wrap labels and controls in .form-group for optimum spacing. All forms with consist of a label using the .label selector.

<div class="form-group">
    <label for="exampleInputEmail1"> Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
</div>

<div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>

Example block-level help text here.


<div class="form-group">
    <label for="exampleInputFile">File input</label>
    <input type="file" id="exampleInputFile">
    <p class="help-block">  Example block-level help text here.</p>
</div>
<div class="checkbox">
    <label>
        <input type="checkbox">  Check me out
    </label>
</div>
<button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-ok">Submit</span>
</button>

<label>Date Range</label>
<input type="text" class="form-control" placeholder="Start Date" aria-describedby="basic-addon2">
<span class="input-group-addon" id="basic-addon2">
    <a href="#"><span class="glyphicon glyphicon-calendar"></span></a>
</span>

Layout: Panels

To recreate a panel:
<div class="panel panel-default">
  <div class="panel-heading">
     <h3 class="panel-title">Panel-title</h3>
  </div>
  <div class="panel-body">
     Panel Content
 </div>
</div>

Panel title

Panel content 
<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">Panel-title</h3>
      </div>
    <div class="panel-body">
        Panel Content
    </div>
</div>

Tables:

Our tables are borderlessand alternate colors. Table head is white and the first row is colored (class="odd").Even numbered rows class="even"

Rates Results

Status Rate
3.259%
3.259%
3.259% 
<div class="panel panel-default ">
    <div class="panel-heading ">
       <h3 class="panel-title "><span class="glyphicon glyphicon-align-left "></span> Rates Results</h3>
       <!--Actions Tool kit-->
       <div class="panel-actions ">
            <a href="# " class="glyphicon  glyphicon-move "></a>
            <a href="# " class="glyphicon  glyphicon-minus "></a>
            <a href="# " class="glyphicon  glyphicon-cog "></a>
        </div>
        <!-- /Actions Tool kit-->
    </div>
    <div class="panel-body ">
        <div class="col-lg-12 ">
            <!-- Table-->
             <table class="table table-striped table-hover table-condensed " id="dataTables ">
                  <thead>
                       <tr>
                            <th>Status</th>
                            <th>Rate</th>
                            <th> </th>
                      </tr>
                 </thead>
             <tbody>
                <tr class="odd ">
                    <td>
                        <span class="btn btn-success btn-xs "><span class="glyphicon glyphicon-time "></span>
                    </td>
                    <td>3.259%</td>
                    <td>
                        <span class="glyphicon glyphicon-print "> </span>
                    </td>
                </tr>
                <tr class="even ">
                    <td>
                        <span class="btn btn-danger btn-xs "><span class="glyphicon glyphicon-alert "></span>
                    </td>
                    <td> 3.259%</td>
                    <td>
                        <span class="glyphicon glyphicon-print "> </span>
                    </td>
                </tr>
                <tr class="odd ">
                    <td>
                        <span class="btn btn-warning btn-xs "><span class="glyphicon glyphicon-ok-sign "></span>
                    </td>
                    <td> 3.259%</td>
                    <td>
                        <span class="glyphicon glyphicon-print "> </span>
                    </td>
                </tr>
            </tbody>
        </table>
        <!-- /Table-->
    </div>
</div>

Email Communication:

We generate HTML emails for outbound communication

Marksman Logo

Dear Marksman Customer,

Your Marksman account is almost complete.

To activate your account, please click the following link and create a new password.

Enter URL here

If you have questions regarding this notification, please contact your Marksman System Administrator.
This email was intended for FirstName LastName
If you need assistance or have questions, please contact your Marksman System Administrator.
© 2016 Mortech, a Zillow Group Business. Marksman and the Zillow Group logos are registered trademarks of Zillow Group. 

<body style="background-color:#e9e9e9; margin:0; padding:0;  -webkit-font-smoothing:antialiased;  -webkit-text-size-adjust:none; width:100%!important; height:100%;font-family:Helvetica Neue, Helvetica, Helvetica, Arial, sans-serif;">

    <table style="width: 100%; boer-top:solid 3px #0874e4; background-color:#ffffff; margin:0; padding:0;">
        <tr>
            <td>
                <div style="padding:15px; max-width:600px; margin:0 auto; display:block; max-width:600px;">
                    <table style="background-color:#ffffff;">
                        <tr>
                            <td><img src="https://mpg.mortech-inc.com/mpg/mpgjsp/login/images/marksman_logo.png" alt="Marksman Logo" />
                            </td>
                        </tr>
                    </table>
                </div>
            </td>
        </tr>
    </table>
    <table style="width: 100%;">
        <tr>
            <td style="display:block!important; max-width:600px!important; margin:0 auto!important; clear:both!important; background-color:#ffffff;">
                <div style="padding: 15px; max-width:600px; margin:0 auto; display:block; ">
                    <table style="width:100%;">
                        <tr>
                            <td>
                                <h3 style="font-weight:500; font-size:27px;">Dear Marksman Customer, </h3>
                                <p style="font-size:17px;">Your Marksman account is almost complete.</p>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <p>To activate your account, please click the following link and create a new password.</p>
                                <p>Enter URL here</p>
                                <p> If you have questions regarding this notification, please contact your <a href="#" style="color:#0077b5; text-decoration:none;" target="_blank">Marksman System Administrator</a>.</p>
                                <br/>
                            </td>
                        </tr>
                    </table>
                </div>
            </td>
        </tr>
    </table>
    <table style="width: 100%; clear:both!important;">
        <tr>
            <td style="display:block!important; max-width:600px!important; margin:0 auto!important; clear:both!important; font-size:12px;">
                <table>
                    <tbody>
                        <tr>
                            <td>This email was intended for FirstName LastName</td>
                        </tr>
                        <tr>
                            <td>If you need assistance or have questions, please contact your <a href="#" style="color:#0077b5; text-decoration: none" target="_blank">Marksman System Administrator</a>.</td>
                        </tr>
                        <tr>
                            <td> © 2016 Mortech, a Zillow Group Business. Marksman and the Zillow Group logos are registered trademarks of Zillow Group.</td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
    </table>

</body>