BlogBox

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

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

Базовое использование

Показаны все 4 статьи (кнопка - опционально)

<BlogBox
      items={[1, 2, 3, 4].map(item => ({
              date: "20 июля",
              title: item + ". Заголовок максимум в 4 строки далее троеточие, не более 88 символов",
              href: "#",
              image: {
                  srcMobile: imageMobile.src,
                  srcDesktop: imageDesktop.src,
                  srcThumbnail: imageThumbnail.src,
                  alt: "blog-box-image",
          },
      }))}
      button={{ title: "Перейти в блог", href: "#" }}
  />

3 статьи

<BlogBox
      items={[1, 2, 3].map(item => ({
              date: "20 июля",
              title: item + ". Заголовок максимум в 4 строки далее троеточие, не более 88 символов",
              href: "#",
              image: {
                  srcMobile: imageMobile.src,
                  srcDesktop: imageDesktop.src,
                  srcThumbnail: imageThumbnail.src,
                  alt: "blog-box-image",
          },
      }))}
      button={{ title: "Перейти в блог", href: "#" }}
  />

2 статьи

<BlogBox
      items={[1, 2].map(item => ({
              date: "20 июля",
              title: item + ". Заголовок максимум в 4 строки далее троеточие, не более 88 символов",
              href: "#",
              image: {
                  srcMobile: imageMobile.src,
                  srcDesktop: imageDesktop.src,
                  srcThumbnail: imageThumbnail.src,
                  alt: "blog-box-image",
          },
      }))}
      button={{ title: "Перейти в блог", href: "#" }}
  />

1 статья

<BlogBox
      items={[{
          date: "20 июля",
          title: "Заголовок максимум в 4 строки далее троеточие, не более 88 символов",
          href: "#",
          image: {
              srcMobile: imageMobile.src,
              srcDesktop: imageDesktop.src,
              srcThumbnail: imageThumbnail.src,
              alt: "blog-box-image",
          },
      }]}
      button={{ title: "Перейти в блог", href: "#" }}
  />

Выравнивание по левому краю

При количестве статей < 3

<BlogBox
      hasAlignLeft
      items={[1, 2].map(item => ({
              date: "20 июля",
              title: item + ". Заголовок максимум в 4 строки далее троеточие, не более 88 символов",
              href: "#",
              image: {
                  srcMobile: imageMobile.src,
                  srcDesktop: imageDesktop.src,
                  srcThumbnail: imageThumbnail.src,
                  alt: "blog-box-image",
          },
      }))}
      button={{ title: "Перейти в блог", href: "#" }}
  />