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>

<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>

<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>

<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>

<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>

<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>

<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>

<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>

<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>