Home|Styleguide

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:

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:

Email *

Password *

Remember me next time

Restore password

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.

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:

List Item
Link list item
List Item

Example of a section containing
bulleted and numbered lists:

List Item
Link list item
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

Inline List Item
Inline List Item
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:

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

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 Angeles	Chicago	New York	Brooklyn
FLAGSHIP 888-700-4416	LEARNING POINT 877-880-4267	FLAGSHIP 888-223-1599	DEVELOPMENT CENTER 888-223-1599

Los Angeles

Chicago

New York

Brooklyn

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> </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> </td> <td> </td> <td> </td> <td> </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.

Call to action

Call to action 2

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">  <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>  <div class="tabs-list-item-mobile active">Tab title 1</div>  <div class="tab-content opened">Tab content 1</div>  <div class="tabs-list-item-mobile">Tab title 2</div>  <div class="tab-content">Tab content 2</div>  <div class="tabs-list-item-mobile">Tab title 3</div>  <div class="tab-content">Tab content 3</div> </div>

Styleguide

Colors:

Headings:

Title 1 H1

Title 2 H2

Title 3 H3

Title 4 H4

Title 5 H5

Title 6 H6

Buttons:

SVG Icons:

Main example:

Use Classes:

Width containers:

Forms:

Example:

Example:

Example:

Tabs with slider:

Example:

CMS Content:

Head and Text:

SECTION HEADING

Cms List:

List Headings

Example of a section containingbulleted and numbered lists:

Example of a section containingbulleted and numbered lists:

Cms Inline List:

Inline Lists Heading

Image and Caption:

Block Image Caption

Cms Video:

Example:

Blockquote:

Image and Text Columns:

SECTION HEADING

SECTION HEADING

Cms Table:

Cms Accordion:

Cms Actions:

Company Information

Rental

Sales

Education

Integration / Service

Customer Service

Locations

Example of a section containing
bulleted and numbered lists:

Example of a section containing
bulleted and numbered lists: