Scalable design system based on BEM
Patterns/pt-list
Модификатор
Значение
Описание
default / ghost / inverse
Фон блока
all
Круговой бордер блока
cloud
Тень
__item
Модификатор
Значение
Описание
top / bottom / right / left
Бордер строк
default / between
Распределение контента по горизонтали
xxs / xs / s / m / l / xl / xxl
Внутренние отступы
xs / s / m / l / xl / xxl / xxxl
Внешние отступы
Backgrounds
{
block: 'pt-list',
mods: { view: 'default' },
content: []
}
Yesterday
Shut up and give me money
- 1 000 ₽
Shut up and take my money
+ 1 000 ₽
Shut up and take my money
+ 1 000 ₽
Borders
{
block: 'pt-list',
mods: { border: 'all' }
content: []
}
Yesterday
Shut up and give me money
- 1 000 ₽
Shut up and take my money
+ 1 000 ₽
Shut up and take my money
+ 1 000 ₽
Shadow
{
block: 'pt-list',
mods: { shadow: 'cloud' }
content: []
}
Yesterday
Shut up and give me money
- 1 000 ₽
Shut up and take my money
+ 1 000 ₽
Shut up and take my money
+ 1 000 ₽
elem: 'item'
Borders
{
block: 'pt-list',
mods: { border: 'all' },
content: [
{
elem: 'item',
elemMods: { border: 'bottom' }
},
{
elem: 'item',
elemMods: { border: 'bottom' }
}]
}
Shut up and take my money
+ 1 000 ₽
Shut up and take my money
+ 1 000 ₽
Distribute
{
block: 'pt-list',
mods: { border: 'all' },
content: [
{
elem: 'item',
elemMods: { distribute: 'default' }
},
{
elem: 'item',
elemMods: { distribute: 'between' }
}]
}
Shut up and take my money
+ 1 000 ₽
Shut up and take my money
+ 1 000 ₽
Inside space
{
block: 'pt-list',
mods: { border: 'all' },
content: [
{
elem: 'item',
elemMods: { 'space-a': 'l' }
},
{
elem: 'item',
elemMods: { 'space-h': 'l', 'space-v': 's' }
}]
}
Shut up and take my money
+ 1 000 ₽
Shut up and take my money
+ 1 000 ₽
Outside space
{
block: 'pt-list',
mods: { border: 'all' },
content: [
{
elem: 'item',
elemMods: { 'indent-a': 'l' }
},
{
elem: 'item',
elemMods: { 'indent-h': 'l', 'indent-v': 's' }
}]
}
Shut up and take my money
+ 1 000 ₽
Shut up and take my money
+ 1 000 ₽