CardsBox

import { CardsBox } from '@megafon/ui-shared';

Примеры и код

Свойства и методы

Карточки выстраиваются по сетке, используя компонент Grid.

1 карточка

<ContentArea>
  <CardsBox>
      <Card
          title={{ text: 'Сеть стоматологий', align: 'left' }}
          textsList={[{ desc: 'Улучшай качество обслуживания клиентов и повышай продажи' }]}
          button={{ title: 'Заказать', href: '#', target: '_blank' }}
      />
  </CardsBox>
</ContentArea>

2 карточки

<ContentArea>
  <CardsBox>
      <Card
          title={{ text: 'Сеть стоматологий', align: 'left' }}
          textsList={[{ desc: 'Улучшай качество обслуживания клиентов и повышай продажи' }]}
          button={{ title: 'Заказать', href: '#', target: '_blank' }}
      />
      <Card
          title={{ text: 'Сеть стоматологий', align: 'left' }}
          textsList={[{ desc: 'Улучшай качество обслуживания клиентов и повышай продажи' }]}
          button={{ title: 'Заказать', href: '#', target: '_blank' }}
      />
  </CardsBox>
</ContentArea>

2 карточки по 2 колонки в ряду

<ContentArea>
  <CardsBox renderTwoColumnsInRow>
      <Card
          title={{ text: 'Сеть стоматологий', align: 'left' }}
          textsList={[{ desc: 'Улучшай качество обслуживания клиентов и повышай продажи' }]}
          button={{ title: 'Заказать', href: '#', target: '_blank' }}
      />
      <Card
          title={{ text: 'Сеть стоматологий', align: 'left' }}
          textsList={[{ desc: 'Улучшай качество обслуживания клиентов и повышай продажи' }]}
          button={{ title: 'Заказать', href: '#', target: '_blank' }}
      />
  </CardsBox>
</ContentArea>

3 карточки

<ContentArea>
  <CardsBox>
      <Card
          title={{ text: 'Сеть стоматологий', align: 'left' }}
          textsList={[{ desc: 'Улучшай качество обслуживания клиентов и повышай продажи' }]}
          button={{ title: 'Заказать', href: '#', target: '_blank' }}
      />
      <Card
          title={{ text: 'Сеть стоматологий', align: 'left' }}
          textsList={[{ desc: 'Улучшай качество обслуживания клиентов и повышай продажи' }]}
          button={{ title: 'Заказать', href: '#', target: '_blank' }}
      />
      <Card
          title={{ text: 'Сеть стоматологий', align: 'left' }}
          textsList={[{ desc: 'Улучшай качество обслуживания клиентов и повышай продажи' }]}
          button={{ title: 'Заказать', href: '#', target: '_blank' }}
      />
  </CardsBox>
</ContentArea>

4 карточки

<ContentArea>
  <CardsBox>
      <Card
          title={{ text: 'Сеть стоматологий', align: 'left' }}
          textsList={[{ desc: 'Улучшай качество обслуживания клиентов и повышай продажи' }]}
          button={{ title: 'Заказать', href: '#', target: '_blank' }}
      />
      <Card
          title={{ text: 'Сеть стоматологий', align: 'left' }}
          textsList={[{ desc: 'Улучшай качество обслуживания клиентов и повышай продажи' }]}
          button={{ title: 'Заказать', href: '#', target: '_blank' }}
      />
      <Card
          title={{ text: 'Сеть стоматологий', align: 'left' }}
          textsList={[{ desc: 'Улучшай качество обслуживания клиентов и повышай продажи' }]}
          button={{ title: 'Заказать', href: '#', target: '_blank' }}
      />
      <Card
          title={{ text: 'Сеть стоматологий', align: 'left' }}
          textsList={[{ desc: 'Улучшай качество обслуживания клиентов и повышай продажи' }]}
          button={{ title: 'Заказать', href: '#', target: '_blank' }}
      />
  </CardsBox>
</ContentArea>

4 карточки по 2 колонки в ряду

