icon account icon cash icon cart icon search main arrow arrow check icon camera icon light icon audio icon computer icon storage icon discount icon facebook icon twitter icon linkedin icon vimeo icon youtube icon instagram icon google plus icon share icon email icon print icon time icon phone icon email-m icon marker-m icon pdf icon remove icon calendar icon list icon comment icon out icon-status icon-star icon-switch pie-chart line-chart icon-user icon-warning icon-heart expand-arrow-1 expand-arrow-2 icon-upload icon-download icon-none icon-date-scheduled icon-date-available icon-is-hazardous




Colors:


@gray: #898989;
@main-gray: #acacac;
@light-gray: #d2d2d2;
@dark-gray: #444;
@main-red: #98032e;
@main-bg: #f7f7f7;




Headings:


Title 1 H1

Title 2 H2

Title 3 H3

Title 4 H4

Title 5 H5
Title 6 H6




Buttons:



Main Buton 

Main Link 

Code:

<a class="main-btn" href="#"> Main Button <svg class="icon main-arrow"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#main-arrow"></use> </svg> </a> <a class="main-link" href="#"> Main Link <svg class="icon main-arrow"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#main-arrow"></use> </svg> </a>




SVG Icons:



Main example:
<svg class="icon icon-class"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-id"></use> </svg>
xlink:href="#main-logo--svg" class="main-logo--svg"

xlink:href="#icon-facebook" class="icon icon-facebook"
xlink:href="#icon-twitter" class="icon icon-twitter"
xlink:href="#icon-linkedin" class="icon icon-linkedin"
xlink:href="#icon-vimeo" class="icon icon-vimeo"
xlink:href="#icon-youtube" class="icon icon-youtube"
xlink:href="#icon-instagram" class="icon icon-instagram"
xlink:href="#icon-google-plus" class="icon icon-google-plus"
xlink:href="#icon-email" class="icon icon-email"
xlink:href="#icon-print" class="icon icon-print"
xlink:href="#icon-share" class="icon icon-share"
xlink:href="#icon-account" class="icon icon-account"
xlink:href="#icon-cash" class="icon icon-cash"
xlink:href="#icon-cart" class="icon icon-cart"
xlink:href="#icon-search" class="icon icon-search"
xlink:href="#icon-phone" class="icon icon-phone"
xlink:href="#icon-marker-m" class="icon icon-marker-m"
xlink:href="#icon-email-m" class="icon icon-email-m"
xlink:href="#icon-time" class="icon icon-time"
xlink:href="#main-arrow" class="main-arrow"
xlink:href="#icon-calendar" class="icon icon-calendar"
xlink:href="#icon-calendar" class="icon icon-list"
xlink:href="#icon-remove" class="icon icon-remove"




Use Classes:



Width containers:

Please use class class="frame" for 1200px (base width)


Please use class class="l-container-min" or class="cms-box" for 800px (exmple: Lego Block, CMS Content)


Please use class class="container-min" for 600px (exmple: Login Form)


Forms:

Always please use class class="form" for forms (for parent element)


Always please use class class="f-row" for form's rows


Always please use classes class="f-input", class="f-button", etc. for corresponding form's elements


Example:

Code:

<fieldset class="form main-form"> <div class="container-min"> <div class="f-row"><label class="required" for="">Email <span class="required">*</span></label> <div class="f-input"> <input id="id" type="email" placeholder="Email" required="required" name="name" /> </div> </div> <div class="f-row"><label class="required" for="">Password <span class="required">*</span></label> <div class="f-input"> <input id="UserModel" type="password" placeholder="Password" required="required" value="" name="" /> </div> </div> <div class="f-row"> <div class="f-check"> <input id="UserModel_rememberMe" type="checkbox" value="" name="" /> <label for="UserModel_rememberMe">Remember me</label> </div> <div class="f-row"> <div class="f-text f-link"> <a title="Restore password" href="/users/default/restore-password">Restore password</a> </div> <div class="f-row f-button"> <input type="submit" value="Sign In" name="" /> </div> </div> </div> </div> </fieldset>


For checkboxes and radiobuttons using custom plugin icheck.js source: http://icheck.fronteed.com/

Example:
  

Code:

<input id="id1" type="checkbox" value="" name="" /><label for="id1">Label</label> <input id="id2" type="radio" value="value1" name="group" /><label for="id2">Label 1</label> <input id="id3" type="radio" value="value2" name="group" /><label for="id3">Label 2</label>


For select using custom plugin chosen.js, source: https://harvesthq.github.io/chosen

For mobile custom select destroy and using native select.

Example:

Code:

<select> <option>Option 1</option> <option>Option 2</option> <option>Option 3</option> </select>



Tabs with slider:

