Логотип проекта

Компоненты, используемые на проекте

Название компонента или группы компонентов

Информация о компоненте (подсказки \ предупреждение \ важная информация)

Класс компонента \ модификаторы

p Пример кода

Декоративная подложка. Просто добавляется класс на компонент или на main

.sharp \ .sharp--about-us

.sharp
.sharp.sharp--about-us

Обвязка секции

Устанавливает унифицированные падддинги вокруг блоков

.page-section--bottom добавляет отступ снизу

.page-section--only-bottom устанавливает только отступ снизу

.page-section \ .page-section--bottom \ .page-section--only-bottom

.page-section
.page-section.page-section--bottom
.page-section.page-section--only-bottom

Сетка секции

Остальной контент расположится на следующей строке (в pug) с отступом после вызова компонента

.section \ .section--reverce

цветной

заголовок

здесь уже любой контент

Чувак в виар-очках в профиль. just movable picture. 
+section({
  colorful: "цветной",
  title: "заголовок",
},{
  path: "content/about-us-block",
  name: "image",
  format: "png",
  width: "563",
  height: "662",
  alt: "Чувак в виар-очках в профиль.",
},{
  path: "content/movable",
  name: "1",
  format: "jpg",
  width: "196",
  height: "128",
  alt: "just movable picture.",
})
  p здесь уже любой контент

Заголовки

.title \ .title--h1 \ .title--h3 \ .title--article

Обычный заголовок
Заголовок первого уровня
Заголовок третьего уровня
Используется в блоке .article
.title Обычный заголовок
.title.title--h1 Заголовок первого уровня
.title.title--h3 Заголовок третьего уровня
.title.title--article Используется в блоке .article

Цветной заголовок

.title-colorful

цветной
.title-colorful цветной

Сет заголовков

Сет из цветного заголовка и обычного, цветной заголовок - обычный параграф, обычный заголовок по умолчанию h2, или можно задать другой, передав его в свойстве tag

.titles-set

colorful

title

+titles-set({colorful: "colorful", title: "title", tag: "h3"})

Обвязка текста и не только

Задает общие стили для текста и других элементов, которые могут смешиваться с текстом – кнопки, картинки т.д.

.text-content

.text-content

Хлебные крошки

свойство current для последней крошки

.accordion

+breadcrumbs([
  {
    href: "index.html",
    title: "Home",
  },
  {
    href: "about-us.html",
    title: "About us",
    current: true,
  },
])

Аккордион

.accordion

We are proud of our team of VR experts who are passionate about VR and dedicated to delivering the highest quality work. Our team consists of experienced VR developers, designers, and technicians who have a proven track record of creating immersive and engaging VR experiences.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, quae commodi. Velit sed possimus atque hic reiciendis facilis quam totam, quos perspiciatis eos architecto obcaecati ipsum, magni fugit dolorum repellendus.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores suscipit totam maiores minus unde provident velit facere, voluptatem amet consequatur magni, quisquam quae! Neque, deleniti magnam dolorem nesciunt voluptate assumenda.Aliquid, dolorum alias! Excepturi, cupiditate! Adipisci fugit debitis expedita esse. Consectetur, voluptates omnis beatae qui, doloribus rem, molestias quos id sint excepturi cupiditate! Maxime, quos doloribus soluta qui alias ratione.Eius omnis neque sunt illum dolore saepe delectus reiciendis sed quibusdam. Vel ducimus excepturi libero eum culpa quisquam quia adipisci nostrum, doloribus sapiente quam deleniti iusto quod tempora, sed quos.Ratione earum natus impedit, quaerat eius maxime laborum error harum, quis debitis maiores totam ad, repellat et quos? Accusamus nulla et nobis vero eius debitis consequatur eaque sint quisquam delectus?Ullam temporibus laboriosam dignissimos ipsa. Quaerat commodi error ab, earum, explicabo officia placeat repellat eius, aspernatur amet perspiciatis tenetur? In dolores ipsam laudantium eaque odit, libero quis non illum vitae.

+accordion([{button: "btn text", text: "txt"}])

Кнопки

.btn \ .btn--transparent

+btn({text: "Текст", href: "#"})

.btn

Полупрозрачная 
+btn({text: "Полупрозрачная", href: "#", isExternal: true}).btn--transparent(aria-label="Просто ссылка")

.btn \ disabled

+btn({text: "Текст"})(disabled)

Свойство

.property

property
property little
.property property
.property.property--little  property little

Видео

.video

VR Service
How to get started
+video({
  src: "img/video/ee.mp4",
  poster: "img/video/poster@2x.webp",
  tag: "VR Service",
  description: "How to get started",
})

Превью статьи

.article-preview

preview.
VR Education
The Future of Education: How VR is Revolutionizing the Classroom
 
+article-preview({
  path: "content/previews",
  name: "14",
  format: "jpg",
  width: "102",
  height: "66",
  alt: "preview.",
  property: "VR Education",
  title: "The Future of Education: How VR is Revolutionizing the Classroom",
  link: "#",
})

Сетка бокового меню

Задана сетка и стили для элементов списка (паддинги и бордер)

.aside

.aside

Инфокарточка

.info-card

VR Development

From concept to creation, our team of VR developers will bring your vision to life.

learn more 
+info-card({
  icon: "card-software",
  title: "VR Development",
  text: "From concept to creation, our team of VR developers will bring your vision to life."
})

Карточка цены

.card-price

Start from
$99
get started
30 Days Moneyback Guarantee
+card-price()

Простое интро

Где breadcrumbs это массив объектов вида: { href: "index.html", title: "Home", }, { href: "about-us.html", title: "About us", current: true, }

.simple-intro

About Us

+simple-intro(breadcrumbs, "About Us")

Элементы форм

.custom-input \ type="text"

+custom-input({
  inputLabel: "Введите ваше имя",
  inputName: "user-name-1",
})

.custom-input \ type="tel"

+custom-input({
  inputType: "tel",
  inputLabel: "Введите номер телефона",
  inputName: "user-phone",
})

.custom-input \ type="email"

+custom-input({
  inputType: "email",
  inputLabel: "Введите вашу почту",
  inputName: "user-mail",
})

+custom-textarea \ default

+custom-textarea({
  inputLabel: "Расскажите о себе",
  inputName: "user-info"
})

+custom-toggle \ default

+custom-toggle({
  inputLabel: "Чекбокс",
  inputName: "user-agreement",
  inputValue: "user-agreement-1",
  inputChecked: false
}).custom-toggle--checkbox

Базовый селект c placeholder

+custom-select \ default

Выберите одну из опций
  • Тема 1
  • Тема 2
  • Тема 3
  • Тема 4
  • Тема 5
  • Тема 6
+custom-select({
  placeholder: "Выберите одну из опций",
  error: "Выберите тему обращения",
  optionsList: [{text: "Тема 1", value: "id-1"}, {text: "Тема 2", value: "id-2"}, {text: "Тема 3", value: "id-3"}, {text: "Тема 4", value: "id-4"}, {text: "Тема 5", value: "id-5"}, {text: "Тема 6", value: "id-6"}]
}).custom-select(data-select, data-validate-type="select", data-name="some-name", data-id="id-example-1")