<ContentArea>
  <CardsBox renderTwoColumnsInRow>
      <Card
          title={{ text: 'Сеть стоматологий', align: 'left' }}
          textsList={[{ desc: 'Улучшай качество обслуживания клиентов и повышай продажи' }]}
          button={{ title: 'Заказать', href: '#', target: '_blank' }}
      />
      <Card
          title={{ text: 'Сеть стоматологий', align: 'left' }}
          textsList={[{ desc: 'Улучшай качество обслуживания клиентов и повышай продажи' }]}
          button={{ title: 'Заказать', href: '#', target: '_blank' }}
      />
      <Card
          title={{ text: 'Сеть стоматологий', align: 'left' }}
          textsList={[{ desc: 'Улучшай качество обслуживания клиентов и повышай продажи' }]}
          button={{ title: 'Заказать', href: '#', target: '_blank' }}
      />
      <Card
          title={{ text: 'Сеть стоматологий', align: 'left' }}
          textsList={[{ desc: 'Улучшай качество обслуживания клиентов и повышай продажи' }]}
          button={{ title: 'Заказать', href: '#', target: '_blank' }}
      />
  </CardsBox>
</ContentArea>

5 карточек

<ContentArea>
  <CardsBox>
      <Card
          title={{ text: 'Сеть стоматологий', align: 'left' }}
          textsList={[{ desc: 'Улучшай качество обслуживания клиентов и повышай продажи' }]}
          button={{ title: 'Заказать', href: '#', target: '_blank' }}
      />
      <Card
          title={{ text: 'Сеть стоматологий', align: 'left' }}
          textsList={[{ desc: 'Улучшай качество обслуживания клиентов и повышай продажи' }]}
          button={{ title: 'Заказать', href: '#', target: '_blank' }}
      />
      <Card
          title={{ text: 'Сеть стоматологий', align: 'left' }}
          textsList={[{ desc: 'Улучшай качество обслуживания клиентов и повышай продажи' }]}
          button={{ title: 'Заказать', href: '#', target: '_blank' }}
      />
      <Card
          title={{ text: 'Сеть стоматологий', align: 'left' }}
          textsList={[{ desc: 'Улучшай качество обслуживания клиентов и повышай продажи' }]}
          button={{ title: 'Заказать', href: '#', target: '_blank' }}
      />
      <Card
          title={{ text: 'Сеть стоматологий', align: 'left' }}
          textsList={[{ desc: 'Улучшай качество обслуживания клиентов и повышай продажи' }]}
          button={{ title: 'Заказать', href: '#', target: '_blank' }}
      />
  </CardsBox>
</ContentArea>

6 карточек

<ContentArea>
  <CardsBox>
      <Card
          title={{ text: 'Сеть стоматологий', align: 'left' }}
          textsList={[{ desc: 'Улучшай качество обслуживания клиентов и повышай продажи' }]}
          button={{ title: 'Заказать', href: '#', target: '_blank' }}
      />
      <Card
          title={{ text: 'Сеть стоматологий', align: 'left' }}
          textsList={[{ desc: 'Улучшай качество обслуживания клиентов и повышай продажи' }]}
          button={{ title: 'Заказать', href: '#', target: '_blank' }}
      />
      <Card
          title={{ text: 'Сеть стоматологий', align: 'left' }}
          textsList={[{ desc: 'Улучшай качество обслуживания клиентов и повышай продажи' }]}
          button={{ title: 'Заказать', href: '#', target: '_blank' }}
      />
      <Card
          title={{ text: 'Сеть стоматологий', align: 'left' }}
          textsList={[{ desc: 'Улучшай качество обслуживания клиентов и повышай продажи' }]}
          button={{ title: 'Заказать', href: '#', target: '_blank' }}
      />
      <Card
          title={{ text: 'Сеть стоматологий', align: 'left' }}
          textsList={[{ desc: 'Улучшай качество обслуживания клиентов и повышай продажи' }]}
          button={{ title: 'Заказать', href: '#', target: '_blank' }}
      />
      <Card
          title={{ text: 'Сеть стоматологий', align: 'left' }}
          textsList={[{ desc: 'Улучшай качество обслуживания клиентов и повышай продажи' }]}
          button={{ title: 'Заказать', href: '#', target: '_blank' }}
      />
  </CardsBox>
</ContentArea>

Prop name	Type	Default	Description
renderTwoColumnsInRow	boolean	false	Выводить по две колонки в ряду для 2 или 4 карточек
dataAttrs	{ root?: Record<string, string>; column?: Record<string, string>; }		Дата атрибуты для корневого элемента