For tabs with slider use (exampel Partener Slider) use class class="partner-slider-wrap" for first parent and use class class="tab-slider" for next element.

Example:
<div class="partner-slider-wrap"> <h2>Our Partners</h2> <div class="tab-slider"> Some code (example init jQuery UI Tabs and Swiper Slider) </div> </div>




CMS Content:



Please use class class="cms-box" to cms contet for parent or select Cms Content Layout in Page Settings

Please use p tag for any text.

Head and Text:

SECTION HEADING

Section text and description. Copy should not exceed 5-6 lines. The copy can contain multiple inline links.

Section text and description. Copy should not exceed 5-6 lines. The copy can contain multiple inline links.

Section text and description. Copy should not exceed 5-6 lines. The copy can contain multiple inline links.

Code:

<div class="cms-box"> <h3>SECTION HEADING</h3> <p>Section text and description. Copy should not exceed 5-6 lines. The copy can contain multiple inline links. Section text and description.</p> </div>



Cms List:

Please use table tag with class class="line-table"

List Headings

Example of a section containing
bulleted and numbered lists:
Example of a section containing
bulleted and numbered lists:
  1. List Item
  2. Link list item
  3. List Item

Code:

<div class="cms-box"> <h3>List Headings</h3> <table class="line-table"> <tr> <td> <h5>Example of a section containing<br />bulleted and numbered lists:</h5> <ul> <li>List Item</li> <li><a href="#">Link list item</a></li> <li>List Item</li> </ul> </td> <td> <h5>Example of a section containing<br />bulleted and numbered lists:</h5> <ol> <li>List Item</li> <li><a href="#">Link list item</a></li> <li>List Item</li> </ol> </td> </tr> </table> </div>



Cms Inline List:

Please use class class="cms-inline" for inline list.

Inline Lists Heading

  • Inline List Item
  • Inline List Item
  • Inline List Item
  • Inline List Item
  • Inline List Item
  • Inline List Item
  1. Inline List Item
  2. Inline List Item
  3. Inline List Item

Code:

<div class="cms-box cms-inline"> <ul> <li>Inline List Item</li> <li>Inline List Item</li> <li>Inline List Item</li> </ul> <ul> <li>Inline List Item</li> <li>Inline List Item</li> <li>Inline List Item</li> </ul> <ol> <li>Inline List Item</li> <li>Inline List Item</li> <li>Inline List Item</li> </ol> </div>



Image and Caption:

text-banner
Block Image Caption

Code:

<div class="cms-box"><img alt="text-banner" src="your-source" height="283" width="500" /> <h6>Block Image Caption</h6> </div>



Cms Video:

For video use class class="cms-video" and class class="cms-video--wrap" for responsive.

Example:

Code

<div class="cms-video cms-box"> <div class="cms-video--wrap"> <iframe src="https://www.youtube.com/embed/IxV0ncniLRY" height="480" width="854"></iframe> </div> </div>



Blockquote:

"AbelCine is my resource for
equipment support and maintenace"

- Alfred Hitchcock

Code:

<div class="cms-box"> <blockquote> <p><em>"AbelCine is my resource for</em><br /> <em> equipment support and maintenace"</em> </p> <p><em>- Alfred Hitchcock</em></p> </blockquote> </div>



Image and Text Columns:

Please use table tag for some columns

SECTION HEADING

Section text and description. Copy should not exceed 5-6 lines. The copy can contain multiple inline links. Section text and description.

SECTION HEADING

Section text and description. Copy should not exceed 5-6 lines. The copy can contain multiple inline links. Section text and description.

Code:

<div class="cms-box"> <table> <tr> <td><img alt="" src="your source" height="218" width="350" /></td> <td> <h3>SECTION HEADING</h3> <p>Section text and description. Copy should not exceed 5-6 lines. The copy can contain multiple inline links. Section text and description. </p> </td> </tr> <tr> <td><img alt="" src="your source" height="218" width="350" /></td> <td> <h3>SECTION HEADING</h3> <p>Section text and description. Copy should not exceed 5-6 lines. The copy can contain multiple inline links. Section text and description. </p> </td> </tr> </table> </div>



Cms Table:

Please use class class="cms-table" for table tag

For head can use td tag or th tag.

Column Header Column Header Column Header
Row One Text Row One Text Row One Text
Row One Text Row One Text Row One Text
Row One Text Row One Text Row One Text
Row One Text Row One Text Row One Text
Row One Text Row One Text Row One Text
Row One Text Row One Text Row One Text

Code:

<table class="cms-table"> <tr> <td>Column Header</td> <td>Column Header</td> <td>Column Header</td> </tr> <tr> <td>Row One Text</td> <td>Row One Text</td> <td>Row One Text</td> </tr> </table>

