---
title: UI Kit Page
---
extends layouts/_layout
block content
	.center(style='padding-top: 50px; padding-bottom: 50px')
		div(style='margin-bottom: 10px') Buttons
		div(style='margin-bottom: 10px')
			button.btn Button Default
		div(style='margin-bottom: 10px')
			button.btn.btn_dark Button Dark
		div(style='margin-bottom: 10px')
			button.btn.btn_light Button Light
		div(style='margin-bottom: 10px')
			button.btn.btn_stroke Button Stroke
		div(style='margin-bottom: 10px')
			button.btn.btn_gray Button Gray
		div(style='margin-bottom: 10px')
			button.btn.btn_md Button Medium
		div(style='margin-bottom: 10px')
			button.btn.btn_lg Button Large
		div(style='margin-bottom: 10px')
			.more
				a.more__btn.btn.btn_light(href='#') УЗНАТЬ ПОДРОБНЕЕ
		div(style='margin-bottom: 10px')
			.load
				button.load__btn.btn Подгрузить еще
		div(style='margin-bottom: 10px')
			.load
				button.load__btn.btn.loading Подгрузить еще
		br
		br
		br
		div(style='margin-bottom: 10px') Inputs
		.field
			.field__label
			.field__wrap
				input.field__input(type='text' placeholder='Enter your Name')
		.field.error
			.field__label
			.field__wrap
				input.field__input(type='text' placeholder='Enter your Name')
			.field__error Укажите корректно свои данные
		.field.success
			.field__label
			.field__wrap
				input.field__input(type='text' value='John')
		.field
			.field__label
			.field__wrap
				input.field__input.field__input_bg(type='text' placeholder='Enter your Name')
		.field.error
			.field__label
			.field__wrap
				input.field__input.field__input_bg(type='text' placeholder='Enter your Name')
			.field__error Укажите корректно свои данные
		.field.success
			.field__label
			.field__wrap
				input.field__input.field__input_bg(type='text' value='John')
		br
		br
		br
		div(style='margin-bottom: 10px') Switches
		div(style='margin-bottom: 10px')
		label.switch
			input.switch__input(type='checkbox')
			span.switch__content Normal
		label.switch
			input.switch__input(type='checkbox' checked)
			span.switch__content Selected
		div(style='margin-bottom: 10px')
		label.switch.switch_circle
			input.switch__input(type='radio' name='radio')
			span.switch__content Circle
		label.switch.switch_circle
			input.switch__input(type='radio' name='radio' checked)
			span.switch__content Circle Selected
		div(style='margin-bottom: 10px')
		label.switch.switch_blue
			input.switch__input(type='checkbox')
			span.switch__content Blue
		label.switch.switch_blue
			input.switch__input(type='checkbox' checked)
			span.switch__content Blue Selected
		br
		br
		br
		div(style='margin-bottom: 10px') Drop-down menu
		.field
			.field__wrap
				.field__select.select.js-select
					.select__head.js-select-head Категории
					.select__drop.js-select-drop
						.select__option.js-select-option
							.select__title Персонаж
						.select__option.js-select-option
							.select__title Акварель
						.select__option.js-select-option
							.select__title Иллюстрация
						.select__option.js-select-option
							.select__title Анимация
						.select__option.js-select-option
							.select__title Пастель
						.select__option.js-select-option
							.select__title Пластилин
						.select__option.js-select-option
							.select__title Креативное мышление
						.select__option.js-select-option
							.select__title Моторика
						.select__option.js-select-option
							.select__title Живопись
					input.select__input(type='hidden')
		br
		br
		br
		div(style='margin-bottom: 10px') Likes
		div(style='margin-bottom: 10px')
			a.likes(href='#')
				.likes__counter 253
				.likes__icon
					+i('like')
					+i('like-fill')
		div(style='margin-bottom: 10px')
			a.likes.active(href='#')
				.likes__counter 253
				.likes__icon
					+i('like')
					+i('like-fill')
		div(style='margin-bottom: 10px')
			a.likes(href='#')
				.likes__counter 253
				.likes__icon
					+i('like-bold')
					+i('like-fill-bold')
		div(style='margin-bottom: 10px')
			a.likes.active(href='#')
				.likes__counter 253
				.likes__icon
					+i('like-bold')
					+i('like-fill-bold')