Hero-блок

Hero-блок — это первое, что стоит на маркетинговой или документационной главной. Он рисует <section> с <h1> внутри, то есть является заголовком страницы, а не декоративным баннером, который просто большой.

Простой hero

Статические сайты — без фреймворка

Пишите функции, возвращающие HTML. Получайте готовый сайт.

hero({
  level: 2,
  title: 'Статические сайты — без фреймворка',
  description: 'Пишите функции, возвращающие HTML. Получайте готовый сайт.',
},
  button({ size: 'lg' }, 'Начать'),
  button({ size: 'lg', variant: 'outline', color: 'neutral' }, 'Читать документацию'),
)

С надзаголовком

Короткая строка над заголовком — версия, категория, объявление.

sitelo 2.7

Теперь с библиотекой компонентов

Семьдесят компонентов, никакого рантайма, один необязательный скрипт.

Посмотреть компоненты

hero({
  level: 2,
  eyebrow: 'sitelo 2.7',
  title: 'Теперь с библиотекой компонентов',
  description: 'Семьдесят компонентов, никакого рантайма, один необязательный скрипт.',
},
  button({ size: 'lg', href: '/ru/ui' }, 'Посмотреть компоненты'),
)

С выравниванием влево

Открытый код

Сделано в открытую

Лицензия MIT и достаточно маленький, чтобы прочитать за вечер.

Открыть на GitHub

hero({
  level: 2,
  align: 'start',
  eyebrow: 'Открытый код',
  title: 'Сделано в открытую',
  description: 'Лицензия MIT и достаточно маленький, чтобы прочитать за вечер.',
},
  button({ href: 'https://github.com/paul-browne/sitelo' }, 'Открыть на GitHub'),
)

С медиа

Передача media переключает блок на две колонки, как только для них хватает места, и снова складывает в одну на узком экране. Естественно сочетается с mockup().

Посмотрите в деле

К моменту, когда страница доходит до браузера, это уже статический HTML.

example.com

Привет, мир

Отрендерено на сборке.

hero({
  level: 2,
  align: 'start',
  title: 'Посмотрите в деле',
  description: 'К моменту, когда страница доходит до браузера, это уже статический HTML.',
  media: mockup({ variant: 'browser', url: 'example.com' },
    div({ style: 'padding: 1.5rem; background: var(--su-surface-2)' },
      text({ variant: 'h5', as: 'div' }, 'Привет, мир'),
      text({ variant: 'small', tone: 'muted' }, 'Отрендерено на сборке.'),
    ),
  ),
},
  button('Начать'),
)

Внутри контейнера

У hero-блока нет собственного ограничения ширины — положите его в container(), чтобы он выровнялся со всем остальным на странице.

В контейнере

Контейнер задаёт ширину; hero задаёт ритм.

container({ size: 'md', style: 'background: var(--su-surface-2); border-radius: 0.6rem' },
  hero({
    level: 2,
    title: 'В контейнере',
    description: 'Контейнер задаёт ширину; hero задаёт ритм.',
  }),
)

Уровень заголовка

По умолчанию заголовок — это <h1> страницы, что правильно для посадочной. Hero-блок посреди страницы заголовком страницы уже не является, поэтому понижайте его через level — так делает каждое демо здесь, ведь у страницы уже есть собственный h1.

Только заголовок

Каждая часть необязательна, и пустое не рисуется.

Документация

hero({ level: 2, title: 'Документация' })

Пропсы

Проп	Тип	По умолчанию	Описание
`eyebrow`	`Child`	—	Маленькая строка прописными над заголовком.
`title`	`Child`	—	Рендерится как h1 страницы.
`description`	`Child`	—	Фраза под ним.
`media`	`Child`	—	Рядом с текстом на широком экране, над ним — на узком.
`align`	`'center' \| 'start'`	`'center'`	Выравнивание текста, когда медиа нет.
`level`	`number`	`1`	Уровень заголовка. Понизьте для hero посреди страницы.
`as`	`string`	`'section'`	Какой элемент рендерить.

Потомки становятся строкой действий под описанием.