Figma

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>