Bileşenler

Heading

Sayfa ve bölüm başlıklarını yazar; belge düzeyi görsel boyuttan ayrıdır.

Storybook: Storybook
Kaynak kod: Kaynak kod

Aşağıdaki örnek Storybook’tan canlı yüklenir; denetimleri Storybook’ta açabilirsiniz.

Canlı örnek, StorybookStorybook'ta aç

Düzeyler

level zorunludur ve <h1> ile <h6> arasını seçer. Boyut düzeyden gelir: 1 xl, 2 lg, 3 md, 4-6 sm.

Başlık örneği 1

Başlık örneği 2

Başlık örneği 3

Başlık örneği 4

import { Heading } from '@bigbang/ui';

export default function Levels() {
  return (
    <div className="flex flex-col gap-sm">
      <Heading level={1}>Başlık örneği 1</Heading>
      <Heading level={2}>Başlık örneği 2</Heading>
      <Heading level={3}>Başlık örneği 3</Heading>
      <Heading level={4}>Başlık örneği 4</Heading>
    </div>
  );
}

Düzeyden ayrı boyut

size yalnızca görseli değiştirir (16, 20, 24, 32 px); belge düzeyi level ile kalır.

h2, sm boy: başlık örneği

h2, varsayılan boy (lg): başlık örneği

import { Heading } from '@bigbang/ui';

export default function Sizes() {
  return (
    <div className="flex flex-col gap-sm">
      <Heading level={2} size="sm">
        h2, sm boy: başlık örneği
      </Heading>
      <Heading level={2}>h2, varsayılan boy (lg): başlık örneği</Heading>
    </div>
  );
}

Bölüm içinde

Başlıklar atlamadan iner: h2, sonra h3. Altındaki metin için Text kullanılır.

Başlık örneği

Metin örneği

Alt başlık örneği

Metin örneği

Başka bir alt başlık

Metin örneği

import { Heading, Text } from '@bigbang/ui';

export default function InSection() {
  return (
    <article className="flex flex-col gap-md">
      <Heading level={2}>Başlık örneği</Heading>
      <Text render={<p />}>Metin örneği</Text>
      <Heading level={3}>Alt başlık örneği</Heading>
      <Text render={<p />}>Metin örneği</Text>
      <Heading level={3}>Başka bir alt başlık</Heading>
      <Text render={<p />}>Metin örneği</Text>
    </article>
  );
}

Açık ve koyu mod

Başlık rengi color-text-default token’ından gelir; iki modda ayrı ayar gerekmez.

Başlık örneği 1

Başlık örneği 2

Başlık örneği 3

Başlık örneği 4

Başlık örneği 1

Başlık örneği 2

Başlık örneği 3

Başlık örneği 4

import { Heading } from '@bigbang/ui';

export default function Levels() {
  return (
    <div className="flex flex-col gap-sm">
      <Heading level={1}>Başlık örneği 1</Heading>
      <Heading level={2}>Başlık örneği 2</Heading>
      <Heading level={3}>Başlık örneği 3</Heading>
      <Heading level={4}>Başlık örneği 4</Heading>
    </div>
  );
}