スタイルテンプレート

h2 相当のタイトル

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

h3 相当のタイトル

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

h4 相当のタイトル

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

h5 相当のタイトル

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

箇条書き

  • 箇条書き1
  • 箇条書き2
  • 箇条書き3
  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 テーブル

theadtheadthead
cellcellcell
cellcellcell
sample image cellcell

SmartHR UI テーブル

theadtheadthead
cellcell
cellcell

レイアウト

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

Cluster

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

Stack

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

Color パレット

MAIN
#0077c7
rgb(0,119,199)

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

WHITE
#ffffff
rgb(255,255,255)

コンポーネントの背景色(Base コンポーネントなど)

画像

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

sample image

Markdown形式の画像設置

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

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

表示例

sample image

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={1}> <StaticImage src={imageUrl} width="200" alt="Image Sample" /> <StaticImage src={imageUrl} width="200" alt="Image Sample" /> </Cluster>

表示例

Image SampleImage Sample

ファイルのリンク

静的な巨大ファイルは/staticフォルダから直接リンクできます。

ダウンロードリンク

絵文字

Shortcut codes

🚀 😈 👿 💀 ☠️ 💩 🤡 👹 👺 👻 👽 👾

Unicode

👍🥳👏💃🌵🥑🌶️🌮🌯🍸🍻🏜️🎈🎊🎵🎶 🎸🇲🇽🇺🇸

Do And Don't

Do
Do
ほげほげ
Dont
Don't
ほげほげ