スタイルテンプレート

h2 相当のタイトル

文章が記入できます。文章が記入できます。文章が記入できます。文章が記入できます。文章が記入できます。文章が記入できます。文章が記入できます。文章が記入できます。文章が記入できます。文章が記入できます。文章が記入できます。文章が記入できます。文章が記入できます。

h3 相当のタイトル

h4 相当のタイトル

h5 相当のタイトル

箇条書き

箇条書き1
箇条書き2
箇条書き3

順番箇条書き
順番箇条書き
順番箇条書き

プレビュー

コード（ライブコード）

基本的に、1コード1コンポーネントで利用してください。

コード

<Button variant="primary">Primary</Button>
<Button>Secondary</Button>
<Button variant="danger">Danger</Button>
<Button variant="skeleton">Skeleton</Button>
<Button variant="text">Text</Button>

コード（インライン）

TEXT_BLACK

Markdown テーブル

thead	thead	thead
cell	cell	cell
cell	cell	cell
	cell	cell

SmartHR UI テーブル

thead	thead	thead
cell	cell
cell	cell

レイアウト

SmartHR UI Layoutコンポーネントを使用できます。

Cluster

入れ子にしてalignやjustifyを組み合わせるとメディアクエリを使用せずに柔軟なレイアウトを作れます。
幅を狭めて収まり切らなくなると折返します。
gapに使える値はXXS,XS,S,M,L,XL、他1,0.5などの数値です。詳しくはsmarthr-uiのドキュメントを参照してください。

LineUp

align-itemsやjustify-contentなどFlexboxに準じたプロパティを渡せます。
gapに使える値はXXS,XS,S,M,L,XL、他1,0.5などの数値です。詳しくはsmarthr-uiのドキュメントを参照してください。

Stack

等間隔に隙間を保ち、積み重ねるレイアウトが作れます。
各要素の間隔は1remが標準です。
gapに使える値はXXS,XS,S,M,L,XL、他1,0.5などの数値です。詳しくはsmarthr-uiのドキュメントを参照してください。

Color パレット

MAIN

#0077c7

rgb(0,119,199)

プライマリーカラー（プロダクトの印象を司る箇所に使用）

WHITE

#ffffff

rgb(255,255,255)

コンポーネントの背景色（Base コンポーネントなど）

画像

画像はcontent配下の指定ディレクトリに格納できます。

Markdown形式の画像設置

Markdown形式の画像Pathは相対パスで読み込めます。また属性値を以下のような指定で設定できます。

![sample image](./images/sample.jpg '#width=300px')

表示例

Component内の画像設置

.mdxファイル内で、SmartHR UIなどのコンポーネントとともに画像（imgタグ）を使いたい場合は、利用したい画像をimportし、StaticImageコンポーネントのsrcにそのpathを設定してください。

import { StaticImage } from '@Components/StaticImage'
import { Cluster } from 'smarthr-ui'
import imageUrl from './images/sample.jpg';

<Cluster gap="XS">
  <StaticImage src={imageUrl} width="200" alt="Image Sample" />
  <StaticImage src={imageUrl} width="200" alt="Image Sample" />
</Cluster>

ほげほげ