Header

H1 スタイルガイド

H2 スタイルガイド

H3 スタイルガイド

H4 スタイルガイド

H5 スタイルガイド
H6 スタイルガイド

Logo sprites

Icon sprites

Flat buttons

Primary Secondary Info Success Warning Danger Default Health Organization Talent Contents
block sm lg

Addon buttons

Danger Health Organization Talent Contents
Danger Health Organization Talent Contents
sm lg ラベルが長い場合のアドオン付きボタン(大) block

Glow buttons

Danger Health グロー付きアドオン付きボタン グロー付きアドオン付きボタン(大) サービス詳細はこちら(PDF) サービス詳細はこちら(PDF) サービス詳細はこちら(PDF) サービス詳細はこちら(PDF)

Underbar buttons

下線ボタン 下線ボタン 下線ボタン

Badges

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New
Example heading New
Default Danger Health Organization Talent Media

Side groove badges

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New
Example heading New
Default Danger Health Organization Talent Media

Pills

Default Danger Health Organization Talent Media

Header variations

Left border title (health)

Left border title (organization)

Left border title (talent)

Left border title (contents)

Left border title
Left border title

Left border title inverse (health)

Left border title inverse (organization)

Left border title inverse (talent)

Left border title inverse (contents)

Left border title inverse
Left border title inverse

Burret title

H1 Horizontal bar title

H2 Horizontal bar title

H3 Horizontal bar title

H4 Horizontal bar title

H5 Horizontal bar title
H6 Horizontal bar title

Box title (base)

Box title (health)

Box title (organization)

Box title (talent)

Box title (contents)

Point phrase title (base)

Point phrase title (health)

Point phrase title (organization)

Point phrase title (talent)

Point phrase title (contents)

Typography

IE以外は游ゴシックを使用します(IEはメイリオにフォールバック)

IEでも游ゴシックを使用します(インライン要素のみ使用可能・行間修正のため)

Font size 40px equiv.

Font size 32px equiv.

Font size 28px equiv.

Font size 24px equiv.

Font size 20px equiv.

Font size 18px equiv.

Font size 16px equiv. (body font size)

Font size 14px equiv.

Font size 12px equiv.

Font size 10px equiv.

Text color danger  Text color health  Text color organization  Text color talent  Text color contents

Layout

Container large
Container medium
Container small

Social button

Panel header
Panel body
パネル使用例
Panel body
Colored panel (base) header
Colored panel (base) body
Colored panel (health) header
Colored panel (health) body
Colored panel (health) header
Colored panel (health) body
Colored panel (health) header
Colored panel (health) body
Colored panel (health) header
Colored panel (health) body
Zabuton
Well

Background colors

Health bg color
Organization bg color
Talent bg color
Contents bg color
Health light bg color
Organization light bg color
Talent light bg color
Contents light bg color

Lists

  1. Burret ordered list (base)
  2. Burret ordered list (base)
  3. Burret ordered list (base)
  1. Burret ordered list (health)
  2. Burret ordered list (health)
  3. Burret ordered list (health)
  1. Burret ordered list (organization)
  2. Burret ordered list (organization)
  3. Burret ordered list (organization)
  1. Burret ordered list (talent)
  2. Burret ordered list (talent)
  3. Burret ordered list (talent)
  1. Burret ordered list (contents)
  2. Burret ordered list (contents)
  3. Burret ordered list (contents)

SVG Texts

SVG Texts