Simple table

Please use class class="simple-table" for table and strictly observe the structure!

Los AngelesChicagoNew YorkBrooklyn

FLAGSHIP

888-700-4416

LEARNING POINT

877-880-4267

FLAGSHIP

888-223-1599

DEVELOPMENT CENTER

888-223-1599


Code:

<table class="simple-table"> <thead> <tr><th>Los Angeles</th><th>Chicago</th><th>New York</th><th>Brooklyn</th></tr> </thead> <tbody> <tr> <td> <p>FLAGSHIP</p> <p>888-700-4416</p> </td> <td> <p>LEARNING POINT</p> <p>877-880-4267</p> </td> <td> <p>FLAGSHIP</p> <p>888-223-1599</p> </td> <td> <p>DEVELOPMENT CENTER</p> <p>888-223-1599</p> </td> </tr> </tbody> </table>

Complex table

Please use class class="complex-table" for table

  Indie Business Rental House Institution
Qualifying Services        

Camera system maintenance

Lens / optical services

Camera matching / firmware updates


Code:

<table class="complex-table"> <tbody> <tr> <td>&nbsp;</td> <td><strong>Indie</strong></td> <td><strong>Business</strong></td> <td><strong>Rental House</strong></td> <td><strong>Institution</strong></td> </tr> <tr> <td><span><strong>Qualifying Services</strong></span></td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> </tr> <tr> <td> <p>Camera system maintenance</p> </td> <td><span>•</span></td> <td><span>•</span></td> <td><span>•</span></td> <td><span>•</span></td> </tr> <tr> <td> <p>Lens / optical services</p> </td> <td><span><span>•</span></span></td> <td><span><span>•</span></span></td> <td><span><span>•</span></span></td> <td><span><span>•</span></span></td> </tr> <tr> <td> <p>Camera matching / firmware updates</p> </td> <td><span><span>•</span></span></td> <td><span><span>•</span></span></td> <td><span><span>•</span></span></td> <td><span><span>•</span></span></td> </tr> </tbody> </table>



Cms Accordion:

Please use class class="cms-accordion" for ul tag and use simple list structure

  • Accordion Header 

    Section text and description. Copy should not exceed 5-6 lines. The copy can contain multiple inline links. Section text and description. Copy should not exceed 5-6 lines. The copy can contain multiple inline links. Section text and description. Copy should not exceed 5-6 lines. The copy can contain multiple inline links. Section text and description. Copy should not exceed 5-6 lines. The copy can contain multiple inline links. The copy can contain multiple inline links. Section text and description. Copy should not exceed 5-6 lines.

  • Accordion Header

    Section text and description. Copy should not exceed 5-6 lines. The copy can contain multiple inline links. Section text and description. Copy should not exceed 5-6 lines. The copy can contain multiple inline links. Section text and description. Copy should not exceed 5-6 lines. The copy can contain multiple inline links. Section text and description. Copy should not exceed 5-6 lines. The copy can contain multiple inline links. The copy can contain multiple inline links. Section text and description. Copy should not exceed 5-6 lines.

Code:

<div class="cms-box"> <ul class="cms-accordion"> <li><a href="#">Accordion Header</a> <p>Content...</p> </li> <li><a href="#">Accordion Header</a> <p>Content...</p> </li> </ul> </div>



Cms Actions:

Please insert svg icon with class class="icon main-link" and xlink:href="#main-arrow" for use tag.

Code:

<div class="cms-box" style="text-align: center;"> <p> <a class="main-btn" href="#">Call to action <svg class="icon main-link"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#main-arrow"></use> </svg> </a> </p> <p> <a class="main-btn type-link" href="#"> Call to action 2 <svg class="icon main-link"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#main-arrow"></use> </svg> </a> </p> </div>




Please use class class="main-tabs" for parent tag and use ul structure (Be sure to duplicate titles for mobile!)

Tab title 1
Tab content 1
Tab title 2
Tab content 2
Tab title 3
Tab content 3


Code:

<div class="main-tabs"> <!--Desktop titles--> <ul class="tabs-list"> <li class="active"><a href="#">Tab title 1</a></li> <li><a href="#">Tab title 2</a></li> <li><a href="#">Tab title 3</a></li> </ul> <!--Mobile title 1--> <div class="tabs-list-item-mobile active">Tab title 1</div> <!--Tab content 1--> <div class="tab-content opened">Tab content 1</div> <!--Mobile title 2--> <div class="tabs-list-item-mobile">Tab title 2</div> <!--Tab content 2--> <div class="tab-content">Tab content 2</div> <!--Mobile title 3--> <div class="tabs-list-item-mobile">Tab title 3</div> <!--Tab content 3--> <div class="tab-content">Tab content 3</div> </div>