UI-компоненты

Текстовое поле

Текстовое поле с плавающим лейблом

<div class="fluid-label"> <input id="form-name" class="form-control" type="text" name="name" placeholder="Ваше имя*" /> <label for="form-name">Ваше имя <span class="required-star">*</span></label> <i class="fa fa-user-o"></i> </div>

Важный текст

Важный текст + тонкое начертание

Важный текст большого размера

Важный текст большого размера + тонкое начертание

Обычный список

<ul> <li>механические повреждения корпуса Макбука; <ul> <li>неисправность кнопки включения</li> <li>Залитие клавиатуры</li> </ul> </li> <li>проблемы с программным обеспечением;</li> <li>неисправность графической системы;</li> </ul>

Результат

• механические повреждения корпуса Макбука;
  • неисправность кнопки включения
  • Залитие клавиатуры
• проблемы с программным обеспечением;
• неисправность графической системы;
• выход из строя матрицы устройства;
• перезагрузки и самопроизвольные выключения ноутбука.

Обычный список

<ol> <li>механические повреждения корпуса Макбука; <ol> <li>неисправность кнопки включения</li> <li>Залитие клавиатуры</li> </ol> </li> <li>проблемы с программным обеспечением;</li> <li>неисправность графической системы;</li> </ol>

Нумерованый список

1. механические повреждения корпуса Макбука;
   1. неисправность кнопки включения
   2. Залитие клавиатуры
2. проблемы с программным обеспечением;
3. неисправность графической системы;
4. выход из строя матрицы устройства;
5. перезагрузки и самопроизвольные выключения ноутбука.

Код

<div class="history"> <div class="history-item"> <div class="history-item--year"> 2014 г </div> <div class="history-item--text"> Устроился в нашу компанию на должности помощника заместителя генерального директора </div> </div> <div class="history-item"> ... </div> </div>

Результат

Стандартная таблица

<div class="table-responsiver"> <table> <thead> <tr> <th>Вид работ</th> <th>Стоимость</th> <th>Время<em>*</em></th> </tr> </thead> <tbody> <tr> <td> <span> Замена LCD в сборе с крышкой</span> </td> <td> <span> от 34900 </span> </td> <td> <span>3 дня</span> </td> </tr> </tbody> </table> </div>

Таблица с светлым заголовком

<div class="table-responsiver"> <table class="table-light"> <thead> <tr> <th>Вид работ</th> <th>Стоимость</th> <th>Время<em>*</em></th> </tr> </thead> <tbody> <tr> <td> <span> Замена LCD в сборе с крышкой</span> </td> <td> <span> от 34900 </span> </td> <td> <span>3 дня</span> </td> </tr> </tbody> </table> </div>

Стандартная таблица с рамками

<div class="table-responsiver"> <table class="table-bordered"> <thead> <tr> <th>Вид работ</th> <th>Стоимость</th> <th>Время<em>*</em></th> </tr> </thead> <tbody> <tr> <td> <span> Замена LCD в сборе с крышкой</span> </td> <td> <span> от 34900 </span> </td> <td> <span>3 дня</span> </td> </tr> </tbody> </table> </div>

Таблица без рамок

<div class="table-responsiver"> <table class="table-no-border"> <thead> <tr> <th>Вид работ</th> <th>Стоимость</th> <th>Время<em>*</em></th> </tr> </thead> <tbody> <tr> <td> <span> Замена LCD в сборе с крышкой</span> </td> <td> <span> от 34900 </span> </td> <td> <span>3 дня</span> </td> </tr> </tbody> </table> </div>

Для вставки файлов на страницу, используйте код ниже и следующие классы: file_pdf, file_png, file_jpg, file_xls, file_doc, file_ppt, file_zip, file_tif <a href="#" class="file file_png"> <span class="file--name">Файл формата png</span> <span class="file--size">48.6 Кб</span> </a>