# Icons

We utilize special font for icons FontAwesome, more info here. In order to start using icons add the folowing html: <i class="fa fa-folder"> and it will display folder icon like this

In order for the icon to correspond to appropriate style it needs to be used in the correct context, for instance table, list etc. In that case the html will be as following example for the list:.list

# Typography

## Headings

you can use headers <h1> — <h3>, and classes "t", "sub-t" with any tags:
Example <div class="t">Heading<div>

# h1. Heading

## h2. Heading

### h3. Heading

Class "t" Heading
Class "sub-t" Heading

## Paragraphs

5 types of texts are supported:

Regular text

Debug text

Note text

Minisize text

Editable text

## Links

2 types of links supported:
Regular link
Underlined link

# Forms

## Basic

First name:
Last name:

## Two columns

First name:
Last name:

## Help info

Phone
Phone
Phone

## Input

Form input
In order for the country flag to display, code needs to be in 2 character format, for example: us, de, es
Form input with flag country
Form input numeric
Form input mini numeric
Form input file
Form input calendar

## Textarea

Form textarea
Form textarea small
Form textarea large
Form textarea xlarge

## Checkbox

Horizontal
Electronics Apple Silver
Vertical
Black
Blue

## Radio

Horizontal
Electronics Apple Silver
Vertical
Black
Blue

## Switch

# Buttons

3 types of buttons are supported:

## Basic

## Cancel

## Disable

# Tables

## Basic

| Pic | Name | Code
--- | --- | --- | ---
|  | Accesoires | accesoires

## Table with images

Please note: to make sure long names fit correctly use the following modifier __product-name, same for __product-code, get the full list of table modifiers here

And in order to use images, the link to an image needs to be specified background-image:

| Pic | Name | Code
--- | --- | --- | ---
|  | Samsung Tab 8.9" 16gb Wifi+4g AT&T I957 | v-b006o13o1q

## Table with text

In order to use title with description use span .table-t for title and .table-descr for description

Type | Title | Date
--- | --- | ---
| New product was added Username successfully added new product «product name» in category «Category name» | 2 m ago
| New product was added Username successfully added new product «product name» in category «Category name» | 2 m ago
| New product was added Username successfully added new product «product name» in category «Category name» | 2 m ago

## Modifiers list for table

List of modifiers that can be used for specific values

- table-col __author/table-col __version
  Used to display author and product version
- table-col __date
  Used for displaying dates
- table-col __product-range/table-col __product-count
  Used for displaying small values, 1-3 characters
- table-col __lang
  Used to display language
- table-col __product-control
  Used for checkboxes
- table-col __product-img
  Used for images or icons
- table-col __product-name
  Used for displaying product name
- table-col __product-code
  Used for displaying product id

# Breadcrumbs

# Pagination

# Lists

## Default

Lets see lists and how they look by default:

Example of simple lists <ul> и <ol>

UL list

- First element
- Second element
- Third element

OL List

1. First element
2. Second element
3. Third element

Example of informational list

## List info

- Author
  Virto Commerce
- Title
  Virto Commerce Core
- ID
  VirtoCommerce.Core
- Version
  1.0.0.0
- Description
  Core functionality
- Title
  Virto Commerce Core

## List number

Example of numbered list

- element
- element
- element

## List tags

Example of tag list

- security
- core

## List files

Example of file structure list

- Folder 1 Description for folder 1
  - Folder 1.1 Description for folder 1.1
  - Folder 1.2 Description for folder 1.2
- Folder 2 Description for folder 2
  - Folder 2.1 Description for folder 2.1
  - Folder 2.2 Description for folder 2.2

## List items

Example of product list

- Virtual
- Apple

## List items with text

Example of product list with title and description
In order to display title and description, use .list-t for title and .list-descr for description, icon can be added using <i class="list-ico fa-image">, if necessary. More information about icons here

- Category A container for other Categories and Products or Variations.
- Product The main Variation. Can be used for targeted promotions.
- Variation Represents orderable item of merchandise for sale. Contains details, such as names, description, images, prices and inventory information.

## List with chosen/selected elements

Example of selected list elements

- × Binding: Electronics
- × Brand: Apple
- × Color: Silver

## List with checkboxes

Ease US Ease US Ease US Ease US

## List with radio

Ease US Ease US Ease US Ease US

# Tree

## Introduction

Lets examing in order

Tree starts with <ul class="tree">, then children <li class="tree-item">, and then node, .tree-block

- Order #CU04829
  Feb 17, 2015
  218 USD

Now lets add 1 more branch

- Order #CU04829
  Feb 17, 2015
  218 USD
  - Order #CU04829
    Feb 17, 2015
    218 USD

Note: if only 2 branches exist, then for .tree-node will need to add modifier .tree-node.__one-el, for all other cases modified is not needed

Example with 3 branches

- Order #CU04829
  Feb 17, 2015
  218 USD
  - Order #CU04829
    Feb 17, 2015
    218 USD
  - Order #CU04829
    Feb 17, 2015
    218 USD

Note: in order to add children to the new branch we use .list-tree, which follows the same .list-tree. If you need to add new branch then use .tree-node, which must strictly follow .tree-block

Now lets examing more comlicated case

- Order #CU04829
  Feb 17, 2015
  218 USD
  - PaymentIn #PA04829
    Feb 17, 2015
    10 USD
    - PaymentIn #PA04829
      Feb 17, 2015
      10 USD
    - PaymentIn #PA04829
      Feb 17, 2015
      10 USD
  - Shipment #SH04829
    Feb 17, 2015
    0 USD

Reverse

In order to highlight selected leaf add .tree-block.__selected,
so it looks like this: <div class="tree-block __selected">

## Tree vertical

Example of vertical tree, by default tree is vertical. In order to make tree horizontal add the following modifier __horizontal, more details available here

- Order #CU04829
  Feb 17, 2015
  218 USD
  - PaymentIn #PA04829
    Feb 17, 2015
    10 USD
  - Shipment #SH04829
    Feb 17, 2015
    0 USD

## Tree horizontal

Example of horizontal tree

- Order #CU04829
  Feb 17, 2015
  218 USD
  - PaymentIn #PA04829
    Feb 17, 2015
    10 USD
  - Shipment #SH04829
    Feb 17, 2015
    0 USD

# Widgets

Widgets have 2 main templates: 1 with title and quantity, 2 with title and icon

Example using title and quantity template

Example using title and icon template

# Tabs

Add tab Remove tab
Tab 1
Tab 2
Tab 3
Text 1
Typography

Example text 1

Warning

Forms
Text 2
Typography

Example text 2

Warning

Forms
Text 3
Typography

Example text 3

Warning

Forms
<div class="tab-cnt"> can include any content