Heading experimental

기본 heading wrapper입니다. as prop으로 h1-h6 시맨틱 레벨을 고르고 data-size로 타입 스케일을 적용합니다.

native h1-h6

제목을 xs 크기로 적어요

제목을 sm 크기로 적어요

제목을 md 크기로 적어요

제목을 lg 크기로 적어요

제목을 xl 크기로 적어요

<script lang="ts">
  import { Heading } from '@odbd/svelte'

  const sizes = ['xs', 'sm', 'md', 'lg', 'xl'] as const
</script>

<div class="preview-stack">
  {#each sizes as size}
    <Heading {size}>제목을 {size} 크기로 적어요</Heading>
  {/each}
</div>

Import

Svelte와 React가 같은 anatomy 계약을 공유합니다. 선택한 프레임워크는 모든 페이지에서 유지됩니다. 패키지 설치는 Getting Started를 참고하세요.

import { Heading } from '@odbd/svelte'

import { Heading } from '@odbd/react/heading'