Обратите внимание, чтобы название обрезалось, если слишком длинное, нужно использовать модификатор __product-name, тоже самое и для __product-code, ознакомится с полным списком модификаторов можно здесь
И конечно чтобы использовать изображения нужно указывать ссылку на картинку в background-image:
Pic
Name
Code
Samsung Tab 8.9" 16gb Wifi+4g AT&T I957
v-b006o13o1q
Table with text
Для того, чтобы использовать название и описание, нужно использовать .table-t для названия и .table-descr для описания
Type
Title
Date
New product was addedUsername successfully added new product «product name» in category «Category name»
2 m ago
New product was addedUsername successfully added new product «product name» in category «Category name»
2 m ago
New product was addedUsername successfully added new product «product name» in category «Category name»
2 m ago
List modificatros for table
Приведу некоторый список модификаторов, которые используются, для конкретных значений
table-col __author/table-col __version
Используется для выделения автора или версии продукта
Пример списка для продуктов с названием и описанием
Чтобы вывести название и описание, нужно использовать .list-t для названия и .list-descr для описания, также можно использовать и иконку <i class="list-ico fa-image">, если это необходимо. Подробнее о всех иконках здесь
CategoryA container for other Categories and Products or Variations.
ProductThe main Variation. Can be used for targeted promotions.
VariationRepresents orderable item of merchandise for sale. Contains details, such as names, description, images, prices and inventory information.
Дерево начинается с <ul class="tree">, далее идут его дети <li class="tree-item">, и сообственно сам нод, .tree-block
Order #CU04829
Feb 17, 2015
218 USD
Теперь добавим еще 1 ветку
Order #CU04829
Feb 17, 2015
218 USD
Order #CU04829
Feb 17, 2015
218 USD
Примечание: Если всего 2 ветки, то для .tree-node, нужно добавить модфификатор .tree-node.__one-el, для всех остальных случаев не нужно
Расмотрим еще пример с 3 ветками
Order #CU04829
Feb 17, 2015
218 USD
Order #CU04829
Feb 17, 2015
218 USD
Order #CU04829
Feb 17, 2015
218 USD
Подсказка: Для того, чтобы добавить детей в новую ветку, мы используем .list-tree, который идет за таким же .list-tree. Если нужно добавить новые ветки, то используем .tree-node, который идет строго после .tree-block
Чтобы выделить активный нод, нужно добавить .tree-block.__selected, тоесть получится так: <div class="tree-block __selected">
Tree vertical
Пример вертикального дерева, по умолчанию, дерево вертикальное, чтобы сделать его горизонтальным, нужно добавить модификатор __horizontal, подробнее можно узнать здесь
Order #CU04829
Feb 17, 2015
218 USD
PaymentIn #PA04829
Feb 17, 2015
10 USD
Shipment #SH04829
Feb 17, 2015
0 USD
Tree horizontal
Пример горизонтального дерева
Order #CU04829
Feb 17, 2015
218 USD
PaymentIn #PA04829
Feb 17, 2015
10 USD
Shipment #SH04829
Feb 17, 2015
0 USD
Widgets
У виджетов есть несколько основных шаблонов: 1 с названием и количеством, 2 с названием и иконкой