Hero

Hero, bir tanıtım ya da belge ana sayfasındaki ilk şeydir. İçinde bir <h1> bulunan bir <section> işler — yani sayfanın başlığıdır, rastgele büyük olmuş süslü bir afiş değil.

Temel hero

Framework olmadan statik siteler

HTML döndüren fonksiyonlar yazın. Eksiksiz bir site alın.

hero({
  level: 2,
  title: 'Framework olmadan statik siteler',
  description: 'HTML döndüren fonksiyonlar yazın. Eksiksiz bir site alın.',
},
  button({ size: 'lg' }, 'Başlayın'),
  button({ size: 'lg', variant: 'outline', color: 'neutral' }, 'Belgeleri okuyun'),
)

Bir üst satırla

Başlığın üstünde kısa bir satır — bir sürüm, bir kategori, bir duyuru.

sitelo 2.7

Artık bir bileşen kitaplığıyla

Yetmiş bileşen, çalışma zamanı yok, isteğe bağlı tek bir betik.

Bileşenlere göz atın

hero({
  level: 2,
  eyebrow: 'sitelo 2.7',
  title: 'Artık bir bileşen kitaplığıyla',
  description: 'Yetmiş bileşen, çalışma zamanı yok, isteğe bağlı tek bir betik.',
},
  button({ size: 'lg', href: '/ui' }, 'Bileşenlere göz atın'),
)

Sola hizalı

Açık kaynak

Açıkta geliştirildi

MIT lisanslı ve bir öğleden sonrada okunacak kadar küçük.

GitHub’da görüntüle

hero({
  level: 2,
  align: 'start',
  eyebrow: 'Açık kaynak',
  title: 'Açıkta geliştirildi',
  description: 'MIT lisanslı ve bir öğleden sonrada okunacak kadar küçük.',
},
  button({ href: 'https://github.com/paul-browne/sitelo' }, 'GitHub’da görüntüle'),
)

Ortamla birlikte

media geçirmek, yer olduğunda iki sütuna geçer ve dar bir ekranda tekrar tek sütuna yığılır. mockup() ile doğal biçimde eşleşir.

Çalışırken görün

Her sayfa, tarayıcıya ulaştığında artık statik HTML’dir.

example.com

Merhaba dünya

Derleme sırasında işlendi.

hero({
  level: 2,
  align: 'start',
  title: 'Çalışırken görün',
  description: 'Her sayfa, tarayıcıya ulaştığında artık statik HTML’dir.',
  media: mockup({ variant: 'browser', url: 'example.com' },
    div({ style: 'padding: 1.5rem; background: var(--su-surface-2)' },
      text({ variant: 'h5', as: 'div' }, 'Merhaba dünya'),
      text({ variant: 'small', tone: 'muted' }, 'Derleme sırasında işlendi.'),
    ),
  ),
},
  button('Başlayın'),
)

Bir kapsayıcının içinde

Hero’nun kendine ait bir genişlik sınırı yoktur — sayfadaki geri kalan her şeyle hizalansın diye onu bir container() içine koyun.

Kapsanmış

Genişliği kapsayıcı belirler; ritmi hero belirler.

container({ size: 'md', style: 'background: var(--su-surface-2); border-radius: 0.6rem' },
  hero({
    level: 2,
    title: 'Kapsanmış',
    description: 'Genişliği kapsayıcı belirler; ritmi hero belirler.',
  }),
)

Başlık düzeyi

Başlık varsayılan olarak sayfanın <h1> öğesidir; bir açılış sayfası için doğru olan budur. Bir sayfanın ortasında kullanılan bir hero sayfa başlığı değildir, bu yüzden onu level ile düşürün — bu sayfadaki her tanıtım öyle yapar, çünkü sayfanın zaten kendi h1 öğesi var.

Yalnızca bir başlık

Her parça isteğe bağlıdır ve boş olan hiçbir şey işlenmez.

Belgeler

hero({ level: 2, title: 'Belgeler' })

Proplar

Prop	Tür	Varsayılan	Açıklama
`eyebrow`	`Child`	—	Başlığın üstünde küçük, büyük harfli satır.
`title`	`Child`	—	Sayfanın h1 öğesi olarak işlenir.
`description`	`Child`	—	Altındaki cümle.
`media`	`Child`	—	Geniş ekranda metnin yanında, dar ekranda üstünde.
`align`	`'center' \| 'start'`	`'center'`	Ortam yokken metin hizalaması.
`level`	`number`	`1`	Başlık için başlık düzeyi. Sayfanın ortasındaki bir hero için düşürün.
`as`	`string`	`'section'`	İşlenecek öğe.

Çocuklar, açıklamanın altında eylem sırası olur.